常用的jQuery插件
1.表单验证插件formValidator
formValidator目前支持5种大的校验方式,
1) inputValidator (针对input,textarea,select控件的字符长度,值范围,选择个数的控制)
2) compareValidator (提供2个对象的比较,目前可以比较字符串和数值型)
3) ajaxValidator (通过ajax到服务器上做数据校验)
4) regexValidator (提供可扩展的正则表达式库)
5) functionValidator (可使用外部函数来做校验)
formValidator与其他校验控件的区别:
1 校验功能可以扩展 : 其他的校验控件是代码里写死的,而formValidator是通过外部js文件来扩展的,你可以通过写正则表达式和函数来无限扩展这些功能.
2 实现了校验代码于html代码的完全分离
3 你只需要写一行代码就能完成一个表单元素的所有校验:
1) 支持所有类型客户端控件的校验
2) 支持jQuery所有的选择器语法,只要控件有唯一的ID和type属性
3) 支持函数和正则表达式的扩展.(提供扩展库formValidatorReg.js以供添加,修改)
4) 支持2种校验模式.第一种:文字提示(showword模式);第二种:弹出窗口提示(showalert模式)
5) 支持多个校验组
6) 支持4种状态的信息提示功能,可以灵活的控制4种状态是否显示
7) 支持自动构建提示层.可以进行精确定位
8) 支持自定义错误提示信息
9) 支持控件的字符长度,值范围,选择个数的控制.值范围支持数值型和字符型;选择的个数支持radio/checkbox/select三种控件
10) 支持2个控件值得比较.
11) 支持服务器端校验
12) 支持输入格式的校验
2.动态绑定事件插件--livequery
1.livequery插件简介
可以利用它给相应的DOM元素注册事件或者触发回调函数.不仅当前选择器匹配的元素会被绑定事件,而且后来通过javaScript添加的元素都会被绑定事件.
当元素不再和选择器匹配时,livequery会自动取消事件注册,使得开发者不再需要关注HTML元素的来源,只需要关注如何编写其绑定的事件即可.
2.livequery插件下载地址
http://plugins.jquery.com/project/liveQuery
3.jQuery UI插件
1.jQuery UI简介
jQuery UI主要分为3个部分:
交互:这里都是一些与鼠标交互相关的内容.包括拖动,置放,缩放,选择和排序等等.此库需要一个jQuery UI核心库--ui.core.js支持.
微件:这里主要是一些界面的扩展.包括手风琴导航,自动完成,取色器,对话框,滑块,标签,日历,放大镜,进度条和微调控制器等等.此库需要一个jQuery UI核心库--ui.core.js支持.
效果库:此库用于提供丰富的动画效果,让动画不再局限于animate()方法.效果库有自己的一套核心即effects.core.js,无需jQuery UI的核心库--ui.core.js支持
2.jQuery UI插件下载地址
3.与单击事件冲突
在某些特殊情况下会因为拖动事件抢在单击事件之前而导致单击事件失效.如果出现这种情况,可以设置参数delay延时1毫秒.
示例:
$(document).ready(function(){ $("#myList").sortable({delay:1});//修复潜在链接点击问题 });
4.与后台结合
如果要把Sortable插件与后台结合,需要完成两件事情,首先是查找触发排序后的回调函数,然后取得排列的顺序并通过Ajax发送给后台.
4.管理Cookie的插件--Cookie
jQuery提供了一个十分简单的插件来管理网站的Cookie,该插件的名称也是Cookie.
Cookie插件的下载地址是:http://plugins.jquery.com/project/Cookie
编写jQuery插件
1.插件的种类
1.封装对象方法的插件:将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件.据不完全统计,95%以上的jQuery插件都是封装对象方法的插件.
2.封装全局函数的插件:可以将独立的函数加到jQuery命名空间之下.
3.选择器插件:个别情况下,会需要用到选择器插件.
2.插件的基本要点
jQuery插件的文件名推荐命名为jquery.[插件名].js, 以免和其他JavaScript库插件混淆.
所有的对象方法都应答附加到jQuery.fn对象上,而所有的全局函数都应当附加到jQuery对象本身上.
在插件内部,this指向的是当前通过选择器获取的jQuery对象,而不像一般的方法那样,例如click()方法,内部的this指向的是DOM元素.
可以通过this.each来遍历所有元素.
所有的方法或函数插件,都应当以分号结尾,否则压缩的时候可能出现问题.
插件应该返回一个jQuery对象,以保证插件的可链式操作.
避免在插件内部使用$作为jQuery对象的别名,而应使用完整的jQuery来表示.这样可以避免冲突.
3.插件中的闭包
ECMAScript对闭包进行了简单的描述:允许使用内部函数(即函数定义和函数表达式位于另一个函数的函数体内),而且,这些内部函数可以访问他们所在的外部函数中声明的所有局部变量,参数和声明的其他内部函数,当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包.