jquery插件封装

//插件编写模板
;(function ($) {
    $.fn.plugIn = function ( opt ) {
        var def = {
            //这里填写自定义的参数例如:
            event : 'click'
        }
        opt = $.extend( def , opt ); //将用户输入参数options和默认参数defaultVal通过$.extend方法进行merge
        this.each(function(){

            var that = $(this); //that 指的是 .box
             //测试执行
            that.on( opt.event , function(){
                alert( opt.event );
            });

        });
        return this; //关键词return的作用就是返回each操作后的对象,以便用户接下去使用JQuery的链式操作
    }
})(jQuery);

//调用
$('.box').plugIn({
    event : 'mouseover' //可进行篡改
});

说明:JQuery插件标准的封装---闭包
jQuery插件的机制很简单,就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法,扩展jQuery的功能。

(function ($) {
 //这里放入插件代码
})(jQuery);

这是jQuery官方的插件开发规范,这样写是作用是:
1. 避免全局依赖。
2. 避免第三方破坏。
3. 兼容jQuery操作符’$’和’jQuery’

     
posted @ 2017-04-14 10:07  荆棘中的百合花  阅读(129)  评论(0编辑  收藏  举报