提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Jquery扩展方法

jQuery扩展方法
2023-06-13 09:14:18 时间
网上搜索了信息在编写JQUERY扩展方法有两种，一种是使用jquery.fn.extend,一种是jquery.extend.
jquery.fn表示jquery.prototype，，给jquery对象添加方法。刚好用到扩展方法，并且使用jquery.fn，这里就写下jquery.fn的用法，这些网上很多，蛮写蛮写
比如当点击button时弹出一个textbox的值加一个参数值
复制代码代码如下:

jquery.fn.extend({
alertMessage:function(message){
vartxtboxValue=$(this).val();//使用$(this)表示对哪个对象添加了扩展方法，这里是指$("#textbox")
alert(txtboxValue+message);
}
});
$(function(){
$("input[name="btn"]").click(function(){
$("#textbox").alertMessage("是字符串");
})
})

html:
复制代码代码如下:

<inputtype="button"name="btn"value="Alert"/>
<inputtype="text"id="textbox"value="abc"/>


于是翻出了前年的Jquery中文文档。大致浏览了下Jquery的方法。发现Jquery如此之强大，怎么以前就没有发现呢？于是就亲手写了基于Jquery的扩展函数，代码如下：
复制代码代码如下:
jQuery.fn.__toggleCheck=function(idPrefix){
varc=false;
$(this).click(function(){
if(c)c=false;
elsec=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);
varcssOriginal="";
$("#"+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);
}
});
};

以上函数调用如下：
复制代码代码如下:
<divid="selBox">
<inputtype="checkbox"id="a_1"/>1
<inputtype="checkbox"id="a_2"/>2
<inputtype="checkbox"id="a_3"/>3
<inputtype="checkbox"id="a_4"/>4
<inputtype="checkbox"id="a_5"/>5
<inputtype="checkbox"id="a_6"/>6
<inputtype="checkbox"id="a_All"/>All</div>
<divid="a_All1">Check</div>
</div>
<styletype="text/css">
tabletr{}
table.rowStyle{background:#dedede;}
table.hoverStyle{font-weight:bold;color:Red;background-color:Gray;}
</style>
<tableid="tb"style="width:100%;border:solid1px#dedede;">
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
</tr>
</table>
<scripttype="text/javascript">
$("#a_All").__toggleCheck("a_");
$("#a_All1").__toggleCheck("a_");
$("#tb").__setRepeaterStyle("tr","rowStyle","hoverStyle");
</script>

相关文章