JQuery之常用插件
1、表单验证插件validate
该插件自带包含必填、数字、URL在内容的验证规则，即时显示异常信息，此外，还允许自定义验证规则，插件调用方法如下：
$(form).validate({options})
其中form参数表示表单元素名称，options参数表示调用方法时的配置对象，所有的验证规则和异常信息显示的位置都在该对象中进行设置。
例如，当点击表单中的“提交”按钮时，调用validate插件验证用户名输入是否符合规则，并将异常信息显示在页面中，
<head><title>表单验证插件</title><link href="style.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script><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></head><body><form id="frmV" method="get" action="#"><div id="divtest"><div class="title"><span class="fl">表单验证插件</span> <span class="fr"><input id="btnSubmit" type="submit" value="提交" /></span></div><div class="content"><span class="fl">邮箱：</span><br /><input id="email" name="email" type="text" /><br /><span class="tip"></span></div></div></form><script type="text/javascript">$(function () {$("#frmV").validate({/*自定义验证规则*/rules:{email:{required:true,email:true}},/*错误提示位置*/errorPlacement: function (error, element) {error.appendTo(".tip");}});});</script></body>2、表单插件form
通过表单form插件，调用ajaxForm()方法，实现ajax方式向服务器提交表单数据，并通过方法中的options对象获取服务器返回数据，调用格式如下：
$(form). ajaxForm ({options})
其中form参数表示表单元素名称；options是一个配置对象，用于在发送ajax请求过程，设置发送时的数据和参数。
例如，在页面中点击“提交”按钮，调用form插件的
ajaxForm()方法向服务器发送录入的用户名和密码数据，服务器接收后返回并显示在页面中，
<head><title>表单插件</title><link href="style.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script><script type="text/javascript" src="http://www.imooc.com/data/jquery.form.js"></script></head><body><form id="frmV" method="post" action="#"><div id="divtest"><div class="title"><span class="fl">个人信息页</span> <span class="fr"><input id="btnSubmit" type="submit" value="提交" /></span></div><div class="content"><span class="fl">用户名：</span><br /><input id="user" name="user" type="text" /><br /><span class="fl">昵称：</span><br /><input id="nick" name="nick" type="text" /><div class="tip"></div></div></div></form><script type="text/javascript">$(function () {var options = {url: "http://www.imooc.com/data/form_f.php", target: ".tip"}$("#frmV").ajaxForm(options);});</script></body>3、图片灯箱插件lightBox
该插件可以用圆角的方式展示选择中的图片，使用按钮查看上下张图片，在加载图片时自带进度条，还能以自动播放的方式浏览图片，调用格式如下：
$(linkimage).lightBox({options})
其中linkimage参数为包含图片的<a>元素名称，options为插件方法的配置对象。
例如，以列表的方式在页面中展示全部的图片，当用户单击其中某张图片时，通过引入的图片插件，采用“灯箱”的方式显示所选的图片，
<head><title>图片灯箱插件</title><link rel="stylesheet" type="text/css" href="http://www.imooc.com/data/jquery.notesforlightbox.css" /><link href="style.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script><script type="text/javascript" src="http://www.imooc.com/data/jquery.notesforlightbox.js"></script></head><body><div id="divtest"><div class="title"><span class="fl">我的相册</span></div><div class="content"><div class="divPics"><ul><li><a href="http://img.mukewang.com/52e489f20001ecfc04480275.jpg" title="第1篇风景图片"><img src="http://img.mukewang.com/52e489f20001ecfc04480275.jpg" alt="" /></a></li><li><a href="http://img.mukewang.com/52e48a1e0001eec804480275.jpg" title="第2篇风景图片"><img src="http://img.mukewang.com/52e48a1e0001eec804480275.jpg" alt="" /></a></li><li><a href="http://img.mukewang.com/52e48a4c00015ad204480275.jpg" title="第3篇风景图片"><img src="http://img.mukewang.com/52e48a4c00015ad204480275.jpg" alt="" /></a></li></ul></div></div></div><script type="text/javascript">$(function () {?overlayBgColor: "#666", //图片浏览时的背景色overlayOpacity: 0.5, //背景色的透明度containerResizeSpeed: 600 //图片切换时的速度})});</script></body>4、图片放大镜插件jqzoom
在调用jqzoom图片放大镜插件时，需要准备一大一小两张一样的图片，在页面中显示小图片，当鼠标在小图片中移动时，调用该插件的jqzoom()方法，显示与小图片相同的大图片区域，从而实现放大镜的效果，调用格式如下：
$(linkimage).jqzoom({options})
其中linkimage参数为包含图片的<a>元素名称，options为插件方法的配置对象。
例如在页面中，添加一个被<a>元素包含的图片元素，当在图片元素中移动鼠标时，在图片的右边，将显示放大后的所选区域效果，
<head><title>图片放大镜插件</title><link href="http://www.imooc.com/data/jquery.jqzoom.css" rel="stylesheet" type="text/css" /><link href="style.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script><script type="text/javascript" src="http://www.imooc.com/data/jquery.jqzoom.js"></script></head><body><div id="divtest"><div class="title"><span class="fl">图片放大镜</span> </div><div class="content"><a href="http://static.mukewang.com/img/52e4aec90001924d06800599.jpg" id="jqzoom" title="小兔子乖乖"><img src="http://static.mukewang.com/img/52e4aee700012df702130212.jpg" alt=""/></a></div></div><script type="text/javascript">$(function () {$("#jqzoom").jqzoom({ //绑定图片放大插件jqzoomzoomWidth: 123, //小图片所选区域的宽zoomHeight: 123, //小图片所选区域的高zoomType: 'reverse' //设置放大镜的类型});});</script></body>5、cookie插件
使用cookie插件后，可以很方便地通过cookie对象保存、读取、删除用户的信息，还能通过cookie插件保存用户的浏览记录，它的调用格式为：
保存：$.cookie(key，value)；读取：$.cookie(key)，删除：$.cookie(key，null)
其中参数key为保存cookie对象的名称，value为名称对应的cookie值。
例如，当点击“设置”按钮时，如果是“否保存用户名”的复选框为选中状态时，则使用cookie对象保存用户名，否则，删除保存的cookie用户名，
<head><title>cookie插件</title><link href="style.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script><script src="http://www.imooc.com/data/jquery.cookie.js" type="text/javascript"></script></head><body><div id="divtest"><div class="title"><span class="fl">cookie插件</span> <span class="fr"><input id="btnSet" type="button" value="设置" /></span></div><div class="content"><span class="fl">邮箱：</span><br /><input id="email" name="email" type="text" /><br /><input id="chksave" type="checkbox" />是否保存邮箱</div></div><script type="text/javascript">$(function () {if ($.cookie("email")) {$("#email").val($.cookie("email"));}$("#btnSet").bind("click", function () {if ($("#chksave").is(":checked")) {$.cookie("email", $("#email").val(),{path: "/", expires: 7})}else {$.cookie("email",null, {path: "/"})}});});</script></body>6、搜索插件autocomplete
搜索插件的功能是通过插件的autocomplete()方法与文本框相绑定，当文本框输入字符时，绑定后的插件将返回与字符相近的字符串提示选择，调用格式如下：
$(textbox).autocomplete(urlData,[options]);
其中，textbox参数为文本框元素名称，urlData为插件返回的相近字符串数据，可选项参数options为调用插件方法时的配置对象。
例如，当用户在文本框输入内容时，调用搜索插件的autocomplete()方法返回与输入内容相匹配的字符串数据，显示在文本框下，提示选择，
<head><title>搜索插件</title><link href="http://www.imooc.com/data/jquery.autocomplete.css" rel="stylesheet" type="text/css" /><link href="style.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script><script src="http://www.imooc.com/data/jquery.autocomplete.js" type="text/javascript"></script></head><body><div id="divtest"><div class="title"><span class="fl">搜索插件</span></div><div class="content"><span class="fl">用户名</span><br /><input id="txtSearch" name="txtSearch" type="text" /><div class="tip"></div></div></div><script type="text/javascript">$(function () {var arrUserName = ["王五", "刘明", "李小四", "刘促明", "李渊", "张小三", "王小明"];$("#txtSearch").autocomplete(arrUserName,{minChars: 0, //双击空白文本框时显示全部提示数据formatItem: function (data, i, total) {return "<I>" + data[0] + "</I>"; //改变匹配数据显示的格式},formatMatch: function (data, i, total) {return data[0];},formatResult: function (data) {return data[0];}}).result(SearchCallback); function SearchCallback(event, data, formatted) {$(".tip").show().html("您的选择是：" + (!data ? "空" : formatted));}});</script></body>7、右键菜单插件contextMenu
右键菜单插件可以绑定页面中的任意元素，绑定后，选中元素，点击右键，便通过该插件弹出一个快捷菜单，点击菜单各项名称执行相应操作，调用代码如下：
$(selector).contextMenu(menuId,{options});
Selector参数为绑定插件的元素，meunId为快捷菜单元素，options为配置对象。
例如，选中页面<textarea>元素，点击右键，弹出插件绑定的快捷菜单，点击菜单中的各个选项，便在页面中显示操作的对应名称。
<head><title>右键菜单插件</title><link href="http://www.imooc.com/data/jquery.contextmenu.css" rel="stylesheet" type="text/css" /><link href="style.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script><script src="http://www.imooc.com/data/jquery.contextmenu.js" type="text/javascript"></script></head><body><div id="divtest"><div class="title"><span class="fl">点击右键</span></div><div class="content"><input id="btnSubmit" type="button" value="提交" /><div class="tip"></div></div><div class="contextMenu" id="sysMenu"><ul><li id="Li3"><img src="http://static.mukewang.com/img/52e4b34b0001bb6d00160016.jpg" alt="" />保存</li><li id="Li4"><img src="http://static.mukewang.com/img/52e4b3680001424900160016.jpg" alt="" />退出</li></ul></div></div><script type="text/javascript">$(function () {$(".title").contextMenu("sysMenu",{ bindings:{'Li3': function (Item) {$(".tip").show().html("您点击了“保存”项");},'Li4': function (Item) {$(".tip").show().html("您点击了“退出”项");}}});});</script></body>8、自定义对象级插件lifocuscolor插件
自定义的lifocuscolor插件可以在<ul>元素中，鼠标在表项<li>元素移动时，自定义其获取焦点时的背景色，即定义<li>元素选中时的背景色，调用格式为：
$(Id).focusColor(color)
其中，参数Id表示<ul>元素的Id号，color表示<li>元素选中时的背景色。
例如，在页面中，调用自定义的lifocuscolor插件，自定义<li>元素选中时的背景色，
<head><title>自定义对象级别插件</title><link href="style.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script><script src="http://www.imooc.com/data/jquery.lifocuscolor.js" type="text/javascript"></script></head><body><div id="divtest"><div class="title"><span class="fl">对象级别的插件</span></div><div class="content"><ul id="u1"><li><span>橘子</span><span>水果</span></li><li><span>芹菜</span><span>蔬菜</span></li><li><span>香蕉</span><span>水果</span></li></ul></div></div><script type="text/javascript">$(function () {$("#u1").focusColor("red");//调用自定义的插件})</script></body>9、自定义类级别插件—— twoaddresult
通过调用自定义插件twoaddresult中的不同方法，可以实现对两个数值进行相加和相减的运算，导入插件后，调用格式分别为：
$.addNum(p1,p2) 和 $.subNum(p1,p2)
上述调用格式分别为计算两数值相加和相减的结果，p1和p2为任意数值。
例如，在页面的两个文本框中输入任意数值，点击“计算”按钮调用自定义插件中$.addNum()方法，计算两数值的和并将结果显示在另一文本框中，
<head><title>自定义类级别插件</title><link href="style.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script><script src="http://www.imooc.com/data/jquery.twoaddresult.js" type="text/javascript"></script></head><body><div id="divtest"><div class="title"><span class="fl">自定义类级别插件</span> <span class="fr"><input id="btnCount" type="button" value="计算" /></span></div><div class="content">两数相减：<input id="Text1" type="text" class="txt" />-<input id="Text2" type="text" class="txt" />=<input id="Text3" type="text" class="txt" /></div></div><script type="text/javascript">$(function () {$("#btnCount").bind("click", function () {$("#Text3").val($.subNum($("#Text1").val(),$("#Text2").val()));});});</script></body>最近在整理一些资源工具，放在网站分享 http://tools.maqway.com
欢迎关注公众号：麻雀唯伊 ， 不定时更新资源文章，生活优惠，或许有你想看的
JQuery之常用插件相关推荐
- jQuery(UI)常用插件
jQuery 官方网站:http://jquery.com/ 下载地址:http://jquery.com/download/ 插件地址: http://plugins.jquery.com/ 常用插 ...
- 分享10款常用的jQuery焦点图插件
爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件 之前我们已经分享过很多非常实用的jQuery焦点图 ...
- 110个常用的jquery特效和插件
为了方便网友们的学习jquery,在互联网中把网站常用到的特效和插件都收集起来打包,最后提供给大家下载,希望可以帮到网友们... 1.2款jQuery图片自动切换常用广告代码 2.jquery+cs ...
- jQuery常用插件网址
jQuery常用插件网址 jQuery插件库 http://www.jq22.com jQuery之家 http://www.htmleaf.com jQuery的插件_dowebok https:/ ...
- jQuery常用插件（如何调用jQuery插件学习第一天）
插件是以jQuery的核心代码为基础,编写出符合一定规范的应用程序,并将程序进行打包,调用时,仅需要包含该打包后的JS文件即可.如需要使用表单插件,按下列步骤就可实现插件的调用: (1)在页面中导入包 ...
- Jquery系列（七） 常用插件
引言: 工欲善其事必先利其器--论语.学会使用工具,提高的不仅仅是效率,还节省你的时间去做更多的事情. 概述: 本篇博客,小编为大家简单介绍几种使用频繁的jQuery插件.先说说什么插件,插件是一种遵 ...
- 转:jQuery常用插件
原文来自于:http://download.csdn.net/album/detail/369 jquery.cycle.all.js 上传者:itmyhome 上传时间:2014-06-1 ...
- 前端常用插件、工具类库汇总（上）
前言 在开发中,我们经常会将一些常用的代码块.功能块进行封装,为的是更好的复用.那么,被抽离出来独立完成功能,通过API或配置项和其他部分交互,便形成了插件. 下面这些是我在工作中积累的一些常用的前端 ...
- Visual Studio Code 常用插件整理
常用插件说明: 一.HTML Snippets 超级使用且初级的H5代码片段以及提示 二.HTML CSS Support 让HTML标签上写class智能提示当前项目所支持的样式 三.Debugg ...
最新文章
- html判断数字数据的大小写,判断一个字符是否是数字、还是大小写字母
- avcodec_send_packet()函数与avcodec_receive_frame()函数
- 软件工程实践2017第一次作业-051502125
- wp自定义帖子没标签_拼多多搜索智能推广和自定义推广区别在哪里？
- ndk学习19: 使用Eclipse调试so
- Android quot;QR二维码扫描quot;
- 正面管教PHP沙龙,正面管教沙龙体会
- *【HDU - 6333】Problem B. Harvest of Apples （莫队，逆元，组合数学）（这样预处理正确吗？）
- 程序员为什么爱穿格子衫和卫衣？
- ECCV 2020 论文大盘点-自动驾驶篇
- vb.net json上传服务器_vue项目编译后自动上传，告别繁琐的操作
- CodeBlocks下载、安装与编写C语言
- 联想计计算机电源管理,联想电源管理软件energy manag
- QTableView自定义拖拽行
- 详解GAMIT/GLOBK软件使用
- es创建索引和yellow排查解决
- 如何使用Redis Streams
- 描述性统计分析 | 直方图
- 使用Python制作专属微信小客服
- 美国服务器网络黑客的常用手段