学会做个jQuery

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学会做个jQuery相关的知识，希望对你有一定的参考价值。

 让我们看一下miniQuery

(function  () {

    var _$ = window.$;
    var _jQuery = window.jQuery;
    //暴露外部使用的一个接口
    var jQuery = window.jQuery = window.$ = function(selector){

        return new jQuery.fn.init(selector);
    };

//处理原型对象
    jQuery.fn = jQuery.prototype = {
        init:function(selector){
            var elements = document.querySelectorAll(selector);
            Array.prototype.push.apply(this,elements);
            return this;    
        },
        jQuery:"1.0.0",
        length:0,
        size:function(){
            return this.length;
        }

    };
    jQuery.fn.init.prototype = jQuery.fn;
//实现继承,并且只处理只有一个参数，也就是插件的扩展
    jQuery.extend = jQuery.fn.extend = function(){
        var o = arguments[0];
        for(var p in o){
            this[p] = o[p];
        }
    };

//添加静态方法
    jQuery.extend({
        trim:function(text){
            return (text||"").replace(/^\s+|\s+$/g,"");
        },
        noConflict:function(){
            window.$ = _$;
            window.jQuery = _jQuery;
            return jQuery;
        }
    });
//添加实例方法

    jQuery.fn.extend({
        get:function(num){
            return this[num];
        },
        each:function(fn){
            for(var i = 0 ;i< this.length; i++){
                fn(i,this[i]);
            }
            return this;
        },
        css:function(){
            var l = arguments.length;
            if(l == 1){
                return this[0].style[arguments[0]];
            } else {
                var name = arguments[0];
                var value = arguments[1];
                this.each(function(index,ele) {
                    ele.style[name] = value;

                });
            }
            return this;
        }

    });

})();

 初步理解：写个myjs

(function(){
    

    var jQuery  = function(selector){
        //return this; 
        //return new jQuery();
        //this.eles = [];///
        return jQuery.prototype.init(selector);
        
    };
    jQuery.fn = jQuery.prototype = {
        version:"1.0",
        init:function(selector){
                var elements = document.querySelectorAll(selector);
                Array.prototype.push.apply(this,elements);
                return this;
            },
        
    }
    
    jQuery.extend = jQuery.fn.extend  =function(){
        
        var o = arguments[0];
        for(var p in o){
            this[p] = o[p];
        }
    }
    
    jQuery.extend({
        ajax:function(){},
        get:function(){},
        
    });
    
    jQuery.fn.extend({
        css:function(){},
        
    });
    window.$ = jQuery;
    
})();

jsoop封装

<html>
<body>
    <script>
        //java.utils.ArrayList()
        
        //包（命名空间）
        /*
        var java = {};
        java.utils = {};
        java.utils.ArrayList = "asdfafsd";
        
        
        java.utils.ArrayList;
        */
        
        
        //
        (
        function(){
            var a = 5;
            var b = 100;
            window.c = 200;//把c暴露出去
            d = 300;//这行代码也可以做到公布
        }
        )();
        //console.log(c);
        
        var result = (function(m,n){
                return m + n;})(10,20);
        //console.log(result);
        
        function Person(){
            var age = 1;
            this.getAge = function(){
                return age ;
            }
            
            this.setAge = function(val){
                   age = val;
            }
        
        
        }
        var p = new Person();
        p.setAge(20);
        console.log(p.getAge());
        
        
        //Closure 闭包

        
        
    </script>
</body>
</html>

jsoop封闭包

<html>
<body>
    <script>
    
    
    //如何写会产生闭包
    
    function P(){
        var a = 5;
        var b = 6;
        return function C(){
            console.log(100);
        }
        
    }
    
    var result = P();
    result();
        //闭包是什么？
        //闭包是个对象，这个对象里面包含一个函数
        //以及被此函数捕获的东西（一般是变量）
    
        //闭怎么理解

    </script>
</body>
</html>

通过理解，我们可以加深写个jquery

命名为：cj.js

(function(){
    
    
    var cj = window.$$ = function(selector){
        
        return new cj.fn.init(selector);
    }
    
    cj.fn = cj.prototype = {
        init:function(selector){
            var elements = document.querySelectorAll(selector);
            Array.prototype.push.apply(this,elements);
            return this;
        },
        
        version:"1.0"
    }
    
    cj.fn.init.prototype = cj.fn;
    
    cj.extend = cj.fn.extend = function(o){
        for(var p in o){
            this[p] = o[p];
        }
        
    };
    
    //样式的处理
    cj.fn.extend({
        css:function(propname,propvalue){
            //this[0]得到的是dom对象
            this[0].style[propname] = propvalue;
            return this;
        }
        
    });
    
    //事件的处理
    cj.fn.extend({
        on:function(eventName,callback){
            this[0][eventName] = callback;
            
        }
        
    });
    
})();

cjtest.html

<html>
<body>
    <p>111</p>
    <p>222</p>
    
    <script src = "cj.js"></script>
    <script src = "cjplugin.js"></script>
    <script>
        
    </script>
</body>
</html>

cjplugn.js

(function(){
    
    $$.fn.extend({
        size:function(){
            
            return this.length;
        }
        
    });
    
    
    $$.extend({

        trim:function(val){            
            return val.replace(/^\s+|\s+$/g,"");
        
        }
    });
})();

 

以上是关于学会做个jQuery的主要内容，如果未能解决你的问题，请参考以下文章

jQuery应用 代码片段

Visual Studio 2012-2019的130多个jQuery代码片段。

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段（转）

几个有用的JavaScript/jQuery代码片段（转）