api文档

实现原理 简略版

jquery构造的对象前面加上 $

var $node = $('ul>li')

  1. window.jQuery = function(nodeOrSelector) {
  2.   let nodes = {};
  3.   if (typeof nodeOrSelector === 'string') {
  4.     let temp = document.querySelectorAll(nodeOrSelector)
  5.     for (let i = 0; i < temp.length; i++) {
  6.       nodes[i] = temp[i]
  7.     }
  8.     nodes.length = temp.length
  9.   } else if (nodeOrSelector instanceof Node) {
  10.     nodes = {
  11.       0: nodeOrSelector,
  12.       length: 1
  13.     }
  14.   }
  16.   nodes.addClass = function(...classes) {
  17.     classes.forEach(value=>{
  18.       for(let i=0;i<nodes.length;i++){
  19.         nodes[i].classList.add(value)
  20.       }
  21.     })
  22.   }
  23.   nodes.getText = function(){
  24.     var texts = []
  25.     for(let i=0;i<nodes.length;i++){
  26.       texts.push(nodes[i].textContent)
  27.     }
  28.     return texts;
  29.   }
  30.   nodes.setText = function(text){
  31.     for(let i=0;i<nodes.length;i++){
  32.       nodes[i].textContent = text
  33.     }
  34.   }
  35.   nodes.text = function(text){
  36.     console.log(this)
  37.     if(text){
  38.       this.setText(text)
  39.     }else{
  40.       return this.getText();
  41.     }
  42.   }
  44.   return nodes;
  45. }
  46. window.$  = jQuery
  48. var $div = $('div')
  49. $div.addClass('red')
  50. $div.setText('hi')

实现细节

  1. 构造函数实现：传入dom节点或选择器，返回伪数组对象，对象上可以进行节点的操作和获取

  2. 判断传入的是节点还是选择器，构造伪数组对象

    1. window.jQuery = function(nodeOrSelector) {
    2. let nodes = {};
    3. if (typeof nodeOrSelector === 'string') {
    4.  let temp = document.querySelectorAll(nodeOrSelector)
    5.  for (let i = 0; i < temp.length; i++) {
    6.    nodes[i] = temp[i]
    7.  }
    8.  nodes.length = temp.length
    9. } else if (nodeOrSelector instanceof Node) {
    10.  nodes = {
    11.    0: nodeOrSelector,
    12.    length: 1
    13.  }
    14. }
    15. ｝
  1. 实现addClass方法
    1. nodes.addClass = function(...classes) {
    2.  classes.forEach(value=>{
    3.    for(let i=0;i<nodes.length;i++){
    4.      nodes[i].classList.add(value)
    5.    }
    6.  })
    7. }
  1. 实现获取设置文本
    1. nodes.getText = function(){
    2.  var texts = []
    3.  for(let i=0;i<nodes.length;i++){
    4.    texts.push(nodes[i].textContent)
    5.  }
    6.  return texts;
    7. }
    8. nodes.setText = function(text){
    9.  for(let i=0;i<nodes.length;i++){
    10.    nodes[i].textContent = text
    11.  }
    12. }
    13. nodes.text = function(text){
    14.  console.log(this)
    15.  if(text){
    16.    this.setText(text)
    17.  }else{
    18.    return this.getText();
    19.  }
    20. }
  1. 给函数设置一个别名
    1. window.$  = jQuery
  1. 返回对象，调用方法
    1. var $div = $('div')
    2. $div.addClass('red')
    3. $div.setText('hi')