【17.0】前端基础jQuery之jQuery补充#

【一】组织标签后续执行#

方式一

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
7
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
8

9
</head>
10
<body>
11

12
<form action="">
13
    <span id="d1" style="color: red;"></span>
14
    <input type="submit" id="d2">
15
</form>
16

17

18
<script>
19
    $("#d2").click(function () {
20
        $("#d1").text("我出来了哦!")
21
        // 阻止标签后续事件的执行
22
        return false
23
    })
24
</script>
25

26
</body>
27
</html>

方式二

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
7
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
8

9
</head>
10
<body>
11

12
<form action="">
13
    <span id="d1" style="color: red;"></span>
14
    <input type="submit" id="d2">
15
</form>
16

17

18
<script>
19
    $("#d2").click(function (e) {
20
        $("#d1").text("我出来了哦!")
21
        // 阻止标签后续事件的执行方式一
22
        // return false
23
        // 阻止标签后续事件的执行方式二
24
        e.preventDefault()
25

26
    })
27
</script>
28

29
</body>
30
</html>

【二】阻止事件冒泡#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
7
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
8

9
</head>
10
<body>
11

12
<div id="d1">div
13

14
    <p id="d2">div>p
15
        <span id="d3">div>p>span</span>
16
    </p>
17

18
</div>
19

20

21
<script>
22
    $("#d1").click(function () {
23
        alert("div")
24
    })
25

26
    $("#d2").click(function (e) {
27
        // 阻止事件冒泡方式二
28
        alert("p")
29
        e.stopPropagation()
30
    })
31

32
    $("#d3").click(function () {
33
        alert("span")
34
        // 阻止事件冒泡方式一
35
        return false
36

37

38
    })
39

40
</script>
41
</body>
42
</html>

【三】事件委托#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
7
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
8

9
</head>
10
<body>
11

12
<button>点我有惊喜哦!</button>
13

14
<script>
15
    // 创建button按钮标签
16
    let $buttonEle = $("<button>")
17
    $buttonEle.text("你放心的去吧,一切有我!")
18
    let bodyEle = $("body")
19
    bodyEle.append($buttonEle)
20

21
    // 给页面上的所有button按钮标签绑定点击事件
22
    // $("button").click(function () { // 无法监控动态创建的按钮标签
23
    //     alert("button")
24
    // })
25

26
    // 事件委托
27
    bodyEle.on("click", "button", function () {
28
        alert("欢迎光临") // 在指定范围内，将事件委托给某个标签，无论是该标签是事先声明的还是动态创建的
29
    })
30

31
</script>
32

33
</body>
34
</html>

【四】页面加载#

jQuery中等待页面加载

在jQuery中，可以使用$(document).ready()方法等待页面加载完成。

【1】`$(document).ready()`#

$(document).ready()是一个事件处理函数，会在DOM（文档对象模型）树完全构建好后执行。
- 它确保了JavaScript代码只有在页面完全加载后才开始执行，从而避免了由于DOM元素尚未准备好而导致的错误。
下面是一个示例代码：

1
$(document).ready(function() {
2
  // 在这里编写需要在页面加载完成后执行的代码
3
  // 例如操作DOM元素、绑定事件等
4
});

你可以将你的JavaScript代码放在$(document).ready()方法内部，
- 这样就能够确保代码在页面加载完成后执行。

【2】`$(function() { ... })`#

$(function() { ... })这是`$ (document).ready()`方法的一种简写形式。
以下是一个等价的示例代码：

1
$(function() {
2
  // 在这里编写需要在页面加载完成后执行的代码
3
});

使用$(document).ready()方法或其简化形式，可以保证你的JavaScript代码在页面加载完成后执行，从而避免因为DOM元素未准备好而导致的问题。

【3】最暴力的方法#

直接写在 body 标签内部！

【五】jQuery中的动画效果#

在jQuery中，你可以使用动画效果来为网页元素添加交互和视觉效果。jQuery提供了一系列内置的方法，用于实现常见的动画效果，如淡入淡出、滑动、缩放等。

下面是一些常用的jQuery动画效果方法：

【1】`fadeIn()`和`fadeOut()`:#

这两个方法可以实现元素的淡入淡出效果。
- fadeIn()将元素逐渐显示出来，
- fadeOut()则使元素逐渐消失。

1
// 淡入效果
2
$(element).fadeIn();
3

4
// 淡出效果
5
$(element).fadeOut();

【2】`slideUp()`和`slideDown()`:#

这两个方法可以实现元素的上滑和下滑效果。
- slideUp()将元素向上滑动隐藏，
- slideDown()则使元素从上方下滑显示出来。

1
// 上滑效果
2
$(element).slideUp();
3

4
// 下滑效果
5
$(element).slideDown();

【3】`toggle()`:#

这个方法可以在淡入和淡出之间进行切换。

1
// 切换淡入淡出效果
2
$(element).toggle();

【4】`animate()`:#

该方法允许你自定义元素的动画效果，可以控制元素的样式属性（如宽度、高度、透明度等）在一定时间内进行平滑的过渡。

1
// 自定义动画效果
2
$(element).animate({
3
  property1: value1,
4
  property2: value2,
5
  // ...
6
}, duration);

在以上示例代码中，element是HTML元素的选择器
- 例如.class或#id。你可以根据具体的需求选择需要添加动画效果的元素，并使用相应的方法调用来实现动画效果。

【5】案例演示#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
7
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
8
    <style>
9
        #d1 {
10
            height: 1000px;
11
            width: 400px;
12
            background-color: red;
13
        }
14
    </style>
15
</head>
16
<body>
17
<div id="d1"></div>
18
</body>
19
</html>

5s后隐藏起来

1
$('#d1').hide(5000);
2
// S.fn.init [div#d1]

5s后展示出来

1
$('#d1').show(5000);
2
// S.fn.init [div#d1]

5s后向上卷起

1
$('#d1').slideUp(5000);
2
// S.fn.init [div#d1]

5s后向下展开

1
$('#d1').slideDown(5000);
2
// S.fn.init [div#d1]

颜色逐渐变浅直到消失

1
$('#d1').fadeOut(5000);
2
// S.fn.init [div#d1]

颜色逐渐加深直到完全展示

1
$('#d1').fadeIn(5000);
2
// S.fn.init [div#d1]

渐变到某一个程度就不会再渐变了

1
$('#d1').fadeTo(5000,0.4);
2
// S.fn.init [div#d1]

【补充】#

【1】each()方法#

是jQuery库中的一个函数，用于遍历集合中的每个元素，并对其执行指定的操作。
- 该方法接受一个回调函数作为参数，在每个元素上执行此回调函数。
- 回调函数提供两个参数：
  - 第一个参数是当前处理的元素
  - 第二个参数是该元素在集合中的索引位置。
- 通过在回调函数中对每个元素进行操作，可以实现批量处理元素的目的。
例如
- 以下代码展示了如何使用each()方法遍历一个列表中的每个li元素，并为每个元素添加一个样式类：

1
$("li").each(function(index, element){
2
  $(element).addClass("highlight");
3
});

上述代码将会为列表中的每个li元素添加高亮样式类（highlight）。

【2】data()方法#

也是jQuery库中的一个函数，用于在元素上存储和获取数据。
- 它为每个元素维护一个与之关联的数据对象，可以通过该对象来存储和检索与元素相关的数据。
- data()方法可以接受一个或两个参数。
当只有一个参数时，该参数可以是一个字符串或一个对象。
如果传递一个字符串作为参数，则表示要获取与元素关联的特定数据项的值。
如果传递一个对象，则表示要设置与元素关联的多个数据项。
例如，以下代码演示了如何使用data()方法存储和获取数据：

1
// 设置关联数据
2
$("div").data("key", "value");
3

4
// 获取关联数据
5
var value = $("div").data("key");

上述代码将会在div元素上存储一个名为”key”的数据项，并将其值设置为”value”。
- 然后通过调用data(“key”)方法，可以获取该数据项的值。

值得注意的是，data()方法不仅可以用于存储简单的数据类型（如字符串、数字），还可以用于存储复杂的对象和数组等数据结构。
同时，它也提供了一些其他功能，例如通过传递一个函数作为参数来进行数据处理，或者通过传递一个布尔值来控制数据缓存行为等。

【3】案例演示#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
7
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
8

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

（1）each方法#

该方法接受一个回调函数作为参数，在每个元素上执行此回调函数。

回调函数提供两个参数：

第一个参数是当前处理的元素

第二个参数是该元素在集合中的索引位置。

通过在回调函数中对每个元素进行操作，可以实现批量处理元素的目的

一个参数

1
$("div")
2
// S.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)]
3
$("div").each(function (params) {console.log(params)
4
})
5
/* VM271:1 0
6
VM271:1 1
7
VM271:1 2
8
VM271:1 3
9
VM271:1 4
10
VM271:1 5
11
VM271:1 6
12
VM271:1 7
13
VM271:1 8
14
VM271:1 9
15
S.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)] */

两个参数

1
$("div").each(function (params,obg) {console.log(params,obg)
2
})
3
/* VM302:1 0 <div>1</div>
4
VM302:1 1 <div>2</div>
5
VM302:1 2 <div>3</div>
6
VM302:1 3 <div>4</div>
7
VM302:1 4 <div>5</div>
8
VM302:1 5 <div>6</div>
9
VM302:1 6 <div>7</div>
10
VM302:1 7 <div>8</div>
11
VM302:1 8 <div>9</div>
12
VM302:1 9 <div>10</div>
13
S.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)] */

数组作为参数

1
$.each([11,22,33,44,55,66],function (params,obg) {console.log(params,obg)})
2

3
/* VM368:1 0 11
4
VM368:1 1 22
5
VM368:1 2 33
6
VM368:1 3 44
7
VM368:1 4 55
8
VM368:1 5 66
9
(6) [11, 22, 33, 44, 55, 66] */

each 可以帮我们省略 for 循环

（2）data方法#

能让我们的标签帮我们存储数据，但是标签看不见

给标签 div 添加了一个属性是 info 值是信息

1
$('div').data('info','这是一条咪咪信息!')
2

3
// S.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)]

在标签本身的代码中看不到，但是可以通过以下方法进行取值

1
$('div').first().data()
2
// {info: '这是一条咪咪信息!'}
3
$('div').last().data()
4
// {info: '这是一条咪咪信息!'}

删除某个标签 data 中对应的数据

1
$('div').first().removeData('info')
2
// S.fn.init [div, prevObject: S.fn.init(10)]
3
$('div').first().data()
4
// {}

音乐

音乐

【17.0】前端基础jQuery之jQuery补充#

【一】组织标签后续执行#

【二】阻止事件冒泡#

【三】事件委托#

【四】页面加载#

【1】`$(document).ready()`#

【2】`$(function() { ... })`#

【3】最暴力的方法#

【五】jQuery中的动画效果#

【1】`fadeIn()`和`fadeOut()`:#

【2】`slideUp()`和`slideDown()`:#

【3】`toggle()`:#

【4】`animate()`:#

【5】案例演示#

【补充】#

【1】each()方法#

【2】data()方法#

【3】案例演示#

（1）each方法#

（2）data方法#

支持与分享

音乐

jQuery 补充

【17.0】前端基础jQuery之jQuery补充#

【一】组织标签后续执行#

【二】阻止事件冒泡#

【三】事件委托#

【四】页面加载#

【1】$(document).ready()#

【2】$(function() { ... })#

【3】最暴力的方法#

【五】jQuery中的动画效果#

【1】fadeIn()和fadeOut():#

【2】slideUp()和slideDown():#

【3】toggle():#

【4】animate():#

【5】案例演示#

【补充】#

【1】each()方法#

【2】data()方法#

【3】案例演示#

（1）each方法#

（2）data方法#

支持与分享

【1】`$(document).ready()`#

【2】`$(function() { ... })`#

【1】`fadeIn()`和`fadeOut()`:#

【2】`slideUp()`和`slideDown()`:#

【3】`toggle()`:#

【4】`animate()`:#