使用JQuery不僅要泛泛的去用，還要去不斷結(jié)合自己的業(yè)務(wù)的寫一些插件，才能理解JQuery API設(shè)計(jì)的風(fēng)格 simple and consistent.
1.開發(fā)插件所參考的典型模板
//?
//?create?closure?
//?
(function($)?
{?
//?
//?plugin?definition?
//?
$.fn.hilight?=?function(options)?{?
debug(this);?
//?build?main?options?before?element?iteration?
var?opts?=?$.extend({},?$.fn.hilight.defaults,?options);?
//?iterate?and?reformat?each?matched?element?
return?this.each(function()?{?
$this?=?$(this);?
//?build?element?specific?options?
var?o?=?$.meta???$.extend({},?opts,?$this.data())?:?opts;?
//?update?element?styles?
$this.css({?
backgroundColor:?o.background,?
color:?o.foreground?
});?
var?markup?=?$this.html();?
//?call?our?format?function?
markup?=?$.fn.hilight.format(markup);?
$this.html(markup);?
});?
};?
//?
//?private?function?for?debugging?
//?
function?debug($obj)?{?
if?(window.console?&&?window.console.log)?
window.console.log('hilight?selection?count:?'?+?$obj.size());?
};?
//?
//?define?and?expose?our?format?function?
//?
$.fn.hilight.format?=?function(txt)?{?
return?'<strong>'?+?txt?+?'</strong>';?
};?
//?
//?plugin?defaults?
//?
$.fn.hilight.defaults?=?{?
foreground:?'red',?
background:?'yellow'?
};?
//?
//?end?of?closure?
//?
})(jQuery);2.很多人喜歡在javascript中或者在后端服務(wù)器response輸出中把html標(biāo)記和數(shù)據(jù)混雜一起，然后輸出到div中，這樣非常難維護(hù)。
?? 比較好的做法是使用javascript模板（參加
JQuery JTemplate插件)：????? 1)在DIV中寫入模板文件，并隱藏DIV? $("#divID").hidden()
????? 2) 通過DIV ID獲取模板定義，解析并綁定數(shù)據(jù)，
????? 3）生成html，重新寫到DIV中： $("#divID").html(templateResult);
????? 4）顯示DIV $("#divID").show()
????? 具體例子參見:
?????
前端工程師如何提高設(shè)計(jì)的功力(三)基于JQuery的分層設(shè)計(jì)?????
?????
用jQuery和jTemplates插件實(shí)現(xiàn)客戶端分頁的表格展現(xiàn)?
3.盡可能的提供默認(rèn)參數(shù)，盡可能的滿足80%的需求
??
?1
?2var?defaults?=?{???
?3???length:?300,???
?4???minTrail:?20,???
?5???moreText:?"more",???
?6???lessText:?"less",???
?7???ellipsisText:?""??
?8??};???
?9?????
10??var?options?=?$.extend(defaults,?options);?? ?? 4.使用JQuery的selector中，盡量加上上下文限制遍歷的空間，不僅提搞速度，更重要的是避免不必要的錯(cuò)誤。
?????? $('input, textarea, select,', this)
?? 5.建立一個(gè)完備的log 體系
??????
jQuery.fn.log?=?function?(msg)?{
??????console.log("%s:?%o",?msg,?this);
??????return?this;
??};
$(root).find('li.source>?input:checkbox').log("sources?to?uncheck").removeAttr("checked"); ???6.關(guān)注JQuery的自定義事件
?????
jQuery中幾個(gè)自定義的事件：
（1）hover(fn1,fn2)：一個(gè)模仿懸停事件（鼠標(biāo)移動(dòng)到一個(gè)對(duì)象上面及移出這個(gè)對(duì)象）的方法。當(dāng)鼠標(biāo)移動(dòng)到一個(gè)匹配的元素上面時(shí)，會(huì)觸發(fā)指定的第一個(gè)函數(shù)。當(dāng)鼠標(biāo)移出這個(gè)元素時(shí)，會(huì)觸發(fā)指定的第二個(gè)函數(shù)。
//當(dāng)鼠標(biāo)放在表格的某行上時(shí)將class置為over，離開時(shí)置為out。
$("tr").hover(function(){
$(this).addClass("over");
},
???????function(){
???????$(this).addClass("out");
});
（2）ready(fn):當(dāng)DOM載入就緒可以查詢及操縱時(shí)綁定一個(gè)要執(zhí)行的函數(shù)。
$(document).ready(function(){})
//頁面加載完畢提示“Load?Success”,相當(dāng)于onload事件。與$(fn)等價(jià)
（3）toggle(evenFn,oddFn):?每次點(diǎn)擊時(shí)切換要調(diào)用的函數(shù)。如果點(diǎn)擊了一個(gè)匹配的元素，則觸發(fā)指定的第一個(gè)函數(shù)，當(dāng)再次點(diǎn)擊同一元素時(shí)，則觸發(fā)指定的第二個(gè)函數(shù)。隨后的每次點(diǎn)擊都重復(fù)對(duì)這兩個(gè)函數(shù)的輪番調(diào)用。
???????//每次點(diǎn)擊時(shí)輪換添加和刪除名為selected的class。
???????$("p").toggle(function(){
??????????????$(this).addClass("selected");???
???????},function(){
??????????????$(this).removeClass("selected");
???????});
（4）trigger(eventtype):?在每一個(gè)匹配的元素上觸發(fā)某類事件。
例如：
???????$("p").trigger("click");??????????????//觸發(fā)所有p元素的click事件
（5）bind(eventtype,fn)，unbind(eventtype):?事件的綁定與反綁定
從每一個(gè)匹配的元素中（添加）刪除綁定的事件。
例如：
$("p").bind("click",?function(){.text());});???????//為每個(gè)p元素添加單擊事件
$("p").unbind();???????//刪除所有p元素上的所有事件
$("p").unbind("click")???????//刪除所有p元素上的單擊事件
7.利用jQuery 內(nèi)置的CSS選擇器selectors來提高效率.
如$(":input??")? 的到頁面上所有tag 是input的Form控件。
如果在加上[attribute=value]??就更方便了如：$（" input[name='firstName']") 是查找DOM name是firstName的Form控件.
//下面是得到多選下拉框的所有的選擇的值，放入到map中。
jQuery('option:selected', this).each( function() {
??? a.push({name: n, value: this.value});
??? });
8. return flase 來阻止事件冒泡,? 如：屏蔽select下拉框的滾輪事件
$(document).ready(function(){
??????? $("select").each(function(){
??????????? $(this).bind("mousewheel",function(){
??????????????? return false;
??????????? });
??????? });
??? });