jQuery技术总结

发表于 | 分类于 | | 阅读量 次

jQuery

jQuery认识

jQuery是一个快速、简介的JavaScript框架，jQuery的宗旨：写的更少，做的更多

jQuery基本语法

引入jQuery

在html中引入jQuery文件

1
<script src="js/jquery-3.2.1.js"></script>

入口函数

1
2
3
4
5
6
7
8
9
10
11
<script src="js/jquery-3.2.1.js"></script>
		<script>
			$(function(){
				var h = $('h2');
			})
			
		</script>
	</head>
	<body>
		<h2>冲冲冲</h2>
	</body>

事件绑定

1.事件名

2.bind

3.on(推荐使用)

选择器

jQuery选择器基于CSS选择器，并且做了更多的拓展

CSS选择器：

​ 基本选择器

​ 标签选择器 直接写标签名

​ 类选择器 通过.class的属性值

​ id选择器 #id的属性值

​ 通用选择器 *

​ 复合选择器

​ 子元素选择器 直接找子元素： 父选择器 > 子选择器

​ 后代选择器 找所有的后代，包括子元素和孙子元素：祖选择器 后代选择器

​ 相邻兄弟选择器 后面的第一个紧挨着的元素： 哥哥选择器 + 弟弟选择器

​ 同胞兄弟选择器 后面所有的兄弟元素： 哥哥选择器~弟弟选择器

Demo

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript">
	$(function() {
			$("#btn1").on("click",function(){
				$("#select").val("2号");
			});
			
			$("#btn2").on("click",function(){
				$("#selectMultiple").val(["2号","5号"]);
			});
			
			$("#btn3").on("click",function(){
				$("input[name=checkbox]").val(["复选2","复选4"]);
			});
			
			$("#btn4").on("click",function(){
				$("input[name=radio]:eq(1)").prop("checked",true);
			});
			
			$("#btn5").on("click",function(){
					$.each($("*:checked"),function(i,e){
						console.debug($(e).val());
					});
			});
	});
</script>
<title>练习5</title>
</head>
<body>
	<input id="btn1" type="button" value="使单选下拉框‘2号’选中"/><br/>
	<input id="btn2" type="button" value="使多选下拉框‘2号’和‘5号’选中"/><br/>
	<input id="btn3" type="button" value="使复选框‘2号’和‘4号’选中"/><br/>
	<input id="btn4" type="button" value="使单选框‘单选2’选中"/><br/>
	<input id="btn5" type="button" value="打印已被选中的值"/><br/>
	
	<form name="userForm">
		单选下拉框<select id="select" name="select">
			<option value="1号">1号</option>
			<option value="2号">2号</option>
			<option value="3号">3号</option>
			<option value="4号">4号</option>
			<option value="5号">5号</option>
			<option value="6号">6号</option>	
		</select>
		
		多选下拉框<select id="selectMultiple" multiple="multiple" size="6" name="selectMultiple">
			<option value="1号">01号</option>
			<option value="2号">02号</option>
			<option value="3号">03号</option>
			<option value="4号">04号</option>
			<option value="5号">05号</option>
			<option value="6号">06号</option>	
		</select>
		<br/>
		复选框<input value="复选1" type="checkbox" name="checkbox"/>复选1
		<input value="复选2" type="checkbox" name="checkbox"/>复选2
		<input value="复选3" type="checkbox" name="checkbox"/>复选3
		<input value="复选4" type="checkbox" name="checkbox"/>复选4
		<input value="复选5" type="checkbox" name="checkbox"/>复选5
		<br/>
		单选框<input value="单选1" type="radio" name="radio"/>单选1
		<input value="单选2" type="radio" name="radio"/>单选2
		<input value="单选3" type="radio" name="radio"/>单选3
		<input value="单选4" type="radio" name="radio"/>单选4
	</form>
</body>
</html>

Ajax

参数

1
2
3
4
url: 请求服务器的地址
[data]：提交的参数
[callback]：回调函数
type:返回参数的类型(json,xml...)

Demo

使用Ajax实现二级联动

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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script language="javascript" src="js/jquery-3.2.1.js"></script>
<script>
	$(function(){
		//get提交，获取省份
		var url = "cityServlet";
		$.get(url,function(data){
			$.each(data,function(i,e){
				var html = `
					<option id=${e.id}>${e.name}</option>
				`;	
				$("#pro").append(html);
			});
		},"json");
		
		//post提交，获取市的值
		$("#pro").on("change",function(){
			var data = $("#pro option:checked");
			var id = data.prop("id");
			if(id){
				$.post("cityServlet",{"pro":id},function(data){
					//先清空#city的数据
					$("#city").html("");
	 				$.each(data,function(i,e){
						var html = `
							<option id=${e.id}>${e.name}</option>
						`;
						$("#city").append(html);
					});
					
				},"json");
			}
			
			
		});
		
		
	})
	
</script>
</head>
<body style="text-align: center;">
	
	<h2>选择城市</h2>
	<select id="pro">
		<option>请选择</option>
	</select> 省
	<select id="city">
		<option>请选择</option>
	</select> 市
	
</body>
</html>
❤赏点钱让我买杯快乐水8❤