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❤