读<jQuery 权威指南>[5]-插件

来源:转载

一、说明

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>


分享给朋友:
您可能感兴趣的文章:
随机阅读: