jQuery扩展方法笔记

时间：2023-03-08 16:47:49

一、方式列表：
1.jQuery.extend(Object);　　　// jQuery 本身的扩展方法
2.jQuery.fn.extend(Object);　 // jQuery 所选对象扩展方法

二、调用示例：
1.jQuery 本身的扩展方法实例如下：

jQuery.extend({
    Meg: function (message) {
        alert(message);
    },
    MegToo: function (messageToo) {
        alert(messageToo);
    }
});

页面调用：jQuery.Meg("Hi,Stone");

其中Meg和MegToo为我的jQuery自定义扩展方法，多个扩展方法之间用英文逗号隔开。

2.jQuery 所选对象扩展方法有两种书写方式：

a）jQuery 所选对象扩展方法实例一如下：

jQuery.fn.extend({
    ShowHtml: function (showhtml) {
        jQuery(this).html(showhtml);
    }
});

页面调用：jQuery("#htmlDiv").ShowHtml("Stone,Hi!");

其中ShowHtml为我的jQuery所选对象的扩展方法，多个扩展方法之间用英文逗号隔开。

b）jQuery 所选对象扩展方法实例二代码如下：

(function (jq) {
    jq.fn.ShowHtmlToo = function (showhtml) {
        jQuery(this).html(showhtml);
    };
})(jQuery)

调用相同与方式一：jQuery("#htmlDiv").ShowHtmlToo("Stone,Hi!");

总结：

1、对象级别的插件开发

//形式一

(function($){
　　$.fn.extend({
　　　　foo3:function() {
　　　　　　alert('对象级别插件extend方式1');
　　　　},
　　　　bar3:function() {
　　　　　　alert('对象级别插件extend方式2');
　　　　}
　　})
})(jQuery);

//形式二

(function($){
　　$.fn.foo4 = function() {
　　　　alert('对象级别插件fn方式');
　　}
})(jQuery);

//接收参数来控制插件的行为

(function($){
　　$.fn.bar4 = function(options) {
　　　　var defaults = {aaa:'1',bbb:'2'};
　　　　var opts = $.extend(defaults, options);
　　　　alert('参数值:aaa:'+opts.aaa+';bbb:'+opts.bbb);
　　}
})(jQuery);

//提供公有方法访问插件的配置项值

(function($){
　　$.fn.foo5 = function(options) {
　　　　var opts = $.extend({}, $.fn.foo5.defaults, options);
　　　　alert('参数值:aaa:'+opts.aaa+';bbb:'+opts.bbb);
　　}
　　$.fn.foo5.defaults = {aaa:'1',bbb:'2'};
})(jQuery);

//提供公有方法来访问插件中其他的方法

(function($){
　　$.fn.bar5 = function(options) {
　　　　$.fn.bar5.alert(options);
　　}
　　$.fn.bar5.alert = function(params) {
　　　　alert(params);
　　}
})(jQuery);
$(function(){
　　$('#test').foo3();
　　$('#test').bar3();
　　$('#test').foo4();
　　$('#test').bar4();
　　$('#test').bar4({aaa:'3'});
　　$('#test').bar4({aaa:'3',bbb:'4'});
　　$('#test').foo5();
　　$('#test').foo5({aaa:'5',bbb:'6'});
　　$('#test').bar5('aaaa');
});

2、类级别的插件开发

类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展：
//2.1定义一个全局函数

jQuery.foo = function() {
　　alert('添加一个新的全局函数');
}

//定义多个全局函数

jQuery.bar = function() {
　　alert('再增加一个全局函数');
}

//2.2使用extend定义全局函数

jQuery.extend({
　　foo1:function() {
　　　　alert('extend 定义全局函数1');
　　},
　　bar1:function() {
　　　　alert('extend 定义全局函数2');
　　}
});

//2.3 使用命名空间定义函数

jQuery.plugin = {
　　foo2:function() {
　　　　alert('使用namespace定义函数');
　　}
}
$(function(){
　　$.foo();
　　$.bar();
　　$.foo1();
　　$.bar1();
　　$.plugin.foo2();
});

相关文章