【5.0】前端基础jQuery之jQuery补充

【一】组织标签后续执行

【1】方式一

// 方式1(推荐使用)
$('#d1').click(function () {
   alert(123)
   return false  //  取消当前标签对象后续事件的执行
  })

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

</head>
<body>

<form action="">
    <span id="d1" style="color: red;"></span>
    <input type="submit" id="d2">
</form>


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

</body>
</html>

【2】方式二

// 方式2(自带关键字)
$('#d1').click(function (e) {
          alert(123)
          e.preventDefault()
  })

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

</head>
<body>

<form action="">
    <span id="d1" style="color: red;"></span>
    <input type="submit" id="d2">
</form>


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

    })
</script>

</body>
</html>

【二】阻止事件冒泡

在多个标签嵌套的并且都有相同事件的情况下会出现逐级汇报的现象

方式1
	return false
方式2
	e.stopPropagation()

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

</head>
<body>

<div id="d1">div

    <p id="d2">div>p
        <span id="d3">div>p>span</span>
    </p>

</div>


<script>
    $("#d1").click(function () {
        alert("div")
    })

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

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

</script>
</body>
</html>

【三】事件委托

// 针对动态创建的标签 提前写好的事件默认是无法生效的
$('body').on('事件类型','选择器',function(){})

// 将body内所有的点击事件交给button标签处理
$('body').on('click','button',function(){})

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

</head>
<body>

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

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

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

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

</script>

</body>
</html>

【四】页面加载

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

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

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

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

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

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

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

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

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

【3】最暴力的方法

直接写在 body 标签内部！

【五】jQuery中的动画效果

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

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

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

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

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

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

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

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

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

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

【3】`toggle()`

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

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

【4】`animate()`

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

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

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

【5】案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>
    <style>
        #d1 {
            height: 1000px;
            width: 400px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="d1"></div>
</body>
</html>

5s后隐藏起来

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

5s后展示出来

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

5s后向上卷起

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

5s后向下展开

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

颜色逐渐变浅直到消失

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

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

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

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

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

【补充】

【1】each()方法

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

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

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

【2】data()方法

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

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

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

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

值得注意的是，data()方法不仅可以用于存储简单的数据类型（如字符串、数字），还可以用于存储复杂的对象和数组等数据结构。

同时，它也提供了一些其他功能，例如通过传递一个函数作为参数来进行数据处理，或者通过传递一个布尔值来控制数据缓存行为等。

【3】案例演示

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

</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</body>
</html>

（1）each方法

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

回调函数提供两个参数：

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

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

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

一个参数

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

两个参数

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

数组作为参数

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

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

each 可以帮我们省略 for 循环

（2）data方法

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

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

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

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

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

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

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

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

posted @ 2024-02-28 16:22 Chimengmeng 阅读(4) 评论(0) 编辑收藏举报

刷新页面返回顶部

Dream-Z

Hope Your Life Is Worth It !

【5.0】前端基础jQuery之jQuery补充

【一】组织标签后续执行

【1】方式一

【2】方式二

【二】阻止事件冒泡

【三】事件委托

【四】页面加载

【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方法

公告

Dream-Z

Hope Your Life Is Worth It !

【5.0】前端基础jQuery之jQuery补充

【一】组织标签后续执行

【1】方式一

【2】方式二

【二】阻止事件冒泡

【三】事件委托

【四】页面加载

【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()`