表达式过滤，指的是使用“自定义表达式”的方式来选取符合条件的元素。这种自定义表达式可以是选择器，也可以是函数。

在jQuery中，表达式过滤共有两个方法：一个是filter()；另外一个是has()。

一、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>

浏览器预览效果如下图所示。

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>

浏览器预览效果如下图所示。

分析：

$("li").filter(function(){return $(this).text() == "jQuery";})

上面这句代码表示选取内部文本为“jQuery”的li元素。

filter()非常强大，几乎把之前学过的过滤方法的功能都包含进去了。不过正是由于filter()内部封装的东西过多，导致运行速度非常慢。因此在实际开发中，建议大家优先考虑其他过滤方法，实在迫不得已再用filter()方法。

二、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>

浏览器预览效果如下图所示。

分析：

$("li").has("span")

上面这句代码表示选取内部含有span标签的li元素。此外，has()方法类似于:has()选择器。