jQuery插件开发分为两种:1 类级别、2 对象级别。
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();
转载地址:点击打开链接
附jquery 源码:
jQuery.extend = jQuery.fn.extend = function() {
var options, name, src, copy, copyIsArray, clone,
target = arguments[0] || {},//记录target 目标对象,不一定是第一个参数根据实际情况下面做修正
i = 1,//记录源对象在参数列表中的位置
length = arguments.length,
deep = false;
// Handle a deep copy situation
if ( typeof target === "boolean" ) {//如果第一个参数是布尔值,表示需要深拷贝,默认不传参数为浅拷贝
deep = target;
target = arguments[1] || {};
// skip the boolean and the target
i = 2;
}
// Handle case when target is a string or something (possible in deep copy)
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
target = {};
}
// extend jQuery itself if only one argument is passed
if ( length === i ) {//如果除了表示深浅拷贝参数,其他只传了一个参数时,此时把调用extend的对象作为源对象 ,用$.fn.extend
target = this;
--i;
}
for ( ; i < length; i++ ) {//循环源对象
// Only deal with non-null/undefined values
if ( (options = arguments[ i ]) != null ) {
// Extend the base object
for ( name in options ) {
src = target[ name ];//目标对象和源对象相同属性的值
copy = options[ name ];//目标对象和源对象相同属性的值
// Prevent never-ending loop
if ( target === copy ) {
//防止 此情况:var a={name:"xiaowang"}; $.extend(a,{pername:a,age:12});//结果是{"name":"xiaowang","age":12}
//var a={name:"wang"}; $.extend(a,{fullname:{name:a,lastname:"ming"}}); 这样写会出错,循环了fullname部分
continue;
}
// Recurse if we're merging plain objects or arrays
//PlainObject 纯对象 就是{} 和 new Object 生成的对象,自己的原型上有isPrototypeOf属性,即它的原型就是Object
//,不是dom对象、不是window对象
if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
if ( copyIsArray ) {
copyIsArray = false;
clone = src && jQuery.isArray(src) ? src : [];
//clone 递归调用时如果目标对象中有与源对象相同属性名的属性值,需带上目标对象中的值
} else {
clone = src && jQuery.isPlainObject(src) ? src : {};
}
// Never move original objects, clone them
target[ name ] = jQuery.extend( deep, clone, copy );
// Don't bring in undefined values
} else if ( copy !== undefined ) {//递归调用到后面直接赋值
target[ name ] = copy;
}
}
}
}
// Return the modified object
return target;
};
源和目标对象:如果将对象a拷贝到b对象中,a为源对象,b为目标对象。