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插件使用和写法的更多相关文章

  1. jquery插件的基本写法

    (function($){ var a={name:'2222',age:5555} var b={sex:'男',grade:5555} var c=$.extend({},a,b);//合并到新的 ...

  2. JQuery插件的写法 （转：太棒啦！）

    JQuery插件写法的总结 最近Web应用程序中越来越多地用到了JQuery等Web前端技术.这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户 端UI的效率.JQuery本身提 ...

  3. jquery插件 - 学习笔记 （插件参数及函数的调用）

    今天研究的是jquery插件的基本写法: 比如我打算写一个名为 ImageZoom 的插件 前台调用: <script src="ImageZoom.js"></ ...

  4. 自己动手Jquery插件

    最近Web应用程序中越来越多地用到了JQuery等Web前端技术.这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户 端UI的效率.JQuery本身提供了丰富的操作,但是,有时候 ...

  5. 用实例一步步教你写Jquery插件

    最近Web应用程序中越来越多地用到 了JQuery等Web前端技术.这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户 端UI的效率.JQuery本身提供了丰富的操作,但是,有时 ...

  6. 动手Jquery插件

    自己动手Jquery插件 最近Web应用程序中越来越多地用到了JQuery等Web前端技术.这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户 端UI的效率.JQuery本身提供 ...

  7. jQuery插件写法总结以及面向对象方式写法总结

    前两个是jQuery插件,后面2个是以对象的形式开发,都类似. 写法一 (function($, window){ // 初始态定义 var _oDialogCollections = {}; // ...

  8. 第7章 jQuery插件的使用和写法

    第7章 jQuery插件的使用和写法 插件又称扩展,是一种遵循一定规范的应用程序接口写出来的程序. 插件的编写思想基于面向对象. 获取最新的插件可以查看jquery官网:http://plugins. ...

  9. Jquery插件写法及extentd函数

    JQuery插件写法 JQuery插件又分为类扩展方法和对象扩展方法两种,类插件是定义在JQuery命令空间的全局函数,直接通过可调用,如可调用,如可调用,如.ajax():对象插件是扩展JQuery ...

随机推荐

  1. java学习笔记06--正则表达式

    java学习笔记06--正则表达式 正则表达式可以方便的对数据进行匹配,可以执行更加复杂的字符串验证.拆分.替换等操作. 例如:现在要去判断一个字符串是否由数字组成,则可以有以下的两种做法 不使用正则 ...

  2. 【OpenCV新手教程第14】OpenCVHough变换：霍夫变换线，霍夫变换圆汇编

    本系列文章由@浅墨_毛星云 出品.转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/details/26977557 作者:毛星云(浅墨) ...

  3. UVa 10616 - Divisible Group Sums

    称号:给你n数字.免去m一个,这使得他们可分割d.问:有多少种借贷. 分析:dp,D01背包. 背包整数分区. 首先.整点d.则全部数字均在整数区间[0,d)上: 然后,确定背包容量,最大为20*10 ...

  4. ural 1837. Isenbaev's Number bfs

    题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1837 描述: Isenbaev是国外的一个大牛. 现在有许多人要参加ACM ICPC. ...

  5. hdu4185+poj3020（最大匹配+最小边覆盖）

    传送门:hdu4185 Oil Skimming 题意:n*n的方格里有字符*和#,只能在字符#上放1*2的板子且不能相交,求最多能放多少个. 分析:直接给#字符编号,然后相邻的可以匹配,建边后无向图 ...

  6. ImageMagick的安装及使用

    近期在使用ImageMagick处理酒店团购图片,写篇博客小小的总结下它的安装及使用方法.ImageMagick是一套功能强大且免费的图片处理开发包,能够用来读,写和处理多种格式的图片文件,总之非常强 ...

  7. JAVA实现Shell排序

    Shell排序可以理解为插入排序的变种,它充分利用了插入排序的两个特点: (1). 当数据规模小的时候非常高效. (2). 当给定数据已经有序时的时间代价为O(N) 所以,Shell排序每次把数据分成 ...

  8. Wix打包系列（五） 部署数据库

    原文:Wix打包系列(五) 部署数据库 很多人在使用vs进行打包的时候,经常会为数据库部署的问题犯愁,即便是重写Installer类的方法,也不是很可靠方便,下面我们来看看在wix中如何部署数据库. ...

  9. 从尾到头打印链表--《剑指offer》

    题目:非常easy,就是题目,将链表从尾到头打印出来. 可能我们首先想到的是将链表进行遍历,将之前的訪问的数据进行保存,最后进行反向输出,但是保存数据的空间是个问题:或者是我们将整个链表进行反向操作, ...

  10. 一次失败的刷题经历:[LeetCode]292之尼姆游戏(Nim Game)（转）

    最近闲来无事刷LeetCode,发现这道题的Accept Rate还是挺高的,尝试着做了一下,结果悲剧了,把过程写下来,希望能长点记性.该题的描述翻译成中文如下: 你正在和你的朋友玩尼姆游戏(Nim ...