jQuery選擇器中含有空格的使用示例及注意事項_jquery

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

先構建如下的HTML代碼：
代碼如下:

Jquery教程
Jquery學習
Jquery插件
PHP學習

Jquery插件教程
Jquery插件學習

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個

之所以會出現不同的結果，這就是后代選擇器和過濾選擇器的不同了
代碼如下:
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");//這樣才是正確的

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com