jquery自定义插件

最新推荐文章于 2024-10-13 09:15:00 发布

脑瓜不疼

最新推荐文章于 2024-10-13 09:15:00 发布

阅读量1.8k

点赞数 2

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

本文链接：https://blog.csdn.net/super__code/article/details/90515116

版权

大前端专栏收录该内容

88 篇文章 0 订阅

订阅专栏

实现方法
jQuery为开发插件提拱了两个方法，分别是：

jquery.fn.extend(object); 给jquery对象添加方法。
jquery.extend(object); 为扩展jquery类本身.为类添加新的方法，可以理解为添加静态方法。

这两个方法都接受一个参数，类型为Object，Object对应的"名/值对"分别代表"函数或方法体/函数主体"。

html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery/jquery-1.11.3.min.js"></script>
    <script src="myJs.js"></script>
    <style>
        .active{
            color: red;
        }
    </style>
</head>
<body>
    <div id="myDiv"></div>
</body>

<script>

     $("#myDiv").myJs({
        list: ["000","111","222","333"],
        clickIndex: function (element,index) {
            console.log(element);
            console.log(index);
        }
    });


</script>
</html>

扩展插件文件

(function($){
    var defaults={
        list: ["1","2","3","4"],
        active:"green",
        show: '0',
        clickIndex:function(element,index){},
    };
    var opts = {}

    $.fn.myJs = function(options){
        // 获取设置参数
        opts= $.extend({},defaults,options);
        // 设置参数
        var list = opts.list;
        var _this = this
        var html = '';
        var len =list.length;
        for (var i = 0; i < len ; i ++) {
            html += "<span class='my-style' style='padding: 6px 20px;cursor: pointer;background: #eee;margin-right: 10px;'> "+list[i]+" </span>"
        }
        _this.append(html);
        // 默认执行为第一个添加active
        activeClick(0)
        //active 切换事件
        function activeClick( index) {
            _this.find('.my-style').eq(index).addClass('active').siblings().removeClass('active')
        }

        // 返回带参数的方法
        return _this.each(function(){
            _this.find("span.my-style").bind("click",function(){
                var index = $(this).index();
                activeClick(index)
                opts.clickIndex($(this).html(),index);
            })
        })

    };

    $.fn.myJs.reSetOpts = function(){
        return opts;
    }
})(jQuery);