浅析链式编程与隐式迭代

其中Jq方法遍历内部dom数组的过程就叫做【隐式迭代】

        今天又接触了两个新的概念:链式编程和隐式迭代

链式编程:

        首先是链式编程,简答的说:链式编程可以理解为对象不停的调用方法。【例如:对象.方法().方法().方法】。也就是说,如果对象调用方法返回值还是当前的这个对象,那么就可以继续调用方法。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../scripts/jquery-1.7.1.js"></script>
    <script>
        $(function () {
            $('#btnShow').click(function () {
                //链式编程:只查找一次。支持逐个使用方法,、
                //在JQuery中,一般情况下对象调用的方法,此方法是也就是设置的意思,那么返回的几乎都是当前的对象,也就可以继续链式编程了
                $('p').text('都是P').css('color', 'red');
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btnShow" value="都是P" />
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>p5</p>
</body>
</html>

        在链式编程中,有一个end()操作,他的作用也是很重要的,为了防止一些特殊情况而出现的。因为有一些方法在使用过程中可能会破环链式编程中的返回的对象,导致链的断裂,比如:【next(),nextAll(),prev(),prevAll(),siblings(),无参的:text(),val(),html(】等,当链式编程破坏以后可以通过end()方法修复。如下:

        以下是一个链式断裂的情况,通过end()将断裂的链修复。

隐式迭代

        在方法的内部会为匹配到的所有元素进行循环遍历,执行相应的方法;而不用我们再进行循环,简化我们的操作,方便我们调用。如果获取的是多元素的值,大部分情况下返回的是第一个元素的值。

       以下是隐式迭代例子:通过“$('p').text('都是P');”(偷偷的将所有P元素标签的text值全部改变了)。但是如果对其进行一些设置的话就会涉及到each()遍历,接下来对于each()函数在做一个小小的了解

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../scripts/jquery-1.7.1.js"></script>
    <script>
        $(function () {
            //将jquery对象转换成dom对象:通过[下标]的形式返回dom对象
            //通过jquery的选择器得到的数组,才是jquery对象,才可以调用jquery的成员
            //将dom对象转换成jquery对象:$(dom对象)
            $('#btnShow').click(function () {
                $('p').text('都是P');//隐式迭代
                var temp = [1, 2, 3];
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btnShow" value="都是P"/>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</body>
</html>

参考链接:关于each()的基本用法和解释

         刚刚学习理解不到位的请大家补充斧正,如果有帮助,请点赞评论哦!!

发布了137 篇原创文章 · 获赞 28 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/weixin_43267344/article/details/104734328
今日推荐