jquery中is()，end()，addback()用法

最新推荐文章于 2023-11-08 11:16:48 发布

an_learn +1

最新推荐文章于 2023-11-08 11:16:48 发布

阅读量452

点赞数

分类专栏： jquery爬坑中文章标签： jquery 前端入门

本文链接：https://blog.csdn.net/weixin_40842539/article/details/87082412

版权

jquery爬坑中专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jquery 中 is()用法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery-3.3.1/jquery-3.3.1.js"></script>
    <script src="./jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>

<body>
    <div id="box">
        <div id="box2">
            <div id="box3">
                <p>1231</p>
                <ul>
                    <li class="item-1">1</li>
                    <li class="item-2">2</li>
                    <li class="item-3">3</li>
                    <li class="item-4">4</li>
                    <li class="item-5">5</li>
                    <li class="item-6">6
                    </li>
                    <li class="item-7">7</li>
                    <li class="item-8">8</li>
                    <li class="item-9">9</li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        $(function () {
        //id为box3是否有子元素p
            console.log($('#box3').children().is('p'));

        })
    </script>


</body>

</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery-3.3.1/jquery-3.3.1.js"></script>
    <script src="./jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>

<body>
    <div id="box">
        <div id="box2">
            <div id="box3">
                
                <ul>
                    <li class="item-1">1</li>
                    <li class="item-2">2</li>
                    <li class="item-3">3</li>
                    <li class="item-4">4</li>
                    <li class="item-5">5</li>
                    <li class="item-6">6<p></p>
                    </li>
                    <li class="item-7">7</li>
                    <li class="item-8">8</li>
                    <li class="item-9">9</li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        $(function () {
        //id为box3是否有子元素p
            console.log($('#box3').children().is('p'));

        })
    </script>


</body>

</html>

在这里插入图片描述

end():回到破坏性操作的前一步
破坏性操作:任何对jquery对象进行破坏性操作(例如：remove(),map(),not(),children(),filter(),next(),find(),parent())
那什么时候用到end();

例子：当我从box3这个id中寻找item-4这个类名，改变字体大小，之后又去寻找item-9这个类名，改变颜色为黄色

 $('#box3').find(".item-4").css('font-size','60px').find('.item-9').css('color','yellow');

在这里插入图片描述 为什么会这样呢？因为链式语法已经被破坏了，这时候返回的对象是item-4这个类

而item-4和item-9是同级关系，并不是父子关系，因此item-9无法查找，自然也做不了修改，这时候需要用到end()

修改：

$('#box3').find(".item-4").css('font-size','60px').end().find('.item-9').css('color','yellow');

在这里插入图片描述

如果不是破坏性操作；end()会做啥；

var k = $('#box2').end();
            console.log(k);

答案是什么也不做，返回null值
在这里插入图片描述

addback()：加入先前所选元素,一起执行下一步操作

 let q = $('.item-9').prevUntil('.item-5').addBack().css('font-size','50px')
            console.log(q);

在这里插入图片描述

an_learn +1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery中is()，end()，addback()用法

jquery 中 is()用法&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0&q
复制链接

扫一扫