美文网首页
简单实现一个 jQuery 的 API

简单实现一个 jQuery 的 API

作者: hzl的学习小记 | 来源:发表于2018-09-02 18:31 被阅读0次

    一、先总体构建出函数如下

    window.jQuery = function(nodeOrSelector) {
      let nodes={};
      nodes.addClass = function(classes) {}
      nodes.setText = function(text) {}
      
      return nodes
    }
    

    二、
    获得函数要操作的对象,保持输出结果一致

      if(typeof nodeOrSelector==='string'){
        nodes=document.querySelectorAll(nodeOrSelector); // 伪数组
      }else if(nodeOrSelector instanceof Node){
        nodes={0:nodeOrSelector,length:1}
      }
    

    给node的添加class属性,用forEach实现;然后对每一个node都要加,所以在加上一个外循环

       for(let i=0;i<nodes.length;i++){
          classes.forEach((value)=>nodes[i].classList.add(value))}
    

    将node的textContent赋新的值;然后对每一个node都要加,所以在加上一个外循环

      for(let i=0;i< nodes.length;i++){
          nodes[i].textContent=text}
    

    三、具体调用
    先给jQuery个缩写
    window.$ = jQuery
    然后输入找到我们要操作的对象所需的参数'div',来找到所有的div
    再把这个函数赋值给变量,方便后面的调用,注意在变量前面加上$,表示是对jQuery函数的调用

    var $div = $('div')
    最后调用函数

    $div.addClass(['red'])
    $div.setText('hi')
    

    相关文章

      网友评论

          本文标题:简单实现一个 jQuery 的 API

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