jQuery中选择器的空格问题

看书的时候发现有些选择器中的带空格，起初并没有在意，但是当写选择器的时候发现怎么都没有反应，于是仔细比对自己写的和书上的代码，把空格给加上了，结果就有反应了，当是当时不明白是怎么回事，怎么也想不通。在看了几页书便知道怎么回事了，写成博客分享一下。

示例代码：

[javascript] view plain copy print ?

<html>
<head>
<title>选择器空格的问题</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(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的元素。

这两个经常把人搞混，但是他们所表达的意思是不一样的。

时间： 2024-08-28 20:26:31

jQuery中选择器的空格问题的相关文章

jquery中选择器input:hidden和input[type=hidden]的差别

jquery中选择器input:hidden和input[type=hidden]的差别关于选择器:hidden的申明, 在jquery申明文档中是如许说的:匹配所有不成见元素,或者type为hidden的元素.而[type=hidden]是查找所有type属性便是hidden的元素.两者是有雷同之处和不合之处的. :hidden匹配所有不成见元素,或者type为hidden的元素,所有样式display便是none的元素和子元素以及type="hidden"的表单位素都在查找的成果

Jquery中选择器整理

1.基本选择器 *:所有元素选择器例如:$("*").css("border","3px solid red"),表示为网页中的所有元素增加一个Border的css #id:id选择器阿每个id值必须是在一个文件中只能使用一次.如果一个以上的元素分配了相同的ID,查询将只选择该ID第一个匹配的DOM元素 $("#test"),选中网页中id为test的元素 .class:类选择器,选择给定类名的所有元素. $("

Jquery中去除左右空格

$.trim(" abc "); jQuery.trim(" abc ");

jquery中选择器的 html() text() val() attr() 方法的区别与使用方式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html() text() val() attr()</title> <script src="./js/jquery-1.12.4.min.js"></script> <script> $(funct

jQuery中容易被疏忽的强大选择器和过滤器

jQuery中选择器总体上包含了CSS3的选择器,但某些方面却由于CSS3的选择器,虽然使用各种选择器,最后也能达到目标,但在项目中,为了做的更少的代码量,使用某些特定的选择器,减少人为的判断似乎更加值得一试 1> :not(selector) 和 not(expr|ele|fn) :not(selector) not(expr|ele|fn) $("input:not(:checked)") 对于not函数的用法 $("p").not('#selected

JQuery中的$符号的作用----网摘

jQuery中的“$” 在jQuery中,最频繁使用的符号“$”.$提供了各种各样丰富的功能, 包括选择页面中的一个或是一类元素,作为功能函数的前缀,window.onload的完善,创建页面的DOM节点等... 1.选择器在CSS中选择器的作用是选择页面中某一类(类别选择器)元素或者某一个元素(ID选择器) ,而jQuery中的"$"作为选择器,同样是选择某一类或某一类元素,只不过jQuery提供了更多更全面的选择方式.并且为用户处理了浏览器的兼容问题 CSS可以通过如下代码来

jQuery中美元符号"$"的用法

jQuery基础之（二）jQuery中的$

在jQuery中,最常用的莫过于使用美元符号$,它提供了各种各样的丰富功能.包括选择页面中一个或者一类元素.作为功能函数的前缀.windows.onload的完善,创建DOM节点等.本文介绍jQuery的用法.作为基础 1.选择器在css中,选择器的作用是选择页面的某一类(类别选择器)元素或者某个(id选择器).而jQuery中的“$”作为选择器,同样是选择某类或者某个元素,只不过jQuery提供了更全面的选择方式.而且为用户处理了浏览器兼容问题. 例如在在css<h2>下的<a>

jQuery的选择器中的通配符[id^='code']

1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']");//id属性以code结束的所有input标签 $("input[id*='code']");//id属性包含code的所有input标签 (2)根据索引选择 $("tbody tr:even"); //选择索引为偶数的所有tr标签 $("tbody