03-jQ部分简单封装

jQ部分简单封装

一、实现基本骨架

$(function(){
    function $(selector)
    {
        return new jQuery(selector);
    }
    function jQuery(selector){
        this.ele = document.querySelector(selector);
    }
    jQuery.prototype = {
        constructor:jQuery,
        attr:function(pname,pvalue)
        {
            this.ele.setAttribute(pname,pvalue);
        }
    }
    window.$ = $;   //将jQuery转化为$符号，并挂载到window上

})()

二、attr简单封装

(function(){
    function $(selector)
    {
        return new jQuery(selector);
    }
    function jQuery(selector){
        //传递单个参数
        // this.ele = document.querySelector(selector);
        //传递多个参数
        this.eles = document.querySelectorAll(selector);
    }
    jQuery.prototype = {
        constructor:jQuery,
        attr:function(pname,pvalue)
        {
            //传递两个参数
            if(arguments.length == 2){
                // this.ele.setAttribute(pname,pvalue);

                //传递多个对象
                for(let i = 0;i < this.eles.length;i++)
                {
                    this.eles[i].setAttribute(pname,pvalue);
                }
            }
            //传递一个参数，并且参数类型为string
            else if(arguments.length == 1 && typeof arguments[0] == "string"){
                if(this.eles.length == 0)
                {
                    return undefined;
                }
                else if(this.eles.length == 1)
                {
                    return this.eles[0].getAttribute(pname);
                }
                else{
                    var rs = [];
                    for(let i = 0;i < this.eles.length;i++)
                    {
                        rs.push(this.eles[i].getAttribute(pname));
                    }
                    return rs;
                }
                // return this.ele.getAttribute(pname);
            }
            //传递一个参数，参数类型为object
            else if(arguments.length == 1 && typeof arguments[0] == "object")
            {
                for (const key in arguments[0]) {
                    // this.ele.setAttribute(key,arguments[0]);

                    for(let i = 0;i < this.length;i++)
                    {
                        this.eles[i].setAttribute(key.pname[0][key]);
                    }
                }
            }
        }
       
    window.$ = $;

})();

三、css简单封装

(function(){
    function $(selector)
    {
        return new jQuery(selector);
    }
    function jQuery(selector){
        //传递单个参数
        // this.ele = document.querySelector(selector);
        //传递多个参数
        this.eles = document.querySelectorAll(selector);
    }
    jQuery.prototype = {
        constructor:jQuery,
        css:function(pname,pvalue){
            if(arguments.length == 2)
            {
                for(let i = 0;i < this.eles.length;i++)
                {
                    this.eles[i].style[pname] = pvalue;
                }
            }
            else if(arguments.length == 1 && typeof arguments[0] == "string")
            {
                if(this.eles.length == 0)
                {
                    return undefined;
                }
                else if(this.eles.length == 1)
                {
                    //是标准浏览器
                    if(window.getComputedStyle){
                        //getComputedStyle不管行内样式还是内部样式都能够获取
                        return window.getComputedStyle[pname];
                    }
                    //是IE浏览器
                    else{
                        return this.eles[0].currentStyle[pname];
                    }
                }
                else{
                    var rs = [];
                    for(let i = 0;i < this.eles.length;i++)
                    {
                        var t ;
    
                        if(window.getComputedStyle){
                            //getComputedStyle不管行内样式还是内部样式都能够获取
                            t = window.getComputedStyle(this.eles[0][pname]);
                        }
                        else{
                            t = this.eles[0].currentStyle[pname];
                        }
                        rs.push(t);
                    }
                    return rs;
                }
                
            }
            else if(arguments.length == 1 && typeof arguments[0] == "object")
            {
                for (const key in arguments[0]) {
                    for(let i = 0;i < this.eles.length;i++)
                    {
                        this.eles[i].style[key] = arguments[0][key];
                    }
                }
            }
            
        }
        
    }
    window.$ = $;

})();

四、hasClass简单封装

;(function () {
    function $(selector){
        return new jQuery(selector);
    }
    function jQuery(selector){
        this.eles = document.querySelectorAll(selector);
    }
    jQuery.prototype = {
        constructor:jQuery,
        hasClass:function(yourClassName)
        {
            var flag = false;
            for(let i = 0;i < this.eles.length;i++){
                var currentClassString  = this.eles[i].getAttribute("class");
                console.log(currentClassString);    //标签中存在的类名
                console.log(yourClassName);    //传入的类名

                //正则表达式
                // \b表示一个边界   \b前面的\表示转义
                var reg = new RegExp("\\b" + yourClassName + "\\b");
                console.log(reg);
                if(reg.test(currentClassString))
                {
                    flag = true;
                    break;
                }
            }
        }
    window.$ = $;
})();

五、romoveClass简单封装

;(function () {
    function $(selector){
        return new jQuery(selector);
    }
    function jQuery(selector){
        this.eles = document.querySelectorAll(selector);
    }
    jQuery.prototype = {
        constructor:jQuery,
        
        removeClass:function(yourClassName)
        {
            var currentClassString = this.eles[i].getAttribute("class");
            var reg = new RegExp("\\b"+yourClassName + "\\b");
            var newCurrentClassString = currentClassString.replace(reg,"");
            this.eles[i].setAttribute("class",newCurrentClassString);
        }
    window.$ = $;
})();

六、addClass简单封装

;(function () {
    function $(selector){
        return new jQuery(selector);
    }
    function jQuery(selector){
        this.eles = document.querySelectorAll(selector);
    }
    jQuery.prototype = {
        constructor:jQuery,
        
        addClass:function(yourClassName)
        {
            var reg = new RegExp("\\b"+ yourClassName + "\\b");
            for(let i = 0;i < this.eles.length;i++)
            {
                //得到现在的class的属性值
                var currentClassString = this.eles[i].getAttribute("class");
                if(reg.test(currentClassString) === false)  //当添加的属性不存在时
                {
                    //新值+旧值
                    var newClassString = currentClassString + " " + yourClassName;
                    this.eles[i].setAttribute("class",newClassString);
                }
            }
            return this;    //链式调用
        }
    window.$ = $;
})();