首页 > 编程笔记 > Web笔记 > jQuery过滤和查找

jQuery filter()和has()方法

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

在 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 所示。
has()方法的效果
图 3：has() 方法的效果

$("li").has("span")表示选取内部含有 span 标签的 li 元素。此外，has() 方法类似于 :has() 选择器。

所有教程

优秀文章