自己写一个小小的jQuery功能

痛定思痛。 2022-10-08 00:51 179阅读 0赞

现在应该有许多人在学习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>

发表评论取消回复

表情：

评论列表（有 0 条评论，179人围观）

还没有评论，来说两句吧...

相关阅读

相关自己手写一个SpringMVC框架

手写 Spring MVC 不多说，简历装 X 必备。不过练好还是需要求一定的思维能力。一、整体思路思路要熟练背下来 **1）配置阶段** * *...

川长思鸟来/ 2024年04月19日 16:28/ 0 赞/ 89 阅读

相关 Webpack--自己写一个Loader

直接来看代码： module.exports = function(source){ return source.replac...

刺骨的言语ヽ痛彻心扉/ 2024年04月18日 15:53/ 0 赞/ 82 阅读

相关一个小小的表白的网页

<!DOCTYPE html> <html> <head> <meta charset="utf-8">

- 日理万妓/ 2023年07月22日 09:23/ 0 赞/ 8 阅读

相关自己写一个环形队列(java实现)

环形队列的实现其实挺简单但有些关键的因素要记住先看图下面是初始化状态的定义两个指针默认都为0 ![在这里插入图片描述][watermark_type_ZmF

àì夳堔傛蜴生んèń/ 2022年12月10日 14:53/ 0 赞/ 154 阅读

相关自己写一个小小的jQuery功能

现在应该有许多人在学习jQuery吧，但是去探索jQuery原理的是很少一部分人那么我们就简单来自己写一个jQuery吧新建jQuery.js文件编写如下代码

痛定思痛。/ 2022年10月08日 00:51/ 0 赞/ 180 阅读

相关自己写一个hibernate的小demo

1.准备pom如下： <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www

朱雀/ 2022年07月18日 05:20/ 0 赞/ 255 阅读

相关如何写一个自己的HashMap

想必很多Java工程师出去面试的时候都会被问到HashMap的底层实现原理，很多人觉得没什么必要，反正我会用就行，就我的感觉而言，在初期确实没什么必要，但是站在公

r囧r小猫/ 2022年05月12日 09:06/ 0 赞/ 304 阅读

相关一个小小的算法题

> 写在前面 > 我们对一个算法优化的操作，除了是对思维角度的改变，还有针对具体情况进行分类细化。 > /\题目：一个整数，它加上100后是一个完全平方数，在加上168又

﹏ヽ暗。殇╰゛Y/ 2021年11月10日 14:58/ 0 赞/ 251 阅读

相关自己写一个简易版的vue

vue原理图 ![70][] 1.html <!DOCTYPE html> <html lang="en"> <head>

超、凢脫俗/ 2021年09月16日 07:10/ 0 赞/ 392 阅读

相关 jquery 写官网（全部功能）

jquery 写官网最近有个需求就是写一个官网，内容包含：导航/简介/产品/优势/加入我们等。导航点击事件 <div class="navList">

约定不等于承诺〃/ 2021年07月25日 11:55/ 0 赞/ 392 阅读