js 手写jquery插件

以你之姓@ 2021-08-28 01:59 535阅读 0赞

<html>
    
    <head>
        <title>手写jquery插件</title>
        <meta charset="utf-8">
        <style>
    
        </style>
    </head>
    
    <body>
        手写jquery 插件 考虑扩展性
        <p>第一</p>
        <p>第二</p>
        <p>第三</p>
    </body>
    
    </html>
    
    <script>
      
          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(className){
    
             }
             style(data){
    
             }
          }
    
          //调用
          const $p=new jQuery('p')
         // $p.get(1)
          $p.each((elem)=>console.log(elem.nodeName))
        //   $p.on('click',()=>{alert('clicked')})
        //   $p.dialog('aaaa')
      
    </script>

发表评论取消回复

表情：

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

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

相关阅读

相关手写jquery.cookie插件

/ 设置cookie @param name @param value @param config expires

不念不忘少年蓝@/ 2023年01月01日 06:59/ 0 赞/ 219 阅读

相关一写jquery插件

一个强大的jquery 图片裁剪插件，地址：[http://www.html5tricks.com/jquery-image-cut.html][http_www.html

曾经终败给现在/ 2022年08月08日 03:27/ 0 赞/ 191 阅读

相关 js修炼——手写全屏滚动插件

全屏滚动是目前网站开发常用的效果，笔者也曾使用过类似插件，但是对此类插件的开发一直抱有强烈兴趣，而今在前人的经验指导下，终于领悟到了一些插件开发的思维。如下效果： ![2

小灰灰/ 2022年06月16日 14:37/ 0 赞/ 214 阅读

相关手写签名插件—jSignature

jSignature 是一个通过捕捉笔画的矢量轮廓输出多种格式数据的jQuery插件，通过该插件我们可以实现绘画板、手写签名等功能。使用该插件需要引入jQuery和jSig

野性酷女/ 2022年06月03日 02:43/ 0 赞/ 388 阅读

相关 jQuery插件：表单jquery.form.js

jQuery插件：表单jquery.form.js jQuery插件：表单jquery.form.js [jquery.form.js 官网][jquery.fo

矫情吗；*/ 2022年06月01日 03:27/ 0 赞/ 239 阅读

相关手写Mybatis分页插件

之前涉及到mybatis分页时，都是先查询一遍总和，再用Limit,导致了项目中有大量的冗余代码,非常的难看，网上不管是框架，还是人家提到的各种自以为是的解决办法，基本

落日映苍穹つ/ 2022年05月30日 09:16/ 0 赞/ 293 阅读

相关 JS-- jQuery遮罩插件 jquery.blockUI.js

Overview jQuery BlockUI 插件可以在不同锁定浏览器的同时，模拟同步模式下发起Ajax请求的行为。该插件激活时，会组织用户在页面进行的操作，直

快来打我*/ 2022年05月13日 18:12/ 0 赞/ 322 阅读

相关 Jquery 打印插件——jQuery.print.js使用

需求在进行网页开发中不可避免会使用到打印功能，下面就来学习一下一款简单易用的插件吧！下载地址 [GitHub官网][GitHub] [个人分享][Link

待我称王封你为后i/ 2021年09月14日 09:34/ 0 赞/ 744 阅读

相关 js 手写jquery插件

<html> <head> <title>手写jquery插件</title> <meta charset="utf-

以你之姓@/ 2021年08月28日 01:59/ 0 赞/ 536 阅读

相关 jQuery表单插件jquery.form.js

jQuery表单插件jquery.form.js jQuery Form插件是一个优秀的Ajax表单插件，可以非常容易地、无侵入地升级HTML表单以支持Ajax。jQue...

小灰灰/ 2020年06月03日 12:47/ 0 赞/ 1149 阅读