jQuery核心

1、jQuery核心之jQuery核心函數

1.1、jQuery(expression, [context])

該函數接收一個包含CSS選擇器的字符串,然後用這個字符串去匹配一組元素。
jQuery核心功能是通過該函數實現的。jQuery中的一切都基於這個函數,或者說都是以某種方式使用這個函數。這個函數最基本的用戶就是向它傳遞一個表達式(通常由CSS選擇器組成),然後根據這個表達式來所有匹配的元素。
默認情況下,如果沒有指定context參數,$()將在當前的HTML document中查找DOM元素;如果指定了context參數,如一個DOM元素集或jQuery對象,那就會在這個
context中查找。在jQuery1.3.2以後,其返回的元素順序等同於在context中出現的先後順序。
參數
expression:用來查找的字符串。--String
context:(可選)作爲待查詢的DOM元素集、文檔或jQuery對象。--Element、jQuery
示例:在文檔的第一個表單中,查找所有的單選按鈕(即:type值爲radio的input元素)。
jQuery代碼:
$("input:radio", document.forms[0])

1.2、jQuery(html, [ownerDocument])

根據提供的原始HTML標記字符串,動態創建由jQuery對象包裝的DOM對象。
可以傳遞一個手寫的HTNL字符串,或者由某些模板引擎或插件創建的字符串,也可以是通過AJAX加載過來的字符串。但是創建input元素時會有限制,可以參考下面例
子。當然這個字符串可以包括斜槓(比如一個圖形地址),還有反斜槓。當你創建單個元素時,請使用閉合標籤或XHTML格式。例如,創建一個span,可以使用$("<span/>")或$("<span></span>"),但是不推薦使用$("<span>")。在jQuery中,這個語法等同於$(document.createElement("span"))。
參數
html:用於動態創建DOM元素的HTML標記字符串。--String
ownerDocument:(可選)創建DOM元素所在的文檔。--Document
示例:創建一個input元素必須同時給type屬性。因爲微軟規定input的type屬性只能給一次。
jQuery代碼:
//在IE中無效
$("<input>").attr("type", "checkbox");
//在IE中有效
$("input type='checkbox'");

1.3、jQuery(html, props)

根據提供的原始HTML標記字符串,動態創建由jQuery對象包裝的DOM元素。同時設置一系列的屬性,事件等。
參數
html:用於動態創建DOM元素的HTML標記字符串。--String
props:用於附加到新創建元素上的屬性、事件和方法。--Map
示例:創建一個<input>元素,同時設定type屬性、屬性值以及一些事件。
jQuery代碼:
$("<input>", {
type:"text",
val:"Test",
focusin:function(){
     $(this).addclass("active");
},
focusout:function(){
     $(this).removeclass("active");
}
}).appendTo("form");

1.4、jQuery(elements)

將一個或多個DOM元素轉化爲jQuery對象。
這個函數也可以接受XML文檔和Window對象(雖然它們不是DOM元素)作爲有效的參數。
參數
elements:用於封裝成jQuery對象的DOM元素。
示例:隱藏一個表單中的所有元素。
jQuery代碼:
$("myForm.elements").hide();

1.5、jQuery()

返回一個空的jQuery對象。
jQuery1.4中,如果不提供任何參數,則返回一個空jQuery對象。在先前版本中,這會返回一個包含document節點的對象。

1.6、jQuery(callback)

$(document).ready()的簡寫。
允許你綁定一個在DOM文檔載入完成時執行的函數。這個函數的作用如同$(document).ready()一樣。只不過用這個函數時,需要把頁面中所有需要在DOM加載完成時執
行的$()操作都包含進來。從技術上來說,這個函數是可鏈接的--但真正以這種方式鏈接的情況並不多。
可以在一個頁面中使用任意多個$(document).ready事件。參考ready(Function)獲取更多ready事件的信息。
參數
callback:當DOM加載完成後要執行的函數。
示例:當DOM加載完成後,執行其中的函數。
jQuery代碼:
$(function(){
//文檔就緒
});
或使用 $(document).ready() 的簡寫,同時內部的 jQuery 代碼依然使用 $ 作爲別名,而不管全局的 $ 爲何。
jQuery(function($){
//<span style="font-family: Arial, Helvetica, sans-serif;">可以在這裏繼續使用$作爲別名...</span>
})

2、jQuery核心之jQuery對象訪問

2.1、each(callback)

以每一個匹配的元素作爲上下文來執行一個函數。
意味着,每次執行傳遞進來的函數時函數中的this關鍵字都指向一個不同的DOM元素(每次都是一個不同的匹配元素)。而且,在每次執行函數時,都會給函數傳遞一個表示作爲執行環境的元素在匹配的元素集合中所處位置的數字值作爲參數(從零開始的整數)。返回false將停止循環(就像在普通的環境中使用break)。返回true跳到下一個循環(就像在普通循環中使用continue)。
參數
callback:對於每一個匹配的元素所要執行的函數。--Function
示例:迭代兩個圖像,並設置它們的src屬性。注意:此處this指代的是DOM對象而非jQuery對象。
HTML代碼:
<img/><img/>
jQuery代碼:
$("img").each(function(i, item){
this.src="test"+i+".jpg";
});
結果:
<img src="test0.jpg"/><img src="test1.jpg"/>

2.2、size()

jQuery元素中元素的個數。
這個函數的返回值與jQuery對象的"length"屬性一致。
示例:計算文檔中所有圖片數量。
HTML代碼:
<img src="test1.jpg"/><img src="test2.jpg"/>
jQuery代碼:
$("img").size();
結果:
2

2.3、length

jQuery對象中元素的個數。
當前匹配的元素個數。size將返回相同的值。
示例:參見size()方法

2.4、selector

jQuery1.3新增。返回傳給jQuery()的原始選擇器。
返回你用的什麼選擇器來找到這個元素的。可以與context一起使用,用於精確檢測選擇器查詢情況。這兩個屬性對插件開發人員有用。
示例:確定查詢的選擇器
jQuery代碼:
$("ul")
.append("<li>"+$("ul").selector+"</li>")
.append("<li>"+$("ul li").selector+"</li>")
.append("<li>"+$("div#foo ul:not([class])").selector+"</li>");
結果:
ul
ul li
div#foo ul:not([class])

2.5、context

jQuery1.3新增。返回給jQuery的原始的DOM節點內容,即jQuery()的第二個參數。如果沒有指定,那麼context指向當前的文檔(document)。
可以與selector一起使用,用於精確檢測選擇器查詢情況。
示例:檢測使用的文檔內容。
jQuery代碼:
$("ul")
.append("<li>"+ $("ul").context +"<li/>")
.append("<li>"+$("ul",document.body).context.nodeName+"</li>")
結果:
[object HTMLDocument] //如果是IE瀏覽器,則返回[object]
BODY

2.6、get()

獲得所有匹配的DOM元素集合。
這是取得匹配元素的一種向後兼容的方式(不同於jQuery對象,而實際上市元素數組)。
如果你想要直接操作DOM對象而不是jQuery對象,這個函數非常有用。
示例:選擇文檔中所有圖像元素數組,並用數組內建的reverse方法將數組反向。
HTML代碼:
<img src="test1.jpg"/><img src="test2.jpg"/>
jQuery代碼:
$("img").get().reverse();
結果:
<img src="test2.jpg"/><img src="test1.jpg"/>
注意:如果通過該方法得到的DOM元素被引用,例如被添加到別的DOM元素下,則被引用的原來的DOM元素將不存在。

2.7、get(index)

取得其中一個匹配的元素。num表示取得第幾個匹配的元素。
這能夠讓你選擇一個實際的DOM元素並且對它直接操作,而不是通過jQuery函數。$(this).get(0)與$(this)[0]等價。
參數
index:取得第index個位置上的元素。--Number
示例參見get();

2.8、index([subject])

搜索匹配的元素,並返回相應元素的索引值,從0開始計數。
如果不給.index()方法傳遞參數,那麼返回值就是這個jQuery對象集合中第一個元素相對一其同輩元素的位置。
如果參數是一組DOM元素或者jQuery對象,那麼返回值就是傳遞的元素相對於原來集合的位置。
如果參數是一個選擇器,那麼返回值就是原先元素相對於選擇器匹配元素中的位置。如果找不到匹配的元素,則返回-1。
參數
subject:(可選)要搜索的對象。--Selector,Element
示例:查找元素的索引值。
HTML代碼:
<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
jQuery代碼:
$('li').index(document.getElementById('bar')); //1,傳遞一個DOM對象,返回這個對象在原先集合中的索引位置
$('li').index($('#bar')); //1,傳遞一個jQuery對象
$('li').index($('li:gt(0)')); //1,傳遞一組jQuery對象,返回這個對象中第一個元素在原先集合中的索引位置
$('#bar').index('li'); //1,傳遞一個選擇器,返回#bar在所有li中的做引位置
$('#bar').index(); //1,不傳遞參數,返回這個元素在同輩中的索引位置。

3、jQuery核心之數據緩存

3.1、data([name])

返回元素上儲存的相應名字的數據,可以用data(name, value)來設定。
如果jQuery集合指向多個元素,那將只返回第一個元素的對應數據。
這個函數可以用於在一個元素是哪個存取數據而避免了循環引用的風險。jQuery.data是1.2.3版的新功能。你可以在很多地方使用這個函數,jQuery UI中常用到這個函數。
參數
name:(可選)存儲的數據名。--String
示例:在一個div上存取數據。
HTML代碼:
<div></div>
jQuery代碼:
$("div").data("blah");  // undefined
$("div").data("blah", "hello");  // blah設置爲hello
$("div").data("blah");  // hello
$("div").data("blah", 86);  // 設置爲86
$("div").data("blah");  //  86
$("div").removeData("blah");  //移除blah
$("div").data("blah");  // undefined

3.2、data(name, value)

在元素上存放數據,返回jQuery對象。
如果jQuery集合指向多個元素,那將在所有元素上設置對應數據。
這個函數不用建立一個新的expando,就能在一個元素上存放任何格式的數據,而不僅僅是字符串。
參數
name:存儲的數據名。--String
value:將要存儲的任意數據。--Any
示例參見data(name)的示例。

3.3、data(obj)

在元素上存放一組數據,返回jQuery對象。
注意:如果使用這個方法之後,原先存放的多有數據都會被重寫!因爲這些數據包括事件處理函數,都是綁定在元素上的。所以以一個obj作爲參數使用.data()方法時,請務必小心。
參數
obj:一個用於設置數據的鍵/值對。--Object
示例參見data(name)的示例。

3.4、removeData(name)

在元素上移除存放的數據。
與$(...).data(name, value)函數作用相反。
參數
name:存儲的數據名。--String
示例參見data(name)的示例。

3.5、jQuery.data(element, key, value)

在元素上存放數據,返回jQuery對象。
注意:這是一個底層方法。你應當使用.data()來代替。
參數
element:要關聯數據的DOM對象。--String
key:存儲的數據名。--String
value:將要存儲的任意數據。--Any
示例
JQuery代碼:
jQuery.data(document.body, 'foo', 52);
jQuery.data(document.body, 'bar', 'test');

3.6、jQuery.data([element], [key])

查詢在元素上存放的數據。
如果不指定參數,則會返回元素上面存放的所有數據,以Object的形式返回。
注意:這是個底層方法。應該使用.data()來代替。
參數
element:(可選)要查詢的DOM對象。--String
key:(可選)存儲的數據名。--String
示例
jQuery代碼:
alert(jQuery.data(document.body, 'foo'));
alert(jQuery.data(docuemnt.body));

發佈了17 篇原創文章 · 獲贊 10 · 訪問量 10萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章