jQuery四大天王:核心函數(shù)詳解
熟練使用jQuery中的函數(shù),能夠大大提高我們的工作效率,jQuery的很多核心功能,也是通過(guò)函數(shù)實(shí)現(xiàn)的。之前51CTO也曾報(bào)道過(guò)《一些應(yīng)該熟記于心的jQuery函數(shù)和技巧》,而本文將帶您了解jQuery的四個(gè)核心函數(shù)。
jQuery(expression,[context])
這個(gè)函數(shù)接收一個(gè)包含 CSS 選擇器的字符串,然后用這個(gè)字符串去匹配一組元素。jQuery的核心功能都是通過(guò)這個(gè)函數(shù)實(shí)現(xiàn)的。 jQuery中的一切都基于這個(gè)函數(shù),或者說(shuō)都是在以某種方式使用這個(gè)函數(shù)。這個(gè)函數(shù)最基本的用法就是向它傳遞一個(gè)表達(dá)式(通常由 CSS 選擇器組成),然后根據(jù)這個(gè)表達(dá)式來(lái)查找所有匹配的元素。
默認(rèn)情況下, 如果沒(méi)有指定context參數(shù),$()將在當(dāng)前的 HTML 文檔中查找 DOM 元素;如果指定了 context 參數(shù),如一個(gè) DOM 元素集或 jQuery 對(duì)象,那就會(huì)在這個(gè) context 中查找。
參數(shù):
expression (String) : 用來(lái)查找的字符串
context (Element, jQuery) : (可選) 作為待查找的 DOM 元素集、文檔或jQuery對(duì)象。
示例
找到所有p元素,并且這些元素都必須是 div 元素的子元素。
HTML代碼:
<p>one</p> <div><p>two</p></div> <p>three</p>
jQuery代碼:
$("div > p");
結(jié)果:
[ <p>two</p> ]
在文檔的***個(gè)表單中,查找所有的單選按鈕(即: type 值為 radio 的 input 元素)。
jQuery代碼:
$("input:radio", document.forms[0]);
在一個(gè)由AJAX返回的 XML 文檔中,查找所有的div元素。
jQuery代碼:
$("div", xml.responseXML);
#p#
jQuery(html,[ownerDocument])
根據(jù)提供的原始 HTML 標(biāo)記字符串,動(dòng)態(tài)創(chuàng)建由 jQuery 對(duì)象包裝的DOM元素。你可以傳遞一個(gè)手寫的 HTML 字符串,或者由某些模板引擎或插件創(chuàng)建的字符串,也可以是通過(guò) AJAX 加載過(guò)來(lái)的字符串。但是在你創(chuàng)建 input 元素的時(shí)會(huì)有限制,可以參考第二個(gè)示例。
當(dāng)然這個(gè)字符串可以包含斜杠 (比如一個(gè)圖像地址),還有反斜杠。當(dāng)你創(chuàng)建單個(gè)元素時(shí),請(qǐng)使用閉合標(biāo)簽或 XHTML 格式。例如,創(chuàng)建一個(gè) span ,可以用 $("<span/>") 或 $("<span></span>") ,但不推薦 $("<span>")。在jQuery 中,這個(gè)語(yǔ)法等同于$(document.createElement("span")) 。
參數(shù):
html (String) : 用于動(dòng)態(tài)創(chuàng)建DOM元素的HTML標(biāo)記字符串
ownerDocument (Document) : 可選,創(chuàng)建DOM元素所在的文檔
示例:
動(dòng)態(tài)創(chuàng)建一個(gè) div 元素(以及其中的所有內(nèi)容),并將它追加到 body 元素中。在這個(gè)函數(shù)的內(nèi)部,是通過(guò)臨時(shí)創(chuàng)建一個(gè)元素,并將這個(gè)元素的 innerHTML 屬性設(shè)置為給定的標(biāo)記字符串,來(lái)實(shí)現(xiàn)標(biāo)記到 DOM 元素轉(zhuǎn)換的。所以,這個(gè)函數(shù)既有靈活性,也有局限性。
jQuery代碼:
$("<div><p>Hello</p></div>").appendTo("body");
創(chuàng)建一個(gè) <input> 元素必須同時(shí)設(shè)定 type 屬性。因?yàn)槲④浺?guī)定 <input> 元素的 type 只能寫一次。
jQuery代碼:
// 在 IE 中無(wú)效:
$("<input>").attr("type", "checkbox");
// 在 IE 中有效:
$("<input type='checkbox'>");
#p#
jQuery(elements)
將一個(gè)或多個(gè)DOM元素轉(zhuǎn)化為jQuery對(duì)象。這個(gè)函數(shù)也可以接收XML文檔和Window對(duì)象(雖然它們不是DOM元素)作為有效的參數(shù)。
參數(shù)
elements (Element, Array<Element>) : 用于封裝成jQuery對(duì)象的DOM元素
示例:
設(shè)置頁(yè)面背景色。
jQuery代碼:
$(document.body).css( "background", "black" );
隱藏一個(gè)表單中所有元素。
jQuery代碼:
$(myForm.elements).hide()
#p#
jQuery(callback)
$(document).ready()的簡(jiǎn)寫。允許你綁定一個(gè)在DOM文檔載入完成后執(zhí)行的函數(shù)。這個(gè)函數(shù)的作用如同$(document).ready()一樣,只不過(guò)用這個(gè)函數(shù)時(shí),需要把頁(yè)面中所有需要在 DOM 加載完成時(shí)執(zhí)行的$()操作符都包裝到其中來(lái)。從技術(shù)上來(lái)說(shuō),這個(gè)函數(shù)是可鏈接的--但真正以這種方式鏈接的情況并不多。
你可以在一個(gè)頁(yè)面中使用任意多個(gè)$(document).ready事件。
參數(shù):
callback (Function) : 當(dāng)DOM加載完成后要執(zhí)行的函數(shù)
示例:
當(dāng)DOM加載完成后,執(zhí)行其中的函數(shù)。
jQuery 代碼:
$(function(){
// 文檔就緒
});
使用$(document).ready() 的簡(jiǎn)寫,同時(shí)內(nèi)部的jQuery代碼依然使用 $ 作為別名,而不管全局的 $ 為何。
jQuery 代碼:
jQuery(function($) {
// 你可以在這里繼續(xù)使用$作為別名...
});
【編輯推薦】