一、為什么會出現(xiàn)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的偽數(shù)組，上面獲取的結(jié)果如下：
所以我們需要遍歷一下，給每個
li加上class
for(let i=0; i<lies.length; i++){
lies[i].classList.add(className)
}
然后這個時候呢，我們已經(jīng)用原生JS的API達到了需求，是不是很麻煩？好吧，其實也沒有很麻煩……但是為了更懶，不，是為了更加效率，我們可以對他進行一系列的改進。（PS:有些需求用原生JS真的很麻煩，這就促使了大家為了效率而發(fā)明創(chuàng)造）
三、我想用更簡短的代碼實現(xiàn)上述的功能，并且造福同行，如何實現(xiàn)呢？
1、封裝函數(shù)
封裝一個getNodes()函數(shù)
function getNodes(selector){
var nodes = document.querySelectorAll(selector)
return nodes
}
var lies = getNodes('ul > li')
封裝一個addClass()函數(shù)
function addClass(node,className){
for(let i=0; i<lies.length; i++){
node[i].classList.add(className)
}
}
addClass(lies,'red')
2、命名空間-給他們加上一個名字
創(chuàng)建命名空間可以很好的避免全局變量名沖突，什么意思呢，就是我可以叫g(shù)etNodes()、 addClass()，別人也可以啊，這樣就很容易發(fā)生互相覆蓋和沖突。
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或者選擇器放在函數(shù)的參數(shù)傳進去，是否可以把node放在前面，從而更加的方便呢？
方法一：擴展 Node 接口，直接在 Node.prototype 上加函數(shù)
這個方法會存在一個問題：可能會覆蓋原有Node.prototype的函數(shù)，而且可能會互相影響。
方法二：新的接口 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')，這里已經(jīng)初具jQuery的雛形了
7、jQuery的改進遠不止如此
1、jQuery 在兼容性方面做得很好，1.7 版本兼容到 IE 6
2、jQuery 還有動畫、AJAX 等模塊，不止 DOM 操作
3、jQuery 的功能更豐富
4、jQuery 其實使用了 prototype，但這里沒有使用
結(jié)語
其實這個時候你已經(jīng)了解jQuery了，簡單的說，jQuery就是一個封裝好的函數(shù)庫，將原生JS的各種API重新寫成了高效率，高語義化，高兼容性的API，大大滿足了大家‘懶’的需求。
歡迎大家指正文中錯誤，感謝饑人谷，感謝方方老師~
