一、为什么会出现jQuery呢？
客观原因：原生JS的API有很多的不便，DOM的API尤其反人类，所以这一期就从DOM API讲起
主观原因：懒、为了更加效率
二、原生的DOM API 我们要达到“获取所有的同类元素，并给他们加上同一个样式”需求怎么办呢？
html代码：
<body>
<ul>
<li>第1个</li>
<li>第2个</li>
<li>第3个</li>
<li>第4个</li>
<li>第5个</li>
</ul>
</body>
1、获取所有的li元素
var lies = document.querySelectorAll('ul > li')
2、给所有的li元素加上一个class
首先document.querySelectorAll()这个API，获取的是一个NodeList的伪数组，上面获取的结果如下：
所以我们需要遍历一下，给每个
li加上class
for(let i=0; i<lies.length; i++){
lies[i].classList.add(className)
}
然后这个时候呢，我们已经用原生JS的API达到了需求，是不是很麻烦？好吧，其实也没有很麻烦……但是为了更懒，不，是为了更加效率，我们可以对他进行一系列的改进。（PS:有些需求用原生JS真的很麻烦，这就促使了大家为了效率而发明创造）
三、我想用更简短的代码实现上述的功能，并且造福同行，如何实现呢？
1、封装函数
封装一个getNodes()函数
function getNodes(selector){
var nodes = document.querySelectorAll(selector)
return nodes
}
var lies = getNodes('ul > li')
封装一个addClass()函数
function addClass(node,className){
for(let i=0; i<lies.length; i++){
node[i].classList.add(className)
}
}
addClass(lies,'red')
2、命名空间-给他们加上一个名字
创建命名空间可以很好的避免全局变量名冲突，什么意思呢，就是我可以叫getNodes()、 addClass()，别人也可以啊，这样就很容易发生互相覆盖和冲突。
window.JRGDOM = {}
JRGDOM.getNodes = function (selector){
var nodes = document.querySelectorAll(selector)
return nodes
}
JRGDOM.addClass = function (node,className){
for(let i=0; i<lies.length; i++){
node[i].classList.add(className)
}
}
var lies = JRGDOM.getNodes('ul > li')
JRGDOM.addClass(lies,'red')
3、能不能把node放在前面呢
刚才我们都是把node或者选择器放在函数的参数传进去，是否可以把node放在前面，从而更加的方便呢？
方法一：扩展 Node 接口，直接在 Node.prototype 上加函数
这个方法会存在一个问题：可能会覆盖原有Node.prototype的函数，而且可能会互相影响。
方法二：新的接口 BetterNode，这是一种无侵入的方法
window.JRGDOM = function(nodeOrSelector) {
let nodes = {}
if (typeof nodeOrSelector === 'string'){
nodes = document.querySelectorAll(nodeOrSelector)
}else if(nodeOrSelector instanceof Node){
nodes = {
0: nodeOrSelector,
length: 1
}
}
nodes.addClass = function(className){
for(let i=0; i<this.length; i++){
this[i].classList.add(className)
}
}
return nodes
}
var lies = JRGDOM('ul>li')
lies.addClass('red')
4、JRGDOM名字不够响亮，那就改个好听点的名字吧
那就改成把JRGDOM改成jQuery吧，别问，问就是改成jQuery。
window.jQuery = function(nodeOrSelector) {
let nodes = {}
……
nodes.addClass = function(){ }
return nodes
}
5、jQuery名字是挺响亮的，但是太长了，写起来有点费劲，那就再改个缩写吧 $
window.$ = function(nodeOrSelector) {
let nodes = {}
……
nodes.addClass = function(){ }
return nodes
}
6、这个时候我们的需求就可以用一行代码搞定了
$('ul>li').addClass('red')，这里已经初具jQuery的雏形了
7、jQuery的改进远不止如此
1、jQuery 在兼容性方面做得很好，1.7 版本兼容到 IE 6
2、jQuery 还有动画、AJAX 等模块，不止 DOM 操作
3、jQuery 的功能更丰富
4、jQuery 其实使用了 prototype，但这里没有使用
结语
其实这个时候你已经了解jQuery了，简单的说，jQuery就是一个封装好的函数库，将原生JS的各种API重新写成了高效率，高语义化，高兼容性的API，大大满足了大家‘懒’的需求。
欢迎大家指正文中错误，感谢饥人谷，感谢方方老师~
