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

【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 标签 内部 ！

【4】在JavaScript中同等效果

在JavaScript中，可以使用异步编程的方式来等待一段代码块加载完毕后再执行。以下是几种常见的方法：

  1. 使用回调函数：可以将待执行的代码块封装在一个函数中，并将该函数传递给加载完成的回调函数作为参数，在加载完成后调用该回调函数执行相应代码。
function loadScript(url, callback) {
  var script = document.createElement("script");
  script.type = "text/javascript";
  
  // 等待脚本加载完成后执行回调函数
  script.onload = callback;
  
  script.src = url;
  document.body.appendChild(script);
}

// 使用示例
loadScript("example.js", function() {
  // 在脚本加载完毕后执行此代码块
});
  1. 使用Promise对象：通过Promise对象可以更加直观地处理异步操作，可以利用Promise对象包装待执行的代码块，并在加载完成后进行resolve，然后使用.then()方法执行相应代码。
function loadScript(url) {
  return new Promise(function(resolve, reject) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    
    // 等待脚本加载完成后调用resolve
    script.onload = resolve;
    
    script.src = url;
    document.body.appendChild(script);
  });
}

// 使用示例
loadScript("example.js").then(function() {
  // 在脚本加载完毕后执行此代码块
});
  1. 使用async/await：如果你的代码运行环境支持ES2017标准的async/await特性，可以使用async函数和await关键字。
async function loadScript(url) {
  var script = document.createElement("script");
  script.type = "text/javascript";
  
  await new Promise(function(resolve, reject) {
    script.onload = resolve;
    script.src = url;
    document.body.appendChild(script);
  });
  
  // 在脚本加载完毕后执行此代码块
}

// 使用示例
async function myFunction() {
  await loadScript("example.js");
  // 在脚本加载完毕后执行此代码块
}

以上是几种常见的等待一段代码块加载完毕后执行的方法，具体选择哪种方式可根据实际情况和需求进行决定。

【五】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 @ 2023-07-06 16:05  Chimengmeng  阅读(11)  评论(0)  编辑  收藏  举报