jQuery的元素的筛选

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是怎么来的呢?请看:
他自己默认自带了两个
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值