在 jQuery 中，表达式过滤共有两个方法：一个是 filter() 方法，另一个是 has() 方法。
jQuery filter()方法
在 jQuery 中，filter() 方法是功能相当强大的过滤方法，它可以使用选择器来过滤，也可以使用函数来过滤。
1) 选择器过滤
选择器过滤，指的是使用选择器来选取符合条件的元素。
语法：
$().filter(selector)
参数 selector 是一个选择器。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("li").filter(".select").css("color", "red");
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li class="select">jQuery</li>
<li>Vue.js</li>
</ul>
</body>
</html>
预览效果如图 1 所示。
图 1：选择器过滤的效果
2) 函数过滤
函数过滤，指的是根据函数的返回值来选取符合条件的元素。
语法：
$().filter(fn)
参数 fn 是一个回调函数。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("li").filter(function(){
return $(this).text() == "jQuery";
}).css("color", "red");
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
</body>
</html>
预览效果如图 2 所示。
图 1：函数过滤的效果
$("li").filter(function(){return$(this).text()=="jQuery";})表示选取内部文本为“jQuery”的 li 元素。
filter() 方法非常强大，几乎把之前学过的过滤方法的功能都包含进去了。不过正是由于 filter() 方法内部封装的东西过多，导致运行速度非常慢。因此在实际开发中，建议大家优先考虑其他过滤方法，迫不得已时再用 filter() 方法。
jQuery has()方法
在 jQuery 中，表达式过滤除了可以使用 filter() 方法外，我们还可以使用 has() 方法。has() 方法虽然没有 filter() 方法那么强大，但是它的运行速度更快。
语法：
$().has(selector)
参数 selector 是一个选择器。
has() 方法与 filter() 方法功能相似，不过 has() 方法只能使用选择器来过滤，不能使用函数来过滤。因此我们可以把 has() 方法看成是 filter() 方法的精简版。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("li").has("span").css("color", "red");
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li><span>JavaScript</span></li>
<li><span>jQuery</span></li>
<li>Vue.js</li>
</ul>
</body>
</html>
预览效果如图 3 所示。
图 3：has() 方法的效果
$("li").has("span")表示选取内部含有 span 标签的 li 元素。此外，has() 方法类似于 :has() 选择器。
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/23879.html