• jQuery插件使用和写法


      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》第二版

  • 相关阅读:
    python 学习
    快速排序
    U3D AStar 案例
    U3D AStar 算法原理
    .net core 实时通讯
    .net 算法复杂度
    U3D MVC 背包案例
    U3D 对象池
    Unity网络基础(NetWork)
    U3D Socket实现简易通讯
  • 原文地址:https://www.cnblogs.com/zhang-lei/p/3787239.html
Copyright © 2020-2023  润新知