实现两个jQuery的API（addClass、text）

目的

给所有的div添加一个叫“red”的class，为方便看到代码的效果，设置如下css，在设置“red”成功时，文本会变红
```
.red{
  color:red;
}
```
将所有的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>

正文

完整代码及思路如下，效果点击这里

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) 编辑收藏举报

刷新页面返回顶部

实现两个jQuery的API（addClass、text）

目的

正文

公告