五分钟教你快速搭建一个极其简易的jquery库，可以自己任意添加拓展内容！
一、写在开头
最近一直在搞小程序，有点腻了，顺便复习了一下js，刚好可以写一个简单的jquery，见笑了各位。
二、发现问题
jquery现如今比较少用，但是对于我们掌握原型和原型链，深入了解class的本质什么的，还是比较重要的，大家可以参考着复习一下。
三、解决问题
其实还是比较容易的，主要分为三步：
第一步、获取所需要的元素节点并且赋值给我们的类（在构造函数中）；
第二步、添加自己需要的方法；
第三步、根据需要选择在原型上添加插件或者继承这个类自己直接造轮子；
具体详细的我已经在下面给出了，包括一些打印结果帮助各位理解！
<!DOCTYPE html>
<html>
<head>
<title>手动实现一个极其简易的jquery</title>
</head>
<body>
<p>无限忠诚</p>
<P>为了帝皇</P>
<script type="text/javascript">
class jquery{
constructor(selector){//selector代表要查找的元素，由我们自己决定，如p
const result=document.querySelectorAll(selector)
//通过这个DOM操作方法获取所有的“selector”元素,返回的是NodeList数组
//NodeList 对象表示节点的集合。可以通过索引访问，索引值从 0 开始。
//注意NodeList其实里面有一大串内容，最重要的是里面有textContent属性存放元素的文本，如“无限忠诚”
console.log(result);//NodeList(2) [p, p]
const length=result.length
//检测该元素代表的NodeList数组的长度
for(let i=0;i<length;i++){
//循环我们的NodeList数组
this[i]=result[i]
//其实它拿到只是textContent，也就是文本赋值给我们的jquery。这里的this其实就是jquery/以后的实例对象
console.log(this[i]);//<p>无限忠诚</p>
console.log(result[i]);//<p>无限忠诚</p>
console.log(this);//jquery {0: p}
}//这个时候我们的jquery其实已经有jquery {0: p, 1: p}这些内容了
this.length=length
this.selector=selector
//当然这还不够，我们给它加长度和选择元素两个属性
console.log(this);//jquery {0: p, 1: p, length: 2, selector: "p"}
}
//下面是定义一些小方法
get(index){//根据索引返回对应的值，这里的this依然是jquery类
return this[index]
}
each(fun){//定义一个遍历的方法，fun是我们实际遍历完成需要做的事情
for(let i=0;i<this.length;i++){
const element=this[i]
fun(element)
}
}
//如果考虑到添加一些小插件可以通过jquery.prototype.插件名=function(){}添加
//如果是想做比较大的修改，可以通过继承这个类，自行添加！
}
const $p=new jquery('p');
console.log($p)//jquery {0: p, 1: p, length: 2, selector: "p"}
console.log($p.get(1));// <P>为了帝皇</P>
$p.each((element)=>{
console.log(element.nodeName);
});//p*2
</script>
</body>
</html>
好了，目前先到这，我是O5,希望能帮助到大家，共勉！
583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
