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且存在祖先結(jié)點匹配s1

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

                   s1 > s2     匹配s2且父節(jié)點匹配s1

                   s1 + s2    匹配s2且前驅(qū)節(jié)點匹配s1

                   s1~s2      匹配s2且上文有兄弟節(jié)點匹配s1

c、偽類選擇器：

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

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

    狀態(tài)：: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、屬性過濾器：

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

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

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

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

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

2，事件綁定

    a、傳統(tǒng)的事件綁定有三種方式：

         修改標簽，設(shè)置相應(yīng)的onXXX屬性。例：<a href=“#” </a>

         先定義事件響應(yīng)函數(shù)，再綁定到事件。例：function btnSubmit_ alert(“hi!”); }var btn = document.getElementById(“#btnSubmit”);btn.onclick=btnSubmit;

         直接綁定匿名函數(shù)。例：var btn = document.getElementById(“#btnSubmit”);btn. alert(“hi!”);}

    b、jQuery 對象通過成員函數(shù)綁定 W3C 標準事件

         °函數(shù)名：事件名稱(沒有前綴 on)，例如：click

         °參數(shù)：事件響應(yīng)函數(shù)，通常用匿名函數(shù)。$(“#btnSubmit”).click(function(){ alert(“hi!”);});

    c、jQuery 對象的 bind(…)方法也可以綁定事件。

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

3，控制css

    a、css(name)：參數(shù) name ：樣式名。功能：返回 jQuery 對象首個元素的 name 樣式定義。

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

 d、vheight()、width() 返回第一個DOM元素的高度像素值。如果帶參數(shù)，則設(shè)置 height 樣式為相應(yīng)值。

    e、show()、hide()°顯示所有 DOM 元素?！憧蓭б粋€整數(shù)參數(shù) d，實現(xiàn) d 毫秒內(nèi)顯示的特效?！愕诙€參數(shù)可選，為特效完成時的回調(diào)函數(shù)。

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

    g、text()、text(value)°讀取第一個DOM 元素的關(guān)聯(lián)文本值、設(shè)置 innerText = value。

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

    i、attr(name)、attr(name,value)、 removeAttr(name)°讀取第一個 DOM 元素指定屬性的值或 undefined ?！阋瞥?DOM 元素名為 name 的屬性。

4，訪問DOM元素集

    a、find (expr) °參數(shù)expr ：選擇器 °功能：生成當(dāng)前對象副本，但是從每個DOM 元素內(nèi)部再次匹配檢索器 expr 。

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

    c、slice (from , to) °參數(shù)from：起始元素下標 °參數(shù)to：結(jié)束元素下標 + 1 °功能：生成對象副本但移除從from 到 (to – 1) 的DOM元素。 °注意：此方法不改變當(dāng)前對象。

    d、each (fn) °參數(shù)fn ：回調(diào)函數(shù)，形參為當(dāng)前 DOM 元素的索引值。 °功能：依次對每個DOM 元素執(zhí)行回調(diào)函數(shù) fn?！銓嵗?("img").each(function(i){this.src = "test" + i + ".jpg"; });

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

    f、append (text)°參數(shù) text ：待添加的文本?！愎δ埽合蛎總€ DOM  元素內(nèi)部結(jié)尾處添加指定文本。

    j、prepend (text)°功能：向每個 DOM  元素內(nèi)部開始處添加指定文本。

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

    i、add (html)°參數(shù) html ：創(chuàng)建元素的 HTML 代碼?！愎δ埽簞討B(tài)添加新元素。

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

    k、empty()°功能：生成當(dāng)前對象副本，但移除所有DOM 元素。

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

5，ajax支持

    a、AJAX 是一種流行的 B/S 技術(shù)，其中包含三個要點：°A = 異步操作，也即先加載后處理；°J = Javascript 腳本；°X = XML ，目前出現(xiàn)了 JSON 與之抗衡。

    b、jQuery  為 AJAX 提供了兩個層次的訪問函數(shù)，以及 6 種狀態(tài)事件：

        °高級函數(shù)：$.get (url, params, callback);$.post (url, params, callback); load (url, params, callback);

        °低級函數(shù)：$.ajax(params)

        °狀態(tài)事件：ajaxSuccess、ajaxError、ajaxComplete、ajaxSend、ajaxStart、ajaxStop、

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

        °參數(shù)url ：請求的頁面 URL 。

        °參數(shù)p ：(可選)請求參數(shù)(鍵值對對象) 。

        °參數(shù)fn ： (可選)操作成功觸發(fā)的回調(diào)函數(shù)。

        °功能：通過GET 方法加載遠程頁面。

        °注意：回調(diào)函數(shù)fn 可以通過參數(shù)處理加載的數(shù)據(jù)。

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

    d、$.ajax (opt)

        °參數(shù)opt：配置 Ajax 請求的鍵值對對象。常用的鍵名有：data: 請求參數(shù)，可以是字符串、鍵值對對象或字符串?dāng)?shù)組。dataType: 期望數(shù)據(jù)類型，可以是html、xml、json、script等。timeout: 操作時限(秒)。每次設(shè)置都將改寫默認值。type: 發(fā)送請求的方法，默認為 GET。url: 遠程 URL。其它：beforeSend、success、error、complete (4個事件)

        °功能：返回包含遠程響應(yīng)數(shù)據(jù)的XMLHttpRequest 對象。參數(shù)鍵都是可選的，默認值可通過$.ajaxSetup (opt) 設(shè)置。

6，Q&A

    a、jQuery 對象如何轉(zhuǎn)成 DOM 元素?

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

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

    b，jQuery 對象和 DOM 元素的區(qū)別是什么？

        °首先，jQuery 對象維護一個 DOM 元素的數(shù)組；

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

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