前言（可忽略）：最近因为一些自己的事情学习停滞了一段时间，再捡起来时就非常的艰涩，极大的打击了我的学习热情，结果导致我开始了漫不经心的学习模式，偷懒时间远远大于学习时间，恶性循环下，导致学习进程大幅的落后，在学习中变得焦躁盲目的想追赶进度不能踏实的学习，所以正在慢慢调整状态之中，在这里以惨痛经历奉劝各位学习的朋友们，无论再忙都不要停下学习的脚步，哪怕只能抽空翻翻自己的笔记，也要远远好过让学习的状态和记忆从脑子中溜走，一起加油。
终于开始学习jQuery了，早先在学习原生JS时，多次听到方方提到，这里要是用了jQuery会方便的多，故而一直很感兴趣，我们知道jQuery是目前使用非常广泛的JavaScript函数库，今天我们就通过写出一个类似jQuery的API来试着理解jQuery的原理。
一、封装函数
首先先写出一个列表，并给出id，之后都将对其操作。
image
接着我们来满足两个需求：
1，获取到一个节点的所有兄弟姐妹
2，给节点添加多个类名
需求1：获取到一个节点的所有兄弟姐妹
我们以选中节点item2为例，获得它所有的兄弟姐妹，我们想到了DOM API 中的ParentNode.children属性，返回该节点的所有元素孩子。
我们的想法就很简单了，返回节点父亲的所有孩子，然后遍历这个伪数组（children属性返回一个HTMLCollection实例，是一个伪数组），将不等于自身节点的其他节点放入一个空对象里。
image
值得注意的是，我们所声明的array是一个伪数组，所以在遍历后不能使用数组的push方法，那么怎么把value放进数组呢？所以使用array[array.length]=allChildren[i]的方法（不能放i,因为我们设置了if语句，会有i跳过了）
代码已经实现，我们把它封装成一个函数，方便我们调用。
image
如图，我们就获得了一个函数方法 getSiblings(node).
需求2：给节点添加多个类名
同理，我们再完成需求2，并进行封装。
我们可以生成一个classes数组，直接用数组的forEach方法。
或者classes伪数组，属性并对应布尔值，遍历它，然后使用dom api 的node.classList.add或者remove。
然后封装函数。
声明伪数组
声明classes是数组
两者都可以实现添加多个class这样一个功能。
这样我们两个需求就已经都实现了。
二、命名空间
我们获得了两个函数：getSiblings() , addClass() ,他们都是操纵节点，那我们能把他们联系起来吗？所以我们可以把他们放到一个库里，给它命名，这就叫命名空间。
window.cydom = {}
cydom.getSiblings(node)
cydom.addClass(node,classes)
这样的好处一是别人可以知道我们库的名字，方便使用。二是避免不知不觉的把全局变量给覆盖了。
image
三、能不能把 node 放在前面
我们更习惯于把node放在前面，就像下面一样，怎么搞？
node.getSiblings()
node.addClass()
方法一：扩展node接口
也就是直接在 Node.prototype 上添加这个函数，这样我们的节点就可以继承到这个函数方法了。
image
这样就可以node放在前面了，至于上图中this，还记得call吗？call的第一个参数可以用this得到。
item2.getSiblings() 等同于 item2.getSiblings.call(item2)
item2.addClass({a:true,b:true}) 等同于 item2.addClass.call(item2,{a:true,b:true})
但是这样还是有缺点在的，会不会已声明过这个函数，然后我们调用时就被覆盖了。
方法二：构造新的接口
image
这样的方法叫[无侵入]。值得注意的是，getSiblings() 和 addClass() 没有传入参数，为什么代码不用this，这是因为我们第一步就已经传入节点，也就是从新接口内传入了。
四、我们把Node2改个名字吧
不用说你应该也知道我想要改什么了吧
image
五、再给个缩写吧:alias
window.$ = jQuery
image
这里一个小tips：当一个对象是由 $或jQuery构造出来的，你就在这个对象前也加上$，表示他是jQuery的对象，这样就不会错用成dom api了。即 var $node2 = $(node)。
六、传入非节点
我们来试一下操纵多个节点，比如对列表中多个节点均添加class
我们先声明一个对象，然后对传入参数进行判断，如果传入的是字符串，就用document.querySelectorAll()方法来选择该节点，如果传入的是节点，我们也把它放入到伪数组中，因为querySelectorAll()返回的也是伪数组，所以我们保持统一。
然后我们就可以直接把我们的两个属性添加上去了。
image
这样我们就简单理解了jQuery了，不过真正的jQuery当然更强大，比如：
1、jQuery 在兼容性方面做得很好，1.7 版本兼容到 IE 6
2、jQuery 还有动画、AJAX 等模块，不止 DOM 操作
3、jQuery 的功能更丰富
4、jQuery 使用了 prototype
------欢迎纠错~-------
网友评论