jQuery選擇器中含有空格的使用示例及注意事項
更新時間:2013年08月25日 12:50:26 作者:
選擇器中的空格是不容忽視的,多一個空格或少一個空格也許得到的結果會截然不同的,下面以一個示例為大家詳細介紹下到底有什么不同,感興趣的朋友額可以參考下
此文摘自《鋒利的jQuery》,另外添加了一點自己的東西
選擇器中的空格是不容忽視的,多一個空格或少一個空格也許得到的結果會截然不同的。下面來看一個例子。
先構建如下的HTML代碼:
<div class="test">
<div style="display:none;">Jquery教程</div>
<div style="display:none;">Jquery學習</div>
<div style="display:none;">Jquery插件</div>
<div class="test" style="display:none;">PHP學習</div>
</div>
<div class="test" style="display:none;">Jquery插件教程</div>
<div class="test" style="display:none;">Jquery插件學習</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)不同的結果,這就是后代選擇器和過濾選擇器的不同了
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");//這樣才是正確的
選擇器中的空格是不容忽視的,多一個空格或少一個空格也許得到的結果會截然不同的。下面來看一個例子。
先構建如下的HTML代碼:
復制代碼 代碼如下:
<div class="test">
<div style="display:none;">Jquery教程</div>
<div style="display:none;">Jquery學習</div>
<div style="display:none;">Jquery插件</div>
<div class="test" style="display:none;">PHP學習</div>
</div>
<div class="test" style="display:none;">Jquery插件教程</div>
<div class="test" style="display:none;">Jquery插件學習</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)不同的結果,這就是后代選擇器和過濾選擇器的不同了
復制代碼 代碼如下:
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");//這樣才是正確的
您可能感興趣的文章:
- jQuery中選擇器小問題(新人難免遇到)
- jquery選擇器原理介紹($()使用方法)
- jQuery的選擇器中的通配符使用介紹
- jquery選擇器大全 全面詳解jquery選擇器
- Jquery中的層次選擇器與find()的區(qū)別示例介紹
- jquery選擇器之基本過濾選擇器詳解
- jquery選擇器之層級過濾選擇器詳解
- jquery選擇器之內容過濾選擇器詳解
- jquery選擇器之屬性過濾選擇器詳解
- jQuery選擇器全面總結
- jquery獲取css中的選擇器(實例講解)
- jquery屬性選擇器not has怎么寫 行懸停高亮顯示
- jquery選擇器-根據多個屬性選擇示例代碼
- jQuery 屬性選擇器element[herf*=''value'']使用示例
- 關于jquery的多個選擇器的使用示例
- jquery的選擇器的使用技巧之如何選擇input框
- jquery選擇器、屬性設置用法經驗總結
- jquery選擇器使用詳解
相關文章
基于Jquery的將DropDownlist的選中值賦給label的實現(xiàn)代碼
使用Jquery 將DropDownlist的選中值賦給label的代碼,需要的朋友可以參考下。2011-05-0530個讓人興奮的視差滾動(Parallax Scrolling)效果網站
視差滾動(Parallax Scrolling)是指讓多層背景以不同的速度移動,形成立體的運動效果,帶來非常出色的視覺體驗。作為今年網頁設計的熱點趨勢,越來越多的網站應用了這項技術。今天這篇文章就與大家分享30個視差滾動效果的網頁設計作品,一起欣賞(以拖動滾動條方式瀏覽效果更佳)2012-03-03jqPaginator結合express實現(xiàn)分頁展示內容效果
這篇文章主要為大家詳細介紹了jqPaginator結合express實現(xiàn)分頁展示內容效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-04-04