一，常用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 {width: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 {width: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;width: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> |