《鋒利的jQuery》要點歸納（六）插件的使用和寫法
《鋒利的jQuery》要點歸納（六）插件的使用和寫法
一、插件的使用
1 表單驗證插件：Validation（略）
http://plugins.jquery.com/project/validate
2 表單插件：Form——升級表單以支持ajax（略）
http://malsup.com/jquery/form/#download
3 動態(tài)綁定事件插件：livequery
http://plugins.jquery.com/project/livequery
3.1 即使元素為js動態(tài)加載到頁面中，也可即時為元素綁定事件
//...
});
3.2 livequery插件還可以為匹配的元素觸發(fā)一個回調(diào)函數(shù)，當(dāng)不再匹配這個元素時，觸發(fā)另一個回調(diào)函數(shù)。
$("li.canBeHover").livequery(function(){
$(this).hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
});
},function(){
$(this).unbind("mouseover").unbind("mouseout");
});
});
3.3 live(type,fn)方法（略）
4 jQueryUI插件
交互、微件、效果庫（略）
5 Cookie插件
http://plugins.jquery.com/project/cookie
寫入cookie
讀取cookie
刪除cookie
其他
expires:7,//(Number/Date) 有效期，單位（天）
path:'/',//(String) cookie的路徑屬性
domain:'jquery.com',//(String) cookie的域名屬性
secure:true//(Boolean) 如果設(shè)置為true，此cookie的傳輸會要求一個安全協(xié)議，如https
});
二、插件的編寫
1 插件的種類
a 封裝對象方法的插件
b 封裝全局函數(shù)的插件
c 選擇器插件
2 插件的要點
a 推薦命名為：jquery.[插件名].js
b 所有對象方法應(yīng)當(dāng)附加到j(luò)Query.fn對象上，而所有的全局函數(shù)都應(yīng)當(dāng)附加到j(luò)Query對象本身上
c 在插件內(nèi)部，this指向的是當(dāng)前通過選擇器獲取的jQuery對象，而不像一般的方法那樣內(nèi)部的this指向的是DOM元素
d 可以通過this.each來遍歷元素
e 所有的方法或函數(shù)插件以分號結(jié)尾，可以在插件頭部先加上一個分號
f 插件一般應(yīng)該返回一個jQuery對象，以保證插件的可鏈?zhǔn)讲僮鳌?/p>
g 避免在插件內(nèi)部使用$作為jQuery對象的別名，而應(yīng)使用完整的jQuery來表示以避免沖突。或者通過閉包來回避這個問題
3 插件中的閉包
簡而言之：所有的插件代碼必須放置在如下代碼中
//...這里可以使用$作為jQuery的縮寫別名
})(jQuery); //這里將jQuery作為實參傳遞給匿名函數(shù)
4 jQuery插件的機(jī)制
jQuery.fn.extend()方法，用來擴(kuò)展封裝對象方法的插件
jQuery.extend()方法，用來擴(kuò)展封裝全局函數(shù)的插件和選擇器插件
5 編寫jQuery插件
5.1 封裝jQuery對象方法的插件
以編寫color()插件為例，框架如下：
$.fn.extend({
"color":function(value){
//插件代碼
}
});
})(jQuery);
color()插件代碼：
$.fn.extend({
"color":function(value){
if(value==undefined){
return this.css("color");
}else{
return this.css("color",value);
}
}
});
})(jQuery);
因css()方法內(nèi)部已經(jīng)有判斷value是否為undefined的機(jī)制，所以可以借助css()方法的這個特性來處理，刪除if()部分，簡化如下：
$.fn.extend({
"color":function(value){
return this.css("color",value);
}
});
})(jQuery);
注意：
jQuery的選擇符可能會匹配1個或多個元素，所以可以在插件內(nèi)部調(diào)用each()方法來遍歷匹配元素。插件框架如下：
$.fn.extend({
"somePlugin":function(options){
return this.each(function(){
//插件代碼
});
}
});
})(jQuery);
5.2 封裝全局函數(shù)的插件（略）
5.3 自定義選擇器（略）
浙公網(wǎng)安備 33010602011771號