前端学习笔记--16/5~22/5 jQuery，HTML5+CSS3+JS 简易微信贺卡开发
先写一下上周的总结，基本上没有偷懒，每天都有认真学习前端知识。但是有一点目标不清晰。我上周订下来的计划只完成了50%，即是只完成了坐H5+CSS3+JS的小demo。imooc上的jQuery练习并没有完成，而且还差不少。
周六去了一天潜江吃大虾，不过作为弥补，星期天一整天又把缺的时间补回来了。
至于健身，上周属于间隔期，不过在周日这些计划也都重新启动了。到今天也已经完成了执行。
下面来单步跟踪一下每天学的只是吧。
5.16
jQuery使用each()方法遍历元素。
语法： $(selector).each(function(index){...});
在遍历时，通过灰调函数返回遍历元素的序列号。
研究了一个JavaScript实现瀑布流的效果，即类似pinterest的页面效果
数据块的特点是：等宽，不等高
5.17
实现上述的JavaScript瀑布流效果。
使用jQuery的动画效果。
bind()绑定、slideUp()、slideDown()、show()、hide()、animate()、fadeIn()、fadeOut()
5.18 jQuery实现ajax应用
load()方法异步请求数据
load()方法通过ajax请求加载服务器。语法： load(url,[data],[callback])
getJSON()异步加载JSON
调用格式：
jQuery.getJSON(url, [data],[callback]) 或 $.getJSON(url, [data], [callback])
getScript()异步加载并执行JavaScript文件
格式： jQuery.getScript(url,[callback]) 或 $.getJSON(url, [callback])
get()方法以GET方式从服务器获取数据
$.get(url, [callback])
post()方法以POST方式从服务器获取数据
serialize()方法序列化表单元素値
$(selector).serialize()
ajax()方法加载服务器数据
格式： jQuery.ajax([setting]) 或 $.ajax([setting]);
$.ajaxSetup([options])
5.19 H5 画布 Canvas
看书看到一句很有意思的话，还抄了下来： 来时不惧风雨 去时何谓人言
Canvas是基于像素的绘画
标签： <canvas></canvas>
绘图步骤：
1. 在H5页面中添加Canvas，必须定义canvas的id以便操作
<canvas id="myCanvas"></canvas>
2. 使用id寻找canvas元素
var c=document.getElementById("myCanvas");
3. 通过canvas元素的getContext方法来获取上下文，即创建Context对象
var context=c.getContext("2d"); //2d即二维绘图
4. 使用JavaScript进行绘制
context.fillStyle="#fff";
context.fillRect=(50, 25, 100, 50); //画矩形， 50,25表示坐标，100,50表示宽和高
画直线：
moveTo()建立新的子路径，起点为(x, y)
lineTo(x, y) 从moveTo方法规定的起点画一条到规定坐标的直线
stroke 用于在该路线画一条直线
画圆形
beginPath 开始绘画路径
arc(x,y,radius, startAngle,endAngle,anticlockwise) //xy为起点坐标，radius为半径，anticlockwise是否按顺时针
closePath 结束绘制路径
fill
画三角形：
beginPath、moveTo、liveTo、lineTo、closePath
5.20 jQuery 表单验证插件
validate $(form).validate({option})
表单插件form $(form).ajaxform({options})
灯箱插件lightBox() $(linkimage).lightBox({options}) //其中linkimage是包含图片的<a>元素名称
图片放大镜插件jqzoom
$(linkimage).jqzoom({options})
5.21-5.23 HTML5+CSS4+JS 微信贺卡demo
实现的思路：切图--重构--前端--优化
结构层--行为层--表示层
这里三个层次在网页设计中的作用在后面在拉开来讲
在CSS中少用id，但当钙元素有设计操作时，使用id更方便，可以通过getElementById()获取
H5的框架中，body和html都是块模型
content=“”
content属性与:before、:after为元素配合使用，来插入生成内容。该属性用于定义元素之前或之后放置的生成内容。content就是来给内容的，可以用js获取后添加内容。
transform{rotate(degree)}
如果所有的rotate都旋转同一个degree，则都不会旋转。原因：N次元空间问题。根据星期五的说法，可能是属于象限锁死。
视口viewport概念
8像素显示法
====================================================================================
下一周的计划：
总的目标是加强javascript。
《javascript高级程序设计》看一遍。