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

Posted 2020-07-11 DarthBadwolf

先写一下上周的总结，基本上没有偷懒，每天都有认真学习前端知识。但是有一点目标不清晰。我上周订下来的计划只完成了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是基于像素的绘画

绘图步骤：

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高级程序设计》看一遍。