封装一个最简单的jquery插件

最新推荐文章于 2022-05-31 00:05:32 发布

置顶阿狐狸

最新推荐文章于 2022-05-31 00:05:32 发布

阅读量542

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/feiniaoxinglanzi/article/details/82744864

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近突然心血来潮想要自己做个最简单的jquery插件，昨天晚上做了一个，因为还没有彻底的昨晚，现在只是分享出来给大家看看。

贴代码：

html5的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ul</title>
</head>
<body>
<div id="box" class="boxs">

</div>
<script src="./../../js/jquery-3.2.1.min.js"></script>
<script src="js-plug-ui-unit/ul.js"></script>
<script type="text/javascript">
    $('#box').addList({
        data: [1,2,3,4],
        name: 'lisa',
        age: 20,
        color: 'green'
    });
    new addList({
        dom:document.getElementById('box'),
        data:[4,5,6,7],
        name: 'lisi',
        color: 'yellow'
    });
</script>
</body>
</html>

js的：

(function (root, factory, plug) {
    root[plug] = factory(root.jQuery, plug);
})(window, function ($, plug) {
    var _def_ = {
        data: 0,
        name: 'Stella',
        age: 0,
        color: 'blue'
    };
    var _prop_ = {
        _init: function () {
            var $ul = $("<ul></ul>");
            for (var i = 0; i < this.data.length; i++) {
                $ul.append($("<li>" + this.data[i] + "" + "</li>"));
            }
            this.append($ul);
        }
    };
    $.fn[plug] = function (options) {
        $.extend(this, _def_, options, _prop_);
        this._init();
    }
    return function (options) {
        var dom = options.dom;
        $(dom)[plug].call($(dom), options);
    }
}, "addList")

阿狐狸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
封装一个最简单的jquery插件

最近突然心血来潮想要自己做个最简单的jquery插件，昨天晚上做了一个，因为还没有彻底的昨晚，现在只是分享出来给大家看看。贴代码： html5的： &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; ...
复制链接

扫一扫