jquery选择器中含有不含有空格的问题

在《jquery权威指南》中看到一个很有趣的例子，在jQuery中，含有或不含有空格的DOM对象是不一样的

书中源码 js

$(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);
		});

HTML:

<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。