前端学习笔记--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高级程序设计》看一遍。

 

前端学习笔记--16/5~22/5 jQuery,HTML5+CSS3+JS 简易微信贺卡开发

上一篇:Android 仿微信语音识别


下一篇:Android之使用Android-query框架进行开发(二)