通过addclass来了解jQuery通过addclass来解释jquery。 1，获取对象。我们给第二个li添加类名

    <!DOCTYPE html>
    <html lang="ch-hans">
    <head>
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>    
    </body>
    </html>

通过addclass来解释jquery。

1，获取对象。我们给第二个li添加类名

    var litag=document.querySelector('ul li:nth-child(2)')

2，给li添加一个类名

    litag.classList.add('checkli')

3，封装成一个函数方便调用

    function addClass(){
        var litag=document.querySelector('ul li:nth-child(2)')
        litag.classList.add('checkli')
    }

4，把变量换成参数传入

    function addClass(selector,newclassname){
        var litag=document.querySelector(selector)
        litag.classList.add(newclassname)
    }

5，调用函数，添加类名

    addClass.call('undefined','ul>li:nth-child(2)','red');

如果要选择多个li：

    function addClass(selector,newclassname){
        var litags=document.querySelectorAll(selector)   
        for(var i=0;i<litags.length;i++){  
        litags[i].classList.add(newclassname)
        }
    }

把以上的代码改成node.addClass()，有两种方法。

第一种修改原型链：

加到对应的原型上去，就可以直接调用了，此处对应的原型是Node.prototype,所以调用方式如下：

    Node.prototype.addClass=function(newclassname){
        this.classList.add(newclassname)
    }
    xxx.addClass.call(xxx,'red')//此处xxx就是this，也可以直接写作this

把这个方法再包一层方法名再调用

    var addClass2=function(selector){
	var node;
	if(typeof selector === "string"){//判断传入的参数类型是选择器还是节点
	    node=document.querySelector(selector);
       	}else{
	    node=selector;
    	}
	return {
    		addClass:function(newclassname){
		        node.classList.add(newclassname);
		        return node;
		    }
		}
}	
var litag=addClass2.call('undefined',"#xxx");
litag.addClass.call('undefined','red');

如果把上面的addClass2换成jQuery,再用$替换jQuery，如下所示：

    window.jQuery=function(nodeorselector){
	var nodes;
	if(typeof nodeorselector === "string"){
		nodes=document.querySelectorAll(nodeorselector);
	}else{
		nodes=nodeorselector;
	}
	return {
		addClass:function(classname){
			for(var i=0;i<nodes.length;i++){
				nodes[i].classList.add(classname);
			}
			return nodes;	
		},
		setText:function(text){
    			for(var i=0;i<nodes.length;i++){
				nodes[i].textContent=text;
			}
			return nodes;	
		}
	}
}
	window.$ = jQuery;		
	var $div = $('div')
	$div.addClass('red')//给所有div添加类名
	$div.setText('hi')//给所有div设置内容文字

以上即jQuery实现原理，jQuery的本质是一个构造函数，接受我们传入的参数，然后根据js的原生API操作参数对应的节点，返回一个结果。