jquey的not 选择器

在jquery中,not被用来选择所有与选择器不匹配的元素。

例如:

1 $(‘p:not(.class-p1)’) —选择所有不含类名为class1-p1 的p标签。

2 $(‘li:not(:only-child)’)—选择不是其父标签的唯一子标签的所有li标签

3 $(‘li:not(:first-child)’)—选择不是其父标签的第一个子标签的所有li标签

 

具体事例:

一个简单的实例展示了jquery的not选择器,点击按钮会有相应的反馈。


<html>
	<head>
		<title>jquery not example</title>
		<script type="text/javascript" src="../jquery-1.11.1.min.js"></script>
	</head>
	
	<body>
	<h1>jquery not example</h1>
	<u1 class="class-u1">
	   <li>class-u1-#1</li>
	     <li>class-u1-#2</li>
	       <li>class-u1-#3</li>
	         <li>class-u1-#4</li>
	           <li>class-u1-#5</li>
	</u1> 
	<u1 id="id1">
	  <li>id1-#1</l1>
	</u1>
	<p class="class-p1">
	 class-#p1
	</p>
	<p class="class-p2">
	class-#p2
	</p>
	<button>p:not(.class-p1)</button>
	<button>li:not(:only-child)</button>
	<button>li:not(:first-child)</button>
	<script type="text/javascript">
	$("button").click(function(){
		var str=$(this).text();
		$("li,p").css("background","white");
		$(str).css("background","coral");
		
		});
	
	</script>
	
	</body>
</html>

效果1:

jquey的not 选择器_第1张图片

点击按钮1:

jquey的not 选择器_第2张图片

点击按钮2:

jquey的not 选择器_第3张图片

点击按钮3:


jquey的not 选择器_第4张图片


你可能感兴趣的:(jquery翻译)