0%

3.10 扩展jQuery和jQuery插件

发表于 更新于 分类于 ， ，

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">
		// 为所有jQuery对象扩展新的方法
		$.fn.extend(
			{
				// 为jQuery对象扩展check方法
				check: function () {
					// 遍历jQuery里每个DOM对象，指定其checked属性为true
					return this.each(function () {
						this.checked = true;
					});
				},
				// 为jQuery对象扩展uncheck方法
				uncheck: function () {
					// 遍历jQuery里每个DOM对象，指定其checked属性为false
					return this.each(function () {
						this.checked = false;
					});
				}
			});
		// 为jQuery命名空间扩展新方法
		$.extend(
			{
				// 为jQuery命名空间扩展test方法
				test: function () {
					alert("为jQuery命名空间扩展的测试方法");
				}
			});
		// 为id为check的按钮绑定事件处理函数
		$("#check").click(function () {
			$(":input").check();
		});
		// 为id为uncheck的按钮绑定事件处理函数
		$("#uncheck").click(function () {
			$(":input").uncheck();
		});
		// 为id为bn的按钮绑定事件处理函数
		$("#bn").click(function () {
			// 调用为jQuery命名空间扩展的新方法
			$.test();
		});
	</script>
</body>
</html>

该程序中分别为jQuery对象和jQuery命名空间扩展了新的方法,从而允许后面的粗体字代码使用这些新扩展的方法。通过这个程序可以看出,不论是第三方还是开发者,都能非常方便地扩展jQuery,从而为jQuery引入新的功能。
实际上,由于jQuery越来越受欢迎,已经出现了大量的jQuery插件,这些插件极大地丰富了jQuery的功能。登录jQuery插件站点即可看到在jQuery官方注册的一系列jQuery插件,读者可以根据自己的需要选择合适的插件。

值得一提的是,jQuery官方提供了一套优秀的界面库jQueryUI,登录jQueryUI的官方站点即可看到这些丰富的UI效果。如果读者需要使用这些UI效果,则可以在项目中使用jQueryUI。

原文链接: 3.10 扩展jQuery和jQuery插件