2.03.25jquery拓展API

2.03.25 jquery拓展API

1.jQuery遍历标签数组

• jq对象.each()

    <style>
        .btn {
            display: inline-block;
            padding: 15px 25px;
            border: 1px solid #ccc;
            background-color: #fff;
            cursor: pointer;
        }   
    </style>

    <div class="btn">按钮1</div>
    <div class="btn">按钮2</div>
    <div class="btn">按钮3</div>
    <div class="btn">按钮4</div>
    <div class="btn">按钮5</div>

<script src='../../jq/jquery-3.6.0.min.js'></script>
<script>

         // 第一种写法：
        // index: 代表索引值
        // dom: 代表dom元素,元素对象
        // 作用：循环标签数组
        // 调用者： $(".btn")  jquery对象
        $(".btn").each(function(index,dom){
            console.log(index,dom);
            dom.style.backgroundColor = "red";
            dom.style.color = "white";
        })

        // 第二种写法：
        // 普通数组
        var arr = ["red","green","blue","purple","yellow"];
        // 作用：循环任意数组
        // 调用者： $  jquery函数
        $.each(arr,function(index,item){
            // console.log(index,item);
            $(".btn").eq(index).css("backgroundColor",item);
        })

        console.log($.hasOwnProperty("each"));// true
        console.log($(".btn").hasOwnProperty("each"));// false
        //证明each是$函数的一个方法，所以有$可以调用
</script>   

2.整理一下深层一点的东西

1. 可知函数是个对象，给函数添加属性

    function test(){
        console.log("我是test函数");
        test.value1=function(){
            console.log("我是函数的value属性，我是个函数");
        }
        test.value2="value2属性，是个字符串"
    }
    test();//我是test函数
    test.value1();//我是函数的value属性，我是个函数
    console.log(test.value2);//value2属性，是个字符串

    //hasOwnProperty()用来判断某一个属性到底是本地属性，还是继承自prototype对象的属性。 
    console.log(test.hasOwnProperty("value1"));//true
    console.log(test.hasOwnProperty("value2"));//true
    console.log(test.hasOwnProperty("arguments"));//true

    function test2(){
        console.log("我是test2函数");
    }
    test2.value1="value1";
    test2.value2=function(){
        console.log("test2-value2");
    }
    console.log(test2.value1); //value1
    test2.value2(); //test2-value2
    console.log(test2.hasOwnProperty("value1"));//true
    console.log(test2.hasOwnProperty("value2"));//true
    console.log(test2.hasOwnProperty("arguments"));//true

• 证明函数是可以有自己的属性的

2. jq中提供一个extend方法给jq函数或者jq对象添加属性

• extend方法的功能是：给本身添加属性
• jq函数拥有extend属性，jq对象也拥有extend属性
• jq函数拥有extend属性是因为jq里面通过上面点1的方法给jq函数本省添加了这个属性
• jq对象拥有extend属性是因为jq函数给其原型添加了这个属性
• 截取jq函数里面的内容：

    jQuery.extend = jQuery.fn.extend = function() {...}

• jq中的fn就是jq的prototype

        // $.fn 类似构造函数的原型 S.prototype
        $.fn.foo = function(){
            console.log("由jquery对象调用foo函数");
        }
        // 由jquery对象调用
        $('.btn').foo();//输出：由jquery对象调用foo函数
        console.log($.fn);
        console.log($.prototype);
        console.log($.fn===$.prototype);//true
        console.log($.__proto__===Function.prototype); //true

3. 给jq的原型添加方法

    <style>
        [class^="box"] {
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
        }
    </style>

    <div class="box-1"></div>
    <div class="box-2"></div>
    <div class="box-3"></div>

    <script src='../../jq/jquery-3.6.0.min.js'></script>
    <script>
        // 调用者：jquery对象
        // 拓展一个bgcolor方法,专门改变元素背景色
        $.fn.extend({
            bgcolor: function(bgc){
                $(this).css("backgroundColor",bgc);
            }
        })
        $(".box-1").bgcolor("red");

    /* 
        // 换种写法：
        $.fn.bgcolor = function (bgc) {
            // $(this) 是这个方法的调用者
            $(this).css("backgroundColor", bgc);
        }

        // 分别改变了以下div的背景色
        $(".box-1").bgcolor("green");
        $(".box-2").bgcolor("orange");
        $(".box-3").bgcolor("purple"); 
    */
    </script>

4. 给jq本身添加方法

    <script src='../../jq/jquery-3.6.0.min.js'></script>
    <script>
        // 调用者：$函数
        // 拓展getRandom方法，获取随机数
        // 一种写法：
        $.extend({
            getRandom: function(min,max){
                return Math.floor(Math.random()*(max-min)+min);
            }
        })
        console.log($.getRandom(50,80));

        // 换种写法：
        /*         
        $.getRandom =  function(min,max){
            return Math.floor(Math.random()*(max-min)+min)
        }
         console.log($.getRandom(50,80)); 
         */
    </script>

5. jquery拓展API

• 组件：html+css+js
• 插件：基于某种技术的基础拓展出来的功能
• 一些用jq技术去封装出来的函数就是通过extend的方式去添加到jq函数本身或者jq的原型上，这些函数就称之为jq插件

3.jQuery.noConflict()

• 一个修改jq名称的方法
• 前端JS库非常多,为了避免名称冲突，所以修改函数的名称

   <div class="box"></div>
   <script src='./jquery/jquery-3.6.0.min.js'></script>
   <script>
       // 修改$的名称
       var _ = jQuery.noConflict();
       console.log($);// undefined
       // 用 “_” 代替了 “$”
       console.log(_);
       // 设置.box标签的样式
       _(".box").css("width",100);
       _(".box").css("height",100);
       _(".box").css("backgroundColor","red");

       // 总结：
           // 前端JS库非常多,为了避免名称冲突，所以修改函数的名称
           // jquery.js    jq框架使用$
           // zepto.js     zepto框架使用$
           // underscore.js    underscore框架使用_

   </script>