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