自己写一个小小的jQuery功能
Posted David凉宸
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自己写一个小小的jQuery功能相关的知识，希望对你有一定的参考价值。
现在应该有许多人在学习jQuery吧，但是去探索jQuery原理的是很少一部分人
那么我们就简单来自己写一个jQuery吧
新建jQuery.js文件编写如下代码
class jQuery {
constructor(selector) {
const nodes = document.querySelectorAll(selector)
const length = nodes.length
for (let i = 0; i < length; i++) {
this[i] = nodes[i]
}
this.length = length
this.selector = selector
}
get (index) {
return this[index]
}
each (fn) {
for (let i = 0; i < this.length; i++) {
const node = this[i]
fn && fn(node, i)
}
}
on (type, fn) {
for (let i = 0; i < this.length; i++) {
const node = this[i]
fn && node.addEventListener(type, fn)
}
}
}
在html文件中将jQuery.js引入就可以使用了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
<p class="head">我是头部</p>
<p>我是身体</p>
<p>我是尾部</p>
</div>
<script src="./jquery.js"></script> // 引入jQuery
<script>
const $=new jQuery('p')
console.log('获取全部：',$);
console.log('get方法：',$.get(0));
$.each((item,index)=>{
console.log('each方法',item);
})
$.on('click',()=>{
console.log(1);
})
</script>
</body>
</html>
以上是关于自己写一个小小的jQuery功能的主要内容，如果未能解决你的问题，请参考以下文章