jQuery开发插件模板

最新推荐文章于 2020-06-23 04:14:51 发布

EeeEui

最新推荐文章于 2020-06-23 04:14:51 发布

阅读量476

点赞数

分类专栏： JS 文章标签： jquery

本文链接：https://blog.csdn.net/EeeEui/article/details/69257411

版权

JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用jQuery开发一个小插件的模板写法：
HTML代码：

<span id="test">test</span>

JS代码：

<script type="text/javascript">
!function ($) {
     "use strict"; 
     var Plugins =function(element,option){
            this.$element =element;
            this.defaults = {
                "color":"green",
                "fontSize":"16px",
                "fontWeight":"bold"
            }
            this.options = $.extend({}, this.defaults, option)

     }

    Plugins.prototype = {
        changecss:function(){
            return this.$element.css({
                'color':this.options.color,
                'fontSize':this.options.fontSize,
                "fontWeight":this.options.fontWeight
            })
        }
    }
    $.fn.changeCss = function(options){

        var myPlugins = new Plugins(this,options);
        return myPlugins.changecss();
    }
}(window.jQuery);

</script>

调用方式：

$("#aaa").changeCss ({
                        "color":"yellow",
                        "fontSize":"20px",
                        "fontWeight":"bold"
                    })