DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> JQuery Tips(2) 關於$()包裝集你不知道的
JQuery Tips(2) 關於$()包裝集你不知道的
編輯:JQuery特效代碼     
我想這個理解起來很簡單,被$()包裝的JQuery對象總是以集合的形式出現.就算包裝集中只有一個對象.
代碼如下:
<div id="a"></div>
<div id="b"></div>
<script type="text/javascript">
$("div").html("hi");

</script>

上面被選擇的兩個DIV的內容都會被改變為”hi”
包裝集內元素的順序
在被JQuery包裝的元素中,包裝集中所包含的內部順序是按照HTML流從先向後排列的,而不是選擇順序:
代碼如下:
<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先被選擇,但是在執行alert的時候會先彈出”here is a”繼而是“here is b”
JQuery對象和DOM的轉化
首先,是DOM轉化成JQuery對象,這個很容易,只需包含在$()裡面即可.但有一點注意的是,再被JQuery包裝的元素的事件內,this總是指向當前對象:
代碼如下:
<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包裝集中的元素轉為DOM對於JQuery來說也是很簡單的事,大多數情況都使用JQuery的get方法
代碼如下:
<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>

從面可以看出,通過get方法加索引作為參數,會返回索引值的DOM對象,而不加參數會返回JQuery包裝集中的整個數組
還有一種簡便方法是直接在JQuery包裝集後面加數組符號,可以把上面的Jq[0]看做Jq.get(0)的簡便方式:-)
檢查當前JQuery包裝集中的元素個數
在很多時候,需要檢查在JQuery包裝集中的元素個數,我們可以直接通過包裝集的length屬性(這個屬性在VS當中是不提示的)
代碼如下:
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>

這個屬性還可以直接用於檢測當前的包裝集是否為空
代碼如下:
<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>

上面兩個alert都會被執行,第二個方式通過檢測當前包裝集中第一個元素是否為空來確定包裝集為空.
包裝集在某些特定情況下也“不總是面向集合”
剛才不是號稱總是面向集合嗎,咋又變了?其實的確是面向集合,但在使用JQuery的某些方法進行提取時,就不是這樣了,比如下面代碼:
代碼如下:
<div id="a" >here is a</div>
<div id="b">here is b</div>
<script type="text/javascript">
alert($("div").attr("id"));
</script>

上面代碼只會alert第一個div的id.那在這種情況下咋辦呢?對,用JQuery的Each方法,each方法會遍歷包裝集中的每一個元素:
代碼如下:
<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>

上面代碼會執行兩個alert:-)
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved