jQuery扩展方法

jQuery插件的开发包括两种:
一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数,调用形式:$.fun()
另一种是对象级别的插件开发,即给jQuery对象添加方法。调用形式:$('选择器').fun()

也可以理解为另外两种方式:
一种是jQuery本身的扩展方法;jQuery.extend(Object);
另一种是jQuery所选对象的扩展方法。jQuery.fn.extent(Object);

下面就对这两种开发做详细的说明:

类级别的插件开发

对类级别的插件开发,我们可以把jQuery看成一个类,给jQuery类添加静态方法,比如$.ajax()这个函数,将此函数定义在jQuery的命名空间中。

可采用如下几种形式进行开发:

添加一个新的全局函数

1
2
3
4
5
6
7
8
$.foo = function(){
console.log('this is foo function');
};
// 调用方法
$.foo();

// 输出结果:
// this is foo function

使用jQuery.extend(object);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$.extend({
hello: function(){
console.log('Hello World');
}
, getName: function(name){
console.log('Name:'+name);
}
});
// 调用方法
$.hello();
$.getName('Tom');

// 输出结果:
// Hello World
// demo.html:34 Name:Tom

使用命名空间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$.myPlugin = {
hello: function(){
console.log('[myPlugin] Hello World');
}
, getName: function(name){
console.log('[myPlugin] Name:'+name);
}
};
// 调用方法
$.myPlugin.hello();
$.myPlugin.getName('Tom');

// 输出结果:
// [myPlugin] Hello World
// demo.html:32 [myPlugin] Name:Tom

对象级别的插件开发

html代码:

1
<p id="demo">Hello World</p>

形式一

1
2
3
4
5
6
7
8
9
$.fn.foo = function(){
console.log('对象标签文本内容:' + $(this).text());
return this;// 如果是链式调用,返回this
};
// 调用方法
$('#demo').foo();

// 输出结果:
// 对象标签文本内容:Hello World

形式二

1
2
3
4
5
6
7
8
9
10
11
12
13
14
(function($){
$.fn.extend({
foo2: function(opt, callback){
console.log("opt:", opt);
callback && callback({name: 'Jerry'});
}
})
})(jQuery);
// 调用方法
$("#demo").foo2({name: 'Tom'}, function(data){console.log('data:', data)});

// 输出结果:
// opt: {name: "Tom"}
// data: {name: "Jerry"}

形式三

1
2
3
4
5
6
7
8
9
10
(function (jq) {
jq.fn.foo3 = function (obj) {
console.log(obj);
};
})(jQuery);
// 调用方法
$("#demo").foo3("hello jQuery");

// 输出结果:
// hello jQuery
坚持原创技术分享,您的支持将鼓励我继续创作!