您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

jQuery filter()和has()方法

时间:03-07来源:作者:点击数:

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

在 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() 选择器。

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门