快捷導(dǎo)航

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代碼：

復(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");//這樣才是正確的 

您可能感興趣的文章:

相關(guān)文章

jquery獲取select選中值的文本,并賦值給另一個輸入框的方法
今天小編就為大家分享一篇jquery獲取select選中值的文本,并賦值給另一個輸入框的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
jQuery中delegate()方法用法實例
這篇文章主要介紹了jQuery中delegate()方法用法,實例分析了delegate()方法的功能、定義及為匹配元素的子元素添加一個或多個事件,并規(guī)定當(dāng)這些事件發(fā)生時運行函數(shù)的使用技巧,需要的朋友可以參考下
2015-01-01
加載列表時jquery獲取ul中第一個li的屬性
通過jquery獲取ul中第一個li的屬性，當(dāng)加載列表時，默認(rèn)希望選中第一條，下面是具體的實現(xiàn)代碼
2014-11-11
jquery使用$(element).is()來判斷獲取的tagName
這篇文章主要介紹了jquery使用$(element).is()來判斷獲取的tagName以及將取到標(biāo)簽用作到別的地方,需要的朋友可以參考下
2014-08-08
jQuery頁面元素動態(tài)添加后綁定事件丟失方法,非 live
這篇文章主要介紹了jQuery頁面元素動態(tài)添加后綁定事件丟失方法,非 live 的相關(guān)資料,非常不錯，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧
2016-06-06
這篇文章主要介紹了jQuery實現(xiàn)帶分組數(shù)據(jù)的Table表頭排序方法,結(jié)合實例形式較為詳細(xì)的分析了jQuery針對表頭的操作及元素遍歷排序相關(guān)實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-11-11