jQuery插件开发3之简单实例

时间：2022-01-27 07:11:50

废话不多说直接上代码：

<head>
    <script src="<%=request.getContextPath()%>/UiFramework/jquary/jquery.min.js"></script>
</head>
<script>
    (function ($) {

        var Haorooms = function (el, opt) {
            this.$element = el;
            this.defaults = {
                'color': 'red',
                'fontSize': '12px',
                'textDecoration': 'none'
            };
            //$.extend 自己查看jquery手册，这里简单的理解就是将 this.defaults赋值给{}，
            // 然后在将opt赋值给{}（如果已经存在将会被覆盖），然后返回{}
            this.options = $.extend({}, this.defaults, opt)
        };
        //给Haorooms动态添加方法
        Haorooms.prototype = {
            changecss: function () {
                return this.$element.css({
                    'color': this.options.color,
                    'fontSize': this.options.fontSize,
                    'textDecoration': this.options.textDecoration
                });
            }
        };
        $.fn.myPlugin = function (options) {
            //创建haorooms的实体
            var haorooms = new Haorooms($(this), options);
            //调用其方法
            haorooms.changecss();
        }
    })(jQuery);
</script>

<body>
<a id="11">11</a>
<a id="22">22</a>
<script>
        $(function () {
            $('#11').myPlugin({
                color: '#000000',
                fontSize: '50px'
            });
        })
</script>
</body>

结果:

11 22



标签：

相关文章