Heim >Web-Frontend >js-Tutorial >jQuery插件开发的两种方法及$.fn.extend的详解_jquery

jQuery插件开发的两种方法及$.fn.extend的详解_jquery

WBOY
WBOYOriginal
2016-05-16 17:03:241081Durchsuche

jQuery插件开发分为两种:

1 类级别

类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法。

开发扩展其方法时使用$.extend方法,即jQuery.extend(object);

复制代码 代码如下:

$.extend({

add:function(a,b){return a+b;} ,

minus:function(a,b){return a-b;}
});

页面中调用:
复制代码 代码如下:

var i = $.add(3,2);
var j = $.minus(3,2);

2 对象级别

对象级别则可以理解为基于对象的拓展,如$("#table").changeColor(...); 这里这个changeColor呢,就是基于对象的拓展了。

开发扩展其方法时使用$.fn.extend方法,即jQuery.fn.extend(object);
复制代码 代码如下:

$.fn.extend({

check:function(){
return this.each({
this.checked=true;
});
},
uncheck:function(){
return this.each({
this.checked=false;
});
}
});

页面中调用:
复制代码 代码如下:

$('input[type=checkbox]').check();
$('input[type=checkbox]').uncheck();

3、扩展
复制代码 代码如下:

$.xy = {
add:function(a,b){return a+b;} ,
minus:function(a,b){return a-b;},
voidMethod:function(){ alert("void"); }
};
var i = $.xy.add(3,2);
var m = $.xy.minus(3,2);
$.xy.voidMethod();
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn