一、说明
jQuery插件官网：http://plugins.jquery.com/
使用插件时引用顺序：插件引用要位于主jquery库之后。
二、插件应用实例
演示插件jquery.validate.js的使用方法：
①引用jQuery主库和validate插件。
注意：
- jQuery主库要先于插件引用；
- 如果想显示中文错误提示，还需要引用jquery.validate.messages_cn.js。
<script type="text/javascript"
src="Jscript/jquery-1.4.2.js">
</script>
<script type="text/javascript"
src="Js-7-1/jquery.validate.js">
</script>
<script type="text/javascript"
src="Js-7-1/jquery.validate.messages_cn.js">
</script>
<form id="frmV" method="get" action="#">
<div class="divFrame">
<div class="divTitle">
请输入下列资料
</div>
<div class="divContent">
<div>
标题：<br />
<input id="title" name="title"
type="text" class="txt" />
<font color="red">*</font><br />
<span></span>
</div>
<div>
</div>
</div>
<div class="divBtn">
<input id="sbtUser" type="submit"
value="提交" class="btn" />
</div>
</div>
</form>
②设置验证规则，注意name要与控件对应。
<script type="text/javascript">
$(function() {
$("#frmV").validate(
{
/*自定义验证规则*/
rules: {
title: { required: true, minlength: 5,maxlength:18 }
},
/*错误提示位置*/
errorPlacement: function(error, element) {
error.appendTo(element.siblings("span"));
}
}
);
})
</script>
三、自定义插件
1.插件分类：
2.插件开发注意事项
①插件命名格式： jquery.[插件名].js；
②所有插件都应该以分号；开头，避免压缩插件之后出现错误；为了保证JQuery的链式写法正确性，插件本身必须返回一个jQuery对象；
③在插件内部，this表示选择器选中的对象，和平时的this含义不太相同；
④为了避免冲突，在编写插件时尽量使用jQuery而不是$符号；
⑤对象级别插件所有方法都依附于jquery.fn主体对象；类级别插件所有方法都依附于jquery对象。
⑥编写对象级别插件是用jQuery.fn.extend()方法进行扩展，编写类级别插件时是用jQuery.extend()方法进行扩展。
2.对象插件示例：
插件功能比较简单，当鼠标经过菜单项时自动切换背景颜色。
首先定义插件jquery.color.js
; (function($) {
$.fn.extend({
"focusColor":function (color) {
var def_col = "#ccc";
var list_bg = "#fff";
color = (color == undefined )? def_col : color;
$(this).find("li").each(function() {
$(this).mouseover(function() {
$(this).css("background-color", color);
}).mouseout(function() {
$(this).css("background-color", list_bg);
});
});
return $(this);
}
});
})(jQuery);
调用：
<script type="text/javascript">
$(function() {
$("#u1").focusColor("green");//调用自定义的插件
})
</script>
3.类插件示例：
定义类级别插件jquery.calc.js。
;$(function () {
$.extend({
"addNum": function (a, b) {
a = a || 0;
b = b || 0;
return parseInt(a) + parseInt(b);
}
});
})(jQuery);
调用：
<script type="text/javascript">
$(function() {
$("#Button1").click(function() {
$("#Text3").val(
$.addNum($("#Text1").val(),
$("#Text2").val()));
});
})
</script>
