模拟jQuery简单API

JQuery的主要功能：通过强大的选择器获得DOM元素，然后针将这些DOM元素的日常操作封装成对应的方法，如取值、赋值、修改、删除等，同时JQuery还为网页开发提供了一些工具类方法，如each、ajax、isArray、extend等。所以总的来说，JQuery知识点可分为三大类：
-JQuery选择器
-JQuery对象的操作，如DOM操作、表单操作等
-JQuery的工具方法
-JQuery插件编写（知识扩展）

模拟jQuery

通过DOM元素，模拟两个简单的类jQuery的API
两个API的功能：
第一个，addClass(),为相应节点增加class
第二个，setText(),为相应节点设置文本内容

html部分

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .red{
      color: red;
    }
    div{
      height: 50px;
      border: 1px solid green;
    }
  </style>
</head>

<body>
  <div id="hello1"></div>
  <div id="hello2"></div>
  <div id="hello3"></div>
  <div id="hello4"></div>
  <div id="hello5"></div>
</body>

</html>

js部分

window.jQuery = function(nodeOrSelector) {//在window中声明函数jQuery，之后对jQuery直接调用
  let nodes = {}  //在此处声明一个空对象
  if (typeof nodeOrSelector === 'string') {  //判断所引入的参数是否为字符串
    let temp = document.querySelectorAll(nodeOrSelector)  //取得此字符串的所有节点
    for (let i = 0; i < temp.length; i++) {  //将伪数组的值赋给空对象，减少操作数据大小
      nodes[i] = temp[i]
    }
    nodes.length = temp.length  //两个伪数组length相等
  } else if (nodeOrSelector instanceof Node) {  //如果是节点
    nodes = {
      0: nodeOrSelector,  //将此节点作为nodes的第一个元素
      length: 1
    }
  }
  nodes.addClass = function(value) {  //声明方法addClass，传入的value是所需增加的class
    for (let i = 0; i < nodes.length; i++) {  // 遍历nodes伪数组，为每个节点都增加value
      nodes[i].classList.add(value)
    }
  }

  nodes.setText = function(text) {  //声明方法setText，传入的text是需要加入的文本
    for (let i = 0; i < nodes.length; i++) {  遍历nodes伪数组，替换每个节点的文本内容
      nodes[i].textContent = text
    }
  }
  return nodes
}
window.$ = jQuery  //通过此代码，将jQuery用$符号代替
var $div = $('div') 
$div.addClass('red')
$div.setText('hi')

运行结果

在各div中都放入了文本hi,并且显示为红色

增加class=red,style="color:red;"

JQuery、JQuery对象、DOM对象三者之间的关系是： JQuery是个工厂方法，用来构造JQuery对象； JQuery对象是个类数组对象，里面存储了DOM对象。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

模拟jQuery简单API