模仿jQuery方式获取节点；模仿jQuery方式生成方法；扩展方法

最新推荐文章于 2025-08-22 19:33:51 发布

啊～哈

最新推荐文章于 2025-08-22 19:33:51 发布

阅读量404

点赞数 8

CC 4.0 BY-SA版权

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/m0_49014420/article/details/135090529

本文介绍了一种使用原生JavaScript封装节点获取和操作的方法，通过减少代码量和提供常用功能，如HTML和CSS操作，以及AJAX和扩展方法，提高了开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用原生js获取节点需要重复相同获取节点的代码，使得代码量变大，封装之后获取节点就非常的方便，该方法不仅能获取节点，还能生成一些常用的方法，方便后期调用，减少代码量，优化开发效率。

        (function (){
            // 初始化
            function init(selector){
                return new jqruy(selector)
            }
            // 生成节点
            function jqruy(selector){
                this.node='';//节点
                if (/^#/.test(selector)){
                    // console.log(selector.substring(1))
                    this.node=document.getElementById(selector.substring(1))
                }else if (/^\./.test(selector)){
                    this.node=document.getElementsByClassName(selector.substring(1))
                }else if(/\d/.test(selector)){
                    this.node=document.getElementsByTagName(selector)
                }
            }
            // 添加方法
            jqruy.prototype.html=function (str){
                this.node.innerHTML=str
            }
            jqruy.prototype.css=function (attr,value){
                this.node.style.attr=value
            }
            // 为init函数添加方法
            init.ajax=function (str){
                // this.node.innerHTML=str
                console.log('ajax')
            }
            // 扩展方法
            init.extend=function (obj){
                console.log(obj)
                for(let key in obj){
                    init[key]=obj[key]
                }
            }
            window.$= init
        })()
        $('#on').html()//调用html方法
        $('#on').css()//调用css方法
        $.ajax()//调用方法
    //     扩展方法
        $.extend({
            each:function (){
                console.log("each")
            },
            newFn:function (){
                console.log("newFn")
            }
        })
        $.each();
        $.newFn();