最近开始学习 jQuery，jQuery 是 JavaScript 最受欢迎的一个库，它让原本极不方便的JS DOM API 变得十分易用，那么它是如何做到的呢？

要理解jQuery原理，我们可以用现有的DOM知识尝试写一个类似jQuery的API

---

首先我们写一个列表，给它加上id

以选项3为节点，找到其兄弟节点（代码见截图）

通过 var allChildren = item3.parentNode.children 获取 item3 父节点的所以子节点，然后遍历所有子节点，选出不是 item3 的所有节点，这样就找到选项3的所以兄弟节点啦。可以 console.log一下

（由于array是伪数组，不能用push的方法，所以我们用到 array[array.length] = allChildren[i] 的方法）

然后我们把这些代码封装一下（给个函数）

封装的好处有很多：给代码一个名字方便调用；形成局部变量可以避免覆盖JS原始变量（立即调用函数）等

给这个函数取个名字，如 getSiblings；把 item3 换成 node，这样输入任意节点都可以使用这个函数了；注意不要忘记 return

这样我们就得到了一个函数 function getSiblings(node){} 

---

现在你已经学会如何封装一个函数，让我们尝试封装函数：function addClass(node, classes){}

现在我们要给 item3 加 class属性

首先我们声明一个 classes 对象，里面有 a、b、c 三个属性；同时分别给它们一个布尔值，方便 add 和 remove；遍历各个属性。

可以看到，class b、c已经被添加到 item3 中了

同样我们来封装一下这些代码

现在，只要你给一个 node 和 classes 于此函数，就可以给 该节点添加 classes所包含的正确属性

---

命名空间：

给封装的函数一个名字，方便其他人使用，同时防止与前人命名的冲突。

var Adadom = {}

Adadom.getSiblings(node)

Adadom.addClass(node, {a: false, b: true,c:true})

得到代码如下，这样做也能避免将JS 提供的DOM覆盖

Ada 的 dom

能不能把node 放在前面

node.getSiblings()

node.addClass()

方法一：扩展 Node 接口

直接在 Node.prototype 上加函数

Node 如何取到 item3？用 this ，why？把上面写成 .call 的形式，因为 this 是call 的第一个参数。那么用 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()

这种方法叫做「无侵入」即对 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()

再给个缩写吧:alias

window.$ = jQuery

即 var node2 = $(node)

但是为了防止记混 node2 到底有没有引入 jQuery

大家通常这样写 var $node2 = $(node)

---

完整代码见 github

至此，你已经知道 jQuery 是个什么了：它就是一个函数，是 JS 原始 DOM的扩展，便于我们更好得使用JS写代码的加强版 DOM API。

本文主要用于个人学习使用