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、:p_w_picpath

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