jQuery碎片

1，DOM通緝

a、css選擇器（4類）：tag 標籤名   |   .class  類名    |  #id  唯一標識    |  *

b、組合選擇器：

    並列組合：s1s2        匹配s1和s2

                   s1，s2     匹配s1或者s2

                   s1:not(s2)匹配s1但不匹配s2

    層級組合：s1 s2       匹配s2且存在祖先結點匹配s1

                   s1:has(s2)匹配s1且存在子孫節點匹配s2

                   s1 > s2     匹配s2且父節點匹配s1

                   s1 + s2    匹配s2且前驅節點匹配s1

                   s1~s2      匹配s2且上文有兄弟節點匹配s1

c、偽類選擇器：

    索引：:first 第一個、:last 最後一個、:even 偶數的、:odd 奇數的、:eq() 等於、:lt() 小於、:gt() 大於

    內容：:contains()、:empty、:parent、:header、:animated

    狀態：:hidden、:visited、:enabled、:disabled、:checkde、:selected

    父子：:nth-child(…)、:first-child、:last-child、:only-child

    表單：:input、:text、:password、:radio、:checkbox、:file、:button 、:submit、:reset、:image

d、屬性過濾器：

    [屬性=值]  ：存在特定屬性，且屬性值等於特定值

    [屬性!=值] ：存在特定屬性，且屬性值不等於特定值

    [屬性^=值]：存在特定屬性，且屬性值以特定值開始

    [屬性$=值]：存在特定屬性，且屬性值以特定值結束

    [屬性*=值] ：存在特定屬性，且屬性值包含特定值

2，事件繫結

    a、傳統的事件繫結有三種方式：

         修改標籤，設定相應的onXXX屬性。例：<a href=“#”  </a>

         先定義事件響應函式，再繫結到事件。例：function btnSubmit_ alert(“hi!”); }var btn = document.getElementById(“#btnSubmit”);btn.onclick=btnSubmit;

         直接繫結匿名函式。例：var btn = document.getElementById(“#btnSubmit”);btn. alert(“hi!”);}

    b、jQuery 物件透過成員函式繫結 W3C 標準事件

         °函式名：事件名稱(沒有字首 on)，例如：click

         °引數：事件響應函式，通常用匿名函式。$(“#btnSubmit”).click(function(){ alert(“hi!”);});

    c、jQuery 物件的 bind(…)方法也可以繫結事件。

         $(“#btnSubmit”).bind(“click”,function(){ alert(“hi!”);});

3，控制css

    a、css(name)：引數 name ：樣式名。功能：返回 jQuery 物件首個元素的 name 樣式定義。

    b、css(name , value)：引數 name ：樣式名。引數 value ：樣式定義。功能：給 jQuery 物件中所有元素設定指定樣式。                         c、css(properties)：引數 properties ：包含”樣式名:樣式定義”鍵值對的物件。功能：按鍵值對給 jQuery 物件所有元素設定樣式。

 d、vheight()、width() 返回第一個DOM元素的高度畫素值。如果帶引數，則設定 height 樣式為相應值。

    e、show()、hide()°顯示所有 DOM 元素。°可帶一個整數引數 d，實現 d 毫秒內顯示的特效。°第二個引數可選，為特效完成時的回撥函式。

    f、toggle()：所有DOM元素在顯示與隱藏之間來回切換。

    g、text()、text(value)°讀取第一個DOM 元素的關聯文字值、設定 innerText = value。

    h、html()、html(value)°讀取第一個 DOM 元素的 innerHTML 值。設定innerHTML  = value 

    i、attr(name)、attr(name,value)、 removeAttr(name)°讀取第一個 DOM 元素指定屬性的值或 undefined 。°移除所有 DOM 元素名為 name 的屬性。

4，訪問DOM元素集

    a、find (expr) °引數expr ：選擇器 °功能：生成當前物件副本，但是從每個DOM 元素內部再次匹配檢索器 expr 。

    b、size () 或 length () °功能：返回DOM 元素總數。

    c、slice (from , to) °引數from：起始元素下標 °引數to：結束元素下標 + 1 °功能：生成物件副本但移除從from 到 (to – 1) 的DOM元素。 °注意：此方法不改變當前物件。

    d、each (fn) °引數fn ：回撥函式，形參為當前 DOM 元素的索引值。 °功能：依次對每個DOM 元素執行回撥函式 fn。°例項：$("img").each(function(i){this.src = "test" + i + ".jpg"; });

    e、is (expr) °引數expr：選擇器功能：判斷是否至少有一個DOM 元素符合選擇器 expr 。

    f、append (text)°引數 text ：待新增的文字。°功能：向每個 DOM  元素內部結尾處新增指定文字。

    j、prepend (text)°功能：向每個 DOM  元素內部開始處新增指定文字。

    h、before (text)、after (text)°功能：向每個 DOM  元素之前（後）插入指定文字。

    i、add (html)°引數 html ：建立元素的 HTML 程式碼。°功能：動態新增新元素。

    g、remove (expr)°功能：生成當前物件副本，但移除匹配 expr （選擇器）的 DOM 元素。

    k、empty()°功能：生成當前物件副本，但移除所有DOM 元素。

    l、prev (expr)、next (expr)、parent(expr)、children (expr)、siblings (expr)°功能：返回每個DOM 元素的前趨、後繼同輩元素、父元素、子元素、同輩元素。

5，ajax支援

    a、AJAX 是一種流行的 B/S 技術，其中包含三個要點：°A = 非同步操作，也即先載入後處理；°J = Javascript 指令碼；°X = XML ，目前出現了 JSON 與之抗衡。

    b、jQuery  為 AJAX 提供了兩個層次的訪問函式，以及 6 種狀態事件：

        °高階函式：$.get (url, params, callback);$.post (url, params, callback); load (url, params, callback);

        °低階函式：$.ajax(params)

        °狀態事件：ajaxSuccess、ajaxError、ajaxComplete、ajaxSend、ajaxStart、ajaxStop、

    c、$.get(url , p , fn)、$.post(url , p , fn , type)

        °引數url ：請求的頁面 URL 。

        °引數p ：(可選)請求引數(鍵值對物件) 。

        °引數fn ： (可選)操作成功觸發的回撥函式。

        °功能：透過GET 方法載入遠端頁面。

        °注意：回撥函式fn 可以透過引數處理載入的資料。

                  如果需要處理操作失敗的狀態，請改用$.ajax(…) 。

    d、$.ajax (opt)

        °引數opt：配置 Ajax 請求的鍵值對物件。常用的鍵名有：data: 請求引數，可以是字串、鍵值對物件或字串陣列。dataType: 期望資料型別，可以是html、xml、json、script等。timeout: 操作時限(秒)。每次設定都將改寫預設值。type: 傳送請求的方法，預設為 GET。url: 遠端 URL。其它：beforeSend、success、error、complete (4個事件)

        °功能：返回包含遠端響應資料的XMLHttpRequest 物件。引數鍵都是可選的，預設值可透過$.ajaxSetup (opt) 設定。

6，Q&A

    a、jQuery 物件如何轉成 DOM 元素?

        °透過下標索引或get(index)方法

        °例如：$(“div”)[0] ; $(“div”).get(0)

    b，jQuery 物件和 DOM 元素的區別是什麼？

        °首先，jQuery 物件維護一個 DOM 元素的陣列；

        °其次，jQuery 物件不能使用 DOM 方法，反之亦然。

        °例如：$(“div”).html()  ; $(“div”)[0].innerHTML