原生JavaScript仿写jQuery源码-------attr()属性添加方法

ID选择器简写

function $(e){
        if(e.substr(0,1) === '#'){
            return document.getElementById(e.substr(1));
        }else{
            return document.getElementsByTagName(e)
        }
}

<div id="p"></div>
console.log($('#p'),$('div'))

结果如下图，这是个简单的id选择器封装

简写类选择器

function $(e){
        if(e.substr(0,1) === '#'){
            return document.getElementById(e.substr(1));
        }else if(e.substr(0,1) == '.'){
        	return document.getElementsByClassName(a);		//这里是新增加的代码
        }else{
            return document.getElementsByTagName(e)
        }
}

jQuer函数思想 , 仿attr()属性添加方法

    function $(e){
        if(e.substr(0,1) === '#'){
            return document.getElementById(e.substr(1));
        }else if(e.substr(0,1) == '.'){
            let css = document.getElementsByClassName(e.substr(1))
            return css
        }else{
            return document.getElementsByTagName(e)
        }
    }

下面开始写jQuery链式调用方法之attr();

    function $(e){
        let R;	
        function Person () {};	//声明一个函数用来写链式函数，放其内部方便值的获取
        Person.prototype = {	//原型方法添加属性，属性为函数，.调用的功能方法
            attr:function(item,value){	//arr属性设置
                if(typeof R == "object"){	//判断
                    for(let i of R){
                        i.setAttribute(item,value)	
                    }
                }else{
                    R.setAttribute(item,value)  //不是类数组型，直接设置
                }
                return this;	//设置this，可以链接下个属性方法一起调用	//比如arr().css()
            },
        }
        if(e.substr(0,1) === '#'){
            return document.getElementById(e.substr(1));
        }else if(e.substr(0,1) == '.'){
            R = document.getElementsByClassName(e.substr(1))
            return new Person()	//返回实例化对象。
        }else{
            return document.getElementsByTagName(e)
        }
    }