jquery 在div追加文本_jQuery初见

由于DOM原生的API功能不足，因此出现了jQuery这个东西。由于jQuery强大的兼容性，所以应用非常广泛。 从本质上来说，jQuery就是一种构造函数，将原有的元素变成对象，对象中的方法是相较于原有的方法改进过的，但是他们也调用了原有的API。 下面将以一段程序为例介绍jQuery的一些细节。

window.jQuery = function(nodeOrSelector) {
  let nodes={}
  if (typeof nodeOrSelector ==='string'){
    temp=document.querySelectorAll(nodeOrSelector)
    for(let i=0;i<temp.length;i++){
        nodes[i]=temp[i]
    }
    nodes.length=temp.length
  }else if(nodeOrSelector instanceof Node){
    nodes = {
      0: nodeOrSelector,
      length: 1
    }
  }
    nodes.addClass = function(classes) {
      classes.forEach((value)=>{
        for(let i=0;i<nodes.length;i++){
          nodes[i].classList.add(value)
        }
      })
    }
    nodes.text = function(text) {
      if (text===undefined){
        var texts=[]
        for (let i=0;i<nodes.length;i++){
          texts.push(nodes[i].innerText)
        }
        return texts
      }else{
        for (let i=0;i<nodes.length;i++){
          nodes[i].innerText=text
        }
      }
    }
    return nodes
  }
window.$ = jQuery

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

在此程序中，div是元素，$的作用等同于jQuery，因此$('div')这一句就是接受元素，返回对象$div。 由于$()内传入可能是元素div，也可能是字符串'div'，所以先要进行判断。若是字符串，则要利用字符串取出对应元素（可能不止一个）。

if (typeof nodeOrSelector ==='string'){
    temp=document.querySelectorAll(nodeOrSelector)
    for(let i=0;i<temp.length;i++){
        nodes[i]=temp[i]
    }
    nodes.length=temp.length
  }

若是元素，则取出元素即可。

else if(nodeOrSelector instanceof Node){
    nodes = {
      0: nodeOrSelector,
      length: 1
    }
  }

请注意，返还的nodes是对象。 而后，先定义了addClass方法。classes是数组，因此用了 forEach 方法来遍历数组。

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

然后，定义了text方法。此方法既可给元素增加文本，又可输出元素原有的文本内容。

nodes.text = function(text) {
      if (text===undefined){
        var texts=[]
        for (let i=0;i<nodes.length;i++){
          texts.push(nodes[i].innerText)
        }
        return texts
      }else{
        for (let i=0;i<nodes.length;i++){
          nodes[i].innerText=text
        }
      }
    }

jQuery返还的对象中，key 从 0 到 n 是各个元素，length 等于 n+1，另外，还有一些其他的key。jQuery中的方法是放在原型对象中的。 这样，对象就拥有了原先API中没有的方法addClass()和text()。