最近開始學(xué)習(xí) jQuery调炬，jQuery 是 JavaScript?最受歡迎的一個(gè)庫语盈，它讓原本極不方便的JS DOM API 變得十分易用，那么它是如何做到的呢缰泡？
要理解jQuery原理刀荒，我們可以用現(xiàn)有的DOM知識(shí)嘗試寫一個(gè)類似jQuery的API
首先我們寫一個(gè)列表，給它加上id
以選項(xiàng)3為節(jié)點(diǎn)棘钞，找到其兄弟節(jié)點(diǎn)（代碼見截圖）
通過?var allChildren = item3.parentNode.children 獲取 item3 父節(jié)點(diǎn)的所以子節(jié)點(diǎn)缠借，然后遍歷所有子節(jié)點(diǎn)，選出不是 item3 的所有節(jié)點(diǎn)宜猜，這樣就找到選項(xiàng)3的所以兄弟節(jié)點(diǎn)啦泼返。可以 console.log一下
（由于array是偽數(shù)組姨拥，不能用push的方法绅喉，所以我們用到?array[array.length] = allChildren[i] 的方法）
然后我們把這些代碼封裝一下（給個(gè)函數(shù)）
封裝的好處有很多：給代碼一個(gè)名字方便調(diào)用；形成局部變量可以避免覆蓋JS原始變量（立即調(diào)用函數(shù)）等
給這個(gè)函數(shù)取個(gè)名字叫乌，如 getSiblings柴罐；把 item3 換成 node，這樣輸入任意節(jié)點(diǎn)都可以使用這個(gè)函數(shù)了憨奸；注意不要忘記 return
這樣我們就得到了一個(gè)函數(shù)?function getSiblings(node){}?
現(xiàn)在你已經(jīng)學(xué)會(huì)如何封裝一個(gè)函數(shù)革屠，讓我們嘗試封裝函數(shù)：function addClass(node, classes){}
現(xiàn)在我們要給 item3 加 class屬性
首先我們聲明一個(gè) classes 對(duì)象，里面有 a排宰、b似芝、c 三個(gè)屬性；同時(shí)分別給它們一個(gè)布爾值额各，方便 add 和 remove国觉；遍歷各個(gè)屬性吧恃。
可以看到虾啦，class b、c已經(jīng)被添加到 item3 中了
同樣我們來封裝一下這些代碼
現(xiàn)在，只要你給一個(gè) node 和 classes 于此函數(shù)傲醉，就可以給 該節(jié)點(diǎn)添加 classes所包含的正確屬性
命名空間：
給封裝的函數(shù)一個(gè)名字蝇闭，方便其他人使用，同時(shí)防止與前人命名的沖突硬毕。
var Adadom = {}
Adadom.getSiblings(node)
Adadom.addClass(node, {a: false, b: true,c:true})
得到代碼如下呻引，這樣做也能避免將JS 提供的DOM覆蓋
能不能把node 放在前面
node.getSiblings()
node.addClass()
方法一：擴(kuò)展 Node 接口
直接在 Node.prototype 上加函數(shù)
Node 如何取到 item3？用 this 吐咳，why逻悠？把上面寫成 .call 的形式，因?yàn)?this 是call 的第一個(gè)參數(shù)韭脊。那么用 this 就顯而易見了
但是這樣太亂了童谒，總不能所有人都在Node原型上加屬性吧？所以有了方法2
方法二：新的接口 BetterNode
示例如下
function Node2(node){
? ? return {
? ? ? ? element: node,
? ? ? ? getSiblings: function(){
? ? ? ? },
? ? ? ? addClass: function(){
? ? ? ? }
? ? }
}
let node =document.getElementById('x')
let node2 = Node2(node)
node2.getSiblings()
node2.addClass()
這種方法叫做「無侵入」即對(duì) Node 無侵入
把 Node2 改成jQuery吧
function jQuery(node){
? ? return {
? ? ? ? element: node,
? ? ? ? getSiblings: function(){
? ? ? ? },
? ? ? ? addClass: function(){
? ? ? ? }
? ? }
}
let node =document.getElementById('x')
let node2 =jQuery(node)
node2.getSiblings()
node2.addClass()
再給個(gè)縮寫吧:alias
window.$ = jQuery
即 var node2 = $(node)
但是為了防止記混 node2 到底有沒有引入 jQuery
大家通常這樣寫 var $node2 = $(node)
完整代碼見?github
至此沪羔，你已經(jīng)知道 jQuery 是個(gè)什么了：它就是一個(gè)函數(shù)饥伊，是 JS 原始 DOM的擴(kuò)展，便于我們更好得使用JS寫代碼的加強(qiáng)版 DOM API蔫饰。
本文主要用于個(gè)人學(xué)習(xí)使用
