jQuery核心原理及自定义插件编写

jQuery的核心原理

    var myjQuery;
    myjQuery = function (){
        return new myjQuery.fn.init();
    }
    // 每一个函数都有一个原型对象
    // 原型对象有一个constructor指针指回了构造函数

    // myjQuery.prototype.bark = function(){

    // }
    // 重置原型对象
    myjQuery.fn =myjQuery.prototype = {
        constructor:myjQuery,
        init:function(){},//构造函数
        eq:function(){console.log("eq")},
        first:function(){console.log("first")},
        // ...
    }

    myjQuery.fn.init.prototype = myjQuery.fn;

    var test = myjQuery();//创建了一个 myjQuery对象 “高仿的jQuery对象”
    test.eq();
    test.first();

    // var $Obj = jQuery("#id");
    // $Obj.first()
    // $Obj.eq();

自定义插件编写

    // jQuery插件 开发者在jQuery的基础向里面添加自己常用的属性
    // 第一种 扩展到jQuery这个函数上 作为全局函数的形式扩展
    jQuery.extend({
        dream:"希望世界和平",
        test:function(){
            console.log("test");
        }
    });

    console.log( $.dream );
     $.test();
     // 第二种 扩展到jQuery对象上 
     jQuery.fn.extend({
        name:"我自己的插件"
     })
    console.log(  $("body").name ); 

    // 工具类 -- 直接扩展到jQuery函数上 全局函数
    // 过滤敏感词汇{"台独","藏独","国民党"}
    // "台独是什么意思"
    // ***是什么意思
    $.extend({
        filterWord:function(str){
            var keyWords = ["台独","藏独","国民党"];
            for (var i = 0; i < keyWords.length; i++) {
                
                // str = str.replace(keyWords[i],"***");
                var r = new RegExp(keyWords[i],"g"); //  /台独/g
                str = str.replace( r,"***")
            }

            return str;
            
        }
    });

    console.log( $.filterWord("台独台独藏独藏独国民党是什么") );

    // 把jQuery选择日期获取到的 类数组集合 转换成真正的数组 makeRealArray
    
    $.extend({
        makeRealArray:function($Arr){
            var arr = [];
            for (var i = 0; i < $Arr.length; i++) {
                arr.push(  $Arr[i] ); 
            }
            return arr;
        }
    })
    var ret = $.makeRealArray( $("div")  )
    console.log(ret);
    console.log( Array.isArray(ret) );//判断对象是否是数组

    // makeArray()  $.makeArray(集合)
    // toArray()    $obj.toArray() 
    // 功能：把集合转换成数组，makeArray()是添加到jQuery上的全局函数；toArray()是添加在jQuery原型对象上的函数，需要通过jQuery的对象来调用。

    // 自定义实现 toArray()

    // toArray_My()
    // $("li").toArray_My()

    $.fn.extend({
        toArray_My:function(){
            var arr = [];
            // for (var i = 0; i < this.length; i++) {
            //  arr.push( this[i] );
            // }

            this.each(function(index,element){
                arr.push(element);
            })
            
            return arr;
        }
    })
    console.log( $("div").toArray_My()  );
    

    // 自定义插件 实现点击标签改变标签的背景色
    $.fn.extend({
        clcikChangeBg:function(){
            this.on("click",function(){
                $(this).css("background-color","red");  
                $(this).siblings().css("background-color","#fff");
            })
            
        }
    })

    $("div").clcikChangeBg();

    // 自定义插件，单击标签，改变背景色，双击标签，标签隐藏hide(200)。