淘先锋技术网

首页 1 2 3 4 5 6 7

关于jQuery选择器中两个选择器之间有无空格的区别

一个问题，是关于运用Jquery库对对象进行
获取时 两个选择器之间有无空格的问题。

题目

<div class=”c”>
         <div style=”display:none;”>a</div>
         <div style=”display:none;”>b</div>
         <div style=”display:none;”>c</div>
         <div class="c" style=”display:none;”>d</div>
</div>
<div class=”c”  style=”display:none;”>e</div>
<div class=”c” style=”display:none;”>f</div>
使用如下jQuery选择器：
         var $x = $(“.c :hidden”);
         var $y = $(“.c:hidden”);
         var x_len = $x.length;
         var y_len = $y.length;
执行以上代码，x_len和y_len两个变量的值分别是

根据之后的测试：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>test</title>
	</head>
	<body>
		<div class="c" id="d1">
			<div style="display: none;" id="s1"></div>
			<div style="display: none;" id="s2"></div>
			<div style="display: none;" id="s3"></div>
			<div class="c" style="display: none;" id="d2"></div>
		</div>
		<div class="c" style="display: none;" id="d3"></div>
		<div class="c" style="display: none;" id="d4"></div>
		
		<div class="aa" id="aa1">
			<input type="text" id="aaa1">
			<input type="text" style="display: none;" id="aaa2">
			<input type="text" id="aaa3">
		</div>
		<div class="aa" id="aa2"></div>
		<div class="aa" id="aa3"></div>
	</body>
	<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
	<script>
		var $x = $(".c :hidden");
		var $y = $(".c:hidden");
		var x_len = $x.length;
		var y_len = $y.length;
		console.log(x_len);	//4
		console.log(y_len);	//3
		console.log($x);	//输出的id有		s1 s2 s3 d2
		console.log($y);	//输出的id有		d2 d3 d4
		
		console.log($(".aa :hidden"));		//输出id为aaa2的input
	</script>
</html>

根据结果所得可知：
有空格的情况：
$(".c :hidden")
这段代码得到的是有类属性c（class=“c”）的子标签中有隐藏样式的标签对象

无空格的情况：
$(".c:hidden")
这段代码得到的是有类属性c（class=“c”）并且有隐藏属性样式的标签对象