jQuery不过如此

简易的JQuery

1.1单纯的获取所有兄弟元素

var allChildren=item3.parentNode.children;
var array={length:0}
for(let i=0;i<allChildren.length;i++){
  if(allChildren[i]!==item3){
    array[array.length]=allChildren[i];   //这里array[array.length]换成array[i]可不可以？不可以，因为会跳过一个i
    array.length+=1;
  }
}

1.2为一个元素添加类
2.1 封装函数

function getSiblings(node){}

2.2 封装函数

function addClass(node, classes){}

3.命名空间

我们可以仿照document.xxx也造一个类似的dom.xxx的形式，这样就是命名空间
好处：
1.别人不知道你叫什么
2.防止不知不觉将所有变量覆盖

var dom = {}
dom.getSiblings(node)
dom.addClass(node, {a: true, b: false})

4.能不能把 node 放在前面

node.getSiblings()
node.addClass()

方法一：扩展 Node 接口
直接在 Node.prototype 上加函数
item3.getSiblings() ==>item3.getSiblings.call(item3)
item3.addClass({a:true,b:false,c:true)==>item3.addClass.call(item3,{a:true,b:fals,c:true})
方法二：新的接口 BetterNode(构造函数）

 function Node2(node){
     return {
         element: node,
         getSiblings: function(){

         },
         addClass: function(){

         }
     }
 }
 let node =document.getElementById('x')
 let node2 = Node2(node)
 node2.getSiblings()
 node2.addClass()

第二种叫做「无侵入」。相比于第一种，改原型会互相覆盖
5.把 Node2 改个名字吧

function jQuery(node){
    return {
        element: node,
        getSiblings: function(){

        },
        addClass: function(){

        }
    }
}
let node =document.getElementById('x')
let node2 =jQuery(node)
node2.getSiblings()
node2.addClass()

6.再给个缩写吧 alias
window.$ = jQuery
7.如果传的是类选择器 ID选择器，怎么办？(类型检测）
代码

window.jQuery=function(nodeOrSelector){
  let node;
  if(typeof nodeOrSelector==='string'){
    node=document.querySelector(nodeOrSelector)
  }else{
  node=nodeOrSelector
  }  
  ....
  ...
  ...
}

8.如果操作多个节点，怎么办？
代码
9.获取文本

jQuery 不过如此？

jQuery 在兼容性方面做得很好，1.7 版本兼容到 IE 6
jQuery 还有动画、AJAX 等模块，不止 DOM 操作
jQuery 的功能更丰富
jQuery 使用了 prototype，我们没有使用，等讲了 new 之后再用

---

课堂上的代码：

http://js.jirengu.com/binuwigera/1/edit?html,js,output
http://js.jirengu.com/govatixevu/1/edit?js,output
http://js.jirengu.com/menosegapu/1/edit?js,output