×

学习下Jquery扩展方法

作者:web1762017.06.26来源:Web前端之家浏览:9915评论:0
关键词:JQueryJS

网上搜索了信息在编写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>
哦靠,学会了吧

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/svg1488211200586.html

网友评论文明上网理性发言 已有0人参与

发表评论: