自己封装了jQuery里的一个小功能

代码展示

window.jQuery = function(selectorOrNodeId) {
  let nodes = {}
  if (typeof selectorOrNodeId === "string") {
    let temp = document.querySelectorAll(selectorOrNodeId) //伪数组
    for (let i = 0; i < temp.length; i++) {
      nodes[i] = temp[i]
      nodes.length = temp.length
    }
  } else {
    nodes = {
      0: selectorOrNodeId,
      length:1
    }
  }
  nodes.addClass = function(className) {//接受数组
    // for (let i = 0; i < nodes.length; i++) {
    //   classes.forEach(value => {
    //     nodes[i].classList.add(value)
    //   })
    for (let i = 0; i < nodes.length; i++) {
          nodes[i].classList.add(className)
    }
  }
  nodes.setText = function(text) {
    for (let i = 0; i < nodes.length; i++) {
        nodes[i].textContent=text
    }
  }

  return nodes
}
window.$ = jQuery
var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText("hi") // 可将所有 div 的 textContent 变为 hi

说自己思路

首先要定义一个函数,这个函数要返回一个对象,当然函数也要接受一个参数,可以是选择器,也可是元素id,看你的需要,如果是想操作特定一个元素就用id,想操作多个元素就用选择器。

因为我们要返回一个对象,所以先要在函数内部声明一个空对象。然后对输入的参数要进行一个判断,如果是字符串就代表是选择器,如果不是代表是id。由于选择器会获取到一个伪数组,但是用id获取到的就是一个普通对象。考虑一致性,我把用id获取到的也变成了一个伪数组。然后把获取到的伪数组赋给这个空nodes对象。
这里有一个细节,选择器返回的是一个nodeList,含有其他我不想要的东西,我只想要它有数字索引的属性和length,所以先设置了一个temp,让它来接受和这个nodeList,通过for循环把有数字索引的让temp把属性值赋给nodes对象,让后让他们length相等,就完成了让nodes获取一个我想要的纯净一点的nodeList的任务。

接下来给nodes对象添加方法,这里nodes对象是一个伪数组。
第一个方法是添加类的方法,我有两种想法,一次添加多个类或一次添加一个类,一次添加多个类的话就需要在输入参数的时候输入一个数组,需要用到数组的forEach方法,返回数组的value。一次添加一个类就输入一个字符串就可以了。遍历nodes让它的每一个元素,用dom提供的方法,添加class。

第二个方法,遍历nodes,用textContent改掉它里面的文本。

要记得for循环用let噢

dom api没事可以看一看,记一记

你可能感兴趣的:(自己封装了jQuery里的一个小功能)