jQuery选择器中空格的问题再探究-白红宇

jQuery选择器中空格的问题再探究

阅读量：6874 次

发布时间：2019-06-26

本文共 1238 字，大约阅读时间需要 4 分钟。

jQuery选择器的空格问题，看似很小，但是差之毫厘谬以千里，让人很是恼火，《锋利的jQuery》书中有个经典的例子，我这里也拷贝下来，再加点自己的想法

<html>

<head>

<title>选择器空格的问题</title>

$(function()

{

alert("带空格的选择器的长度是："+$(".test :hidden").length);

alert("不带空格的选择器的长度是："+$(".test:hidden").length);

});

</script>

</head>

<body>

<div style="display:none;">我是内部div</div>

<div class="test" style="display:none;">我是内部div</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也不在话下！

转载于:https://www.cnblogs.com/propheterLiu/p/5886570.html

你可能感兴趣的文章