JavaWeb_10_jQuery

JavaWeb
发布日期:   2022-01-19
更新日期:   2022-02-05
文章字数:   7.6k
阅读时长:   35 分
阅读次数:  

其实在前面的操作中可以看到，JavaScript语言，如dom对象的函数名比较长，这样在调用的时候比较繁琐，那么可不可以类似JSP中的EL表达式和JSTL标签库那样将语言进一步封装呢？答案是可以的，jQuery是一款跨主流浏览器的JavaScript库，封装了JavaScript的相关方法调用，简化了JavaScript对HTML DOM的操作。

1. 案例入门

需求，点击按钮，获得对应文本框中的内容，alert显示出来。最直观的代码如下所示：

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
<!DOCTYPE html>
<html>
<head>
	<title>案例入门</title>
	<meta charset="utf-8">

	<script type="text/javascript">
		function show1(){
			var obj = document.getElementById("text1");
			alert(obj.value);
		}

		function show2(){
			var obj = document.getElementById("text2");
			alert(obj.value);
		}

	</script>
</head>
<body>
	<input type="text" id="text1" value="text1"><br>
	<input type="text" id="text2" value="text2"><br>
	<input type="button" name="button1" value="text1" onclick="show1()"><br>
	<input type="button" name="button2" value="text2" onclick="show2()"><br>
</body>
</html>

但是，document.getElementById(“text1”)等方法的调用太频繁，方法名比较长，似乎可以将其封装成一个方法名比较简单的方法。如下所示：

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
<!DOCTYPE html>
<html>
<head>
	<title>案例入门</title>
	<meta charset="utf-8">

	<script type="text/javascript">
		function show1(){
			var obj = getObj("text1");
			alert(obj.value);
		}

		function show2(){
			var obj = getObj("text2");
			alert(obj.value);
		}

		function getObj(ids){
			var obj = document.getElementById(ids);
			return obj;
		}


	</script>
</head>
<body>
	<input type="text" id="text1" value="text1"><br>
	<input type="text" id="text2" value="text2"><br>
	<input type="button" name="button1" value="text1" onclick="show1()"><br>
	<input type="button" name="button2" value="text2" onclick="show2()"><br>
</body>
</html>

jQuery就是类似这种定义的函数，使得我们可以更容易调用，而不再输入繁琐的DOM原始函数。

2. jQuery介绍

jQuery是一个JS库，里面封装了很多DOM对象的方法（底层是JS），供我们直接调用，使得JS代码比较少，并且兼容了各个浏览器之间的差异。那么既然是库，所以我们就需要有这个库才能使用它，这个库可以在官网上下载，官网上提供了压缩版和未压缩版，压缩版就是将js代码中的空格、换行等等去掉了，使得代码更加紧凑，节省网络传输（在项目实际部署的时候用压缩版）；未压缩版则是保留了空格换行等等，使得更加容易阅读（自己开发时使用）。

下载好之后就是js文件，我们在使用的时候直接引入到代码中即可。

2.1 jQuery例子

如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
    <head>
        <title>入门Jquery</title>
    </head>
    <script type="text/javascript" src="jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            alert("Hello jQuery");
        })
    </script>
    <body>
    </body>
</html>

其中：

  1. $(document)，$是jQuery中的函数名称，document是函数的参数，作用是将document对象变成jQuery函数库中可以使用的对象。
  2. ready是jQuery中的函数，是准备的意思，当页面的dom对象加载成功后会执行ready函数中的内容。ready函数相当于js中的onLoad事件。
  3. function()自定义的函数表示onLoad后要执行的功能。

其实$(document).ready()与$()、jQuery()、window.jQuery()是等价的，所以上面的例子可以采用下面的写法。

1
2
3
4
5
6
7
8
9
10
11
$(function(){
	alert("Hello jQuery 1");
})

jQuery(function(){
    alert("Hello jQuery 2");
})

window.jQuery(function(){
    alert("Hello jQuery 3");
})

2.2 DOM对象和jQuery对象

DOM对象，指的是使用JS语法创建的对象叫做DOM对象，也就是JS对象。比如var obj = document.getElementById("text1");，obj就是DOM对象。

jQuery对象，指的是使用jQuery语法创建的对象叫做jQuery对象，注意，jQuery对象都是数组。比如var jobj = $("#text1")，jobj就是jQuery对象，是一个数组（虽然数组中只有一个值）。为了便于和DOM对象区

别，一个规范是jQuery对象命名以$开始。

本质上jQuery就是为了简化JS代码，所以二者需要一个转化。所以二个对象也是可以互转的。

  • DOM对象转jQuery对象：**$(DOM对象)**
  • jQuery对象转DOM对象：数组的每一个元素就是DOM对象，使用下标或者get方法，如[0]或者get(0)。

二者互转的意义：想要使用DOM对象的方法或者属性，这时候就需要转为DOM对象；想要使用jQuery提供的函数，必须转为jQuery对象。

2.3 DOM对象转jQuery对象

案例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
	<title>DOM对象转jQuery对象</title>
	<script type="text/javascript" src="jquery-3.6.0.js"></script>
	<script type="text/javascript">
		function doClick(){
			var obj = document.getElementById("btn");
			alert("通过DOM对象的属性获得按钮的值：" + obj.value);

			// DOM对象转jQuery对象
			var $obj = $(obj);
			alert("通过jQuery对象的方法获得按钮的值：" + $obj.val());
		}
	</script>
</head>
<body>
<input type="button" id="btn" value="我是按钮" onclick="doClick()">
</body>
</html>

2.4 jQuery对象转DOM对象

案例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
	<title>jQuery对象转DOM对象</title>
	<script type="text/javascript" src="jquery-3.6.0.js"></script>
	<script type="text/javascript">
		function doClick(){

			// jQuery对象转DOM对象
			// 获取id为btn的所有对象，形成一个数组(jQuery对象)
			var $obj = $("#btn");

			// 因为只要一个组件的id为btn，所以取第一个对象。
			var obj = $obj[0];
			alert("通过DOM对象的方法获得按钮的值：" + obj.value);
		}
	</script>
</head>
<body>
<input type="button" id="btn" value="我是按钮" onclick="doClick()">
</body>
</html>

3. 选择器

我们知道，JS就是操作DOM对象的，那么jQuery也要操作DOM对象，首先需要定位到该对象。选择器就是一个字符串，用于定位DOM对象，也被称为定位条件，通知jQuery函数定位满足条件的DOM对象（类似JS中的getElementByXX()函数，获取某个组件）。

常用的选择器有：

  1. id选择器，$("#dom对象的id值")，即通过id定位组件。
  2. class选择器，$(".class样式名")，通过css样式的名称来定位组件。
  3. 标签选择器，$("标签名称")，通过标签的名称来定位组件。
  4. 所有选择器，$("*")，即表示所有组件。
  5. 组合选择器，即将上述的组合起来，用逗号隔开，如$("#id, .class样式名, 标签名称")等等，相当于多重筛选。

案例如下所示：

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
<!DOCTYPE html>
<html>
<head>
	<title>选择器</title>
	<meta charset="utf-8">
	<style type="text/css">
		div{
			background: gray;
			width: 200px;
			height: 100px;
		}
	</style>
	<script type="text/javascript" src="jquery-3.6.0.js"></script>
	<script type="text/javascript">
		function fun1(){
			// 通过id选择器定位元素
			var obj = $("#one");

			// 通过jQuery函数对组件进行操作
			obj.css("background", "red");
		}

		function fun2(){
			// 通过class选择器定位元素
			var obj = $(".two");
			obj.css("background", "yellow");
		}

		function fun3(){
			// 通过标签选择器定位元素(因为有三个div，所以是数组)
			var obj = $("div");

			// 设置三个div组件的背景颜色，jQuery中的函数是对所有元素对象都进行操作
			obj.css("background", "blue");
		}
	</script>
</head>
<body>
<div id="one">我是one的div</div><br>
<div class="two">我是样式是two的div</div><br>
<div>我是没有id，class的div</div><br>
<span>我是span标签</span><br>
<input type="button" value="获得id是one的dom对象" onclick="fun1()"><br>
<input type="button" value="获得class是two的dom对象" onclick="fun2()"><br>
<input type="button" value="获得标签是div的dom对象" onclick="fun3()"><br>
</body>
</html>

上述的几个选择器是基本选择器。除此之外还有“表单元素选择器”，表单选择器指的是定位一些常见的表单元素。表单相关元素选择器是指文本框、但徐昂矿、复选框和下拉列表等元素的选择方式。该方法无论是否存在表单<form>，均可做出相应选择。表单选择器是为了能更加容易地操作表单：

  • 表单元素选择器：$(":type属性值")，根据表单元素的type类型来定位组件。常见的表单元素如下所示（感觉就是各种类型的文本框而已）：

    jquery_001.png (322×314) (gitee.io)

案例如下所示：

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
<!DOCTYPE html>
<html>
<head>
	<title>表单元素选择器</title>
	<meta charset="utf-8">
	<style type="text/css">
		div{
			background: gray;
			width: 200px;
			height: 100px;
		}
	</style>
	<script type="text/javascript" src="jquery-3.6.0.js"></script>
	<script type="text/javascript">
		function func1(){
			// 通过表单元素选择器定位text元素（因为只有一个，所以可以直接采用jQuery函数获取元素值）
			var $obj = $(":text");

			// 获取元素的值
			alert($obj.val());
		}

		function func2(){
			// 通过表单元素选择器定位radio元素
			var $obj = $(":radio");

			// 获取元素的值，因为有多个，所以采用DOM对象的属性来获取值(当然也可以将DOM对象转换为jQuery对象再调用方法)
			for (var i = 0; i < $obj.length; i++) {
				// alert($obj[i].value);
				alert($($obj[i]).val());
			}
			
		}

		function func3(){
			// 通过表单元素选择器定位checkbox元素
			var $obj = $(":checkbox");

			// 获取元素的值，因为有多个，所以采用DOM对象的属性来获取值
			for (var i = 0; i < $obj.length; i++) {
				// alert($obj[i].value);
				alert($($obj[i]).val())
			}
			
		}

	</script>
</head>
<body>
<input type="text" value="我是type=text"><br>
<input type="radio" name="gender" value="man">男 <input type="radio" name="gender" value="woman">女<br>
<input type="checkbox" name="interest" value="bike">骑行
<input type="checkbox" name="interest" value="football">足球
<input type="checkbox" name="interest" value="muisc">音乐<br>

<input type="button" value="读取text的值" onclick="func1()"><br>
<input type="button" value="读取radio的值" onclick="func2()"><br>
<input type="button" value="读取checkbox的值" onclick="func3()"><br>
</body>
</html>

4. 过滤器

这里的过滤器是对上述选择器的运行结果进行过滤。利用选择器可以定位出多个元素，比如type类型是text的所有文本框，如下所示（定位器操作结果，即数组，里面的DOM对象顺序和html中的声明顺序是一致的）。但是我们只需要其中的某个元素该怎么办呢？一种是通过遍历结果，另一种则是通过过滤器设置条件筛选出想要的结果。

jquery_002.png (385×225) (gitee.io)

过滤器就是过滤条件，对已经定位到数组中的DOM对象进行过滤筛选，过滤条件不能独立的出现在jQuery函数，如果使用只能出现在选择器后方（即两者要么只出现选择器，要么一起出现，即$("选择器:过滤器")）。

和选择器一样，过滤器也分为很多种，最常见的是基本过滤器和表单元素过滤器。基本过滤器是根据数组中元素的位置来进行筛选的。基本选择器如下所示：

  1. 保留数组中的第一个DOM对象，$("选择器:first")；
  2. 保留数组中的最后一个DOM对象，$("选择器:last")；
  3. 保留数组中指定索引位置的DOM对象，$("选择器:eq(数组索引)")；
  4. 保留数组中指定索引位置前面的所有DOM对象，$("选择器:le(数组索引)")；
  5. 保留数组中指定索引位置后面的所有DOM对象，$("选择器:gt(数组索引)")；

在进行此案例之前，先看一下后面的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
<!DOCTYPE html>
<html>
<head>
	<title>表单元素选择器</title>
	<meta charset="utf-8">
	<style type="text/css">
		div{
			background: gray;
		}
	</style>
	<script type="text/javascript" src="jquery-3.6.0.js"></script>
	<script type="text/javascript">
		
		// 等页面加载完毕后再执行该js函数中的代码，function为页面加载完毕事件后触发的函数。
		$(function(){

			// 绑定事件，按钮点击事件
			$("#btn1").click(function(){

				// 定位到第一个div，并设置背景颜色
				var $obj = $("div:first");
				$obj.css("background", "red");
				}
			)

			$("#btn2").click(function(){
				var $obj = $("div:last");
				$obj.css("background", "blue");
			})

			$("#btn3").click(function(){
				var $obj = $("div:eq(3)");
				$obj.css("background", "yellow");
			})

			$("#btn4").click(function(){
				var $obj = $("div:gt(3)");
				$obj.css("background", "green");
			})
		})
	</script>
</head>
<body>
<div id="one">我是div-0</div>
<div id="two">我是div-1</div>
<div>我是div-2
	<div>我是div-3</div>
	<div>我是div-4</div>
</div>
<div>我是div-5</div>
<br>
<span>我是span</span>
<br>

<input type="button" value="获取第一个div" id="btn1">
<br>
<input type="button" value="获取最后一个div" id="btn2">
<br>
<input type="button" value="获取下标为3的div" id="btn3">
<br>
<input type="button" value="获取下标大于3的div" id="btn4">
</body>
</body>
</html>

表单元素属性过滤器指的是根据表单元素属性来进行过滤，常见的表单元素属性有：

  • 可用的，enabled，如$(:text:enabled)。
  • 不可用的，disabaled（类似只读），如$(:text:disabled)。
  • （复选框、单选框）选中的，checked，如$(:checkbox:checked)。
  • 下拉列表框选中的，selected，如$(选择器>option:selected)。（实际上该元素并不属于表单元素）

案例如下所示：

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>
<html>
	<head>
		<title>表单元素选择器</title>
		<meta charset="utf-8">
		<style type="text/css"></style>
		<script type="text/javascript" src="jquery-3.6.0.js"></script>
		<script type="text/javascript">
			
			// 等页面加载完毕后再执行该js代码，function为页面加载完毕事件后触发的函数。
			$(function(){

				// 绑定事件，按钮点击事件
				$("#btn1").click(function(){

						// 获取所有可以使用的text文本框
						var $obj = $(":text:enabled");

						// 设置值为hello
						$obj.val("hello");
					}
				)

				$("#btn2").click(function(){

						// 获取选中的checkbox
						var $obj = $(":checkbox:checked");

						for (var i = 0; i < $obj.length; i++) {
							// alert($obj[i].value);
							alert($($obj[i]).val())
						}
					}
				)

				$("#btn3").click(function(){

						// 定位到第一个div，并设置背景颜色
						var $obj = $("#lang>option:selected");
						alert($obj.val());
					}
				)
			})
		</script>
	</head>
	<body>
		<input type="text" id="text1" value="text1"><br>
		<input type="text" id="text2" value="text2" disabled><br>
		<input type="text" id="text3" value="text3"><br>
		<input type="text" id="text4" value="text4" disabled><br>
		<br>
		<p>复选框</p>
		<input type="checkbox" name="interest" value="游泳">游泳<br>
		<input type="checkbox" name="interest" value="健身" checked>健身<br>
		<input type="checkbox" name="interest" value="电子游戏" checked>电子游戏<br>
		<br>
		<p>下拉框</p>
		<select id="lang">
			<option value="java">Java语言</option>
			<option value="go" selected="">Go语言</option>
			<option value="sql">SQL语言</option>
		</select>
		<br>
		<p>功能按钮</p>
		<input type="button" value="所有可用的text设值hello" id="btn1"><br>
		<input type="button" value="显示被选中的复选框的值" id="btn2"><br>
		<input type="button" value="显示下拉列表选中的值" id="btn3"><br>
	</body>
</html>

5. 函数

jQuery提供了很多封装好的函数，这里只简要介绍几个常用的函数。

5.1 第一组函数

5.1.1 val()函数

该函数操作数组中DOM对象的value属性。可以有参，也可以无参调用。

无参调用：jQuery对象.val()，获取数组中第一个DOM对象的value属性值。

有参调用：jQuery对象.val(值)，对数组中所有DOM对象的value属性值统一赋值。

5.1.2 text()函数

操作数组中所有DOM对象的文字显示内容属性，即一对标签括起来的内容，如<a>文字显示内容</a>。同样，分为有参调用和无参调用。

无参调用：jQuery对象.text()，获取数组中所有DOM对象的文字显示内容，将所有内容拼接为一个字符串返回。

有参调用：jQuery对象.text(值)，对数组中所有DOM对象的文字显示内容进行统一赋值。

5.1.3 attr()函数

该函数是对val和text之外的其他属性进行操作。

jQuery对象.attr("属性名")：获取DOM数组第一个对象的属性值；

jQuery对象.attr("属性名", "值")：对数组中所有DOM对象指定的属性赋值。

5.1.4 案例

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html>
	<head>
		<title>表单元素选择器</title>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				background: blue;
			}
		</style>
		<script type="text/javascript" src="jquery-3.6.0.js"></script>
		<script type="text/javascript">
			
			// 等页面加载完毕后再执行该js代码，function为页面加载完毕事件后触发的函数。
			$(function(){

				// 绑定事件，按钮点击事件
				$("#btn1").click(function(){

						// 获取第一个text文本框
						var $obj = $(":text:first");

						// 获取值
						alert($obj.val());
					}
				)

				$("#btn2").click(function(){

						// 获取所有text文本框
						var $obj = $(":text");

						// 设置值为诸葛亮
						$obj.val("诸葛亮");
					}
				)

				$("#btn3").click(function(){

						// 获取所有div
						var $obj = $("div");

						// 获取所有文本值
						alert($obj.text());
					}
				)

				$("#btn4").click(function(){

						// 获取第一个div
						var $obj = $("div:first");

						// 获取文本值
						alert($obj.text());
					}
				)

				$("#btn5").click(function(){

						// 获取所有div
						var $obj = $("div");

						// 获取文本值
						$obj.text("新div");
					}
				)

				$("#btn6").click(function(){

						// 获取第一个img
						var $obj = $("#img1:first");

						// 获取第一个对象的src属性
						alert($obj.attr("src"));

						// 设置所有对象的src属性值
						$obj.attr("src", "img/ex3.jpg");
					}
				)

			})
		</script>
	</head>
	<body>
		<p>文本框val</p>
		<input type="text" value="刘备"><br>	
		<input type="text" value="张飞"><br>	
		<input type="text" value="关羽"><br>
		<p>文本数据text</p>
		<div>我是第一个div</div>
		<div>我是第二个div</div>
		<div>我是第三个div</div>
		<p>图片</p>
		<img id="img1" src="img/ex1.jpg"><br>
		<img id="img1" src="img/ex2.jpg"><br>
		<p>功能按钮</p>
		<input type="button" id="btn1" value="获取第一个文本框的值"><br>
		<input type="button" id="btn2" value="设置所有文本框为新值"><br>
		<input type="button" id="btn3" value="获取div的所有文本"><br>
		<input type="button" id="btn4" value="获取第一个div的文本"><br>
		<input type="button" id="btn5" value="设置div新文本"><br>
		<input type="button" id="btn6" value="设置img图片"><br>
	</body>
</html>

5.2 第二组函数

5.2.1 hide()函数

语法规则：$(选择器).hide()；

作用：隐藏指定jQuery对象。

5.2.2 show()函数

语法规则：$(选择器).show()；

作用：显示隐藏的jQuery对象。

5.2.3 remove()函数

语法规则：$(选择器).remove()；

作用：将数组中所有DOM对象及其子对象一并删除。

5.2.4 empty()函数

语法规则：$(选择器).empty()；

作用：将数组中所有DOM对象的子对象删除。

5.2.5 append()函数（重点）

语法规则：$(选择器).append(html语法标签块)；

作用：为数组中所有DOM对象添加指定的子对象。如$(div).append(<div>我是新添加的div</div>)，为所有div添加新的子div。

5.2.6 html()函数

该函数的作用是设置或返回被选元素的内容（相当于JS中的innerHTML属性，可以保留html标签）。

语法规则：

  • $(选择器).html()：无参调用方法，获取DOM数组第一个元素的内容。
  • $(选择器).html(值)：有参调用方法，设置DOM数组中所有元素的内容。

5.2.7 each()函数（重点）

该函数是对数组、json和DOM数组等的遍历，对每个元素调用一次处理函数。

语法规则：

  • $.each(要遍历的对象, function(index, element){处理程序})

    可以这样看待，$是Java中的类名，each()是该类中的静态方法，要遍历的对象就是要处理的对象，后面的function是具体的处理方法。

  • jQuery对象.each(function(index, element){处理程序})

对于数组来说，其中index是数组的动态下标（相当于for循环中的i），element是数组的子对象（相当于foreach中的子对象），注意对象是DOM对象。

对于JSON来说，index就是key，element就是value。

案例如下所示：

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html>
	<head>
		<title>表单元素选择器</title>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				background: blue;
			}
		</style>
		<script type="text/javascript" src="jquery-3.6.0.js"></script>
		<script type="text/javascript">
			
			// 等页面加载完毕后再执行该js代码，function为页面加载完毕事件后触发的函数。
			$(function(){

				// 绑定事件，按钮点击事件
				$("#btn1").click(function(){

						// 获取所有的div标签对象
						var $obj = $("div");

						// 设置为不可见
						$obj.hide();
					}
				)

				$("#btn2").click(function(){

						// 获取所有的div标签对象
						var $obj = $("div");

						// 设置为可见
						$obj.show();
					}
				)

				$("#btn3").click(function(){

						// 获取所有的select标签对象
						var $obj = $("select");

						// 清空其子标签
						$obj.empty();
					}
				)

				$("#btn4").click(function(){

						// 获取所有的select标签对象
						var $obj = $("select");

						// 删除select对象及其子对象
						$obj.remove();
					}
				)

				$("#btn5").click(function(){

						// 获取指定的div
						var $obj = $("#father");

						// 添加子元素
						$obj.append("<input type='text' value='我是动态添加的input'>");
					}
				)

				$("#btn6").click(function(){

						// 获取所有的span
						var $obj = $("span");

						// 获取第一个元素的内容
						alert($obj.html());
					}
				)

				$("#btn7").click(function(){

						// 获取所有的span
						var $obj = $("span");

						// 获取第一个元素的内容
						$obj.html("我是span标签");
					}
				)

				$("#btn8").click(function(){

						// 获取所有的span(数组)
						var $obj = $("span");

						// each遍历数组
						$obj.each(function(i, n){
							alert("索引：" + i + " " + n.innerHTML);
						})
					}
				)

				$("#btn9").click(function(){

						// 设置要遍历的对象
						var json = {"name": "张三", "age": 20};

						// 注意，因为是普通的对象，所以要么采用第一种方式，要么将普通对象转换为jQuery对象（似乎转换失败？）。
						$.each(json, function(key, value){
							alert("key：" + key + ", value:" + value);
						})
					}
				)

			})
		</script>
	</head>
	<body>
		<p>show和hide</p>
		<div id="one">我是one</div>
		<div id="two">我是two</div>
		<p>remove和empty</p>
		<select>
			<option>老虎</option>
			<option>狮子</option>
			<option>豹子</option>
		</select>
		<br>
		<select>
			<option>大洋洲</option>
			<option>欧洲</option>
			<option>美洲</option>
		</select>
		<br>
		<p>append</p>
		<div id="father" style="background: red">我是父div</div>
		<br>
		<p>html</p>
		<span>mysql是一个<b>数据库</b></span>
		<br>
		<span>使用jdbc访问数据库</span>
		<br>

		<p>功能按钮</p>
		<input type="button" id="btn1" value="隐藏所有div"><br>
		<input type="button" id="btn2" value="显示所有div"><br>
		<input type="button" id="btn3" value="清空所有下拉列表中option子标签"><br>
		<input type="button" id="btn4" value="删除所有下拉列表"><br>
		<input type="button" id="btn5" value="添加元素"><br>
		<input type="button" id="btn6" value="获取第一个span文本内容"><br>
		<input type="button" id="btn7" value="设置span的内容"><br>
		<input type="button" id="btn8" value="each循环"><br>
		<input type="button" id="btn9" value="each循环json对象"><br>

	</body>
</html>

6. 事件

jQuery也对JS中的事件进行了封装处理。jQuery中的事件有两种处理方法。

6.1 定义元素监听事件

即利用选择器以及过滤器定位出对象后，采用$(选择器[:过滤器]).监听事件名称(处理函数)的方式来绑定事件。这里的监听事件名称是JS事件中去掉on后的内容。

如为页面中所有的button绑定onclick，并关联处理函数func1：$("button").click(func1)。

如为页面中所有的tr标签绑定onmouseover，并关联处理函数func2：$("tr").mouseover(func2)。

这种绑定事件的方法是在JS代码中绑定的，所以需要html元素加载完后再执行，即需要在load事件发生后再执行，即window.onLoad = function(){...}。参考2.1节，jQuery中的ready()函数与JS中的load事件是等价的，并且$(document).ready()与$()、jQuery()、window.jQuery()也是等价的。所以直接在JS脚本中的上面4个语句中绑定事件即可。

6.2 on()绑定事件

上述绑定事件的方法不够灵活，仅仅能绑定一个事件。on()方法在被选元素上添加事件处理程序，该方法比较便利，推荐使用该方法。语法规则如下：

  • $(选择器).on(event, function)

event事件可以写多个，用空格分开；function则是事件触发后的处理函数，可选。如$("#btn").on("click", function(){alert("按钮被点击了！")})。

7. AJAX

jQuery同样对AJAX进行了封装。在JS中，异步刷新采用的是异步对象XMLHttpRequest，分为四个步骤，比较繁琐，而jQuery将其封装成了三个函数实现了AJAX请求的处理。

  • $.ajax()：jQuery中实现AJAX的核心函数。
  • $.post()：使用post方式发送AJAX请求。
  • $.get()，使用get方式发送AJAX请求。

注意，$.post()和$.get()等其他方法的内部都是调用的$.ajax()。$.ajax()函数的参数是一个json结构，表示请求的url、方式以及参数值等等，即$.ajax({name:value, name:value,...})。name的取值有如下几种：

name 描述
async 布尔值，表示请求是否异步处理，默认是true。
contenType 字符串，发送数据到服务器时所使用的内容类型，可以不写，例如”application/json”。
data 规定要发送到服务器的数据，可以是：字符串、数组，大部分是json。如{name: “lisi”, “age”: 20}
dataType 字符串，期望从服务器响应的数据类型。取值有xml、json、text、html。
error 函数，如果请求失败，要运行的函数。
success 函数，当请求成功（readyState==4， status==200）时运行的函数。
type 规定请求的类型（GET、POST），默认是GET，不区分大小写。
url 规定发送请求的URL。

如$.ajax({async: true, contentType: "application/json", data: {"name": "lisi", "age": 20}, dataType: "json", error: function(){处理函数}, success: function(data){处理函数,注意,data就是返回的数据responseText}, type: "get", url: url地址})。

可以看到上述的参数比较多，一些有默认的取值，主要使用的就是url、data、dataType和success。

8. 总结

jQuery就是对JS的封装，而JS是对浏览器以及DOM树的操作，比如定位元素获取值设置值等动态的组件操作等等。所以jQuery也是这些功能，如选择器定位元素，过滤器进一步定位元素；为了方便操作，提供了一些函数，如remove()、each()函数等等；另外还有事件绑定以及异步请求对象等等。本质上就是JS的一层封装。

9. 备注

参考B站《动力节点》。

文章作者: 浮云
文章链接: https://ihianian.github.io/2022/01/19/JavaWeb-10-jQuery/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 浮云 !
JavaWeb
赏
  目录