jQuery 之一：对象插件

插件分为对象插件和类插件

下面介绍对象插件

Html代码：

<table id="table2">
    <thead><tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="choice" value=""/></td>
            <td>张山</td>
            <td>男</td>
            <td>浙江宁波</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice" value="" /></td>
                <td>李四</td>
            <td>女</td>
            <td>浙江杭州</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice" value="" checked="checked" /></td>
                    <td>王五</td>
            <td>男</td>
            <td>湖南长沙</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice" value="" /></td>
            <td>找六</td>
            <td>男</td>
            <td>浙江温州</td>    
        </tr>
        <tr>
        <td><input type="checkbox" name="choice" value="" /></td>
                <td>Rain</td>
            <td>男</td>
            <td>浙江杭州</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice" value="" checked="checked" /></td>
            <td>MAXMAN</td>
            <td>女</td>
            <td>浙江杭州</td>
        </tr>
    </tbody>
</table>

css 文件

<style type="text/css">
    table        { border:0;border-collapse:collapse;}
    td    { font:normal 12px/17px Arial;padding:2px;width:100px;}
    th            { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px    solid #333;}
    .even        { background:#FFF38F;}  /* 偶数行样式*/
    .odd        { background:#FFFFEE;}  /* 奇数行样式*/
    .selected    { background:#FF6500;color:#fff;}
    </style>

插件代码：

<script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    //插件编写
    ;(function($) {
        $.fn.extend({
            "alterBgColor":function(options){
                //设置默认值
                options=$.extend({
                    odd:"odd",    /* 偶数行样式*/
                    even:"even", /* 奇数行样式*/
                    selected:"selected" /* 选中行样式*/ 
                },options);
                $("tbody>tr:odd",this).addClass(options.odd);
                $("tbody>tr:even",this).addClass(options.even);
                $('tbody>tr',this).click(function() {
                    //判断当前是否选中
                    var hasSelected=$(this).hasClass(options.selected);
                    //如果选中，则移出selected类，否则就加上selected类
                    $(this)[hasSelected?"removeClass":"addClass"](options.selected)
                        //查找内部的checkbox,设置对应的属性。
                        .find(':checkbox').attr('checked',!hasSelected);
                });
                // 如果单选框默认情况下是选择的，则高色.
                $('tbody>tr:has(:checked)',this).addClass(options.selected);
                return this;  //返回this，使方法可链。
            }
        });
    })(jQuery);

    //插件应用
    $(function(){
        $("#table2")
                .alterBgColor()  //应用插件
                .find("th").css("color","gray");//可以链式操作
    })

</script>