网上搜索了信息在编写JQUERY扩展方法有两种，一种是使用jquery.fn.extend,一种是jquery.extend. jquery.fn表示jquery.prototype，，给jquery对象添加方法。刚好用到扩展方法，并且使用jquery.fn，这里就写下jquery.fn的用法，这些网上很多，蛮写蛮写 比如当点击 button时弹出一个textbox的值加一个参数值 复制代码 代码如下: jquery.fn.extend({ alertMessage:function(message){ var txtboxValue = $(this).val();//使用$(this)表示对哪个对象添加了扩展方法，这里是指$('#textbox' ) alert(txtboxValue + message); } }); $(function(){ $("input[name='btn' ]").click(function(){ $('#textbox' ).alertMessage("是字符串"); }) }) html: 复制代码 代码如下: <input type='button' name='btn' value='Alert'/> <input type='text' id='textbox' value='abc'/> 于是翻出了前年的Jquery中文文档。 大致浏览了下Jquery的方法。发现Jquery如此之强大，怎么以前就没有发现呢？于是就亲手写了基于Jquery的扩展函数，代码如下： 复制代码 代码如下: 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); } }); }; 以上函数调用如下： 复制代码 代码如下: <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>

　　推荐阅读

　　javascript动态添加表格数据行(ASP后台数据库保存例子)

在很多web应用中，我们会遇到很多需要动态插入多行纪录的地方。比如，在人才网站上，我们填写简历的时候，我们要填写我们的项目经验，我们可以根据自己的实际情况动态的添加条数，这种不是以单独页面的形式添加，这>>>详细阅读

本文标题：Jquery 扩展方法

地址：http://www.17bianji.com/kaifa2/JS/26446.html

 1/2    1