06_jQuery插件

jQuery插件

插件(Plugin)是一种遵循一定规范的应用程序接口编写出来的程序。帮助用户开发出稳定的应用系统，节约项目成本。

1、  jQuery表单验证插件---Validation

1)第一个验证的例子示例0601的6-1

2)为了把所有验证都放到class属性里，写法如0601的6-2

3)为了把所有验证代码和html代码分离开，写法如0601的6-3

4)引入中文验证信息库，如：0601的6-4

5)自定义验证信息，如：0601的6-5

6)自定义验证信息美化，如：0601的6-6

7)自定义验证规则，如：0601的6-7

2、  jQuery UI插件

3.1、第一个拖动排序的例子，如：0603

3.2、某些情况下会因为拖动事件抢在单击事件之前而导致单击事件失效。可以设置参数delay延时1毫秒，如：0603

3、  管理Cookie的插件

4.1、第一个cookie的例子，如：0604

4.2、cookie的其它几个参数，如：0604

4、  编写jQuery插件

编写插件的目的是给已经有的一系列方法或函数做一个封装，以便在其它地方重复使用，提高维护和开发效率。插件主要分三种类型：

5.1、封装对象方法的插件

将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件。例编写设置和获取匹配元素颜色的插件：

1)       命名：jquery.color.js

2)       搭框架：

;(function($){

                     //…

})(jQuery);

3)       扩展jQuery对象的方法：

;(function($){

                     $.fn.extend({

                                        “color”:function(value){

                                                           //…

}

});

})(jQuery);

4)       测试插件是否可用：

Alert($(“div”).color());//获取div元素的颜色

Alert($(“div”).color(“red”))//设置div元素的颜色

                   示例0605

5.2、封装全局函数的插件

                   将独立的函数加到jQuery命名空间之下，在jQuery内部作为全局函数的插件附加到内核上。例编写去除左侧和右侧空格的函数：

1)       编写去除左侧和右侧空格的方法：

Function ltrim(text){

                    Return (text || “”).replace(/^\s+/g,””);

}

Function rtrim(text){

                    Return (text || “”).replace(/\s+$/g,””);

}

2)       构建一个Object对象，把函数名和函数体都放进去，名/值对为函数名和函数体：

{

ltrim : function(text){

                    Return (text || “”).replace(/^\s+/g,””);

},

rtrim : function(text){

                   Return (text || “”).replace(/\s+$/g,””);

}

}

3)       用jQuery.extend()方法直接对jQuery对象进行扩展

;(function($){

                    $.extend({

                   …

});

})(jQuery);

4)       测试函数是否可用：

jQuery.ltrim(“    AAA   ”);

jQuery.rtrim(“   AAAA   ”);

                   示例0605

5.3、选择器插件。

虽然jQuery选择器很强大，个别情况下还会用到选择器插件，扩展一些选择器。