jQuery的内容很多,先整理了我觉得很实用的插件部分。jQuery的宗旨本就是”write less, do more”,而这些插件,简洁好用,大大简化了代码的复杂度,所以将他们单独归纳出来,收集备用: )
jQuery常用插件
表单验证插件validate
<script type="text/javascript" src=".../jquery.validate.js"></script>
该插件自带包含必填、数字、URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:
$(form).validate( {options} );
其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置
<script type="text/javascript" src="…/jquery.validate.messages_cn.js"></script>
validate插件默认提示是英文,加上上面的引用之后提示就会是中文的。
表单插件form
<script type="text/javascript" src="…/jquery.form.js"></script>
通过表单form插件,调用ajaxForm()方法,实现ajax方式向服务器提交表单数据,并通过方法中的options对象获取服务器返回数据,调用格式如下:
$(form).ajaxForm ( {options} );
其中form参数表示表单元素名称;options是一个配置对象,用于在发送ajax请求过程,设置发送时的数据和参数。
图片灯箱插件lightbox
<script type="text/javascript" src="…/jquery.notesforlightbox.js"></script>
该插件可以用圆角的方式展示选择中的图片,使用按钮查看上下张图片,在加载图片时自带进度条,还能以自动播放的方式浏览图片,调用格式如下:
$(linkimage).lightBox( {options} );
其中linkimage参数为包含图片的<a>元素名称,options为插件方法的配置对象。
E.G.
$("#Pics a").lightBox({
overlayBgColor:"#666", //图片浏览时的背景色
overlayOpacity:0.5, //背景色的透明度
containerResizeSpeed:600 //图片切换时的速度
})
图片放大镜插件jqzoom
<script type="text/javascript" src="…/jquery.jqzoom.js"></script>
在调用jqzoom图片放大镜插件时,需要准备一大一小两张一样的图片,在页面中显示小图片,当鼠标在小图片中移动时,调用该插件的jqzoom()方法,显示与小图片相同的大图片区域,从而实现放大镜的效果,调用格式如下:
$(linkimage).jqzoom( {options} );
其中linkimage参数为包含图片的<a>元素名称,options为插件方法的配置对象。
实现效果: 淘宝里面,查看商品图片时,鼠标移上去,会显示一个细节图。
E.G.
$("#jqzoom").jqzoom({
zoomWidth:123, //小图片所选区域的宽
zoomHeight:123, //小图片所选区域的高
zoomType:'reverse' //设置放大镜的类型
});
cookie插件cookie
<script type="text/javascript" src="…/jquery.cookie.js"></script>
使用cookie插件后,可以很方便地通过cookie对象保存、读取、删除用户的信息,还能通过cookie插件保存用户的浏览记录,它的调用格式为:
保存:
$.cookie(key,value);
读取:
$.cookie(key);
删除:
$.cookie(key,null);
其中参数key为保存cookie对象的名称,value为名称对应的cookie值。
搜索插件autocomplete
<script type="text/javascript" src="…/jquery.autocomplete.js" ></script>
搜索插件的功能是通过插件的autocomplete()方法与文本框相绑定,当文本框输入字符时,绑定后的插件将返回与字符相近的字符串提示选择,调用格式如下:
$(textbox).autocomplete(urlData, {options});
其中,textbox参数为文本框元素名称,urlData为插件返回的相近字符串数据,可选项参options为调用插件方法时的配置对象。
实现效果:当你在网页上输入用户名时,在没有输完全的情况下,网页可以给与提示。
右键菜单插件contextmenu
<script type="text/javascript" src="…/jquery.contextmenu.js"></script>
右键菜单插件可以绑定页面中的任意元素,绑定后,选中元素,点击右键,便通过该插件弹出一个快捷菜单,点击菜单各项名称执行相应操作,调用代码如下:
$(selector).contextMenu(menuId, {options});
Selector参数为绑定插件的元素,meunId为快捷菜单元素,options为配置对象。
自定义对象级插件lifocuscolor
<script type="text/javascript" src="…/jquery.lifocuscolor.js"></script>
自定义的lifocuscolor插件可以在<ul>元素中,鼠标在表项<li>元素移动时,自定义其获取焦点时的背景色,即定义<li>元素选中时的背景色,调用格式为:
$(Id).focusColor(color);
其中,参数Id表示<ul>元素的Id号,color表示<li>元素选中时的背景色。
自定义类级插件twoaddresult
<script type="text/javascript" src="…/jquery.twoaddresult.js"></script>
通过调用自定义插件twoaddresult中的不同方法,可以实现对两个数值进行相加和相减的运算,导入插件后,调用格式分别为:
$.addNum(p1, p2);
$.subNum(p1, p2);
上述调用格式分别为计算两数值相加和相减的结果,p1和p2为任意数值。
E.G.
$("#Text3").val({
$.subNum($("#Text1").val(),
'0'+$("#Text2").val())
});
加上’0’才能在结果中显示负数