码迷,mamicode.com
首页 > Web开发 > 详细

jQuery插件使用和写法

时间:2014-06-14 20:10:58      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   java   http   

  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>

   注:以上内容摘自——《锋利的jQuery》第二版

jQuery插件使用和写法,布布扣,bubuko.com

jQuery插件使用和写法

标签:style   class   blog   code   java   http   

原文地址:http://www.cnblogs.com/zhang-lei/p/3787239.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!