1. 程式人生 > 實用技巧 >jQuery中選擇器的空格問題

jQuery中選擇器的空格問題

<html>
    <head>
        <title>選擇器空格的問題</title>
        <script type="text/javascript" src="jquery.js"></script>
         <script type="text/javascript">
            $(document).ready(function()
            {
                alert("帶空格的選擇器的長度是:"+$(".test   :hidden
").length); alert("不帶空格的選擇器的長度是:"+$(".test:hidden").length); }); </script> </head> <body> <div class="test"> <div style="display:none;">我是內部div</div> <div style="display:none;">我是內部div</
div> <div style="display:none;">我是內部div</div> <div class="test" style="display:none;">我是內部div</div> </div> <div class="test" style="display:none;">我是外部div</div> <div class="test" style="display:none;">我是外部div</
div> </body> </html>

對於上邊的這兩行來說:

“alert("帶空格的選擇器的長度是:"+$(".test :hidden").length);”的彈出結果為4

“alert("不帶空格的選擇器的長度是:"+$(".test:hidden").length);”的彈出結果為3

對於過濾選擇器加上了空格的來說,它所獲取的是其子元素的過濾,所以上邊的例子是選取class為test的元素的子元素的隱藏元素。

而對於過濾選擇器沒有加上空格的來說,它所獲取的是其自身元素的過濾,所以上邊的例子選取隱藏的class為test的元素。

這兩個經常把人搞混,但是他們所表達的意思是不一樣的。

摘自:

https://blog.csdn.net/longyuhome/article/details/7628284