内容简介：在不使用jQuery函数库的情况下自制一个与jQuery同样原理的API:首先，确认以下两个需求：① jQuery的核心思想就是先选择后处理，jQuery构造函数的参数，主要是CSS选择器。选择一个参数，比如，需求1 是让
在不使用jQuery函数库的情况下自制一个与jQuery同样原理的API:
首先，确认以下两个需求：
var $div = $('div')
1 $div.addClass('red') // 可将所有 div 的 class 添加一个 red
2 $div.setText('hi') // 可将所有 div 的 textContent 变为 hi
jQuery本质上就是一个构造函数，我们需要给它输入参数，就可以返回对应参数的jQuery实例。
window.jQuery=function (){}
复制代码
① jQuery的核心思想就是先选择后处理，jQuery构造函数的参数，主要是CSS选择器。选择一个参数，比如，需求1 是让
的class='red', 其中'div'就是要传入的参数。
②
window.jQuery=function (nodeOrSelector){
var nodes={}
let temp=document.querySelectorAll(nodeOrSelector)
for(let i=0;i<temp.length;i++){
nodes[i]=temp[i]
}
nodes.length=temp.length
return nodes
}
复制代码
使用document.querySelectorAll, 因为它遵循的是css选择器的规则，可以帮助我们获取一个或者多个元素节点，用它确定选中参数的结果，在html文档中会获取到多个结果，这个结果集是一个伪数组，遍历这个伪数组，将遍历的结果存放在nodes对象中。
③
window.jQuery=function (nodeOrSelector){
var nodes={}
let temp=document.querySelectorAll(nodeOrSelector)
for(let i=0;i<temp.length;i++){
nodes[i]=temp[i]
}
nodes.length=temp.length
nodes.addClass=function (className) {
for(i=0;i<nodes.length;i++){
nodes[i].classList.add(className)
}
}
return nodes
}
复制代码
获取到这个nodes对象之后，通过nodes创建一个构造函数,这个函数中的className，就是在window.jQuery使用addClass这个属性时要输入的参数。在这个函数内部创建一个for循环，遍历nodes,每一轮给nodes中对应的节点添加一个className。
就可以实现 需求1了。
④
window.jQuery=function (nodeOrSelector){
var nodes={}
let temp=document.querySelectorAll(nodeOrSelector)
for(let i=0;i<temp.length;i++){
nodes[i]=temp[i]
}
nodes.length=temp.length
nodes.addClass=function (className) {
for(i=0;i<nodes.length;i++){
nodes[i].classList.add(className)
}
}
nodes.setText=function (text){
for(i=0;i<nodes.length;i++){
nodes[i].textContent=text
}
}
return nodes
}
复制代码
window.$ = jQuery 与需求1 同样的步骤，nodes.setText接受一个参数text,在这个函数内部创建一个for循环，遍历nodes每一轮给nodes中对应的节点添加一个text。
这样两个API就可以实现这两个需求了。它们可以同时给1个或多个元素节点，添加class和textContent。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
高效前端：Web高效编程与优化实践
李银城 著 / 机械工业出版社 / 2018-3-15 / 89.00元
这不是一本单纯讲解前端编程技巧的书，而是一本注重思想提升和内功修炼的书。 全书以问题为导向，精选了前端开发中的34个疑难问题，从分析问题的原因入手，逐步给出解决方案，并分析各种方案的优劣，最后针对每个问题总结出高效编程的最佳实践和各种性能优化的方法。 全书共7章，内容从逻辑上大致可以分为两大类： 第一类，偏向实践，围绕HTML、CSS、JavaScript等传统前端技术，以及PW......一起来看看 《高效前端：Web高效编程与优化实践》 这本书的介绍吧!
