快捷導(dǎo)航

JQuery Tips(2) 關(guān)于$()包裝集你不知道的

更新時(shí)間：2009年12月14日 23:14:51 作者：

包裝集總是面向集合的，需要的朋友可以參考下。

我想這個(gè)理解起來(lái)很簡(jiǎn)單，被$()包裝的JQuery對(duì)象總是以集合的形式出現(xiàn).就算包裝集中只有一個(gè)對(duì)象.

 
<div id="a"></div> 
<div id="b"></div> 
<script type="text/javascript"> 
$("div").html("hi"); 

</script> 

上面被選擇的兩個(gè)DIV的內(nèi)容都會(huì)被改變?yōu)椤県i”
包裝集內(nèi)元素的順序
在被JQuery包裝的元素中,包裝集中所包含的內(nèi)部順序是按照HTML流從先向后排列的，而不是選擇順序:

復(fù)制代碼代碼如下:

 
<div id="a">here is a</div> 
<div id="b">here is b</div> 
<script type="text/javascript"> 
var Se = $("#b,#a"); 
alert(Se.get(0).innerHTML); 
alert(Se.get(1).innerHTML); 

</script> 

上面代碼可以看到，雖然是b先被選擇，但是在執(zhí)行alert的時(shí)候會(huì)先彈出”here is a”繼而是“here is b”
JQuery對(duì)象和DOM的轉(zhuǎn)化
首先，是DOM轉(zhuǎn)化成JQuery對(duì)象，這個(gè)很容易，只需包含在$()里面即可.但有一點(diǎn)注意的是，再被JQuery包裝的元素的事件內(nèi)，this總是指向當(dāng)前對(duì)象:

復(fù)制代碼代碼如下:

 
<div id="a">here is a</div> 
<div id="b">here is b</div> 
<script type="text/javascript"> 
$("div").click(function() { 
alert(this.id);//this Ö¸Ïòµ±Ç°µÄDOM 
}); 

</script> 

將JQuery包裝集中的元素轉(zhuǎn)為DOM對(duì)于JQuery來(lái)說(shuō)也是很簡(jiǎn)單的事,大多數(shù)情況都使用JQuery的get方法

復(fù)制代碼代碼如下:

 
<div id="a">here is a</div> 
<div id="b">here is b</div> 
<script type="text/javascript"> 
var Jq = $("div"); 
alert(Jq.get(0).id); //alert "a" 
alert(Jq.get()[0].id); //alert "a" as well 
alert(Jq[0].id);//alert "a" 
</script> 

從面可以看出,通過(guò)get方法加索引作為參數(shù)，會(huì)返回索引值的DOM對(duì)象，而不加參數(shù)會(huì)返回JQuery包裝集中的整個(gè)數(shù)組
還有一種簡(jiǎn)便方法是直接在JQuery包裝集后面加數(shù)組符號(hào)，可以把上面的Jq[0]看做Jq.get(0)的簡(jiǎn)便方式:-)
檢查當(dāng)前JQuery包裝集中的元素個(gè)數(shù)
在很多時(shí)候,需要檢查在JQuery包裝集中的元素個(gè)數(shù),我們可以直接通過(guò)包裝集的length屬性（這個(gè)屬性在VS當(dāng)中是不提示的）

復(fù)制代碼代碼如下:

 
div id="a">here is a</div> 
<div id="b">here is b</div> 
<script type="text/javascript"> 
var Jq = $("div"); 
alert($("Div").length);//alert "2" 
</script> 

這個(gè)屬性還可以直接用于檢測(cè)當(dāng)前的包裝集是否為空

復(fù)制代碼代碼如下:

 
<div id="a">here is a</div> 
<div id="b">here is b</div> 
<script type="text/javascript"> 
if ($("div").length) { 
alert("Not Empty"); 
} 
if ($("div").get(0)) { 
alert("Not Empty"); 
} 
</script> 

上面兩個(gè)alert都會(huì)被執(zhí)行，第二個(gè)方式通過(guò)檢測(cè)當(dāng)前包裝集中第一個(gè)元素是否為空來(lái)確定包裝集為空.
包裝集在某些特定情況下也“不總是面向集合”
剛才不是號(hào)稱(chēng)總是面向集合嗎，咋又變了？其實(shí)的確是面向集合，但在使用JQuery的某些方法進(jìn)行提取時(shí)，就不是這樣了，比如下面代碼:

復(fù)制代碼代碼如下:

 
<div id="a" >here is a</div> 
<div id="b">here is b</div> 
<script type="text/javascript"> 
alert($("div").attr("id")); 
</script> 

上面代碼只會(huì)alert第一個(gè)div的id.那在這種情況下咋辦呢？對(duì)，用JQuery的Each方法,each方法會(huì)遍歷包裝集中的每一個(gè)元素:

復(fù)制代碼代碼如下:

 
<div id="a" >here is a</div> 
<div id="b">here is b</div> 
<script type="text/javascript"> 
$("div").each(function() { 
alert($(this).attr("id")); 
}); 
</script> 

上面代碼會(huì)執(zhí)行兩個(gè)alert:-)

您可能感興趣的文章: