快捷導(dǎo)航

jQuery選擇器中含有空格的使用示例及注意事項(xiàng)

更新時(shí)間：2013年08月25日 12:50:26 作者：

選擇器中的空格是不容忽視的，多一個(gè)空格或少一個(gè)空格也許得到的結(jié)果會(huì)截然不同的，下面以一個(gè)示例為大家詳細(xì)介紹下到底有什么不同，感興趣的朋友額可以參考下

此文摘自《鋒利的jQuery》，另外添加了一點(diǎn)自己的東西

選擇器中的空格是不容忽視的，多一個(gè)空格或少一個(gè)空格也許得到的結(jié)果會(huì)截然不同的。下面來看一個(gè)例子。

先構(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+"個(gè)");//輸出為4個(gè) 
alert("不帶空格的jQuery選擇器選出的jQuery元素是："+len_b+"個(gè)");//輸出為3個(gè) 

之所以會(huì)出現(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;//不管任何時(shí)候，這個(gè)選擇器都取不到元素，這個(gè)length必然是0 
$("select :selected");//這樣才是正確的 

有的選擇器的用法，必須不帶空格，如果帶空格的話，那就取不到元素，比如：

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

 
$("input :checked").length;//不管任何時(shí)候，這個(gè)選擇器都取不到元素，這個(gè)length必然是0 
$("input:checked");//這樣才是正確的 

您可能感興趣的文章:

相關(guān)文章

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