简版jQuery

方方讲课了

一、封装函数

1.function getSiblings(node){ } 和function addClass(node,classes){ }

(1)HTML代码块

  
选项1
  
选项2
  
选项3
  
选项4
  
选项5

(2)JS代码块

（封装前）

//返回array
var allChildren=item3.parentNode.children
var array={length:0}
for (let i=0;i

(封装后）

//开始封装，使用function getSiblings(node){ }
function getSiblings(node){ 
var allChildren=node.parentNode.children
var array={length:0}
for (let i=0;i

二、命名空间

window.ffdom={}
ffdom.getSiblings=function(node){
  var allChildren=node.parentNode.children
  var array={lenth:0}
  for(let i=0;inode.classList.add(value) )
}
ffdom.getSiblings(item3)
ffdom.addClass(item3,['a','b','c'])
//上面两行代码可以更换为以下两行
//item3.getSiblings()
//item3.addClass(['a','b','c'])

三、把node放在前面

方法一

Node.prototype.getSiblings=function(){
  var allChildren=this.parentNode.children
  var array={length:0}
  for(let i=0;ithis.classList.add(value) )
}
//item3.getSiblings()
//item3.addClass(['a','b','c'])
//下面两句加call的代码和上面两句作用相同
item3.getSiblings.call(item3)
item3.addClass.call(item3,['a','b','c'])

方法二

window.Node2=function(node){
  return {
    getSiblings:function(){
    var allChildren=node.parentNode.children
    var array={length:0}
    for(let i=0;inode.classList.add(value))
}
  }
}
var node2=Node2(item3)
node2.getSiblings()
node2.addClass(['a','b','c'])

四、引入jQuery

版本一

window.jQuery=function(nodeOrSelector){
  let node 
  if(typeof nodeOrSelector==='string'){
    node=document.querySelector(nodeOrSelector)
  }else{
    node=nodeOrSelector
  }
  return {
    getSiblings:function(){
      var allChildren=node.parentNode.children
      var array={length:0}
      for(let i=0;inode.classList.add(value))
    }
  }
}
var node2=jQuery('#item3')
node2.getSiblings()
node2.addClass(['a','b','c'])

版本二

window.jQuery=function(nodeOrSelector){
  let nodes={}
  if(typeof nodeOrSelector==='string'){
    let temp=document.querySelectorAll(nodeOrSelector)
    for(let i=0;i{
   for(i=0;ili')
node2.addClass(['pink'])
node2.setText('hi')

版本三

window.jQuery=function(nodeOrSelector){
  let nodes={}
  if(typeof nodeOrSelector==='string'){
    let temp=document.querySelectorAll(nodeOrSelector)
    for(let i=0;i{
   for(let i=0;ili')
node2.addClass(['blue'])
node2.text('hi')

版本四

HTML

  
  
  



  
选项1
  
选项2
  
选项3
  
选项4
  
选项5

  X

CSS

.red{
  color:red;
}
.blue{
  color:blue;
}
.green{
  color:green;
}
.yellow{
  color:yellow;
}
.black{
  color:black;
}

JS

var nodes=jQuery('ul>li')

var classes=['red','blue','green','yellow','black']
x.onclick = function(){
  nodes.addClass(function(index,currentClass){
     return classes[index] 
   })
}

版式五

HTML

  
  
  



  
选项1
  
选项2
  
选项3
  
选项4
  
选项5

  X

CSS

.red{
  color:red;
}
.blue{
  color:blue;
}
.green{
  color:green;
}
.yellow{
  color:yellow;
}
.black{
  color:black;
}

JS

var nodes=jQuery('ul>li')

var classes=['red','blue','green','yellow','black']
x.onclick = function(){
  nodes.removeClass('red').addClass('green')
}

版本六

//版本五的JS修改版
var $nodes=$('ul>li')
var classes=['red','blue','green','yellow','black']
x.onclick = function(){
  $nodes.removeClass('red').addClass('green')
}

五、总结

1.命名空间的好处：便于寻找和表述
2.hash表是key，value设计
3.jQuery实质上是一个构造函数
4.闭包的解释：如果一个函数用到了它在外面声明的变量，那么这个变量加上这个函数就叫做闭包
5.闭包的好处：可以一直用nodes来操作api