jQuery初探

1. 基础

什么是jQuery对象？

--- 就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，可以使用jQuery里的方法。

jQuery的原型为 jQuery.prototype。

2. 题目

（1）题目1

<ul>
    <li></li>
    <li></li>
</ul>

请写出 $('li') 的结构。
答：$('li') 是一个对象，它自身的 key 有 length，它的原型（共享属性）为 jQuery.prototype。 jQuery.prototype 的 key 有 addClass、removeClass、text、html等。

（2）题目2

<div id=x></div>

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

请说出div 和 $div的联系和区别。
答：

1. div 和 $div的联系：

• $div === $(div) ，即 $(div) 可以将 div 封装成一个jQuery对象
• $div[0] === div ，即 $div 的第一项就是 div

2. div 和 $div的区别：

• div 的属性和方法有 nodetype、childNodes、firstChild等
• $div 的属性和方法有 addClass、removeClass、toggleClass等

3. jQuery对象和DOM对象的转换

• jquery转dom

var div = $div[0]  

这样jquery就转换成了DOM对象，或 div = $div.get(0)

• dom转jquery

var $div = $(div);  

这样dom对象div，就转换成了jquery对象。

4. 模拟jQuery实现API

window.jQuery = function(nodeOrSeletor){
  let nodes ={}
  if(typeof nodeOrSeletor === 'string'){
    let temp = document.querySelectorAll(nodeOrSeletor)
    for(let i=0;i<temp.length;i++){
      nodes[i] = temp[i]
    }
    nodes.length = temp.length
  }else if(nodeOrSeletor instanceof Node){
      nodes = {0: nodeOrSeletor,length: 1}
  }
  
  nodes.addClass = function(classes){
    classes.forEach((value) => {
      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 的 class 添加一个 red
$div.setText('你好') // 可将所有 div 的 textContent 变为 hi

5. 其他的API

$nodes.addClass('red');
$nodes.addClass(function(index,currentClass){
      return 'sd-'+index;    //这样nodes里每一项会依次添加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
    });  

$nodes.removeClass('red');

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