jQuery选择器中空格的问题再探究
jQuery选择器的空格问题，看似很小，但是差之毫厘谬以千里，让人很是恼火，《锋利的jQuery》书中有个经典的例子，我这里也拷贝下来，再加点自己的想法
<html>
<head>
<title>选择器空格的问题</title>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(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的元素。
其实在表单选择器中也有这种情况：
表单对象属性过滤选择器深究：
#form1 :text <=== > input:text
前面有空格，后面没空格，按照上面红色两行的推理也可以成立，假设这里只有一个表单，#form1是form标签的id，那么它后面的 :text就要加空格，因为是选择它的子元素
而input:text中间就不能有标签，因为选择的就是它本身的属性
所以空格问题看似没有规律，其实是有迹可循的，jQuery选择器的规律和CSS一脉相承，所以学好了CSS的选择器，jQuery也不在话下！
浙公网安备 33010602011771号