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

























