jQuery選擇器中含有空格的注意事項
阿新 • • 發佈:2019-01-29
此文摘自《鋒利的jQuery》,另外添加了一點自己的東西
選擇器中的空格是不容忽視的,多一個空格或少一個空格也許得到的結果會截然不同的。下面來看一個例子。
先構建如下的HTML程式碼:
jQuery程式碼:<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>
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個
之所以會出現不同的結果,這就是後代選擇器和過濾選擇器的不同了
上面這段程式碼是選取class為“test”的元素裡面的隱藏元素。(後代選擇器)var $test_a = $(".test :hidden");//帶空格的jQuery選擇器
var $test_b = $(".test:hidden");//不帶空格的jQuery選擇器
這上面的程式碼則是選取隱藏的class為“test”的元素
注意:
有的選擇器的用法,必須是空格,如果不帶空格的話,那就取不到元素,比如:
$("select:selected").length;//不管任何時候,這個選擇器都取不到元素,這個length必然是0
$("select :selected");//這樣才是正確的
有的選擇器的用法,必須不帶空格,如果帶空格的話,那就取不到元素,比如:
$("input :checked").length;//不管任何時候,這個選擇器都取不到元素,這個length必然是0 $("input:checked");//這樣才是正確的