前端學習筆記--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高級程序設計》看一遍。