自制jQuery

自己做一个jQuery的思路

---

封装两个函数 → 添加命名空间 → 扩展Node原型/无侵入设置

  
text
  

    
选项1
    
选项2
    
选项3
    

1、封装两个函数

• 获取所有兄弟元素

//javaScript代码
function getSiblings(node) {
  var allChlidren = node.parentNode.chlidren
  var array = { 
    length：0 
  }
  for(let i=0;i

• 给目标元素添加class

//javaScript代码
function addClass(node,classes){
  for (let key in classes){
    var value = classes[key]
    var methodName = value? ' add ' : ' remove ' 
    node.classList[methodName](key)
  }
}
// 调用addClass()
addClass(item1,{ a:ture , b:false} )

//语法基础
classList[methodName === classList.methodName

2、添加命名空间

//javaScrip代码
window.textdom = {} // yui
textdom.getSiblings=function (node) {
  var allChlidren = node.parentNode.chlidren
  var array = { 
    length：0 
  }
  for(let i=0;i

了解不扎实的语法基础： for in 语法

3、 扩展Node原型/无侵入设置

上面的函数调用方法都是textdom.addClass()这样的，假如设想，直接以目标元素为对象进行方法调用，如item2.getClass('red'),方法有两种。

• 扩展Node原型

Node.prototype.getSiblings =function ( ) {
  var allChlidren = this.parentNode.chlidren
  var array = { length：0 }
  for(let i=0;i this.classList.add( value ) 
  )
}
//调用函数：
item3.getSiblings.call(items) 
//等价于item3.getSiblings()
item3.addClass.call( item1,[ 'text' , 'red' , 'blue' ] )
//等价于item3.addClass( ['text' , 'red' , 'blue' ] )

① this知识点 : this是call()的第一个参数
② 箭头函数
③函数调用： f.call ( asThis , input1 , input2 )
其中asThis会被当作this，[ input1 , input2 ]会被当作arguments

• 无侵入设置

第一版 基本实现直接目标元素调用的目的

//javaScript
window.Node2 =  function( node ){
  return{
    getSiblings : function( ){
      var allChlidren = this.parentNode.chlidren
      var array = { length：0 }
      for(let i=0;i this.classList.add(value) 
      )
    } 
  }
}
var item3 = Node2(item3)
//实现调用
item3.getSiblings()
item3.addClass([ ' red ' ])

console.dir(node2) //得到的是一个原型为Object.prototype，里面含有addClass()等方法的对象

第二版 可以使用选择器确定目标元素

window.Node2 =  function( nodeOrSelector ){
  let node
  if(typeof nodeOrSelector === 'string' ){
    node= document.querySelector(nodeOrSelector)
  }else{
    node= nodeOrSelector
  }
  return{
    getSiblings : function(){
      var allChlidren =node.parentNode.chlidren
      var array = { length：0 }
      for(let i=0;inode.classList.add(value)
      )
    } 
  }
}
var item3= Node2(item3)

使用了闭包

第三版 可以实现对多个目标元素设置

window.Node2 =  function( nodeOrSelector ){
    let nodes = { }
    if( typeof nodeOrSelector === 'string' ){
        let temp =  document.querySelectorALL ( nodeOrSelector)
        for(let i=0 ; i {
            for( let i=0 ; i< nodes.length ; i++ ){
                nodes[i].classList.add(value)
            }
        })
    } 
    nodes.getText = function ( ){
        var texts= [ ]
        for ( let i=0 ; i

了解jQuery的一些特点

---

• jQuery是一个构造函数，这次自制的jQuery没有使用到prototype。实际上jQuery构造的实例函数原型是jQuery.prototype。

• jQuery实例函数的构成：
  jQuery的实例是一个数组对象，每个key对应的是一个node节点对象。

  
  
  

• jQuery除了DOM操作外，还有动画、AJAX 等模块。

• 一道常考的面试题

var div = document.getElementById('x');
var $div = $('#x');
请说出 div 和 $div 的联系和区别。

联系：
$div = $( div ) 可以将div变成$div
div = $div [0] 或 div = $div.get(0)可以将$div变成div
区别:
div 是一个DOM(element)对象，它的原型是node.prototype
$div是由jQuery函数构建的数组对象，它的原型是jQuery.prototype,他的属性和方法有0 1 2.....length selector 等等