jQuery自定義了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能夠創建全局函數或者選擇器,而jQuery.fn.extend()方法能夠創建jQuery對象方法.
例如:
. 代碼如下:
jQuery.extend({
showName : function(name){
alert(name)
}
});
jQuery.showName("深藍");
jQuery.extend()除了可以創建插件外,還可以用來擴展jQuery對象.
例如:
. 代碼如下:
var a = {
name : "blue",
pass : 123
}
var b = {
name : "red",
pass : 456,
age : 1
}
var c = jQuery.extend({},a,b);
c擁有a,b對象的屬性,由於,b對象在a對象之後,其name屬性優先在c對象裡.
jQuery.extend()方法為插件傳遞系列選項,包括默認值.
. 代碼如下:
function fn(options){
var options = jQuery.extend({ //默認參數選項列表
name1 : value1,
name2 : value2,
name3 : value3
},options); //使用函數的參數覆蓋或合並到默認參數選項列表中
//函數體
}
fn({ name1 : value3, name2 : value2 , name3 : value1 });//使用新值
fn({ name4 : value3, name5 : value2 });//在默認上添加新選項
fn(); //保持默認選項值
當在調用該方法時,傳遞新的參數值,就會覆蓋掉默認的參數選項值,否則,使用默認參數值.
使用JQuery.fn對象創建JQuery對象方法
可以通過jQuery.fn對象來添加屬性和方法,實際上jQuery.fn對象就是掛接在jQuery.prototype上的,jQuery把它簡寫了.
fn 是什麼東西呢。查看jQuery代碼，就不難發現。
. 代碼如下:
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//....
//......
};
原來 jQuery.fn = jQuery.prototype.對prototype肯定不會陌生啦。
例如:
. 代碼如下:
jQuery.fn.test = function(){
alert("這是jQuery對象方法!");
}
jQuery("div").click(function(){
$(this).test(); //在當前的jQuery對象上調用test()方法
});
我們可以調用jQuery.fn.extend()方法來創建jQuery對象方法.
. 代碼如下:
jQuery.fn.extend({
test : function(){
return this.each(function(){
alert(this.nodeName)
});
}
});
jQuery("body *").click(function(){
$(this).test(); //調用jQuery對象方法
});
一句話:jQuery.extend是對JQuery類的自定義擴展,jQuery.fn.extend是對JQuery對象的自定義擴展.