jQuery插件使用和写法

浏览数：13 / 时间：2015年06月09日

　　jQuery插件分类3中：

　　1.封装对象方法的插件。

　　2.封装全局函数的插件。

　　3.选择器插件。

　　jQuery插件机制

　　jQuery提供了两个用于扩展jQuery功能的方法：

　　1.jQuery.fn.extend()方法——封装对象方法。

　　代码如下：

　　;(function($){

　　　　　　////这里写插件代码

　　})(jQuery);

　　2.jQuery.extend()方法——封装全局函数、选择器插件，还有一个很强大的功能，用于扩展已有的Object对象。

　　代码如下：

　　jQuery.extend(target.obj1,......[objN]);////用一个或多个其他对象来扩展一个对象，然后返回被扩展的对象。

　　表格隔行变色示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .odd
        {
            background-color: Red;
        }
        .even
        {
            background-color: Green;
        }
        .selected
        {
            background-color: Blue;
        }
    </style>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        ; (function ($) {
            $.fn.extend({
                "alterBgClass": function (options) {
                    ////设置默认值
                    options = jQuery.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 () {
                            ////判断当前checkbox是否选中
                            var hasSelected=$(this).hasClass(options.selected);
                            ////选中，则移除Class且checkbox不选中，否则,添加Class且checkbox选中
                            $(this)[hasSelected ? "removeClass" : "addClass"](options.selected).find(":checkbox").attr("checked", !hasSelected);
                                });
                    ////如果默认情况下选中，则添加Class
                    $("tbody>tr:has(td:has(:checkbox:checked))", this).addClass(options.selected);

                    return this;
                    }
            });
        })(jQuery);

        $(function () {
            $("#table1").alterBgClass();
        });
    </script>
</head>
<body>
    <table id="table1" border="1">
        <tr>
            <td>
                <input id="Checkbox1" type="checkbox" checked="checked" />
            </td>
            <td>
                123
            </td>
            <td>
                456
            </td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox2" type="checkbox" />
            </td>
            <td>
                789
            </td>
            <td>
                135
            </td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox3" type="checkbox" />
            </td>
            <td>
                789
            </td>
            <td>
                135
            </td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox4" type="checkbox" checked="checked" />
            </td>
            <td>
                789
            </td>
            <td>
                135
            </td>
        </tr>
    </table>
</body>
</html>