jQuery選擇器中含有空格的使用示例及注意事項
更新時間:2013年08月25日 12:50:26 作者:
選擇器中的空格是不容忽視的,多一個空格或少一個空格也許得到的結(jié)果會截然不同的,下面以一個示例為大家詳細(xì)介紹下到底有什么不同,感興趣的朋友額可以參考下
此文摘自《鋒利的jQuery》,另外添加了一點自己的東西
選擇器中的空格是不容忽視的,多一個空格或少一個空格也許得到的結(jié)果會截然不同的。下面來看一個例子。
先構(gòu)建如下的HTML代碼:
<div class="test">
<div style="display:none;">Jquery教程</div>
<div style="display:none;">Jquery學(xué)習(xí)</div>
<div style="display:none;">Jquery插件</div>
<div class="test" style="display:none;">PHP學(xué)習(xí)</div>
</div>
<div class="test" style="display:none;">Jquery插件教程</div>
<div class="test" style="display:none;">Jquery插件學(xué)習(xí)</div>
jQuery代碼:
var $test_a = $(".test :hidden");//帶空格的jQuery選擇器
var $test_b = $(".test:hidden");//不帶空格的jQuery選擇器
var len_a = $test_a.length;
var len_b = $test_b.length;
alert("帶空格的jQuery選擇器選出的jQuery元素是:"+len_a+"個");//輸出為4個
alert("不帶空格的jQuery選擇器選出的jQuery元素是:"+len_b+"個");//輸出為3個
之所以會出現(xiàn)不同的結(jié)果,這就是后代選擇器和過濾選擇器的不同了
var $test_a = $(".test :hidden");//帶空格的jQuery選擇器
上面這段代碼是選取class為“test”的元素里面的隱藏元素。(后代選擇器)
var $test_b = $(".test:hidden");//不帶空格的jQuery選擇器
這上面的代碼則是選取隱藏的class為“test”的元素
注意:
有的選擇器的用法,必須是空格,如果不帶空格的話,那就取不到元素,比如:
$("select:selected").length;//不管任何時候,這個選擇器都取不到元素,這個length必然是0
$("select :selected");//這樣才是正確的
有的選擇器的用法,必須不帶空格,如果帶空格的話,那就取不到元素,比如:
$("input :checked").length;//不管任何時候,這個選擇器都取不到元素,這個length必然是0
$("input:checked");//這樣才是正確的
選擇器中的空格是不容忽視的,多一個空格或少一個空格也許得到的結(jié)果會截然不同的。下面來看一個例子。
先構(gòu)建如下的HTML代碼:
復(fù)制代碼 代碼如下:
<div class="test">
<div style="display:none;">Jquery教程</div>
<div style="display:none;">Jquery學(xué)習(xí)</div>
<div style="display:none;">Jquery插件</div>
<div class="test" style="display:none;">PHP學(xué)習(xí)</div>
</div>
<div class="test" style="display:none;">Jquery插件教程</div>
<div class="test" style="display:none;">Jquery插件學(xué)習(xí)</div>
jQuery代碼:
復(fù)制代碼 代碼如下:
var $test_a = $(".test :hidden");//帶空格的jQuery選擇器
var $test_b = $(".test:hidden");//不帶空格的jQuery選擇器
var len_a = $test_a.length;
var len_b = $test_b.length;
alert("帶空格的jQuery選擇器選出的jQuery元素是:"+len_a+"個");//輸出為4個
alert("不帶空格的jQuery選擇器選出的jQuery元素是:"+len_b+"個");//輸出為3個
之所以會出現(xiàn)不同的結(jié)果,這就是后代選擇器和過濾選擇器的不同了
復(fù)制代碼 代碼如下:
var $test_a = $(".test :hidden");//帶空格的jQuery選擇器
上面這段代碼是選取class為“test”的元素里面的隱藏元素。(后代選擇器)
復(fù)制代碼 代碼如下:
var $test_b = $(".test:hidden");//不帶空格的jQuery選擇器
這上面的代碼則是選取隱藏的class為“test”的元素
注意:
有的選擇器的用法,必須是空格,如果不帶空格的話,那就取不到元素,比如:
復(fù)制代碼 代碼如下:
$("select:selected").length;//不管任何時候,這個選擇器都取不到元素,這個length必然是0
$("select :selected");//這樣才是正確的
有的選擇器的用法,必須不帶空格,如果帶空格的話,那就取不到元素,比如:
復(fù)制代碼 代碼如下:
$("input :checked").length;//不管任何時候,這個選擇器都取不到元素,這個length必然是0
$("input:checked");//這樣才是正確的
您可能感興趣的文章:
- jQuery中選擇器小問題(新人難免遇到)
- jquery選擇器原理介紹($()使用方法)
- jQuery的選擇器中的通配符使用介紹
- jquery選擇器大全 全面詳解jquery選擇器
- Jquery中的層次選擇器與find()的區(qū)別示例介紹
- jquery選擇器之基本過濾選擇器詳解
- jquery選擇器之層級過濾選擇器詳解
- jquery選擇器之內(nèi)容過濾選擇器詳解
- jquery選擇器之屬性過濾選擇器詳解
- jQuery選擇器全面總結(jié)
- jquery獲取css中的選擇器(實例講解)
- jquery屬性選擇器not has怎么寫 行懸停高亮顯示
- jquery選擇器-根據(jù)多個屬性選擇示例代碼
- jQuery 屬性選擇器element[herf*=''value'']使用示例
- 關(guān)于jquery的多個選擇器的使用示例
- jquery的選擇器的使用技巧之如何選擇input框
- jquery選擇器、屬性設(shè)置用法經(jīng)驗總結(jié)
- jquery選擇器使用詳解
相關(guān)文章
js jquery獲取隨機生成id的服務(wù)器控件的三種方法
由于ASP.NET網(wǎng)頁運行后,服務(wù)器控件會隨機生成客戶端id,jquery獲取時候不太好操作,下面為大家整理了三種方法,感興趣的朋友可以參考下哈,希望對大家有所幫助2013-07-07結(jié)合JQ1.9通過js正則判斷各種瀏覽器版本的方法
本篇文章主要是對結(jié)合JQ1.9通過js正則判斷瀏覽器版本的方法進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12jQuery 學(xué)習(xí)第五課 Ajax 使用說明
關(guān)于ajax早已不是新鮮話題,而jQuery使ajax變得無比簡單。2010-05-05基于Jquery的將DropDownlist的選中值賦給label的實現(xiàn)代碼
使用Jquery 將DropDownlist的選中值賦給label的代碼,需要的朋友可以參考下。2011-05-0530個讓人興奮的視差滾動(Parallax Scrolling)效果網(wǎng)站
視差滾動(Parallax Scrolling)是指讓多層背景以不同的速度移動,形成立體的運動效果,帶來非常出色的視覺體驗。作為今年網(wǎng)頁設(shè)計的熱點趨勢,越來越多的網(wǎng)站應(yīng)用了這項技術(shù)。今天這篇文章就與大家分享30個視差滾動效果的網(wǎng)頁設(shè)計作品,一起欣賞(以拖動滾動條方式瀏覽效果更佳)2012-03-03EasyUI實現(xiàn)二級頁面的內(nèi)容勾選的方法
在使用EasyUI的時候,我們經(jīng)?;赜龅皆诙夗撁孢M(jìn)行勾選的時候,這里給大家分享一個比較簡單實用的實現(xiàn)方法,希望大家能夠喜歡。2015-03-03jqPaginator結(jié)合express實現(xiàn)分頁展示內(nèi)容效果
這篇文章主要為大家詳細(xì)介紹了jqPaginator結(jié)合express實現(xiàn)分頁展示內(nèi)容效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-04-04