1. html 部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>博客详情页</title>
</head>
<body>
<p>这是第一段P</p>
<p>这是第一段P</p>
<p>这是第一段P</p>
<script src="jQuery.js"></script>
</body>
</html>2. js 部分
// 手写 jQuery、
class jQuery{
constructor(selector){
const result = document.querySelectorAll(selector)
const length = result.length
for (let i=0;i<length;i++){
this[i]=result[i]
}
this.length=length
this.selector=selector
}
get(index){
return this[index]
}
each(fn){
for(let i=0;i<this.length;i++){
const elem =this[i]
fn(elem)
}
}
on(type,fn){
return this.each(elem =>{
elem.addEventListener(type,fn,false)
})
}
}
// 插件 通过原型实现
jQuery.prototype.dialog=function(info){
alert(info)
}
// "造轮子"
class myjQuery extends jQuery{
constructor(selector){
super(selector)
}
// 扩展自己的方法
addClass(index,adds){
this[index].classList.add(adds);
}
style(){
}
3. 调用部分
const $p = new myjQuery("p")
$p.get(0)
$p.each((elem)=>{console.log(elem.nodeName)})
$p.on("click",()=>{alert("手写jQuery")})
$p.addClass(1,"active")
$p.dialog("hello world")
版权声明：本文为Supercaojh原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。