jQuery has()，not()和filter()函数示例
jQuery API提供了遍历方法来过滤出匹配的元素。
我们将在这篇文章中讨论一些过滤方法，即jQueryhas()，not()和filter()。
jQuery has()
" has()"方法返回与至少一个传递给该方法的元素相匹配的元素。
has()方法接受一个强制性参数，该参数会减少匹配的元素集。
这是使用has()的一般语法：
- selector.has(element)
元素可以是与之匹配的任何选择器表达式，也可以是任何DOM元素。
您可以通过$(" div")。
has(" p，span")之类的方法传递多个逗号分隔的元素。
has()方法返回所有包含任何元素的div元素，即p或者span元素。
jQuery has()示例
以下示例演示了jQuery has()的用法。
<!doctype html>
<html>
<head>
<title>jQuery Traversing has</title>
<style>
div{
display: block;
border: 3px solid grey;
color: black;
padding: 5px;
margin: 25px;
width:250px;
text-align:center;
color:red;
}
p{
color: green;
text-align:center;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>
<h2>jQuery has() Demo</h2>
<div>This div has a p element
<p>p - I am inside div</p>
</div>
<div>I'm not yellow because I don't have a p element</div>
<script>
$(document).ready(function(){
$("div").has("p").css("background-color","yellow");
});
</script>
</body>
</html>
在此示例中，我们有两个div元素。
我们将使用jQuery has()检查div元素是否具有p元素。
$(" div").has(" p")"检查div是否具有p元素。
has()方法遍历DOM树并找到两个div元素，但只有一个具有p。
因此，包含p的div将用黄色填充。
在此示例中，您可以看到has()方法使用传递给此方法的选择器(即p元素)过滤了div元素。
以下是以上HTML页面产生的输出。
现在，我们可以查看jQuery not()，这是另一种有用的过滤方法。
jQuery not()
not()方法从匹配的元素集中过滤掉所有与指定选择器匹配的元素。
这是使用not()的一般语法：
- selector.not(element)
元素可以是包含选择器表达式，函数，任何DOM元素或者任何现有jQuery对象的字符串。
jQuery not()示例
以下示例演示了jQuery not()的用法
<!doctype html>
<html>
<head>
<title>jQuery traversing not</title>
<style>
div {
width: 50px;
height: 50px;
margin: 10px;
float: left;
background: yellow;
border: 2px solid white;
}
.green {
background: green;
}
}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>
<div></div>
<div class="green"></div>
<div></div>
<script>
$( "div" ).not( ".green" )
.css( "border-color", "red" );
</script>
</body>
</html>
在这个例子中，我们有三个div元素，其中两个是用CSS样式class =" green"定义的。
$(" div").not(" .green").css(" border-color"，" red");"这行代码过滤掉没有class" green"的div元素。
并将边框颜色更改为红色。
现在，我们可以查看jQuery filter()，这是另一种有用的过滤方法。
jQuery filter()
filter()方法从匹配的元素集中删除所有与指定选择器不匹配的元素。
这是使用filter()的一般语法：
- selector.filter(element)
元素可以是包含选择器表达式，函数，任何DOM元素或者任何现有jQuery对象的字符串。
jQuery filter()示例
以下示例演示了jQuery filter()的用法
<!doctype html>
<html>
<head>
<title>jQuery traversing filter</title>
<style>
div,.newDivClass{
width: 50px;
height: 50px;
margin: 10px;
float: left;
background: yellow;
border: 2px solid white;
}
}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>
<div></div>
<div class="newDivClass"></div>
<div></div>
<script>
$( "div" )
.css( "background", "yellow" )
.filter( ".newDivClass" )
.css( "border-color", "red" );
</script>
</body>
</html>
在此示例中，我们有三个div元素，其中一个元素是使用CSS样式 class =" newDivClass"定义的。
首先，我们使用filter()方法将所有div元素的背景色更改为黄色，并更改具有clas ==" newDivClass"的div元素的边框颜色。
