手写 jQuery

最新推荐文章于 2023-05-20 21:02:09 发布

小铁柱来咯

最新推荐文章于 2023-05-20 21:02:09 发布

阅读量259

点赞数

分类专栏： jQuery js 文章标签： jquery javascript es6

本文链接：https://blog.csdn.net/Supercaojh/article/details/114139719

版权

js 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

jQuery

4 篇文章 0 订阅

订阅专栏

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")

小铁柱来咯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
手写 jQuery

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>
复制链接

扫一扫

专栏目录