jQuery_jQuery插件1_jQuery常用插件

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’才能在结果中显示负数