前端JS实现：选择除指定元素以外的所有元素

作者：andy0012019.11.27来源：Web前端之家浏览：16374评论:0

关键词：javascript

在jQuery中可以:not()选择器来选择除指定元素以外的所有元素，:not()选择器选择与给定元素不匹配的所有元素。:not()选择器中接受所有元素，例:not(div a) 和 :not(div,a)。

语法：

$(":not(selector)")

参数：

●　selector：用于指定不要选择的元素。selector参数接受任何类型的选择器。

示例1：选择除了p.intro的所以p元素，并更改背景颜色

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
	</head>

	<body style="text-align: center;">
		<p class="intro">Hello World！</p> 
        <p>jQuary :not选择器</p> 
        <p>改变背景色</p> 
        <button>改变color</button>
        
		<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
		<script> 
	        $(document).click(function() { 
	            $("p:not(.intro)").css( 
	              "background-color", "plum"); 
	        }); 
	    </script>
	</body>
</html>

示例2：

<!DOCTYPE HTML>
<html>
	<body>
		<div>
			<input type="checkbox" name="a">
			<span>Mary</span>
		</div>
		<div>
			<input type="checkbox" name="b">
			<span>lcm</span>
		</div>
		<div>
			<input type="checkbox" name="c" checked="checked">
			<span>Peter</span>
		</div>

		<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
		<script>
			$("input:not(:checked) + span").css("background-color", "yellow");
			$("input").attr("disabled", "disabled");
		</script>
	</body>

</html>

预览看下效果吧。

赏您的支持是我们创作的动力！