一，常用jquery插件简介：
1，jquery.validation 和 jquery metadata：
相关源码及demo参见：https://github.com/jzaefferer/jquery-validation
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
<head><title></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery UI Demos</title> <style type="text/css"> *{ font-family:Verdana; font-size:96%; } label {10em; float:left; } label.error {float:none; color:blue;padding-left:5em;vertical-align:top;} p {clear:both;} .submit {margin-left:12em;} em {font-weight:bold;padding-right:1em;vertical-align:top;} em.error { background:url("images/unchecked.gif") no-repeat 0px 0px; padding-left: 16px; } em.success { background:url("images/checked.gif") no-repeat 0px 0px; padding-left: 16px; } </style> <script src="jquery-1.8.3.js" type="text/javascript" ></script> <script src="jquery-valid-v1_11_1/jquery.validate.min.js" type="text/javascript" ></script> <script src="jquery-valid-v1_11_1/localization/messages_zh.js" type="text/javascript" ></script> <script type="text/javascript" > $(function(){ //自定义验证规则 $.validator.addMethod("doFormula",function(value,element,param){ return value == eval(param); }, "请正确输入计算结果"); $("#commentForm").validate({ rules:{ username:{required:true,minlength:2}, email:{required:true,email:true}, url:"url", comment:"required", valcode:{doFormula:"7+9"} //应用自定义验证规则 } ,messages:{ username:{required:"姓名必填",minlength:"最少2个字"} } ,errorElement:"em" ,success:function(label){ label.text("").addClass("success"); } }); }); </script></head><body> <form action="#" id="commentForm" method="GET"> <fieldset> <legend>评论信息</legend> <p> <label for="txtUserName">姓名</label><em>*</em> <input id="txtUserName" name="username" class="{validate:{required:true}}" size="25"></input> </p> <p> <label for="txtEmail">电子邮件</label><em>*</em> <input id="txtEmail" name="email" size="25"></input> </p> <p> <label for="txtUrl">网址：</label><em> </em> <input id="txtUrl" name="url" size="25" type="text"></input> </p> <p> <label for="txtComment">评论：</label><em>*</em> <textarea id="txtComment" name="comment"></textarea> </p> <p> <label for="txtValCode">验证码：</label><em> </em> <input id="txtValCode" name="valcode" size="25" type="text"></input> </p> <p> <input type="submit" id="btnForm" value="submit"></input> </p> </fieldset> </form></body></html> |
2，表单插件：form:
ajaxForm:仅准备数据，提交还需要submit
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<script src="jquery-1.8.3.js" type="text/javascript" ></script> <script src="jquery.form.js" type="text/javascript" ></script> <script type="text/javascript" > function showRequest(formData, jqForm,options) { //formData是一个对象数组，数据格式如下： // [ {name:password, value:123456}, {name:age, value:20} ] //jqForm是一个封装了表单元素的jqeury对象，options就是下面定义的options对象。 var queryStr=$.param(formData); return true;//如果返回false，将会终止表单提交 } function showResponse(responseText,statusText,xhrObj,$form) { $("#output1").html(responseText); } $(function(){ var options ={ target:"#output1", beforeSubmit:showRequest, success:showResponse, type:"post", dataType:"html", clearForm:true, //resetForm:true, timeout:3000 }; $("#myForm").ajaxForm(options); }); </script> |
3，模态窗口插件：SimpleModal
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<link type='text/css' href='modal/css/basic.css' rel='stylesheet' media='screen' /> <style type="text/css"> </style> <script src="jquery-1.8.3.js" type="text/javascript" ></script> <script src="modal/jquery.simplemodal.1.4.4.min.js" type="text/javascript" ></script> <script type="text/javascript" > $(function(){ var options = { maxWidth:300, maxHeight:400 }; $("#divMain").modal(options); }); </script> |
4，Cookie插件：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<script src="jquery-1.8.3.js" type="text/javascript" ></script> <script src="jquery.cookie.js" type="text/javascript" ></script> <script type="text/javascript" > $(function(){ var COOKIE_ADDR="address"; var jAddress = $("#txtAddress"); if($.cookie(COOKIE_ADDR)) { jAddress.val($.cookie(COOKIE_ADDR)); } $("#btnMain").click(function(){ $.cookie(COOKIE_ADDR,jAddress.val(),{path:'/',expires:10}); }); }); </script> |
5，jquery ui插件：
主要分4部分：1）jquery ui核心库：ui.core.js
2) 交互，比如Draggable, Droppable, Resizable, Selectable, Sortable, 这些库需要ui.core.js的支持。
3) 微件：主要是界面的扩展，比如：Accordion, Autocomplete, ColorPicker, Dialog, Slider, Tabs, Datepicker, Magnifier等， 这些库也需要 ui.core.js的支持。
4）效果库：提供额外动画功能，无需ui.core.js支持，但需要effects.core.js的支持。
以sortable为例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<link type='text/css' href='jquery-ui-1.10.3/themes/base/jquery-ui.css' rel='stylesheet' media='screen' /> <style type="text/css"> #myList {80px;background:#EEE;padding:5px;} #myList a{text-decoration:none;color:#D077B0;} #myList a:hover{text-decoration:underline;} #myList .qlink{font-size:12px;color:#666;margin-left:10px;} </style> <script src="jquery-1.8.3.js" type="text/javascript" ></script> <script src="jquery-ui-1.10.3/ui/jquery-ui.js" type="text/javascript" ></script> <script type="text/javascript" > $(function(){ $("#myList").sortable({ delay:10, stop:function(){ alert("排序动作完成后执行的函数。"); } }); }); </script><body> <ul id="myList"> <li><a href="#">心情</a></li> <li><a href="#">相册</a> <a href="#" class="qlink">上传</a> </li> <li><a href="#">日志</a> <a href="#" class="qlink">发表</a> </li> <li><a href="#">投票</a></li> <li><a href="#">分享</a></li> <li><a href="#">群组</a></li> </ul> </body> |
二，编写jquery插件：
1，主要分三种类型：
1）封装对象方法的插件：对jquery对象进行操作的插件。通过jQuery.fn.extend()来扩展。
2）封装全局函数的插件：类似$.ajax(), $.trim()方法，即将独立的函数加到jquery命名空间下。通过jQuery.extend()来扩展。
3）选择器插件：扩展jquery选择器，定义一些jquery不支持的选择器。通过jQuery.extend()来扩展。
2，编写插件规范：
1）所有对象方法应该附加到jQuery.fn对象上，所有全局函数应当附加到jQuery对象上。
2）在插件内部，this指向的是jquery对象，而一般方法内部的this指向的是dom对象。
3) 可通过this.each遍历所有元素。
4）插件头部先加一个分号，插件末尾也应加分号。
5）一般情况下插件应返回一个jQuery对象，以保证插件可链式操作。
6）除非使用闭包技巧，否则避免在插件内部使用$作为jQuery对象的别名。
3，闭包解释：
1）内部函数：在一个函数内部定义的函数，包含内部函数的就是外部函数。
2）内部函数可以访问外部函数的参数、局部变量、其它内部函数。
3）在外部函数之外调用内部函数时（即不是在外部函数内调用的），就形成了闭包。
此时内部函数会在外部函数返回后执行，执行时内部函数仍然可以访问外部函数的参数、局部变量、其它内部函数，
这些参数、局部变量和函数声明的值是外部函数返回时的值，但内部函数也可以改变它们。
4，插件声明方式：
常见声明方式：
|
1
2
3
|
;(function($){ // 用$为匿名函数的形参 //插件代码写在这里，可以使用$作为jQuery的别名 })(jQuery);//jQuery作为实参传给匿名函数了。 |
再具体一点如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
;(function($){ // $为匿名函数的形参，注意前面的分号不能少。 //代码写在这里，可以使用$作为jQuery的别名 //定义一个局部变量foo，仅可以在函数内部访问 var foo; var bar=function(options){ //bar是一个内部函数，所以可以访问匿名函数(外部函数)的局部变量foo， //但在匿名函数外部无法直接访问foo options=jQuery.extend({ name:"bar", length:5, dataType:"json" //以上为默认参数 },options);//options为传递的参数 } $.barfunc=bar;//这样匿名函数外部就可以通过jQuery.barfunc来间接调用bar函数了。 })(jQuery);//jQuery作为实参传给匿名函数了。 |
5，封装jquery对象方法的插件：
1）jquery.color.js:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
;(function($){ //采用对jquery对象方法扩展的方式来开发颜色插件 $.fn.extend({ color:function(value){ if(!value) { return this.css("color"); } else { return this.css("color",value); } } });})(jQuery); |
2）jquery.bgcolor.js:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
;$(function($){ $.fn.extend({ //插件代码 begin bgcolor:function(options){ options=$.extend({ odd:"odd", even:"even", selected:"selected" },options); $("tbody>tr:odd",this).addClass(options.odd); $("tbody>tr:even",this).addClass(options.even); $("tbody>tr",this).click(function(){ //这里的this是dom对象，因为是在函数内部 var hasSelected = $(this).hasClass(options.selected); $(this)[hasSelected?"removeClass":"addClass"](options.selected) .find(":checkbox").attr("checked",!hasSelected); }); //这里的this是jquery对象，因为是在插件内部 $("tbody>tr:has(:checked)",this).addClass(options.selected); return this;//返回this，使方法可链。 } //插件代码 end });})(jQuery); |
页面代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery UI Demos</title> <style type="text/css"> table { border:0;border-collapse:collapse;} td { font:normal 12px/17px Arial;padding:2px;100px;} th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;} .even { background:#FFF38F;} /* 偶数行样式*/ .odd { background:#FFFFEE;} /* 奇数行样式*/ .selected { background:#FF6500;color:#fff;} </style> <script src="jquery-1.8.3.js" type="text/javascript" ></script> <script src="jquery.bgcolor.js" type="text/javascript" ></script> <script type="text/javascript" > $(function(){ $("#table1").bgcolor().find("th").css("color","red"); }); </script></head> <body> <table id="table1"> <thead><tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead> <tbody> <tr> <td><input type="checkbox" name="choice" value=""/></td> <td>张山</td> <td>男</td> <td>浙江宁波</td> </tr> <tr> <td><input type="checkbox" name="choice" value="" /></td> <td>李四</td> <td>女</td> <td>浙江杭州</td> </tr> <tr> <td><input type="checkbox" name="choice" value="" checked="checked" /></td> <td>王五</td> <td>男</td> <td>湖南长沙</td> </tr> <tr> <td><input type="checkbox" name="choice" value="" /></td> <td>找六</td> <td>男</td> <td>浙江温州</td> </tr> <tr> <td><input type="checkbox" name="choice" value="" /></td> <td>Rain</td> <td>男</td> <td>浙江杭州</td> </tr> <tr> <td><input type="checkbox" name="choice" value="" checked="checked" /></td> <td>MAXMAN</td> <td>女</td> <td>浙江杭州</td> </tr> </tbody></table> </body></html> |
6，封装全局函数的插件：
比如要添加两个函数：$.ltrim() 和 $.rtrim()
|
1
2
3
4
5
6
7
8
9
10
11
12
|
;$(function($){ $.extend({ //封装全局函数 begin ltrim:function(text){ return (text || "").replace(/^s+/g, ""); }, rtrim:function(text){ return (text || "").replace(/s+$/g,""); } //封装全局函数 end });})(jQuery); |
三，编写jquery选择器：
先说一下遇到的问题，在1.8.0到1.9(我测试过)的版本中，下面的自定义选择器不起作用，不知道是bug还是api变了，所以，建议用1.8以下版本，上代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head> <title>插件4，between</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 引入jQuery --> <script src="jquery-1.7.js" type="text/javascript" ></script> <script type="text/javascript"> //插件编写 ;(function($) { $.extend(jQuery.expr[":"], { between : function( a , i ,m ) { //a表示当前遍历到的dom元素，i是当前dom元素的索引值，从0开始； //以$("div:gt(1)")来说明m参数： //m[0]代表:gt(1)，m[1]是选择器的引导付，这里代表 :, //m[2]代码选择器函数，即gt //m[3]是选择器函数的参数，即gt(1)里面的1 //m[4]，这里参数要另举一个例子：$("div :ls(ss(dd))")，m[4]就代表 (dd)，注意带括号,m[3]的值就变成了ss(dd) var tmp=m[3].split(","); //将传递进来的m[3]以逗号为分隔符，切成一个数组 return tmp[0]-0<i&&i<tmp[1]-0; } }); })(jQuery); //插件应用 $(function(){ alert("执行前"); $("div:between(2,5)").css("background","white"); alert("执行后"); }) </script></head> <body> <div style="background:red">0</div><div style="background:blue">1</div><div style="background:green">2</div><div style="background:yellow">3</div><div style="background:gray">4</div><div style="background:orange">5</div> </body></html> |