快捷導(dǎo)航

Jquery 擴(kuò)展方法

更新時(shí)間：2010年05月06日 22:10:04 作者：

好久沒有溫習(xí)JS了。最近看到VS2010把Jquery作為JS標(biāo)準(zhǔn)庫納入了Web項(xiàng)目里，再不會(huì)用Jquery，真怕自己“OUT”了。

網(wǎng)上搜索了信息在編寫JQUERY擴(kuò)展方法有兩種，一種是使用jquery.fn.extend,一種是jquery.extend.
jquery.fn表示jquery.prototype，，給jquery對(duì)象添加方法。剛好用到擴(kuò)展方法，并且使用jquery.fn，這里就寫下jquery.fn的用法，這些網(wǎng)上很多，蠻寫蠻寫
比如當(dāng)點(diǎn)擊 button時(shí)彈出一個(gè)textbox的值加一個(gè)參數(shù)值

復(fù)制代碼代碼如下:

 
jquery.fn.extend({ 
alertMessage:function(message){ 
var txtboxValue = $(this).val();//使用$(this)表示對(duì)哪個(gè)對(duì)象添加了擴(kuò)展方法，這里是指$('#textbox' ) 
alert(txtboxValue + message); 
} 
}); 
$(function(){ 
$("input[name='btn' ]").click(function(){ 
$('#textbox' ).alertMessage("是字符串"); 
}) 
}) 

html:

復(fù)制代碼代碼如下:

 
<input type='button' name='btn' value='Alert'/> 
<input type='text' id='textbox' value='abc'/> 

于是翻出了前年的Jquery中文文檔。大致瀏覽了下Jquery的方法。發(fā)現(xiàn)Jquery如此之強(qiáng)大，怎么以前就沒有發(fā)現(xiàn)呢？于是就親手寫了基于Jquery的擴(kuò)展函數(shù)，代碼如下：

復(fù)制代碼代碼如下:

 
jQuery.fn.__toggleCheck = function (idPrefix) { 
var c = false; 
$(this).click(function () { 
if (c) c = false; 
else c = true; 
$("input[type=checkbox][id^=" + idPrefix + "]").each( 
function () { 
this.checked = c; 
} 
); 
}); 
}; 
jQuery.fn.__setRepeaterStyle = function (itemTag, evenStyle, hoverStyle) { 
$("#" + this.attr("id") + " " + itemTag + ":odd").addClass(evenStyle); 
var cssOriginal = ""; 
$("#" + this.attr("id") + " " + itemTag + "").mouseover(function () { 
cssOriginal = $(this).attr("class"); 
$(this).addClass(hoverStyle); 
}); 
$("#" + this.attr("id") + " " + itemTag + "").mouseout(function () { 
$(this).removeClass(); 
if (cssOriginal.length > 0) { 
$(this).addClass(cssOriginal); 
} 
}); 
}; 

以上函數(shù)調(diào)用如下：

復(fù)制代碼代碼如下:

 
<div id="selBox"> 
<input type="checkbox" id="a_1" />1 
<input type="checkbox" id="a_2" />2 
<input type="checkbox" id="a_3" />3 
<input type="checkbox" id="a_4" />4 
<input type="checkbox" id="a_5" />5 
<input type="checkbox" id="a_6" />6 
<input type="checkbox" id="a_All" />All</div> 
<div id="a_All1">Check</div> 
</div> 
<style type="text/css"> 
table tr {} 
table .rowStyle { background:#dedede;} 
table .hoverStyle {font-weight:bold; color:Red; background-color:Gray;} 
</style> 
<table id="tb" style="width:100%; border:solid 1px #dedede;"> 
<tr> 
<td>1</td> 
</tr> 
<tr> 
<td>1</td> 
</tr> 
<tr> 
<td>1</td> 
</tr> 
</table> 
<script type="text/javascript"> 
$("#a_All").__toggleCheck("a_"); 
$("#a_All1").__toggleCheck("a_"); 
$("#tb").__setRepeaterStyle("tr", "rowStyle", "hoverStyle"); 
</script> 