刚开始学jQuery,正在学表单选择器的时候遇到了问题,但死活找不出问题来,接着就对照着数一点一点看,终于发现,原来是少了一个空格!
我就很疑惑多一个空格跟少了一个空格怎么区别那么大?上网查了一下,现在懂了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery选择器的空格问题</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#showLength1").html("带空格的长度:" + $(".d1 :hidden").length);
$("#showLength2").html("不带空格的长度:" + $(".d1:hidden").length);
})
</script>
</head>
<body>
<div class="d1">
<div style="display: none;"></div>
<div style="display: none;"></div>
<div style="display: none;"></div>
</div>
<div class="d1" style="display: none;">
<div style="display: none;"></div>
<div style="display: none;"></div>
<div style="display: none;"></div>
</div>
<div class="d1" style="display: none;">
<div style="display: none;"></div>
<div style="display: none;"></div>
<div style="display: none;"></div>
</div>
<div id="showLength1"></div>
<div id="showLength2"></div>
</body>
</html>
上面的输出,带空格的为9,不带空格的为2.
对于加了空格来说,所获取的是class="d1"的元素的子元素中的隐藏元素。
对于没加空格的来说,所获取的是class="d1"的元素中的隐藏元素。
class="d1"的元素的子元素中的隐藏元素有9个;
class="d1"的元素中的隐藏元素有2个。
所以才会出现这些结果!