jQuery初探

本身封裝兩個函數

// 有三個div
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
複製代碼

.red{
  background: red;
}
div{
  width:100px;
  height:100px;
  border: 1px solid green;
}
複製代碼

1. 第一個函數,查詢一個節點的兄弟姐妹

首先,先實現如下怎麼獲取一個節點的兄弟姐妹,並將其所有放到一個僞數組中:

var allChildren = item2.parentNode.children // 先找到item2的爸爸,而後在找到他全部的兒子
var array = {length: 0} // 初始化一個僞數組
for(let i=0;i<allChildren.length;i++){ // 遍歷獲取到的全部兒子
    if(allChildren[i] !== item2){ 
        array[array.length] = allChildren[i] // push到數組的一種方法,由於僞數組沒有push方法
        array.length += 1
    }
}
console.log(array) // {0: div#item1, 1: div#item2, 2: script, length: 3}
複製代碼

封裝上面的代碼:

// 封裝一個函數,接受一個參數
function getSiblings(node){
    var allChildren = node.parentNode.children 
	var array = {length: 0} 
	for(let i=0;i<allChildren.length;i++){ 
    	if(allChildren[i] !== node){ 
       	 	array[array.length] = allChildren[i] 
        	array.length += 1
    	}
	}
    return array
}
複製代碼

2. 給一個節點添加一個或者多個class

function addClass(node, classes){ // 接受兩個參數,一個是須要添加class的節點,另外一個是class名組成的數組
	for(let key in classes){
    var value = classes[key]
    if(value){
      node.classList.add(key)
    }else{
      node.classList.remove(key)
    }
  }
}
addClass(item3,{'a':true, 'b':false, 'c':true}) // 若是是true就添加,false就不添加
複製代碼

上面的代碼可見,node.classList出現了兩次, 若是出現相似的代碼,就存在代碼優化的可能

function addClass(node, classes){
  for(let key in classes){
    var value = classes[key]
    var methodName = value ? 'add' : 'remove'
    node.classList[methodName](key)
  }
}
addClass(item3,{'a':true, 'b':false, 'c':true})
複製代碼

上面的兩個函數,都是在操做節點,那麼能夠將兩個函數,使用命名空間設計模式進行整合,使其存在關聯性(例如document.getElementById,document.querySelector)

window.xxx = {}
xxx.getSiblings = getSiblings
xxx.addClass = addClass

// 使用
xxx.getSiblings(item3)
xxx.addClass(item3, {'a':true, 'b':false, 'c':true})
複製代碼

3. 將兩個函數(addClass, setText)封裝成一個jquery函數

window.jQuery = function(nodeOrSelector){ // 接受一個參數,能夠是node,也能夠是一個selector
  let nodes = {} // 聲明一個對象nodes
  if(typeof nodeOrSelector === 'string'){ // 若是是一個selector 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){ // 若是是一個node
    nodes = {0: nodeOrSelector, length: 1}
  }
    
  nodes.addClass = function(classes){
      for(let i=0;i<nodes.length;i++){
        nodes[i].classList.add(value)
      }
  }
    
  nodes.setText = function(text){
      for(let i =0;i < nodes.length;i++){
        nodes[i].textContent = text
    }
  }
  return nodes
}

// 使用
window.$ = jQuery

var $div = $('div')
$div.addClass('red')
$div.setText('hi')
複製代碼

面試題

var div = document.getElementById('x')
var $div = $('#x')
請說出div和$div的聯繫和區別?
複製代碼

答

1.div 返回了一個HTML DOM 對象,$div 返回了一個jquery 對象.
2.$div是包裝了dom對象後產生的,沒法使用dom對象的任何方法,好比innerHTML
3.若是是jquery 對象,前面加$, 若是是html dom對象,就是普通的命名.
4.div變成$div, 只須要用jquery構造函數將dom對象包裝起來就能夠了.
5.$div變成div
- jquery對象是一個hash,分別包含了一個key對應所包裝的dom 對象, length,還有__proto__原型 object(0), 裏面包含了jquery的一個方法和屬性.好比addClass,after,ajax等, 因此使用div[0]便可獲取到div
- 使用jquery自身所提供的方法, 經過get(index), 也能獲得相應的dom對象
6.div的屬性方法:getElementById appendChild innerHTML 等
7.$div的屬性方法: addClass after append等
複製代碼