3.10 扩展jQuery和jQuery插件
jQuery具有极好的可扩展性,如果开发者需要为jQuery增加新的函数和功能,则可通过jQuery提供的以下两个方法来进行扩展。
| 方法 |
描述 |
jQuery.fn.extend(object) |
为所有jQuery对象扩展新的方法。其中object 是一个形如{name1:fn1,name2,fn2...}的对象。经过这种扩展之后,所有jQuery对象都可使用name1、name2等方法。 |
jQuery.extend(object) |
为jQuery命名空间扩展新的方法。其中object 是一个形如{name1:fn1,name2,fn2...}的对象。经过这种扩展之后,jQuery 命名空间下就会增加name1、name2等方法。 |
下面的程序示范了如何利用这两个方法来扩展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
| <!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 使用fn.extends扩展jQuery </title>
</head>
<body>
用户名：
<input name="name" type="text" />
<br /> 喜欢的颜色：
<br /> 红色：
<input name="color" type="checkbox" value="red" /> 绿色：
<input name="color" type="checkbox" value="green" /> 蓝色：
<input name="color" type="checkbox" value="blue" />
<br />
<input id="check" type="button" value="选中所有复选框" />
<input id="uncheck" type="button" value="取消选中所有复选框" />
<input id="bn" type="button" value="单击我" />
<br />
<script type="text/javascript" src="../jquery-3.1.1.js">
</script>
<script type="text/javascript">
$.fn.extend(
{
check: function () {
return this.each(function () {
this.checked = true;
});
},
uncheck: function () {
return this.each(function () {
this.checked = false;
});
}
});
$.extend(
{
test: function () {
alert("为jQuery命名空间扩展的测试方法");
}
});
$("#check").click(function () {
$(":input").check();
});
$("#uncheck").click(function () {
$(":input").uncheck();
});
$("#bn").click(function () {
$.test();
});
</script>
</body>
</html>
|
该程序中分别为jQuery对象和jQuery命名空间扩展了新的方法,从而允许后面的粗体字代码使用这些新扩展的方法。通过这个程序可以看出,不论是第三方还是开发者,都能非常方便地扩展jQuery,从而为jQuery引入新的功能。
实际上,由于jQuery越来越受欢迎,已经出现了大量的jQuery插件,这些插件极大地丰富了jQuery的功能。登录jQuery插件站点即可看到在jQuery官方注册的一系列jQuery插件,读者可以根据自己的需要选择合适的插件。
值得一提的是,jQuery官方提供了一套优秀的界面库jQueryUI,登录jQueryUI的官方站点即可看到这些丰富的UI效果。如果读者需要使用这些UI效果,则可以在项目中使用jQueryUI。