JQuery之常用插件
来源:互联网 发布:苹果4代是几g网络 编辑:程序博客网 时间:2024/06/16 10:56
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>
通过表单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({ //绑定图片放大插件jqzoom zoomWidth: 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>
- JQuery之常用插件
- jquery之常用插件
- jQuery插件之【jqGrid】常用语法整理
- jQuery插件之【jqGrid】常用语法整理
- jQuery插件之【jqGrid】常用语法整理
- 【jQuery】jQuery常用插件
- Jquery常用插件
- jquery常用的插件
- Jquery常用的插件
- Jquery 常用240插件
- jquery常用的插件
- 常用JQuery插件整理
- 常用JQuery插件整理
- 常用JQuery插件整理
- 常用JQuery插件整理
- 常用JQuery插件整理
- Jquery 常用插件
- 常用JQuery插件整理
- mysql启动出现Can't connect to MySQL server on localhost (10061),并且没有mysql的相关服务
- Java反射——获取构造器以及创建对象
- Android反向进度条(ProgressBar)的实现——从右到左的进度条
- linux下的安装ffmpeg
- Selenium之常见元素处理系列四--下拉列表-多选下拉列表元素信息
- JQuery之常用插件
- CodeWar刷题代码收藏(一)
- 详细理解JSON
- Java面试题集
- java中整数的相等比较
- C语言内存布局
- 面试资料汇总
- Team Queue
- luogu1540【2010提高】机器翻译(队列)