jQuery特性

最新推荐文章于 2024-06-14 11:01:38 发布

温柔的二斤半

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量26

点赞数 1

分类专栏： jQuery 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/m0_67388537/article/details/131600943

版权

jQuery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

链式调用

原理：每次执行完函数都会返回调用函数的 jQ 对象，这样可以在函数调用之后继续使用该对象的其它方法。

例：

<div class="box"></div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(".box").click(function() {
        $(this)
            .css("width", "80px")
            .attr("title", "box")
            .addClass("d1")
            .toggleClass("d2");
    });
</script>

需要注意的是在链式操作过程中 jQ 对象会转移，不一定是初始调用函数的对象。例如：

<div class="box">box</div>
<h2>hello world</h2>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(".box").click(function() {
        $(this)
            .css("width", "80px")
            .attr("title", "box")
            .next() // 此函数返回 $h2 对象
            .addClass("title")
            .css("color", "#f00")
    });
</script>

运行之后发现 h2 标题的类名增加了 title，且字体颜色变红了。这是因为我们使用了 next 方法获取了 box 元素的下一个兄弟节点，之后的操作对象就变成了 h2 对象。

如果希望对象转移后在返回转移前的对象可以使用 end() 方法：

$(".box") // 当前返回$box
    .next() // 返回 $h2
    .addClass("title")
    .end() // 将 $h2 换回 $box
    .css("color", "#f00")

隐式迭代

jQ 对象是有符合筛选条件的 DOM 元素组成的伪数组，为该 jQ 对象添加的任何方法，都会在方法的内部会遍历节点数组，为其中的每一个的元素执行相应的方法。

示例：

<html>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $("li").css("color", "#f00"); // 每一个li的颜色都会改成红色
        // 每一个li都会绑定上一个点击事件
        // 不再需要使用for循环进行绑定了
        $('li').click(function(){
            console.log($(this).text())
        })
    </script>
</body>
</html>

温柔的二斤半

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery特性

jQ 对象是有符合筛选条件的 DOM 元素组成的伪数组，为该 jQ 对象添加的任何方法，都会在方法的内部会遍历节点数组，为其中的每一个的元素执行相应的方法。原理：每次执行完函数都会返回调用函数的 jQ 对象，这样可以在函数调用之后继续使用该对象的其它方法。需要注意的是在链式操作过程中 jQ 对象会转移，不一定是初始调用函数的对象。元素的下一个兄弟节点，之后的操作对象就变成了。如果希望对象转移后在返回转移前的对象可以使用。，且字体颜色变红了。
复制链接

扫一扫