运维八一
lyndon
2022-08-04
目录

js之jQuery

# 1. jQuery介绍

jQuery是一个javascript库，核心理念是write less,do more(写得更少,做得更多)

它内部帮我们把几乎所有功能都做了封装，相比基于DOM、BOM操作会更加简单。例如：

// DOM根据ID选择标签对象
document.getElementById("xx")
// jQuery根据ID选择标签对象
$('#xx')
1
2
3
4

# 2. jQuery 快速应用

在使用jQuery时，需要提前下载并应用jQuery之后，才能在代码中使用。

  • 下载jQuery http://jquery.com/download/

  • 应用jQuery

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>jQuery</title>
</head>
<body>
<div class="body">
<ul>
<li id="login">登录</li>
<li id="register">注册</li>
</ul>
</div>

<!--引入jQuery-->
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script>
// 利用jQuery提供的功能获取标签文本
var value = $('#login').text();
        console.log(value);
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 2.1 DOM对象和jQuery对象

DOM 对象和 jQuery 对象都为标签提供了各种各种功能，并且两者之间可以进行相互转换。

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>jQuery</title>
</head>
<body>
<div id="content">人生如烟，烟如雾。</div>
<!--引入jQuery-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<script>
// DOM操作
// 获取文本
var txt = document.getElementById('content').innerText;
        document.getElementById('content').innerText = '沙雕';
// jQuery操作
var text = $('#content').text();
        $('#content').text('二货');


// Dom对象转换jQuery对象：$(dom对象)
        $(document.getElementById('content'))
// jQuery对象转换成Dom对象：jQuery对象[0]
        $('#content')[0]
</script>
</body>
</html>
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

# 3. 选择器

jQuery提供了大量选择器，用于帮助开发者快速找到HTML中的指定标签。

# 3.1 id 选择器

HTML代码：

<div id="notMe">  
    <p>id="notMe"</p>
</div>
<div id="myDiv">白日依山尽</div>
1
2
3
4

jQuery代码：

$("#myDiv");
1

结果：

[<div id="myDiv">id="myDiv"</div> ]
1

# 3.2 class 选择器

HTML代码：

<div class="notMe">窗前明月光</div>
<div class="myClass">疑是地上霜</div>
<span class="myClass">举头望明月</span>
1
2
3

jQuery代码：

$(".myClass");
1

结果：

[ <div class="myClass">窗前明月光</div>, <span class="myClass">举头望明月</span> ]
1

# 3.3 标签选择器

HTML代码：

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
1
2
3

jQuery代码：

$("div");
1

结果：

[ <div>DIV1</div>, <div>DIV2</div> ]
1

# 3.4 多选择器

HTML代码：

<div>鸡</div>
<p class="myClass">我顶你个肺</p>
<span>你太美</span>
<p class="notMyClass">哈哈哈哈哈哈</p>
1
2
3
4

jQuery代码：

$("div,span,p.myClass")
1

结果：

[ <div>鸡</div>, <p class="myClass">我顶你个肺</p>, <span>你太美</span> ]
1

# 3.5 层级选择器

HTML代码：

<form>
    <label>Name:</label>
    <input name="name" />
    <div>
        <label>Newsletter:</label>
        <input name="newsletter" />
    </div>
</form>
<input name="none" />
1
2
3
4
5
6
7
8
9

jQuery代码：

$("form input")
1

结果：

[ <input name="name" />, <input name="newsletter" /> ]
1

# 3.6 属性选择器

HTML代码：

<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
1
2
3

jQuery代码：

$("input[name='newsletter']")
1

结果：

[ <input type="checkbox" name="newsletter" value="Hot Fuzz" />, <input type="checkbox" name="newsletter" value="Cold Fusion" /> ]
1

# 3.7 表单选择器

HTML代码：

<form>
<input type="button" value="Input Button"/>
<input type="checkbox" />

<input type="file" />
<input type="hidden" />
<input type="image" />

<input type="password" />
<input type="radio" />
<input type="reset" />

<input type="submit" />
<input type="text" />
<select>
<option>Option</option>
</select>
<textarea> </textarea>
<button>Button</button>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

jQuery代码：

$(":text")      // 找到所有input标签
// $(":input")  //找到所有input标签
// $(":password") //找到所有input且type=password的标签
// $(":radio")  //找到所有input且type=radio的标签
// $(":checkbox") //找到所有input且type=checkbox的标签
1
2
3
4
5

结果：

[ <input type="text" /> ]
1

# 4. 筛选器

筛选器一般用于对选择器选中的标签进行再次筛选。

# 4.1 parent 父标签

HTML代码：

<div>
    <p>Hello</p>
    <p>Hello</p>
</div>
1
2
3
4

jQuery代码：

$("p").parent()
1

结果：

[<div><p>Hello</p><p>Hello</p></div> ]
1

# 4.2 children 所有子标签

HTML代码：

<p>Hello</p>
<div>
    <span>Hello Again</span>
</div>
<p>And Again</p>
1
2
3
4
5

jQuery代码：

$("div").children()
1

结果：

[ <span>Hello Again</span> ]
1

# 4.3 next 下一个兄弟标签

HTML代码：

<p>Hello</p>
<p>Hello Again</p>
<div>
    <span>And Again</span>
</div>
1
2
3
4
5

jQuery代码：

$("p").next()
1

结果：

[ <p>Hello Again</p>, <div><span>And Again</span></div> ]
1

# 4.4 prev 上一个兄弟标签

HTML代码：

<p>Hello</p>
<div>
    <span>Hello Again</span>
</div>
<p>And Again</p>
1
2
3
4
5

jQuery代码：

$("p").prev()
1

结果：

[ <div><span>Hello Again</span></div> ]
1

# 4.5 siblings 所有兄弟标签

HTML代码：

<p>Hello</p>
<div>
    <span>Hello Again</span>
</div>
<p>And Again</p>
1
2
3
4
5

jQuery代码：

$("div").siblings()
1

结果：

[ <p>Hello</p>, <p>And Again</p> ]
1

# 4.6 find 子孙中查找标签

HTML代码：

<p>
    <span>Hello</span>, how are you?
</p>
1
2
3

jQuery代码：

$("p").find("span")
1

结果：

[ <span>Hello</span> ]
1

# 4.7 first 匹配的第一个标签

HTML代码：

<ul>
	<li>list item 1</li>
	<li>list item 2</li>
	<li>list item 3</li>
	<li>list item 4</li>
	<li>list item 5</li>
</ul>
1
2
3
4
5
6
7

jQuery代码：

$('li').first()
1

结果：

[ <li>list item 1</li> ]
1

# 4.8 last 匹配的最后一个标签

HTML代码：

<ul>
	<li>list item 1</li>
	<li>list item 2</li>
	<li>list item 3</li>
	<li>list item 4</li>
	<li>list item 5</li>
</ul>
1
2
3
4
5
6
7

jQuery代码：

$('li').last()
1

结果：

[ <li>list item 5</li> ]
1

# 5. 属性

# 5.1 addClass 添加样式

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
            height:200px;
            width: 200px;
            border-radius: 50%;
            background-color: red;
}
.green{
            background-color: green;
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

jQuery代码：

$('.c1').addClass('green')
1

结果：

div标签背景颜色变成了绿色
1

# 5.2 removeClass 删除样式

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
            height:200px;
            width: 200px;
            border-radius: 50%;
            background-color: red;
}
.green{
            background-color: green;
}
</style>

</head>
<body>

<div class="c1 green"></div>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

jQuery代码：

$('.c1').removeClass('green')
1

结果：

div标签背景又变成了红色
1

# 5.3 html、text文本

HTML代码：

<div class="a1">
    <a href="">百度</a>
</div>
<div class="a2"></div>
1
2
3
4

jQuery代码：

取值：
$('.a1').html()
$('.a1').text()

设置值：
$('.a2').html('<a href="">京东</a>')
$('.a2').text('<a href="">京东</a>')
1
2
3
4
5
6
7

结果：

取值结果：    
html：<a href="">百度</a>    
text：百度

设置值结果：  
html中的内容会生成一个标签  
text中的内容还是一个文本内容显示，不能识别成标签
1
2
3
4
5
6
7

# 5.4 val 值

HTML代码：

<input type="text" id="username">

<input type="text" class="a1" name="sex">男
<input type="text" class="a1" name="sex">女

<input type="text" class="a2" name="hobby">抽烟
<input type="text" class="a2" name="hobby">喝酒
<input type="text" class="a2" name="hobby">烫头

<select name="city" id="s1">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
</select>

<select name="lover" id="s2">
<option value="1">波多</option>
<option value="2">苍井</option>
<option value="3">小泽</option>
</select>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

jQuery代码：

获取值：
文本输入框：$('#username').val();
单选radio框：$('.a1:checked').val();
多选checkout框：$('.a2:checked').val()是不行的;需要循环取值，如下：
var d = $(':checkbox:checked');
for (var i=0;i<d.length;i++){
            console.log(d.eq(i).val());
}

单选select框：$('#city').val()；
多选select框：$('#lover').val();

设置值：
文本输入框：$('#username').val('you are my love');
单选radio框：$('.a1').val([2]);  #注意里面必须是列表，写的是value属性对应的值
多选checkout框：$('.a2').val(['2','3'])
单选select框：$('#city').val('1')；
多选select框：$('#lover').val(['2','3'])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 案例：模态框添加和编辑功能

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cover {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 99;
}

.modal {
            width: 300px;
            height: 200px;
            background-color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -150px;
            z-index: 1000;
}
.hide {
            display: none;
}
</style>
</head>
<body>

<button id="add">新增</button>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>金老板</td>
<td>开车</td>
<td>
<button class="fire">开除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>景女神</td>
<td>茶道</td>
<td>
<button class="fire">开除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>苑昊（苑局）</td>
<td>不洗头、不翻车、不要脸</td>
<td>
<button class="fire">开除</button>
</td>
</tr>
</tbody>
</table>

<div class="cover hide"></div>
<div class="modal hide">
<div>
<label>姓名：
<input type="text" id="name">
</label>
</div>
<div>
<label>爱好：
<input type="text" id="hobby">
</label>
</div>
<button id="cancel" type="button">取消</button>
<button id="submit" type="button">提交</button>

</div>
<script src="jquery.js"></script>
<script>
// 定义一个清空输入框并且隐藏模态框的方法
function hideModal(){
// 1. 清空input的值
        $("#name,#hobby").val('');
// 2. 隐藏起来
        $(".cover,.modal").addClass('hide');
}
// 开除按钮的功能
    $("table").on('click', '.fire', function () { //我们先去学冒泡事件、事件委托然后再回来学这个例子，事件里面都是用的匿名函数，这里用on是因为我
//们要将新添加进来的每行里面的button标签能够继承这个点击删除的事件
// 点击开除按钮要做的事儿
// 把当前行移除掉
//this  --> 触发当前点击事件的DOM对象
        $(this).parent().parent().remove();  // 链式操作
});
// 新增按钮的功能
    $("#add").click(function () {
// 点击新增按钮要做的事儿
// 1. 移除cover和modal的hide样式
        $(".cover,.modal").removeClass('hide');
});
// 点击modal中的cancel按钮
    $("#cancel").click(function () {
       hideModal();
});
// 点击modal中的submit按钮
    $("#submit").click(function () {
// 1. 获取用户输入的值
var name = $("#name").val();
var hobby = $("#hobby").val();
// 2. 隐藏模态框，清空输入框
        hideModal();
// 3. 创建一个tr标签，把数据塞进去
var trEle = document.createElement("tr");
        $(trEle).append('<td><input type="checkbox"></td>');
        $(trEle).append('<td>' + name + '</td>');
var tdTmp = document.createElement('td');
        tdTmp.innerText = hobby;
        $(trEle).append(tdTmp);
        $(trEle).append('<td><button class="fire">开除</button></td>')
// 4. 把上一步的tr追加到表格的tbody后面
        $('tbody').append(trEle);
});
</script>

</body>
</html>
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

# 5.5 prop 属性值

HTML代码：

<input type="checkbox" id="i1" value="1">
1

jQuery代码：

$("#i1").prop("checked")
1

结果：

false
1

# 案例：表格全选、反选、取消

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

<button id="all">全选</button>
<button id="reverse">反选</button>
<button id="cancel">取消</button>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>金老板</td>
<td>开车</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>景女神</td>
<td>茶道</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>苑昊（苑局）</td>
<td>不洗头、不翻车、不要脸</td>
</tr>
</tbody>
</table>

<script src="jquery.js"></script>
<script>
// 点击全选按钮 选中所有的checkbox
// DOM绑定事件方法
// $("#all")[0].onclick = function(){}
// jQuery绑定事件方法
    $("#all").click(function () {
        $(":checkbox").prop('checked', true);
});
// 取消
    $("#cancel").on("click", function () {
         $(":checkbox").prop('checked', false);
});
// 反选
    $("#reverse").click(function () {
// 1. 找到所有选中的checkbox取消选中
// $("input:checked").prop('checked', false);
// 2. 找到没有选中的checkbox选中
// $("input:not(:checked)").prop('checked', true);
//你会发现上面这么写，不行，为什么呢？因为你做了第一步操作之后，再做第二步操作的时候，所有标签就已经全部取消选中了，所以第二步就把所有标签选中了
// 方法:for循环所有的checkbox,挨个判断原来选中就取消选中，原来没选中就选中
var $checkbox = $(":checkbox");
for (var i=0;i<$checkbox.length;i++){
// 获取原来的选中与否的状态
var status = $($checkbox[i]).prop('checked');
            $($checkbox[i]).prop('checked', !status);
}
})
</script>
</body>
</html>
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

# 6. 文档处理

# 6.1 append 内部插入

HTML代码：

<div class="d1">
    <span>波多</span>
</div>
1
2
3

jQuery代码：

$('#d1').append('<a href="http://www.jd.com">京东</a>');
1

结果：

<div class="d1">
<span>波多</span>
<a href="http://www.jd.com">京东</a>
</div>
1
2
3
4

# 6.2 prepend 内部插入

HTML代码：

<div class="d1">
    <span>波多</span>
</div>
1
2
3

jQuery代码：

$('#d1').prepend('<a href="http://www.jd.com">京东</a>');
1

结果：

<div class="d1">
<a href="http://www.jd.com">京东</a>
<span>波多</span>
</div>
1
2
3
4

# 6.3 after 外部插入

HTML代码：

<div class="d1">
    <span>波多</span>
</div>
1
2
3

jQuery代码：

$('#d1').after('<a href="http://www.jd.com">京东</a>');
1

结果：

<div class="d1">
<span>波多</span>
</div>
<a href="http://www.jd.com">京东</a>
1
2
3
4

# 6.4 before 外部插入

HTML代码：

<div class="d1">
    <span>波多</span>
</div>
1
2
3

jQuery代码：

$('#d1').before('<a href="http://www.jd.com">京东</a>');
1

结果：


<a href="http://www.jd.com">京东</a>
<div class="d1">
<span>波多</span>
</div>
1
2
3
4
5

# 6.5 empty 删除标签内部的标签

HTML代码：

<div class="d1">
    <span>波多</span>
</div>
1
2
3

jQuery代码：

$('.c1').empty()
1

结果：

<div class="d1">

</div>
1
2
3

# 6.6 remove 删除标签

HTML代码：

<div class="d1">
    <span>波多</span>
</div>
<div>你好</div>
1
2
3
4

jQuery代码：

$('.c1').remove()
1

结果：

<div>你好</div>
1

# 案例：表格数据删除

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cover {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 99;
}

.modal {
            width: 300px;
            height: 200px;
            background-color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -150px;
            z-index: 1000;
}
.hide {
            display: none;
}
</style>
</head>
<body>

<button id="add">新增</button>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>金老板</td>
<td>开车</td>
<td>
<button class="fire">开除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>景女神</td>
<td>茶道</td>
<td>
<button class="fire">开除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>苑昊（苑局）</td>
<td>不洗头、不翻车、不要脸</td>
<td>
<button class="fire">开除</button>
</td>
</tr>
</tbody>
</table>

<div class="cover hide"></div>
<div class="modal hide">
<div>
<label>姓名：
<input type="text" id="name">
</label>
</div>
<div>
<label>爱好：
<input type="text" id="hobby">
</label>
</div>
<button id="cancel" type="button">取消</button>
<button id="submit" type="button">提交</button>

</div>
<script src="jquery.js"></script>
<script>
// 开除按钮的功能
    $("table").on('click', function () {
// 把当前行移除掉
//this  --> 触发当前点击事件的DOM对象
        $(this).parent().parent().remove();  // 链式操作
});
</script>
</body>
</html>
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

# 7. 事件

jQuery中也可以为标签进行绑定事件，并且相比于DOM会更加方便。

# 7.1 jQuery绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery学习</title>
</head>
<body>
<ul>
<li>王宝强</li>
<li>陈羽凡</li>
<li>谢霆锋</li>
</ul>

<script type="text/javascript">

// 当页面框架加载完成之后（DOM结构），执行内部代码。
    $(function () {
// 通过选择器找到指定标签
        $('li').onclick(function () {
// 触发事件时，都会执行此匿名函数。$(this)代表当前触发的标签。
})
})
</script>
</body>
</html>
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

# 案例：左侧菜单实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery学习</title>
<style>
        body {
            margin: 0;
}

.header {
            height: 48px;
            background-color: #499ef3;
}

.body .menu {
            position: fixed;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 220px;
            border-right: 1px solid #dddddd;
            overflow: scroll;
}

.body .content {
            position: fixed;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 225px;
/* 超出范围的话，出现滚轮 */
            overflow: scroll;
}

.body .menu .title {
            padding: 8px;
            border-bottom: 1px solid #dddddd;
            background-color: #5f4687;
            color: white;

}

.body .menu .child {
            border-bottom: 1px solid #dddddd;
}

.body .menu .child a {
            display: block;
            padding: 5px 10px;
            color: black;
            text-decoration: none;
}

.body .menu .child a:hover {
            background-color: #dddddd;
}

.hide {
            display: none;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="body">
<div class="menu">
<div class="item">
<div class="title" >国产</div>
<div class="child">
<a href="#">少年的你</a>
<a href="#">我不是药神</a>
<a href="#">我和我的祖国</a>
</div>
</div>
<div class="item">
<div class="title" >欧美</div>
<div class="child hide ">
<a href="#">战争之王</a>
<a href="#">华尔街之狼</a>
<a href="#">聚焦</a>
</div>
</div>
<div class="item">
<div class="title" >韩国</div>
<div class="child hide">
<a href="#">坏家伙们</a>
<a href="#">寄生虫</a>
<a href="#">燃烧</a>
</div>
</div>
</div>
<div class="content"></div>
</div>

<script type="text/javascript">

    $(function () {
// 给所有样式有 title 的标签绑定事件
        $('.title').click(function () {
// 当前触发事件的标签
            $(this).next().removeClass('hide');
            $(this).parent().siblings().find('.title').addClass('hide');
})
})
</script>
</body>
</html>
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

jQuery有很多事件，使用方法和click都是类似的，事件列表如下：

image-20220822224736743

# 7.2 jQuery事件委托

jQuery的事件绑定是在页面加载完毕之后，找到相关标签并为其绑定事件，如果后期通过js代码有新增表现，那么新标签中模式是没有事件的，如：


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery学习</title>
</head>
<body>

<input type="button" id="btn" value="添加元素">

<ul id="greenBoy">
<li>王宝强</li>
<li>陈羽凡</li>
<li>谢霆锋</li>
</ul>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript">

    $(function () {
        $('li').click(function () {
            alert($(this).text());
});

        $('#btn').click(function () {
var tag = $('<li>');
            tag.text('alex');
            $('#greenBoy').append(tag);
})
})
</script>
</body>
</html>
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

为了避免类似这种情况的发生，jQuery中引入了事件委托的概念，只需要基于on进行绑定即可：

<script type="text/javascript">


    $(function () {
// on的第一个参数：事件名称
// 第二个参数：选择器
// 第三个参数：事件触发时执行的函数
        $('#greenBoy').on("click","li",function () {
            alert($(this).text());
});


        $('#btn').click(function () {
var tag = $('<li>');
            tag.text('alex');
            $('#greenBoy').append(tag);
})
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 8. Ajax

ajax 作用：通过JavaScript代码向网络上的地址发送异步请求，进行前后端数据交互。

image-20220912213846193

浏览器访问网站一个页面时，Web服务器处理完后会以消息体方式返回浏览器，浏览器自动解析HTML 内容。如果局部有新数据需要更新，需要刷新浏览器重新发起页面请求获取最新数据，如果每次都是通 过刷新解决这个问题，势必会给服务器造成负载加重，页面加载缓慢。

Ajax（Asynchronous JavaScript And XML，异步JavaScript和XML），AJAX 是一种在无需重新加载 整个网页的情况下，能够更新部分网页的技术。例如在不刷新页面的情况下查询数据、登录验证等。

无刷新的好处：

  • 减少带宽、服务器负载
  • 提高用户体验

jQuery Ajax主要使用$.ajax()方法实现，用于向服务端发送HTTP请求。

语法：

$.ajax([settings]);
1

settings 是$.ajax ( )方法的参数列表，用于配置 Ajax 请求的键值对集合，参数如下：

参数 类型 描述
url string 发送请求的地址，默认为当前页地址
type string 请求方式，默认为GET
data object、array、string 发送到服务器的数据
dataType string 预期服务器返回的数据类型，包括JSON、XML、text、HTML等
contentType string 发送信息至服务器时内容编码类型。默认值: "application/xwww-form-urlencoded"。
timeout number 设置请求超时时间
headers object 设置请求头信息
async Boolean 默认true，所有请求均为异步请求。设置false发送同步请求

为了本地测试方便，我们通过ajax向本地json文件发送请求并获取数据。本地创建 data.json文件：

[
{“id”:1,”name”:”武沛齐”,”age”:18},
{“id”:2,”name”:”Alex”,”age”:18},
{“id”:3,”name”:”吴老板”,”age”:18}
]
1
2
3
4
5

编写页面 index.html

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>jQuery学习</title>
  </head>
  <body>


  <input type="button" id="btn" value="获取数据">


  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script type="text/javascript">
      $(function () {
          $('#btn').click(function () {
              $.ajax({
                  type: 'GET',
                  // 也可以向网络地址 http://www.xxxx.com 发送请求。
                  url: 'data.json',
                  success: function (arg) {
                      console.log(arg);
                  }
              })
          });
      })
</script>
  </body>
  </html>
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

回调函数：参数引用一个函数，并将数据作为参数传递给该函数。

参数 函数格式 描述
beforeSend function(jqXHR,object) 发送请求前调用的函数，例如添加自定义 HTTP头
success function(data, String textStatus,jqXHR) 请求成功后调用的函数，参数data：可选， 由服务器返回的数据（JSON）
error function(jqXHR,String textStatus,errorThrown) 请求失败时调用的函数
complete unction(jqXHR, String textStatus) 请求完成后（无论成功还是失败）调用的 函数

jqXHR：一个XMLHttpRequest对象

# 案例：基于Ajax实现数据管理

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery学习</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>

</tbody>
</table>

<input type="button" id="btn" value="获取数据">

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#btn').click(function () {
            $.ajax({
                type: 'GET',
// 也可以向网络地址 http://www.xxxx.com 发送请求。
                url: 'data.json',
                success: function (arg) {
                    console.log(arg);
// 1 先制作出所有的tr标签
var s = '';
for (var i in arg){
var a = '<tr><td>'+ arg[i]['id'] +'</td><td>'+ arg[i]['name'] +'</td><td>'+ arg[i]['age'] +'</td></tr>';
                        s += a;
}
// 2 找到tbody标签,将标签添加进去
                    $('tbody').append(s);
}
})
});
})
</script>
</body>
</html>
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
上次更新: 2022/09/12, 21:47:32
js之BOM
前端框架之BootStrap

← 前端框架之BootStrap→

最近更新
01
ctr和crictl显示镜像不一致
03-13
02
alpine镜像集成常用数据库客户端
03-13
03
create-cluster
02-26
更多文章>
Theme by Vdoing | Copyright © 2015-2024 op81.com
苏ICP备18041258号-2