实现两个jQuery的API(addClass、text)

目的

  1. 给所有的div添加一个叫“red”的class,为方便看到代码的效果,设置如下css,在设置“red”成功时,文本会变红
    .red{
      color:red;
    }
  2. 将所有的div中的textContent变为“Hi”,HTML代码如下:
  • <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
    </head>
    <body>
      <div class="item1">选项1</div>
      <div class="item2">选项2</div>
      <div class="item3">选项3</div>
      <div class="item4">选项4</div>
      <div class="item5">选项5</div>
    </body>
    </html>

正文

  1. 完整代码及思路如下,效果点击这里
    window.jQuery=function(nodeOrSelector){
      //1 新建一个对象nodes
      var nodes = {};
    
      //2 如果nodeOrSelector传入的是字符串(选择器),获取对应的所有的元素放到nodes中(伪对象);
      //2 如果nodeOrSelector传入的是一个节点,放到则把nodeOrSelector放到nodes伪数组的第一个值中
      if (typeof nodeOrSelector === 'string') {
        var temp = document.querySelectorAll(nodeOrSelector);
        for (var i = 0; i < temp.length; i++) {
          nodes[i] = temp[i];
        }
        nodes.length = temp.length;
      } else if (nodeOrSelector instanceof Node) {
        nodes = {
          0: nodeOrSelector,
          length: 1
        };
      }
    
      //3 在nodes中添加一个addClass的属性
      nodes.addClass = function(classes) {
        for (var i = 0; i < nodes.length; i++) {
          nodes[i].classList.add(classes);
        }
      };
    
      //4 在nodes中添加一个text的属性,当text没有值时,是获取文本节点,中间有值时是设置文本节点
      nodes.text = function(text) {
        if(text===undefined){
          texts=[];
          for (var i = 0; i < nodes.length; i++) {
            texts.push(nodes[i].textContent);
          }
          return texts;
        } else {
          for (var i = 0; i < nodes.length; i++) {
            nodes[i].textContent = text;
          }
        }
      };
      return nodes;
    
    };
    
    window.$ = jQuery;
    var $div = $('div');
    $div.addClass('red');
    $div.text('Hi'); 

     

posted @ 2018-05-26 11:23  Nola  阅读(154)  评论(0编辑  收藏  举报