问答社区更多 >

学习下Jquery扩展方法

作者：web1762017.06.26来源：Web前端之家浏览：9649评论:0

关键词：JQuery JS

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

哦靠，学会了吧

赏您的支持是我们创作的动力！