jq07--隐式迭代、遍历each()、jq插件机制($.fn.extend()/$.extend)、trim()、extend()、

1 链式编程

链式编程原理：return this;

通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。

end(); // 结束当前链最近的一次过滤操作，并且返回匹配元素之前的状态。

2 隐式迭代

隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。

如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。

3 each()方法

有了隐式迭代，为什么还要使用each函数遍历？

大部分情况下是不需要使用each方法的，因为jQuery的隐式迭代特性。

如果要对每个元素做不同的处理，这时候就用到了each方法

作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数

// 参数一表示当前元素在所有匹配元素中的索引号

// 参数二表示当前元素（DOM对象）

$(selector).each(function(index,element){});

Element是一个 js对象，需要转换成jquery对象

function(index,element)

必需。为每个匹配元素规定运行的函数。

index - 选择器的 index 位置
element - 当前的元素（也可使用 "this" 选择器）

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 300px;
            padding: 50px 0;
            background-color: pink;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="each">
    <button class="but">each()遍历</button>
    <div class="box">
        <ul>
            <li>https://blog.csdn.net/muzidigbig</li>
            <li>https://blog.csdn.net/muzidigbig</li>
            <li>https://blog.csdn.net/muzidigbig</li>
            <li>https://blog.csdn.net/muzidigbig</li>
        </ul>
    </div>
    <p>你既然认准一条道路，何必去打听要走多久。</p>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
    //隐式迭代
    $('.but').mouseover(function () {
        $('li').css({'opacity':.5});
    });
    //回调函数中没有参数遍历当前对象
//    $('.but').click(function () {
//        $('li').each(function () {
//            $(this).css('color','hotpink');
//        })
//    });
    //index选择器的索引位置；element当前对象
    $('.but').click(function () {
        $('li').each(function (index,element) {
            $(this).css('opacity',(index+1)/10);
        })
    });
</script>
</html>

4 jQuery插件机制：

jQuery.fn.extend(object) 返回jqAPI

概述：扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。

参数为：用来扩充的 jQuery 对象。

案例：

1）定义方法

2）使用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 300px;
            padding: 50px 0;
            background-color: pink;
            cursor: pointer;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="event">
    <button class="but">jq插件</button>
    <div class="box">
        <p>https://blog.csdn.net/muzidigbig</p>
    </div>
    <p>你既然认准一条道路，何必去打听要走多久。</p>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
    //为jq添加插件
    //添加完毕后   $(secltor).插件名();如同调用jq提供的api一样
    $.fn.extend({
        changeYellow:function () {
            //在这个方法中，我们可以使用$(selector)获取jq对象
            //this就是我们获取的jq对象
            //注意：容易将jq对象与dom对象搞混，所以建议用$_开头
            //一看到$_开头的就知道是jq对象
            var $_this = this;
            $_this.css({'backgroundColor':'yellow'});
            return $_this;
        }
    });
    $('.but').on('click',function () {
        //调用我们自定义的新函数
        $('.box').changeYellow();
    })
</script>
</html>

jQuery.extend(object)

案例：

1）定义jq对象

2）使用jq对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 300px;
            padding: 50px 0;
            background-color: pink;
            cursor: pointer;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="event">
    <button class="but">jq插件</button>
    <div class="box">
        <p>https://blog.csdn.net/muzidigbig</p>
    </div>
    <p>你既然认准一条道路，何必去打听要走多久。</p>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
    $.extend({
        plus:function(a,b){return a+b;},
        multi:function(a,b){return a*b},
        max:function(a,b){return a>b?a:b;},
        min:function(a,b){return a>b?b:a;}
    });
    $('.but').on('click',function () {
        //调用我们自定义的jq本身对象
        var $plus = $.plus(2,3);
        console.log($plus);
    })
</script>
</html>

补充知识：

$('selector').length 返回number;jq对象中元素的个数

jQuery.trim(str)/$.trim(str) 返回String；去掉字符串起始和结尾的空格

jQuery.extend([deep], target, object1, [objectN]) 返回值:Object;用一个或多个其他对象来扩展一个对象，返回被扩展的对象。

过滤：is(expr|obj|ele|fn) 返回值:Boolean；根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 300px;
            padding: 50px 0;
            background-color: pink;
            cursor: pointer;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="event">
    <button class="but">jq插件</button>
    <div class="box">
        <p class="p">https://blog.csdn.net/muzidigbig</p>
    </div>
    <p > 你既然认准一条道路，何必去打听要走多久。</p>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
    console.log($('div').length);
    var str = "   muzidigbig  ";
    console.log(str);
    console.log($.trim(str));
    var empty = {};
    var settings = { validate: false, limit: 5, name: "foo" };
    var options = { validate: true, name: "bar" };
    //将两个对象合并到第一个对象中（settins）后面对象中跟前面有重复的会把前面的给覆盖掉，若没有会添加
    var marge = jQuery.extend(settings, options);
    console.log(marge);
    console.log(jQuery.extend(empty,settings, options));
    console.log($('.box').is('li'));//false
    //要通过元素与元素之间的层级关系来判断
    console.log($('.box').children().is('.p'));//true
</script>
</html>

若有不足请多多指教！希望给您带来帮助！