【正文】 jQuery 使用手冊 翻譯整理： 官方網(wǎng)站： jQuery 是一款同 prototype 一樣優(yōu)秀 js 開發(fā)庫類，特別是對 css 和 XPath 的支持，使我們寫 js 變得更加方便！如果你不是個 js 高手又想寫出優(yōu) 秀的 js 效果， jQuery 可以幫你達到目的！ 下載地址： Starterkit （ jQuery Downloads （ 下載完成后先加載到文檔中，然后我們來看個簡單的例子！ script language=javascript type=text/javascript $(document).ready(function(){ $(a).click(function() { alert(Hello world!)。 })。 })。 script 上邊的效果是點擊文檔中所有 a 標簽時將彈出對話框， $(a) 是一個 jQuery 選擇器， $本身表示一個 jQuery 類，所有 $()是構造一個 jQuery 對象， click()是這個對象的方法，同理$(document)也是一個 jQuery 對象， ready(fn)是 $(document)的方法，表示當 document全部下載完畢時執(zhí)行函數(shù)。 在進行下面內(nèi)容之前我還要說明一點 $(p)和 $(p)的區(qū)別 ,$(p)表示取所有 p 標簽(p/p)的元素 ,$(p)表示取 id為 p(span id=p/span)的元素 . 我將從以下幾個內(nèi)容來講解 jQuery 的使用 : 1:核心部分 2:DOM 操作 3:css 操作 4:javascript 處理 5:動態(tài)效果 6:event 事件 7:ajax支持 8:插 件程序 一：核心部分 $(expr) 說明：該函數(shù)可以通過 css 選擇器， Xpath 或 html代碼來匹配目標元素，所有的 jQuery 操作都以此為基礎 參數(shù)： expr：字符串，一個查詢表達式或一段 html字符串 例子： 未執(zhí)行 jQuery 前： pone/p div ptwo/p /div pthree/p a href= id=test onClick=jq() jQuery/a jQuery 代碼及功能： function jq(){ alert($(div p).html())。 } 運行：當點擊 id 為 test 的元素時，彈出對話框文字為 two，即 div 標簽下 p 元素的內(nèi)容 function jq(){ $(divpHello/p/div).appendTo(body)。 } 運行：當點擊 id 為 test 的元素時，向 body 中添加 “divpHello/p/div” $(elem) 說明：限制 jQuery 作用于一個特定的 dom元素，這個函數(shù)也接受 xml 文檔和 windows 對象 參數(shù)： elem：通過 jQuery 對象壓縮的 DOM 元素 例子： 未執(zhí)行 jQuery 前： pone/p div ptwo/p /divpthree/p a href= id=test onClick=jq()jQuery/a jQuery 代碼及功能： function jq(){ alert($(document).find(div p).html())。 } 運行 ：當點擊 id 為 test 的元素時，彈出對話框文字為 two，即 div 標簽下 p 元素的內(nèi)容 function jq(){ $().background(black)。 } 運行：當點擊 id 為 test 的元素時，背景色變成黑色 $(elems) 說明：限制 jQuery 作用于一組特定的 DOM 元素 參數(shù)： elem：一組通過 jQuery 對象壓縮的 DOM 元素 例子： 未執(zhí)行 jQuery 前： form id=form1 input type=text name=textfield input type=submit name=Submit value=提交 /form a href= id=test onClick=jq()jQuery/a jQuery 代碼及功能： function jq(){ $( ).hide()。 } 運行：當點擊 id 為 test 的元素時，隱藏 form1 表單中的所有元素。 $(fn) 說明： $(document).ready()的一個速記方式，當文檔全部載入時執(zhí)行函數(shù)。可以有多個 $(fn)當文檔載入時，同時執(zhí)行所有函數(shù)！ 參數(shù)： fn (Function):當文檔載入時執(zhí)行的函數(shù)！ 例子： $( function(){ $().background(black)。 }) 運行：當文檔載入時背景變成黑色，相當于 onLoad。 $(obj) 說明：復制一個 jQuery 對象， 參數(shù)： obj (jQuery): 要復制的 jQuery 對象 例子： 未執(zhí)行 jQuery 前： pone/p div ptwo/ p /div pthree/ p a href= id=test onClick=jq()jQuery/a jQuery 代碼及功能： function jq(){ var f = $(div)。 alert($(f).find(p).html()) } 運行：當點擊 id 為 test 的元素時，彈出對話框文字為 two，即 div 標簽下 p 元素的內(nèi)容。 each(fn) 說明：將函數(shù)作用于所有匹配的對象上 參數(shù)： fn (Function): 需要執(zhí)行的函數(shù) 例子： 未執(zhí)行 jQuery 前： img src=/ img src=/ a href= id=test onClick=jq()jQuery/a jQuery 代碼及功能： function jq(){ $(img).each(function(){ = 。 })。 } 運行：當點擊 id 為 test 的元素時， img 標簽的 src 都變成了 。 eq(pos) 說明：減少匹配對象到一個單獨得 dom元素 參數(shù)： pos (Number): 期望限制的索引，從 0 開始 例子： 未執(zhí)行 jQuery 前： pThis is just a test./p pSo is this/p a href= id=test onClick=jq()jQuery/a jQuery 代碼及功能： function jq(){ alert($(p).eq(1).html()) } 運行：當點擊 id 為 test 的元素時， alert 對話框顯示： So is this，即第二個 p標簽的內(nèi)容 get() get(num) 說明：獲取匹配元素， get(num)返回匹配元素中的某一個元素 參數(shù)： get (Number): 期望限制的索引，從 0 開始 例子： 未執(zhí)行 jQuery 前： pThis is just a test./p pSo is this/p a href= id=test onClick=jq()jQuery/a jQuery 代碼及功能： function jq(){ alert($(p).get(1).innerHTML)。 } 運行：當點擊 id 為 test 的元素時， alert 對話框顯示： So is this，即第二個 p標簽的內(nèi)容 注意 get 和 eq的區(qū)別， eq 返回的是 jQuery 對象， get 返回的是所匹配的 dom 對象，所有取 $(p).eq(1)對象的內(nèi)容用 jQuery 方法 html()，而取 $(p).get(1)的內(nèi)容用innerHTML index(obj) 說明：返回對象索引 參數(shù)： obj (Object): 要查找的對象 例子： 未執(zhí)行 jQuery 前： div id=test1/div div id=test2/div a href= id=test onClick=jq()jQuery/a jQuery 代碼及功能： function jq(){ alert($(div).index((39。test139。)))。 alert($(div).index((39。test239。)))。 } 運行：當點擊 id 為 test 的元素時，兩次彈出 alert 對話框分別顯示 0， 1 size() Length 說明：當前匹配對象的數(shù)量，兩者等價 例子： 未執(zhí)行 jQuery 前： img src=/ img src=/ a href= id=test onClick=jq()jQuery/a jQuery 代碼及功能： function jq(){ alert($(img).length)。 } 運行：當點擊 id 為 test 的元素時，彈出 alert 對話框顯示 2，表示找到兩個匹配對象 jQuery 使用手冊 二： DOM 操作 屬性 我們 以 img id=a scr=/為 例 ，在 原始的 javascript 里面 可以 用 var o=(39。a39。)取的 id 為 a 的節(jié)點對象，在用 來取得或修改該節(jié)點的 scr屬性，在 jQuery 里 $(a)將得到 jQuery 對象 [ img id=a scr=/ ]，然后可以用 jQuery 提 供 的 很 多 方 法 來 進 行 操 作 ， 如 $(a).scr() 將得到,$(a).scr()將該對象 src 屬性改為 1,jpg。下面我們來講 jQuery 提供的眾多jQuery 方法，方便大家快速對 DOM 對象進行操作 herf() herf(val) 說明：對 jQuery 對象屬性 herf 的操作。 例子： 未執(zhí)行 jQuery 前 a href= id=test onClick=jq()jQuery/a jQuery 代碼及功能： function jq(){ alert($(test).href())。 $(test).href()。 } 運行：先彈出對話框顯示 id 為 test 的連接 url，在將其 url改為 ，當彈出對話框后會看到轉(zhuǎn)向到 同理， jQuery 還提供類似的其他方法，大家可以 分別試驗一下： herf() herf(val) html() html(val) id() id (val) name() name (val) rel() rel (val) src() src (val) title() title (val) val() val(val) 操作 after(html) 在匹配元素后插入一段 html a href= id=test onClick=jq()jQuery/a jQuery 代碼及功能： function jq(){ $(test).after(bHello/b)。 } 執(zhí)行后相當于： a href= id=test onClick=jq()jQuery/abHello/b after(elem) after(elems) 將指定對象 elem 或?qū)ο蠼M elems 插入到在匹配元素后 p id=testafter/pa href= onClick=jq()jQuery/ a jQuery 代碼及功能 function jq(){ $(a).after($(test))。 } 執(zhí)行后相當于 a href= onClick=jq()jQuer