管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

Jquery 扩展方法

　　网上搜索了信息在编写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>

教程首页 更多教程