jQuery的元素的筛选

最新推荐文章于 2022-09-08 13:13:17 发布

Keeling1720

最新推荐文章于 2022-09-08 13:13:17 发布

阅读量334

点赞数

分类专栏： JavaScript JavaWeb

本文链接：https://blog.csdn.net/weixin_44741023/article/details/118273185

版权

JavaWeb 同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

JavaScript

32 篇文章 3 订阅

订阅专栏

jQuery的元素的筛选

前面介绍了很多的过滤器，现在统一一下，把他们变成一种方法，然后再加上一些特有的方法，这就是本章所要讲的内容。
比如：原先的$(div:eq（index）)，其实我们也可以直接通过调用方法替代这种花里胡哨的写法——$(“div”).eq(index)。

下面给出几个例子：

eq（index）：获取第N个元素
first ：获取第一个元素
last：获取最后一个元素
filter(expr/ obj/ ele/ fn):筛选出与指定表达式匹配的元素集合，用逗号分割多个表达式

-is(exp) ：判断是否匹配给定的选择器，满足任一个就返回true

-has（exp）：有特定后代的元素（下面的例子是有ul后代的li）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("li").has("ul").css('color','orange');
        })
    </script>
</head>
<body>
    <ul>
        <li>List item1</li>
        <li>list item2
            <ul>
                <li>List item2-1</li>
                <li>List item2-2</li>
                <li>List item2-3</li>
            </ul>
        </li>
        <li>List item3</li>
        <li>List item4</li>
    </ul>
</body>
</html>

显示：
在这里插入图片描述
-not(exp):不满足匹配选择器的元素

-children(exp):返回匹配给定选择器的子元素

-find（exp）：返回匹配给定选择器的后代元素

next()：下一个兄弟元素
nextAll()：所有兄弟元素
nextUntil(exp)：当前元素往后（不包括自己）直到指定匹配元素为止的元素（不包含符合指定条件元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //第一个div直到span加上类名after
            $("div").first().nextUntil("span").addClass("after");

        })
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <span></span>
    <div></div>
</body>
</html>

显示：
在这里插入图片描述

parent():父元素
prev(exp):当前元素的上一个兄弟元素
prevAll(exp):当前元素前所有兄弟元素
prevUtil(exp)：当前元素往前直到指定匹配元素为止的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //最后div直到遇上前面的span，期间遇到的元素加上类名before
            $("ul").prevUntil("span").addClass("before");
        })
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <span></span>
    <div></div>
    <div></div>
    <ul></ul>
</body>
</html>

在这里插入图片描述

siblings（exp）：所有兄弟元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //span前后所有兄弟加类名myBrother
            $("span").siblings().addClass("myBrother");
        })
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <span></span>
    <div></div>
    <div></div>
    <ul></ul>
</body>
</html>

在这里插入图片描述

add（）：把add匹配的选择器的元素添加到当前jquery对象中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //span前后所有兄弟加类名myBrother
            alert($("span").length);
            alert($("span").add("div").length);
        })
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <span></span>
    <div></div>
    <div></div>
    <ul></ul>
</body>
</html>

显示：
在这里插入图片描述

这里的7是怎么来的呢？请看：
他自己默认自带了两个

Keeling1720

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery的元素的筛选

jQuery的元素的筛选前面介绍了很多的过滤器，现在统一一下，把他们变成一种方法，然后再加上一些特有的方法，这就是本章所要讲的内容。比如：原先的$(div:eq（index）)，其实我们也可以直接通过调用方法替代这种花里胡哨的写法——$(“div”).eq(index)。下面给出几个例子：eq（index）：获取第N个元素first ：获取第一个元素last：获取最后一个元素filter(expr/ obj/ ele/ fn):筛选出与指定表达式匹配的元素集合，用逗号分割多个表达式
复制链接

扫一扫