Jquery 扩展方法

好久没有温习JS了。 最近看到VS2010把Jquery作为JS标准库纳入了Web项目里,再不会用Jquery,真怕自己“OUT”了。 于是翻出了前年的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>

 

posted @ 2010-05-06 21:42  bndy  阅读(1663)  评论(3编辑  收藏  举报