jquery選擇器中含有不含有空格的問題
阿新 • • 發佈:2018-12-25
在《jquery權威指南》中看到一個很有趣的例子,在jQuery中,含有或不含有空格的DOM物件是不一樣的
書中原始碼 js
HTML:$(function(){ var $objTmp0=$(".myCls :hidden");//選擇器中含有空格符 var $objTmp1=$(".myCls:hidden");//選擇器中沒有空格符 var strTmp="'.myCls :hidden'方式獲取的元素個數是:"; strTmp+=$objTmp0.length; strTmp+="<br/><br/>'.myCls:hidden'方式獲取的元素個數是:"; strTmp+=$objTmp1.length; $("#tipDiv").append(strTmp); });
效果:<div id="div0" class="myCls"> <div id="div1" class="myCls" style="display: none;"></div> </div> <div id="div2" class="myCls" style="display: none;"></div> <div id="div3" class="myCls" style="display: none;"></div> <div id="div4" class="myCls" style="display: none;"></div> <div id="tipDiv"></div>
嘗試
1.將id為"div4"的div的class改為“myClss”,效果如下:
2. 將id為“div1”的div的class改為“myClss”,效果如下:
3. 將id為“div1”和“div4”的div class同時改為“myClss”,效果如下:
4.將id為”div0”的div的class改為“myClss”,效果如下:
由此 我們看到“.myCls :hidden”包含空格的,是指在類名為“myCls”的有隱藏子元素的div
而“.myCls:hidden”不包含空格的,是指類名為“myCls”本身是隱藏的div。