当前位置 : 主页 > 网络编程 > JavaScript >

jquery插件封装几种方法

来源:互联网 收集:自由互联 发布时间:2021-06-28
jquery插件封装几种方法 1.jquery插件封装方法1:(function ($) { $.fn.extend({ test:function (opt) { opt=jQuery.extend({ name:'name' },opt) //这里是实现代码 } })})(jQuery)引用方法$("div").test();或者带参数:$("d
jquery插件封装几种方法
1.jquery插件封装方法1:
(function ($) {
    $.fn.extend({
        test:function (opt) {
            opt=jQuery.extend({
                name:'name'
            },opt)
            //这里是实现代码
        }
    })
})(jQuery)

引用方法
$("div").test();
或者带参数:
$("div").test({name:"testName"});

2.jquery插件封装方法2:
可以将参数抽取出来
(function () {
        $.fn.test = function (opt) {
            opt = $.extend({},
                    $.fn.layer.defaults, opt);
                    //这里是实现代码
                    console.log(opt.width);
        }; 
        $.fn.test.defaults={
            width:'100',
            height:'100'
        }
    })(jQuery);
等价于:
 (function () {
        $.fn.layer = function (opt) {
            opt = $.extend({
                width:'100',
                height:'100'
            }, opt);
           console.log(opt.width);
        };
    })(jQuery);   

引用方法
$("div").test();

3.jquery插件封装3:
也可以像方法2将参数单独提取出来
(function ($) {
        jQuery.test = function (opt) {
           opt = $.extend({
               width:'100',
               height:'100'
           }, opt);
            console.log(opt.width);
        };
    })(jQuery);

引用方法
$.test(); 
这种不需要绑定一个标签
网友评论