JQuery初探

• jQuery 在兼容性方面做得很好，1.7 版本兼容到 IE 6
• jQuery 还有动画、AJAX 等模块，不止 DOM 操作
• jQuery 的功能更丰富

基础(对象转换)

var div = document.getElementById('x')
var $div = $('#x')

jQuery的原型为jQuery.prototype

div 和 \$div 的联系是：
\$div === \$(document.getElementById('x'))
div === \$(div)[0]
div 和 \$div 的区别是：
document.getElementById()返回的是DOM对象，而$()返回的是jQuery对象

自己实现jQuery

首先封装两个函数
addclass()

nodes.addClass = function(classes) {
    //classes是一个数组//
    classes.forEach((value) => {
      for(let i = 0; i< nodes.length; i++){   
          //遍历所有节点//
        nodes[i].classList.add(value)
       }
    })
  }

setText()

nodes.setText = function(text) {
    if (text === undefined){
      var texts = []
      for(let i = 0;i< nodes.length; i++){
        texts.push(nodes[i].textContent)
      }
      return texts
      //text()为空时获取原有的text//
    }else{
      for(let i = 0;i< nodes.length; i++){
        nodes[i].textContent = text
      }
      //不为空时改变text//
    }
  }

获取节点

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
   }
  }  
  return nodes
}

调用

window.$ = jQuery
//缩写
var $div = $('div')
$div.addClass('red') 
$div.setText('hi')

API

$nodes.addClass(function(index,currentClass){
      return 'sd-'+index;    
    });  
//依次添加sd-0 sd-1 sd-2 sd-3 的class//

var classes = ['red','blue','black'];
$nodes.addClass(function(index,currentClass){
      return classes[index];    
    });  
//前三项就会添加red、blue、black的class//


$(x).on('click', function(){    
    $nodes.toggleClass('red');  
})
//建一个button并给它id为x每点一次button，nodes就增加或删除'red'class//