美文网首页
一个例子说明jQuery API 的实现

一个例子说明jQuery API 的实现

作者: elsa919 | 来源:发表于2019-03-13 17:45 被阅读0次

jQuery模式的初理解:

jQuery是一个升级的DOM,接收旧一个元素返回一个新对象,这个新的对象有新的API;内部还是去调用旧的API。

所以jQuery实质上是一个构造函数,接受一个参数,这个参数可能是节点,然后返回一个对象去操作节点。

下面举例子说明实现一个jQuery的API两个功能有:
1.给获取到的元素增加class
2.给获取到的元素设置文本

首先分别新建html、javaScript、css文件,并且在html文件里引进javaScript和css文件。

window.jQuery = function(nodeOrSelector){
  var nodes = {};
  if(typeof nodeOrSelector === 'string'){
    let temp = document.querySelectorAll(nodeOrSelector);
//     console.log(temp);
    for(let i=0;i<temp.length;i++){
      nodes[i] = temp[i];
    }
//     console.log(nodes)
    nodes.length = temp.length;
  }else if(nodeOrSelector instanceof Node){
    nodes={
      0:nodeOrSelector,
      length : 1
    }
//     console.log(nodes)
  }
  nodes.addClass = function(classes){
    //判断传进来的参数是字符串还是数组
    if(typeof classes === 'string'){
      for(let i=0;i<nodes.length;i++){
          nodes[i].classList.add(classes);
      }
      console.log("lalalal")
    }else if(classes instanceof Array){
      classes.forEach(value =>{
        for(let i=0;i<nodes.length;i++){
          nodes[i].classList.add(value);
        }
      })
    }  
  }
  nodes.setText = function(value){
    for(let i=0;i<nodes.length;i++){
      nodes[i].textContent = 'hi';
    }
  }
  return nodes
}
window.$ = jQuery


var $div = $('div')
$div.addClass(['yellow','green','blue']) //可将所有 div 的 class 添加数组里面的元素
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi

相关文章

网友评论

      本文标题:一个例子说明jQuery API 的实现

      本文链接:https://www.haomeiwen.com/subject/eemtmqtx.html