标签：jQuery function 前端元素 init 17.0 div fn d1

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

【一】组织标签后续执行

方式一

<!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>

方式二

<!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>

【二】阻止事件冒泡

<!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>

【三】事件委托

<!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()
// {}

标签：jQuery,function,前端,元素,init,17.0,div,fn,d1
From： https://www.cnblogs.com/dream-ze/p/17532464.html

【17.0】前端基础jQuery之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方法

相关文章

赞助商

阅读排行

【17.0】前端基础jQuery之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()`: