《鋒利的Jquery》

標籤：style   color   使用   strong   html   代碼   

一.Js及庫的異同和作用。

 1.JQuery的代碼風格：

鏈式操作風格。對於同一對象操作不超過三個，可以寫成一行；對於較多操作的對象，每行一個操作；對於多個物件少量操作，可以每個對象些一行，子物件縮排；

代碼注釋。//.....

2.JQuery對象和DOM對象：

JQuery對象和DOM對象之間的轉化。var $cr=$("#cr")----->var cr=$cr[0];

DOM對象和JQuery對象之間的轉化。$()包起來；

 JQuery判斷：is(":checked"){... ...}；

3.解決JQuery與其他庫的衝突： （待查）

4.外掛程式

Aptana

EditorPlus

二.選取器。

1.css選取器

類別選取器。div.myClass{... ...}；

群組選取器。div.myClass，h1,h2,h3,p{... ...}；

後代選取器。div.myClass ul li{... ...}

通配選擇符。*{... ...}

偽類別選取器。:nth-child；

 

 

2.JQuery選取器

基本選取器。$("#test"){... ...};$(".test"){... ... };$("*"){... ...};

層次選取器。$（div span"){... ... }所有的;$（div >span"){... ... }特定的；$（.one +div"){... ... }下一個div的同輩元素；$（.two ~div"){... ... }後的所有div元素；

過濾選取器。

a.基本過濾 ：first； ：last;  :even;  :odd;  :not(selector);$("input:gt(1)")//lt小於;  ：header；:animated//正在動畫的所有元素; ：focus//當前聚焦的所有元素；

b.內容過濾  ：contain（text）；empty； $("div:has(p)"); $("div:parent);

c.可見度過濾 :hidden;:visiable;

d.屬性過濾器  [];$("div[id]");

e.子項目過濾  :nth-child;only-child; :nth-child(odd); :nth-child(even);

f.表單對象屬性過濾選取器 :enabled; selected; :checked;disabled;

表單選取器。

:input;  :checkBox; :file; :image;

 

三.DOM操作。

DOM核心

HTML-DOM

CSS-DOM

 

四.JQuery事件和動畫。

1.載入DOM。在JS中通常使用window.onload();網頁中所有元素都載入到瀏覽器中才執行；在Jquery中，使用$(document).ready();方法，這樣可以在載入時就可以對其操縱並綁定其所有的函數，並不意味著關聯函數被下載運用。

2.事件邦定。

3.改變邦定事件的類型

4.簡寫邦定事件

5.合成事件 hover（enter，leave） 游標懸停事件； toggle （）滑鼠連續點擊事件；

 

 

 

a.JQuery事件

b.JQuery動畫

五.文字框，下拉框，複選框，表格變色

六.AJAX

七.外掛程式

a.表單驗證外掛程式

b.表單外掛程式

c.遮罩外掛程式

d.Cookie外掛程式

e.UI外掛程式

八.個性網站

九.JQuery Mobile

十.版本變化

十一.效能最佳化