jQuery优点
虽然jQuery已经渐渐的退出了历史舞台，但是现在市场上还有大量的网站使用该框架，因为它具有以下优点。
- 轻量级：文件大小非常小，压缩包只有18k左右。
2.强大的选择器：不仅支持css里所有选择器还有jQuery独有的选择器。
3.DOM封装
jQuery封装了大量常用DOM操作。
4.兼容性：兼容性较好，可以在大部分常见的浏览器兼容。
5.链式编程：对发生在同一个jQuery对象上进行一组动作。
6.丰富的插件支持
核心理念就是‘“write less,do more”
今天就自己试着还原一下jQuery。
封装一个简单的jQuery
封装函数前先需要明确功能需求，需要封装两个函数，第一个函数获取节点所有的兄弟节点。
第二个函数用来给上述获取到的节点增加class和css属性。
1.第一个函数
function getSiblings(node){
let allChildren = node.parentNode.allChildren
let array = {
length:0;
}
for (let i =0;i<allChildren.length; i++){
if (allChildren[i] === node){
array[array.length] !== allChildren[i]
array.length++
}
}
return array
}
2.第二个函数
function addClass(node,classes){
classes.forEach((value)=> node.classList.add(value))
}
// 遍历classes中的value，给节点增加所有classes中的value
3.命名空间
为了方便使用，需要给上面的函数增加命名空间
var swDOM = {};
swDOM.getSiblings(nodes);
swDOM.addClass(node,['a','b','c'])
//这样下次直接调用swDOM.xxx()就可以调用函数。
//但是swDOM.xxx调用起来还是太复杂，就可以变成如下
window.$ = swDOM
4.把node放到前面
为了让这两个函数看起来更像jQuery。我们需要把node放到addClass和getSibling前面。有两种方法：
（1）拓展node接口，在Node.prototype加上函数。
Node.prototype.addClass = function(classes){
classes.forEach((value)=> node.classList.add(value))
}
这样就可以直接操作xxx.addClass(['a','b','c'])
(2)创造一个新的接口
function Node2(node){
return {
element: node,
getSiblings: function(){
},
addClass: function(){
}
}
}
let node =document.getElementById('x')
let node2 = Node2(node)
node2.getSiblings()
node2.addClass()
最后，再在之前的基础上对代码进行修改，使之能获取文本。
window.jQuery = function(nodeOrSelector) {
let nodes = {}
if (typeof nodeOrSelector === 'string'){
let temp =document.querySelectorAll(nodeOrSelector)
for(let i = 0 ; i<temp.length;i++){
nodes[i]=temp[i]
}
nodes.length = temp.length
}
else if(nodeOrSelector instanceof Node){
nodes = {
0:nodeOrSelector,
length:1
}
}
nodes.text = function(text) {
if (text === undefined){
var texts = [];
for (let i = 0; i< nodes.length;i++){
texts.push(nodes[i].textContent)
}
return texts
} else{
for (let i=0;i<nodes.length;i++){
nodes[i].textContent = text
}
}
}
return nodes
}
var node2 = jQuery('ul>li');
node2.text('hi')
这样就可以将ul>li中所有文本改为hi。
这样一个简单的jQuery就完成啦
