jQuery選擇器中含有空格的使用示例及注意事項(xiàng)
更新時(shí)間：2013年08月25日 12:50:26 作者：
選擇器中的空格是不容忽視的，多一個(gè)空格或少一個(gè)空格也許得到的結(jié)果會截然不同的，下面以一個(gè)示例為大家詳細(xì)介紹下到底有什么不同，感興趣的朋友額可以參考下
此文摘自《鋒利的jQuery》，另外添加了一點(diǎn)自己的東西
選擇器中的空格是不容忽視的，多一個(gè)空格或少一個(gè)空格也許得到的結(jié)果會截然不同的。下面來看一個(gè)例子。
先構(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+"個(gè)");//輸出為4個(gè)
alert("不帶空格的jQuery選擇器選出的jQuery元素是："+len_b+"個(gè)");//輸出為3個(gè)
之所以會出現(xiàn)不同的結(jié)果，這就是后代選擇器和過濾選擇器的不同了
var $test_a = $(".test :hidden");//帶空格的jQuery選擇器
上面這段代碼是選取class為“test”的元素里面的隱藏元素。（后代選擇器）
var $test_b = $(".test:hidden");//不帶空格的jQuery選擇器
這上面的代碼則是選取隱藏的class為“test”的元素
注意:
有的選擇器的用法，必須是空格，如果不帶空格的話，那就取不到元素，比如：
$("select:selected").length;//不管任何時(shí)候，這個(gè)選擇器都取不到元素，這個(gè)length必然是0
$("select :selected");//這樣才是正確的
有的選擇器的用法，必須不帶空格，如果帶空格的話，那就取不到元素，比如：
$("input :checked").length;//不管任何時(shí)候，這個(gè)選擇器都取不到元素，這個(gè)length必然是0
$("input:checked");//這樣才是正確的
選擇器中的空格是不容忽視的，多一個(gè)空格或少一個(gè)空格也許得到的結(jié)果會截然不同的。下面來看一個(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è)
之所以會出現(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");//這樣才是正確的
您可能感興趣的文章:
- jQuery中選擇器小問題(新人難免遇到)
- jquery選擇器原理介紹($()使用方法)
- jQuery的選擇器中的通配符使用介紹
- jquery選擇器大全 全面詳解jquery選擇器
- Jquery中的層次選擇器與find()的區(qū)別示例介紹
- jquery選擇器之基本過濾選擇器詳解
- jquery選擇器之層級過濾選擇器詳解
- jquery選擇器之內(nèi)容過濾選擇器詳解
- jquery選擇器之屬性過濾選擇器詳解
- jQuery選擇器全面總結(jié)
- jquery獲取css中的選擇器(實(shí)例講解)
- jquery屬性選擇器not has怎么寫 行懸停高亮顯示
- jquery選擇器-根據(jù)多個(gè)屬性選擇示例代碼
- jQuery 屬性選擇器element[herf*=''value'']使用示例
- 關(guān)于jquery的多個(gè)選擇器的使用示例
- jquery的選擇器的使用技巧之如何選擇input框
- jquery選擇器、屬性設(shè)置用法經(jīng)驗(yàn)總結(jié)
- jquery選擇器使用詳解
相關(guān)文章
jquery獲取select選中值的文本,并賦值給另一個(gè)輸入框的方法
今天小編就為大家分享一篇jquery獲取select選中值的文本,并賦值給另一個(gè)輸入框的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了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頁面元素動態(tài)添加后綁定事件丟失方法,非 live
這篇文章主要介紹了jQuery頁面元素動態(tài)添加后綁定事件丟失方法,非 live 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
本文給大家分享的是使用jquery實(shí)現(xiàn)的全選刪除插件的代碼，非常的實(shí)用，本文示例是結(jié)合的ThinkPHP,小伙伴們可以自由擴(kuò)展。
2015-03-03 
IE下使用jQuery重置iframe地址時(shí)內(nèi)存泄露問題解決辦法
這篇文章主要介紹了IE下使用jQuery重置iframe地址時(shí)內(nèi)存泄露問題解決辦法,需要的朋友可以參考下
2015-02-02 
這個(gè)操作與對指定的元素執(zhí)行appendChild方法，將它們添加到文檔中的情況類似。
2011-02-02 
解決jquery的ajax調(diào)取后端數(shù)據(jù)成功卻渲染失敗的問題
今天小編就為大家分享一篇解決jquery的ajax調(diào)取后端數(shù)據(jù)成功卻渲染失敗的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08