jQuery()
jQuery( selector, [ context ] ) 返回: jQuery
描述: 接受一個包含CSS選擇器的字符串用于匹配的元素集合。
-
version added: 1.0jQuery( selector, [ context ] )
selector一個包含CSS選擇器的字符串
context一個待查找的 DOM 元素集、文檔或 jQuery 對象。
-
version added: 1.0jQuery( element )
element一個用于封裝成jQuery對象的DOM元素。
-
version added: 1.0jQuery( elementArray )
elementArray一個用于封裝成jQuery對象的DOM元素數(shù)組。
-
version added: 1.0jQuery( jQuery object )
jQuery object一個用于克隆的jQuery對象。
version added: 1.4jQuery()
在上文列出的第一個公式中, jQuery() — 這個也可以寫成 $() — 通過提供的選擇器檢索任何DOM元素并且通過這些元素創(chuàng)建一個新的jQuery對象:
$('div.foo');
上下文選擇器
默認情況下,選擇器從文檔根節(jié)點開始執(zhí)行搜索。然而,另一個可以給$()函數(shù)傳遞用于上下文檢索的第二個可選參數(shù)。 舉個例子,如果在一個回調(diào)函數(shù)中我們希望為一個元素做一個檢索, 我們可以限制搜索的范圍:
$('div.foo').click(function() {
$('span', this).addClass('bar');
});
由于我們限制這個span選擇器的上下文為 this, 只有在點擊元素里的span將會被附加樣式。
在內(nèi)部,選擇器上下文是使用.find()方法的,所以 $('span', this) 等價于$(this).find('span')。
使用DOM節(jié)點
在上文列出的第二個和第三個公式中,這個方法同樣使用 一個DOM元素或者我們用其他一些方式已找到的元素 來創(chuàng)建一個jQuery對象, 這個設備普遍使用jQuery方法通過一個回調(diào)函數(shù)傳遞this關(guān)鍵字 :
$('div.foo').click(function() {
$(this).slideUp();
});
這個例子,當點擊使得這些元素隱藏的時候使用了滑動動畫。因為這個處理函數(shù)接收了點擊項中作為暴露DOM元素的this 關(guān)鍵字,這個元素必須事先包含在一個jQuery對象中,這樣我們可以在它上面調(diào)用jQuery方法。
當XML數(shù)據(jù)是返回自己一個Ajax請求,我們可以使用 $() 方法去把他包含在jQuery對象中,我們可以很容易的工作。一旦這樣做了之后,我們可以使用.find()和其他DOM遍歷方法在XML結(jié)構(gòu)中檢索特定元素。
克隆jQuery對象
當一個jQuery對象作為一個參數(shù)傳遞給$()方法,這個對象的一個克隆將被創(chuàng)建。 這個新的jQuery對象引用同一DOM元素作為初始化。
返回一個空設置
在jQuery 1.4中,如果你傳遞給jQuery()方法一個空參數(shù),一個空的jQuery設置將被返回。 在以前的jQuery版本中,一個包行這個文檔節(jié)點的集合將被返回。
舉例:
例子: 找到所有div元素子節(jié)點為p的元素。
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<p>one</p> <div><p>two</p></div> <p>three</p>
<script>$("div > p").css("border", "1px solid gray");</script>
</body>
</html>
Demo:
Result:
[ <p>two</p> ]
Example: 找到文檔中第一個表單下的所有單選框。
$("input:radio", document.forms[0]);
Example: 找到所有從一個Ajax請求中獲取的XML文檔中的div元素。
$("div", xml.responseXML);
Example: 設置頁面背景為黑色。
$(document.body).css( "background", "black" );
Example: 隱藏一個表單下所有元素。
$(myForm.elements).hide()
jQuery( html, [ ownerDocument ] ) Returns: jQuery
描述: 根據(jù)提供的原始 HTML 標記字符串,動態(tài)創(chuàng)建由 jQuery 對象包裝的 DOM 元素。
-
version added: 1.0jQuery( html, [ ownerDocument ] )
html用于動態(tài)創(chuàng)建DOM元素的HTML標記字符串,不是XML
ownerDocument一個文檔的新元素將被創(chuàng)建。
-
version added: 1.4jQuery( html, props )
html一個單標記的HTML 元素字符串 (例如: <div/> or <div>)。
props訪問新創(chuàng)建元素的屬性,事件和方法。
創(chuàng)建新元素
如果一個字符串最為一個參數(shù)傳遞個$(), jQuery 檢查這個屬性是否看上去像HTML (也就是, <tag ... > 之類的元素在這個字符串中)。如果沒有, 這個字符串將被解釋為選擇器, 作為解析上下文。 但如果字符串似乎是一個HTML代碼段里,jQuery企圖創(chuàng)造新的用HTML描述的DOM元素的。然后jQuery對象創(chuàng)建并返回引用的這些因素。我們可以在這個對象上執(zhí)行一些常用的jQuery方法:
$('<p id="test">My <em>new</em> text</p>').appendTo('body');
在上面的例子中,當這個HTML比一個沒有屬性的簡單標簽復雜的時候,元素的實際操作是由瀏覽器的innerHTML 原理。特別說明,jQuery創(chuàng)建一個新的<div>元素,并且設置innerHTML屬性到HTML代碼段里將被通過。當參數(shù)是一個單標簽,就像 $('<img />') or $('<a></a>'),jQuery將使用javasrcipt原生的 createElement()函數(shù)創(chuàng)建這個元素。
為了確??缙脚_兼容性,這個片段必須完好??梢园渌氐臉撕瀾撽P(guān)閉標簽:
$('<a );
另外, jQuery 允許 XML-like 標簽語法(在斜杠前帶或不帶空格):
$('<a/>');
標簽不能含有元素可快速關(guān)閉與否
$('<img />');
$('<input>');
在 jQuery 1.4中,我們可以傳遞一個對象作為第二個參數(shù)。 這個參數(shù)接受一個屬性的集合,這些可以傳遞給.attr() 方法。此外,一些event type(事件類型)能通過, 而且后面的jQuery方法能夠調(diào)用: val, css, html, text, data, width, height, or offset。
舉例:
例子:動態(tài)創(chuàng)建一個 div 元素(以及其中的所有內(nèi)容),并將它追加到 body 元素中。在這個函數(shù)的內(nèi)部,是通過臨時創(chuàng)建一個元素,并將這個元素的 innerHTML 屬性設置為給定的標記字符串,來實現(xiàn)標記到 DOM 元素轉(zhuǎn)換的。所以,這個函數(shù)既有靈活性,也有局限性。
$("<div><p>Hello</p></div>").appendTo("body")
Example:創(chuàng)建一些DOM元素
$("<div/>", {
"class": "test",
text: "Click me!",
click: function(){
$(this).toggleClass("test");
}
}).appendTo("body");
$("<input>", {
type: "text",
val: "Test",
focusin: function() {
$(this).addClass("active");
},
focusout: function() {
$(this).removeClass("active");
}
}).appendTo("form");
jQuery( callback ) 返回: jQuery
描述: 當DOM完成加載的時候綁定一個要執(zhí)行的函數(shù)。
-
version added: 1.0jQuery( callback )
callback當DOM完成加載的時候綁定的函數(shù)
允許你綁定一個在DOM文檔載入完成后執(zhí)行的函數(shù)。這個函數(shù)的作用如同$(document).ready()一樣,只不過用這個函數(shù)時,需要把頁面中所有需要在 DOM 加載完成時執(zhí)行的$()操作符都包裝到其中來。從技術(shù)上來說,這個函數(shù)是可鏈接的--但真正以這種方式鏈接的情況并不多。
例子:
Example: Executes the function when the DOM is ready to be used.
$(function(){
// Document is ready
});
Example: Uses both the shortcut for $(document).ready() and the argument to write failsafe jQuery code using the $ alias, without relying on the global alias.
jQuery(function($) {
// Your code using failsafe $ alias here...
});