JQuery Tips(2) 關(guān)于$()包裝集你不知道的
更新時(shí)間:2009年12月14日 23:14:51 作者:
包裝集總是面向集合的,需要的朋友可以參考下。
我想這個理解起來很簡單,被$()包裝的JQuery對象總是以集合的形式出現(xiàn).就算包裝集中只有一個對象.
<div id="a"></div>
<div id="b"></div>
<script type="text/javascript">
$("div").html("hi");
</script>
上面被選擇的兩個DIV的內(nèi)容都會被改變?yōu)椤県i”
包裝集內(nèi)元素的順序
在被JQuery包裝的元素中,包裝集中所包含的內(nèi)部順序是按照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先被選擇,但是在執(zhí)行alert的時(shí)候會先彈出”here is a”繼而是“here is b”
JQuery對象和DOM的轉(zhuǎn)化
首先,是DOM轉(zhuǎn)化成JQuery對象,這個很容易,只需包含在$()里面即可.但有一點(diǎn)注意的是,再被JQuery包裝的元素的事件內(nèi),this總是指向當(dāng)前對象:
<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對于JQuery來說也是很簡單的事,大多數(shù)情況都使用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方法加索引作為參數(shù),會返回索引值的DOM對象,而不加參數(shù)會返回JQuery包裝集中的整個數(shù)組
還有一種簡便方法是直接在JQuery包裝集后面加數(shù)組符號,可以把上面的Jq[0]看做Jq.get(0)的簡便方式:-)
檢查當(dāng)前JQuery包裝集中的元素個數(shù)
在很多時(shí)候,需要檢查在JQuery包裝集中的元素個數(shù),我們可以直接通過包裝集的length屬性(這個屬性在VS當(dāng)中是不提示的)
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>
這個屬性還可以直接用于檢測當(dāng)前的包裝集是否為空
<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都會被執(zhí)行,第二個方式通過檢測當(dāng)前包裝集中第一個元素是否為空來確定包裝集為空.
包裝集在某些特定情況下也“不總是面向集合”
剛才不是號稱總是面向集合嗎,咋又變了?其實(shí)的確是面向集合,但在使用JQuery的某些方法進(jìn)行提取時(shí),就不是這樣了,比如下面代碼:
<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>
上面代碼會執(zhí)行兩個alert:-)
復(fù)制代碼 代碼如下:
<div id="a"></div>
<div id="b"></div>
<script type="text/javascript">
$("div").html("hi");
</script>
上面被選擇的兩個DIV的內(nèi)容都會被改變?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í)候會先彈出”here is a”繼而是“here is b”
JQuery對象和DOM的轉(zhuǎn)化
首先,是DOM轉(zhuǎn)化成JQuery對象,這個很容易,只需包含在$()里面即可.但有一點(diǎn)注意的是,再被JQuery包裝的元素的事件內(nèi),this總是指向當(dāng)前對象:
復(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對于JQuery來說也是很簡單的事,大多數(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>
從面可以看出,通過get方法加索引作為參數(shù),會返回索引值的DOM對象,而不加參數(shù)會返回JQuery包裝集中的整個數(shù)組
還有一種簡便方法是直接在JQuery包裝集后面加數(shù)組符號,可以把上面的Jq[0]看做Jq.get(0)的簡便方式:-)
檢查當(dāng)前JQuery包裝集中的元素個數(shù)
在很多時(shí)候,需要檢查在JQuery包裝集中的元素個數(shù),我們可以直接通過包裝集的length屬性(這個屬性在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>
這個屬性還可以直接用于檢測當(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>
上面兩個alert都會被執(zhí)行,第二個方式通過檢測當(dā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>
上面代碼只會alert第一個div的id.那在這種情況下咋辦呢?對,用JQuery的Each方法,each方法會遍歷包裝集中的每一個元素:
復(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>
上面代碼會執(zhí)行兩個alert:-)
相關(guān)文章
jQuey將序列化對象在前臺顯示地實(shí)現(xiàn)代碼(方法總結(jié))
本文給大家分享jQuey將序列化對象在前臺顯示地的幾種方式,非常不錯,具有參考借鑒價(jià)值,需要的朋友一起看看吧2016-12-12jQuery滾動監(jiān)聽實(shí)現(xiàn)商城樓梯式導(dǎo)航效果
這篇文章主要介紹了jQuery滾動監(jiān)聽,實(shí)現(xiàn)商城樓梯式導(dǎo)航,非常不錯,具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03jquery UI Datepicker時(shí)間控件的使用方法(終結(jié)版)
這篇文章是jquery UI Datepicker時(shí)間控件的使用方法終結(jié)版,可以說是技術(shù)的升華,實(shí)現(xiàn)的功能有限制的開始時(shí)間和結(jié)束時(shí)間跨度不超過三天,并配置有清空時(shí)間,重選時(shí)間等,感興趣的小伙伴們可以參考一下2015-11-11基于jQuery實(shí)現(xiàn)復(fù)選框的全選 全不選 反選功能
本文分享一段基于jQuery實(shí)現(xiàn)的復(fù)選框全選、全不選、反選功能的代碼,有需要的小伙伴直接帶走吧2014-11-11jQuery插件HighCharts繪制簡單2D柱狀圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件HighCharts繪制簡單2D柱狀圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用HighCharts插件繪制2D柱狀圖的實(shí)現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03