如何封装一个最简单的jquery插件

最新推荐文章于 2025-05-30 09:00:09 发布

娄笙悦

最新推荐文章于 2025-05-30 09:00:09 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：插件开发文章标签： jquery插件封装匿名函数插件

本文链接：https://blog.youkuaiyun.com/weixin_41424247/article/details/78825802

插件开发专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个简易版jQuery的封装过程，通过自调用匿名函数实现基本功能如元素选择、HTML内容操作及事件绑定等。

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

一个完整的jquery当然不可能这么简单，以下案例提供的是一种封装插件的思路

在此之前你最好有一定的js基础，并且懂得自调用匿名函数的基本使用，废话少说，直接上代码：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>js封装简易jquery</title></head>
<body>
    <h2>js封装简易jquery</h2>
    <div id="h">hello world</div>
    <div id="box">我是一个带有class属性的标签</div>
    <script src="../js/demo2.js"></script>
</body>
</html>

js部分

;(function (win) {
    var jQuery = function (selecter) {
        this.version = '1.0.1'; //版本号
        this.selecter = selecter;
        return this;
    };
    jQuery.prototype.getElement = function () {
        this.elem = document.getElementById(this.selecter);
        return this;
    };
    jQuery.prototype.html = function (val) {
        var elem = this.elem;
        if (val) {
            elem.innerHTML = val;
            return this;
        } else {
            return elem.innerHTML;
        }
    };
    jQuery.prototype.on = function (type, Fn) {
        var elem = this.elem;
        elem.addEventListener(type, Fn);
        return this;
    };
    jQuery.init = function (selecter) {
        return new this(selecter);
    };
    win['$jQuery'] = jQuery;
})(window);

function $(selecter) {
    var test = $jQuery.init(selecter);
    return test.getElement(selecter);
}
function jQuery(selecter) {
    var test = $jQuery.init(selecter);
    return test.getElement(selecter);
}

//不妨测试一下，来个点击事件
jQuery('h').html('hello girl').on('click', function () {
    console.log('hello boy');
});
//或者来个赋值操作
$('box').html('hello baby');
console.log($().version);