jQuery選擇器中含有空格的使用範例及注意事項_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 :$("input :$("input :$("input. checked").length;//不管任何時候，這個選擇器都取不到元素，這個length必然是0 $("input:checked");//這樣才是正確的