在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:
点击按钮1:
点击按钮2:
点击按钮3: