jQuery常用插件

Posted 2020-06-18

 

  表单验证插件----validate

jQuery插件：

<script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.js"></script>
<script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.messages_cn.js"></script>

 

  该插件自带包含必填、数字、URL在内容的验证规则，即时显示异常信息，此外，还允许自定义验证规则，插件调用方法如下：$(form).validata({options})

  其中form参数表示表单元素名称，options参数表示调用方法时配置的对象，所有的验证规则和异常信息显示的位置都在该对象中进行设置。

 

  表单插件-----form

<script type="text/javascript" src="http://www.imooc.com/data/jquery.form.js"></script>

   通过表单from插件，调用ajaxForm()方法，实现ajax方式向服务器提交表单数据，并通过方法中的options对象获取服务器返回的数据，调用格式如下：

$(form).ajaxForm({options})

  其中form参数表示表单元素名称：options是一个配置对象，用于在发送ajax请求过程中，设置发送时的数据和参数。

 

  图片灯箱插件---lightBox

<script type="text/javascript" src="http://www.imooc.com/data/jquery.notesforlightbox.js"></script>

  该插件可以用圆角的方式展示选择中的图片，使用按钮查看上下张图片，在加载图片时自带进度条，还能以自动播放的方式浏览图片，调用格式如下：

$(linkimage).lightBox({options})

其中linkimage参数为包含图片的<a>元素名称，options为插件方法的配置对象

 

   图片放大镜插件----jqzoom

 <script type="text/javascript" src="http://www.imooc.com/data/jquery.jqzoom.js"></script>

在调用jqzoom图片放大镜插件时，准备一大一小两张一样的图片，在页面中显示小图片，当鼠标在小图片中移动时，调用该插件的jqzoom()方法，显示与小图片相同的大图片区域，从而实现放大镜的效果，调用格式如下：

$(linkimage).jqzoom({options})

其中linkimage参数为包含图片<a>元素名称，options为插件方法的配置对象

 

   cookie插件----cookie

 使用cookie插件后，可以很方便的通过cookie对象保存，读取，删除用户的信息，还能通过cookie插件保存用户的浏览记录，它的调用格式为：

保存：$.cookie(key.value)

读取：$.cookie(key)

删除：$.cookie(key.null)

其中key为保存cookie对象的名称，value为名称对应的cookie值

 

 

搜索插件---autocomplete

搜索插件的功能是通过插件的autocomplete（）方法与文本框相绑定，当文本框输入字符时，绑定后的插件将返回与字符相近的字符串提示选择，调用格式如下：

$(textbox).autocomplete(urlData,[options]);

其中textbox参数为文本框元素名称，urlData为插件返回的相近的字符串数据，可选项参数options为调用插件方法时配置的参数。