22.3 jQuery 库

image-20230924193914597

1. jQuery

1.1 简介

jQuery: 是一种广泛使用的JavaScript库, 它简化了处理HTML文档, 处理事件, 执行动画以及使用AJAX等任务的编程.
jQuery通过提供简洁的API, 使开发者可以更快地编写JavaScript代码, 并且具有跨浏览器兼容性.
它提供了许多便利的功能和方法, 使处理DOM元素, 处理事件, 创建动画和发送AJAX请求更加方便.
jQuery减少了开发工作量, 并提供了更加直观和简洁的代码编写方式.

1.2 优势

jQuery作为一个流行的JavaScript库, 具有以下一些优势:
* 1. 简洁的语法: jQuery提供了简洁易懂的语法, 使得开发人员能够更快速地编写JavaScript代码, 减少了冗余和繁琐的操作.

* 2. DOM操作简化: jQuery提供了强大的DOM操作功能.
     通过简单的方法和选择器, 可以轻松地查找, 遍历和操作DOM元素, 实现动态的页面效果和交互行为.

* 3. 丰富的插件库: jQuery拥有庞大的插件生态系统, 提供了大量的第三方插件, 涵盖了各种常见的功能和效果, 如表单验证, 图表绘制, 轮播图等.
     这些插件能够快速且可靠地扩展网页的功能.

* 4. 轻量级: 相对于其他JavaScript库或框架, jQuery的文件大小较小, 加载速度快, 这对于优化网页性能和提升用户体验非常重要.

* 5. 跨浏览器兼容性: jQuery致力于解决浏览器兼容性问题, 能够在主流的浏览器上稳定运行, 
     并提供了统一的API, 使得开发人员不需要考虑底层的浏览器差异.

* 6. AJAX支持: jQuery提供了简洁易用的AJAX方法, 使得与服务器端进行异步通信变得更加方便.
     开发人员可以使用jQuery轻松地发送AJAX请求, 并处理返回的数据.

* 7. 动画和效果: jQuery提供了丰富的动画和效果操作, 可以通过一行代码实现元素的淡入淡出, 滑动, 缩放等动态效果, 使页面更加生动有趣.

* 8. 社区支持和文档丰富: jQuery拥有庞大的活跃开发社区, 提供了大量的教程, 文档和示例, 开发人员可以轻松地找到解决问题的方法和资源.

总的来说. jQuery能够为开发人员提供一个更加简洁和高效的编程环境, 
简化了常见的JavaScript操作, 并且提供了丰富的插件和工具, 使得开发网页和应用程序变得更加便捷和灵活.

1.3 版本

jQuery目前有三个主要版本: jQuery 1.x, jQuery 2.x和jQuery 3.x.
以下是对它们的简要介绍:

* 1. jQuery 1.x: jQuery 1.x系列版本是最早发布的版本, 主要关注于向后兼容性.
     这些版本支持旧版的浏览器(如IE 6/7/8), 并且能够在这些浏览器中提供相同的功能和特性.

* 2. jQuery 2.x: jQuery 2.x系列版本是在1.x基础上进行的改进, 主要采用了更加现代的Web标准.
     1.x系列不同, 2.x系列版本放弃了对旧版IE浏览器的支持(最低要求为IE 9), 这使得2.x系列的文件大小更小, 加载速度更快.

* 3. jQuery 3.x:jQuery 3.x系列版本是目前最新的版本, 也是推荐使用的版本. 
     它是在2.x系列的基础上进行改进和优化的, 保留了对现代浏览器的支持,
     对于那些在2.x系列中升级到3.x系列的用户来说, 几乎没有任何的破坏性变化.
     jQuery 3.x系列也提供了一些新的功能和改进, 同时继续保持着快速, 稳定和兼容性的优势.

1.4 jQuery对象

jQuery对象是通过选择器选择DOM元素后返回的特殊对象.
它是一个包装了一组匹配的DOM元素的容器, 可以直接操作这些DOM元素.

jQuery对象提供了丰富的方法来操作DOM元素, 例如修改元素的属性, 样式, 内容, 绑定事件, 执行动画等等.
可以通过链式调用方法, 便捷地对一组DOM元素进行操作.
要声明一个jQuery对象, 可以使用$()或jQuery()函数并传入一个选择器字符串, DOM元素, HTML代码片段或一个函数作为参数.

常见的声明方式(约定, 在声明一个jQuery对象变量的时候在变量名前面加上$):
* 1. 通过选择器字符串选择元素: var $element = $("#myElement");
* 2. 通过DOM元素创建jQuery对象: var $element = $(document.getElementById("myElement"));
* 3. 通过HTML代码片段创建jQuery对象: var $element = $("<div class='myClass'>Hello jQuery!</div>");
* 4. 通过函数创建jQuery对象:var $element = $(function() {  // 在这里可以编写初始化逻辑 });

1.5 下载

在网页中引入jQuery, 可以按照以下步骤进行操作:
* 1. jQuery的官方网站(https://jquery.com/)下载jQuery库的最新版本.

image-20230918214744197

* 2. 选择下载压缩版本(.min.js文件), 它是经过精简和压缩的, 文件大小较小, 在生产环境中使用较为常见.

image-20230918215004433

* 3. 在网页中右击选择'另存为(Ctrl + s)', 会弹出一个保存对话框.

2023-09-18_00006

* 4. 在保存对话框中, 选择您要保存文件的位置和名称.

image-20230918215440781

1.6 使用

* 1. 将下载好的jQuery文件放置在你的项目目录中, 通常是放在一个名为"js""scripts"的文件夹中.

image-20230919001107811

* 2. 在HTML文件中, 可以在<head>标签中或<body>标签的底部引入jQuery.
     以下是两种常见的引入方式(将下面的"path/to/jquery.min.js"替换为你实际放置jQuery文件的路径.)
<!-- 1. 在<head>标签中引入 -->
<head>
  <script src="path/to/jquery.min.js"></script>
</head>

<!-- 2. 在<body>标签的底部引入(这种方式可确保页面其他内容加载后再加载jQuery) -->
<body>
  <!-- 页面内容 -->
  
  <script src="path/to/jquery.min.js"></script>
</body>
* 3. 一旦jQuery被成功引入到的网页中, 就可以开始使用jQuery的功能和方法了.
    可以在其他<script>标签中编写jQuery代码, 并使用$符号来表示jQuery对象.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 导入jQuery框架 -->
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="d0">div</div>
</body>
<script>
    // 使用jQuery框架获取div节点.
    let $variable = $('#d0');
    // .text()是jQuery提供的属性, 用户查看节点的文本内容.
    console.log($variable.text());
</script>
</html>

image-20230919001917481

1.7 CDN引用

CDN(内容分发网络): 是一个由多个服务器分布在不同地理位置的网络系统, 旨在提供高效的内容分发服务.
通常, 网站的内容(包括静态文件, 图像, 音频, 视频等)会存储在一个或多个服务器上, 并由用户从服务器上请求访问.

jQuery的CDN地址: https://code.jquery.com/jquery-3.6.0.min.js.
通过将<script>标签的src属性设置为这个URL, 浏览器将会从该CDN加载jQuery库文件.

使用CDN引用jQuery的方式确实需要依赖网络连接来加载jQuery文件.
如果网络不稳定或无法访问CDN, 可能会导致加载jQuery文件失败从而报错.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cdn引用jQuery</title>
    <!-- 导入jQuery框架 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="d0">div</div>
</body>
<script>
    // 使用jQuery框架获取div节点.
    let $variable = $('#d0');
    // .text()是jQuery提供的属性, 用户查看节点的文本内容.
    console.log($variable.text());
</script>
</html>

image-20230919020048353

1.8 对象转换

jQuery对象是jQuery库特有的对象, 它封装了一组DOM元素, 并提供了一系列jQuery方法用于操作这些DOM元素.
这些方法是jQuery库自身提供的, 而原生的DOM对象并没有这些方法.
因此, jQuery对象可以使用jQuery提供的方法来操作这些DOM元素, 但是无法直接使用DOM对象的方法.
如果需要获取原生的DOM对象, 可以使用[index]或者.get(index)方法.
var $button = $('.my-button');  // 获取jQuery对象.
var buttonElement = $button[0];  // 将jQuery对象转换为DOM元素.
var buttonElement = $button.get(0);  // 将jQuery对象转换为DOM元素.
同样地, 原生的DOM对象只拥有原生的DOM方法和属性, 无法直接使用jQuery库中的方法.
如果要对DOM对象使用jQuery的方法, 需要先将DOM对象转换为jQuery对象, 可以通过$(domObject)或者jQuery(domObject)来实现.
var windowObject = window;  // 获取BOM对象.
var $window = $(windowObject);  // 将BOM对象转换为jQuery对象.

2. 标签查找

使用jQuery选择器来查找符合条件的元素.
以下是一些常用的标签查找方法:

* 1. id选择器: 使用$('#id')可以根据给定的id查找元素.
     例如, $('#my-element')可以找到id为"my-element"的元素.

* 2. 标签选择器: 使用$('tagName')可以根据给定的标签名查找元素.
     例如, $('div')可以找到所有的<div>元素.

* 3. 类选择器: 使用$('.className')可以根据给定的类名查找元素.
     例如, $('.my-class')可以找到所有具有"my-class"类的元素.

* 4. 配合使用: 通过组合id选择器, 类选择器和标签选择器进行更复杂的查找.
     例如, $('div.c1')可以查找所有在<div>元素中具有"c1"类的元素.

* 5. 组合选择器: 使用逗号将多个选择器组合起来, 以选择符合其中任意一个选择器的元素.
     例如, $('#id', '.className', 'tagName')可以同时根据id, 类名和标签名进行查找.

* 6. 通配选择器: 使用$('*')可以选择所有的元素.

* 7. 层级选择器: 使用空格, ">", "+""~"来定义层级关系:
     $('x y') 表示选取x元素的后代中的所有y元素.
     $('x > y') 表示选取x元素的直接子元素中的所有y元素.
     $('x + y') 表示选取x元素后的同级紧邻的y元素.
     $('x ~ y') 表示选取x元素后的所有同级的y元素.

3. 筛选器

3.1 基本筛选器

jQuery中用于进一步筛选元素的一些选择器:
:first          匹配第一个元素.
:last           匹配最后一个元素.
:eq(index)      匹配索引等于index的元素, 索引从0开始计数. 例如, :eq(2) 将匹配第三个元素.
:even           匹配所有索引值为偶数的元素,索引从0开始计数.
:odd            匹配所有索引值为奇数的元素,索引从0开始计数.
:gt(index)      匹配所有大于给定索引值index的元素.
:lt(index)      匹配所有小于给定索引值index的元素.
:not(selector)  移除所有后代中包含selector中指定的标签的元素. 例如, :not(p)将移除所有包含<p>标签的元素.
:has(selector)  选中所有后代中含有selector中指定的标签的元素. 例如, :has(span)将选中所有包含<span>标签的元素.
<!DOCTYPE html>
<html>
<head>
    <title>筛选器</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <style>
        div, p, ul, li, table, tr {
            margin: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>
<div class="c1">Div 1</div>
<div class="c2">Div 2</div>
<div class="c3">Div 3</div>
<div>Div with a <p>paragraph</p></div>

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>

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

<table>
    <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
    </tr>
    <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
    </tr>
    <tr>
        <td>Row 3, Column 1</td>
        <td>Row 3, Column 2</td>
    </tr>
    <tr>
        <td>Row 4, Column 1</td>
        <td>Row 4, Column 2</td>
    </tr>
</table>

<script>
    // 设置第一个div标签的文字颜色为红色.
    $('div:first').css('color', 'red');

    // 设置最后一个p标签的文字颜色为蓝色.
    $('p:last').css('color', 'blue');

    // 设置列表中的第三个li标签的字体为粗体.
    $('ul li:eq(2)').css('font-weight', 'bold');

    // 设置表单中的偶数行标签的背景颜色.
    $('table tr:even').css('background-color', '#f2f2f2');

    // 设置表单中的奇数行标签的背景颜色.
    $('table tr:odd').css('background-color', '#ddd');

    // 设置列表中第四个标签及之后的标签的文本为删除线.
    $('ul li:gt(3)').css('text-decoration', 'line-through');

    // 设置列表中第三个标签及之前的标签的字体为斜体.
    $('ul li:lt(2)').css('font-style', 'italic');

    // 设置div标签中没有c1类的标签的边框.
    $('div:not(.c1)').css('border', '1px solid black');

    // 设置div标签中含有p标签的标签的背景颜色.
    $('div:has(p)').css('background-color', '#e6f0ff');

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

image-20230919020334395

3.2 表单筛选器

表单筛选器是CSS中用于选择表单元素的特定状态或属性的筛选器.

:text: 文本类型, 用于输入普通文本. 
:password: 密文类型, 用于输入密码或其他敏感信息.
:radio: 单选框, 用于从多个选项中选择一个.
:checkbox: 多选框, 用于从多个选项中选择多个.
:checked: 选择被选中的单选框和复选框.
:select: 选择所有的下拉列表.
:selected: 选择所有被选中的选项.  
:autocomplete: 选择所有具有自动完成功能的输入框.
:file: 文件类型, 用于上传文件.
:enabled: 选择可用的表单元素.
:disabled: 选择禁用的表单元素.
:submit: 提交按钮, 用于提交表单数据.
:reset: 重置按钮, 用于重置表单数据.
:button: 文字按钮, 用于触发自定义事件或功能.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单筛选器</title>
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
</head>
<body>
<form action="">
    <!-- autocomplete="on"表示浏览器可以根据之前的输入自动填充值. 文本框默认开启这个功能. -->
    <!-- autocomplete="off" 则禁用自动填充. -->
    <label for="text-input">文本输入框: </label>
    <input type="text" id="text-input"><br>

    <label for="password-input">密码输入框: </label>
    <input type="password" id="password-input"><br>

    <label for="file-input">文件上传: </label>
    <input type="file" id="file-input"><br>

    <label for="textarea-input">文本域: </label>
    <textarea id="textarea-input" rows="4" cols="50"></textarea><br>


    <label>性别: </label>
    <input type="radio" id="gender-male" name="gender" value="male">
    <label for="gender-male">男性</label>
    <input type="radio" id="gender-female" name="gender" value="female">
    <label for="gender-female">女性</label><br>

    <label>兴趣爱好: </label>
    <input type="checkbox" id="hobby-reading" name="hobby-reading" value="reading">
    <label for="hobby-reading">阅读</label>
    <input type="checkbox" id="hobby-painting" name="hobby-painting" value="painting">
    <label for="hobby-painting">绘画</label>
    <input type="checkbox" id="hobby-sports" name="hobby-sports" value="sports">
    <label for="hobby-sports">运动</label><br>
    <!-- type="button" 按键提交数据不刷新页面, 如果刷新, 输出的结果就会被刷新掉!! -->
    <button type="button">打印</button>
</form>
<script>
    // 获取提交按钮节点.
    $(':button').click(function () {
        // 获取文本输入框信息.
        let username = $(':text').val();
        console.log(username);

        // 获取密码输入框:
        let password = $(':password').val();
        console.log(password);

        // 获取文件对象:
        let file = $(':file')[0].files[0];
        console.log(file);

        // 获取文本域:
        let textarea = $('textarea').val();
        console.log(textarea);

        // 获取单选框的值:
        let radio = $(':radio:checked').val();
        console.log(radio);

        // 获取多选框的值节点, 有多个.
        let checkbox = $(':checkbox:checked')
        // 遍历多选框节点, 将每个节点作为参数传给函数进行处理.
        checkbox.each(function () {
            // this 获取当前操作对象, 将this转为jquery对象.
            console.log($(this).val())
        })


    })
</script>
</body>
</html>

image-20230919213040309

3.3 筛选器方法

下一个元素:
$("#id").next(): 获取指定元素的下一个同级元素.
$("#id").nextAll(): 获取指定元素后面的所有同级元素.
$("#id").nextUntil("#i2"): 获取指定元素后面直到遇到匹配选择器的元素为止的所有同级元素.

上一个元素:
$("#id").prev(): 获取指定元素的上一个同级元素.
$("#id").prevAll(): 获取指定元素前面的所有同级元素.
$("#id").prevUntil("#i2"): 获取指定元素前面直到遇到匹配选择器的元素为止的所有同级元素.

父元素:
$("#id").parent(): 获取指定元素的直接父元素.
$("#id").parents(): 获取指定元素的所有父元素.
$("#id").parentsUntil(): 获取指定元素的所有父元素,直到遇到匹配选择器的元素为止.

子元素和兄弟元素:
$("#id").children(): 获取指定元素的所有直接子元素.
$("#id").siblings(): 获取指定元素的所有兄弟元素.

查找和筛选:
$("div").find("p"): 在所有的div元素中查找拥有p标签的后代元素, 等价于$("div p").
$("div").filter(".c1"): 从结果集中筛选出具有c1样式类的标签.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>筛选器方法</title>
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>

</head>
<body>
<div>
    <p id="d0">Paragraph 1</p>
    <p id="d1">Paragraph 2</p>
    <p id="d2"><span>Paragraph 3</span></p>
    <p id="d3">Paragraph 4</p>
    <p class="c1">Paragraph 5</p>
</div>

<button id="btnNext">Next</button>
<button id="btnPrev">Prev</button>
<button id="btnParent">Parent</button>
<button id="btnChildren">Children</button>
<button id="btnFind">Find</button>
<button id="btnFilter">Filter</button>
</body>
<script>

    // 点击Next按键后, 将d0元素的下一个标签的字体改为红色.
    $("#btnNext").click(function () {
        $("#d0").next().css("color", "red");
    });

    // 点击Prev按键后, 将d1元素的上一个标签的字体改为淡绿色.
    $("#btnPrev").click(function () {
        $("#d1").prev().css("color", "aqua");
    });

    // 点击Parent按键后, 为p标签的父元素设置边框.
    $("#btnParent").click(function () {
        $("p").parent().css("border", "1px solid blue");
    });

    // 点击Children按键后, 为d2元素的子标签设置为粗体.
    $("#btnChildren").click(function () {
        $("#d2").children().css("font-weight", "bold");
    });

    // div下的所有的p标签都设置删除线.
    $("#btnFind").click(function () {
        $("div").find("p").css("text-decoration", "underline");
    });

    // 具有c1类的p标签字体设置为蓝色.
    $("#btnFilter").click(function () {
        $("p").filter(".c1").css('color', 'blue');
    });
</script>
</html>

image-20230920010109885

4. 常用方法

4.1 添加或移除属性

attr():       方法用于获取或设置元素的HTML属性.
removeAttr(): 方法用于移除指定元素的HTML属性.

单个属性的设置: attr('attribute', 'value')可以用于设置一个HTML元素的属性.
多个属性的设置: attr({key1: value1, key2: value2})可以用于同时设置多个属性.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性设置</title>
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
</head>
<body>
<label for="d0">信息:</label>
<input id='d0' type="text" value="Hello, World!">

<button id="Button0">获取属性</button>
<button id="Button1">修改属性</button>
<button id="Button2">删除属性</button>

<script>
    // 获取按钮的属性值并输出到控制台.
    $("#Button0").click(function () {
        let value = $("#d0").attr("value");
        console.log(value);
    });

    // 修改按钮的属性值.
    $("#Button1").click(function () {
        $("#d0").attr("value", "new value");
    });

    // 移除按钮的属性
    $("#Button2").click(function () {
        $("#d0").removeAttr("value");
    });
</script>
</body>
</html>

GIF 2023-9-20 10-23-43

4.2 元素类名方法

以下些法可以用于动态修改元素的样式:
addClass():    用于添加指定的CSS类名到元素.
removeClass(): 用于移除指定的CSS类名.
hasClass():    用于判断元素是否具有指定的CSS类名.
toggleClass(): 用于切换元素的CSS类名, 如果元素已经具有该类名, 则移除它, 如果元素没有该类名, 则添加它.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类名方法</title>
    <style>
        .highlight {
            color: red;
            font-weight: bold;
        }
    </style>
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
</head>
<body>
<h1 id="heading">Hello, World!</h1>
<button id="addBtn">添加样式类</button>
<button id="removeBtn">移除样式类</button>
<button id="toggleBtn">切换样式类</button>
<button id="checkBtn">检查样式类</button>

<script>
    $(document).ready(function () {
        $("#addBtn").click(function () {
            $("#heading").addClass("highlight");
        });

        $("#removeBtn").click(function () {
            $("#heading").removeClass("highlight");
        });

        $("#toggleBtn").click(function () {
            $("#heading").toggleClass("highlight");
        });

        $("#checkBtn").click(function () {
            if ($("#heading").hasClass("highlight")) {
                alert("标题元素具有样式类名 highlight");
            } else {
                alert("标题元素没有样式类名 highlight");
            }
        });
    });
</script>
</body>
</html>

GIF 2023-9-20 10-27-05

4.3 样式修改方法

.css(): 用于获取或设置元素的CSS样式属性.

.css("property", "")方法设置指定样式属性的值为空字符串, 这将清空该属性的样式.
.removeAttr("style")方法将移除元素的全部样式, 包括行内样式和通过CSS类等应用的样式.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式设置</title>
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="d0">Hello, World!</div>

<button id="button0">添加样式</button>
<button id="button1">删除样式</button>
<script>
    // 添加样式.
    $('#button0').click(function () {
        $('#d0').css('color', 'aqua');
    });
    // 删除样式.
    $('#button1').click(function () {
        $('#d0').css('color', '');
    });
</script>
</body>
</html>

GIF 2023-9-20 10-37-10

4.4 样式练习

4.4.1 模态框练习
登入模态框: 在用户点击登入的时候, 弹出登入模块框.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模态框练习</title>
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
    <style>

        /* 隐藏标签 */
        .hide {
            display: none;
        }

        /* 模态框中间层 */
        .modal-overlay {
            /* 模态框颜色 */
            background-color: gray;
            /* 固定定位, 以窗口为参考点*/
            position: fixed;
            /*  铺满整个屏幕 */
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;

            /*模态框等级*/
            z-index: 0;

            /* 中间层页面禁止任何操作 */
            pointer-events: none;
        }

        /* 展示的内容 */
        .modal-content {
            background-color: aqua;
            height: 110px;
            width: 300px;
            text-align: center;

            position: fixed;
            top: 50%;
            left: 50%;
            /* 通过负的50%平移来将元素自身在垂直和水平方向上居中. */
            transform: translate(-50%, -50%);

            /*模态框等级*/
            z-index: 1;
        }

        input, button {
            margin-top: 10px;
        }

    </style>
</head>
<!-- 底层 -->
<body class="modal">
<button id="login_id0">登录</button>

<!-- 中间顶 -->
<div class="modal-overlay hide">中节层</div>

<!-- 顶层 -->
<div class="modal-content hide">
    <label for="d0">用户名称:</label>
    <input id='d0' type="text"><br>

    <label for="d1">用户密码:</label>
    <input id='d1' type="text"><br>

    <button id="login_id1">登录</button>
</div>
<script>
    // 获取底部登录按键节点.
    $('#login_id0').click(function () {
        $('.modal-overlay').removeClass('hide');
        $('.modal-content').removeClass('hide');
    });

    // 获取顶层登录按键节点.
    $('#login_id1').click(function () {
        $('.modal-overlay').addClass('hide');
        $('.modal-content').addClass('hide');
    });
</script>
</body>
</html>

GIF 2023-9-20 21-13-17

4.4.2 左侧菜单栏
每次点击一个菜单选择则显示一个对应的菜单列表, 如果有其它菜单列表以打来则隐藏.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单栏练习</title>
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
    <style>
        /* 右侧布局 */
        .right {
            width: 80%;
            height: 100%;
        }

        /* 左侧布局 */
        .left {
            width: 20%;
            height: 100%;
            background-color: rgb(43, 43, 45);
            position: fixed;
            top: 0;
            left: 0;
            border: #352c2c inset 1px;

        }

        /* 菜单组: 外间距, 边框 */
        .group {
            margin: 10px;
            border: red inset 1px;
        }

        .title {
            /* 标题: 文字居中, 上下外边距, 字体颜色. */
            text-align: center;
            margin: 10px 0;
            color: aqua;

        }

        /* 子菜单: 背景颜色, 上边框 */
        .item {
            background-color: rgba(0, 0, 0, 0.2);
            border-top: #1beb00 inset 1px;
        }

        /* 子菜选项: 文字居中, 内边距, 字体颜色, 边框 */
        .content {
            text-align: center;
            padding: 5px;
            color: #7fbce1;
            border: dimgray inset 1px;
        }

        /*隐藏子菜单*/
        .hied {
            display: none;
        }
    </style>
</head>
<body>
<!--页面布局2:8-->
<div>
    <!--  左侧布局  -->
    <div class="left">
        <div class="group">
            <div class="title">Python</div>
            <div class="item hied">
                <div class="content">基础</div>
                <div class="content">进阶</div>
                <div class="content">高阶</div>
            </div>
        </div>
        <div class="group">
            <div class="title">前端</div>
            <div class="item hied">
                <div class="content">HTML</div>
                <div class="content">CSS</div>
                <div class="content">HTML</div>
            </div>
        </div>
        <div class="group">
            <div class="title">数据库</div>
            <div class="item hied">
                <div class="content">MySQL</div>
                <div class="content">MongoDB</div>
                <div class="content">Redis</div>
            </div>
        </div>
    </div>

    <!--  右侧布局  -->
    <div class="right"></div>
</div>

<script>
    // 获取节点title元素节点.
    $('.title').click(function () {
        // 在点击标题时展开相应的子菜单, 并隐藏父标签的其他兄弟标签下的子菜单.
        $(this).next().removeClass('hied').parent().siblings().find('.item').addClass('hied')

    })
</script>
</body>
</html>

GIF 2023-9-20 23-39-50

4.5 位置操作

以下方法是用于获取和设置元素的位置:
* 1. offset():  获取或设置匹配元素相对于当前窗口的偏移值.
     如果调用时不传递参数, 则返回第一个匹配元素的偏移值(包括top和left属性).
     如果传递了参数, 则将所有匹配元素的偏移值设置为指定的值.
     例如, offset({'top': 100, 'left': 200}); 它将会设置一个偏移量, 将元素在页面上向下移动100个像素, 向右移动200个像素.

* 2. position(): 返回偏移值包括top和left属性.
     返回的偏移量对象中的位置信息取决于元素的定位属性, 以下是两种情况的示例: 
     1. 参考对象是窗口(position: fixed).
     2. 参考对象是父元素(position: relative/absolute).

* 3. scroll(): 获取或设置匹配元素相对于滚动条顶部的偏移值.
     如果调用时不传递参数, 则返回第一个匹配元素的滚动条顶部偏移值.
     如果传递了参数, 则将所有匹配元素的滚动条顶部偏移值设置为指定的值.
     例如, scroll(0); 将页面滚动位置设置为顶部; scroll(function(){}); 滚动条移动的时候执行内部的函数.

* 4. scrollTop(): 获取或设置匹配元素相对于滚动条顶部的偏移值.
     如果调用时不传递参数, 则返回第一个匹配元素的滚动条顶部偏移值.
     如果传递了参数, 则将所有匹配元素的滚动条顶部偏移值设置为指定的值.

* 5. scrollLeft(): 获取或设置元素的水平滚动位置.
     类似于scrollTop()方法, 可以用于获取和设置元素的水平滚动位置.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>位置设置</title>
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>

    <style>
        /* 设置box0盒子的大小和背景颜色 */
        .box-0 {
            height: 100px;
            width: 100px;
            background-color: aqua;
        }

        /* 占位div的高度, 背景颜色, 边框样式 */
        .box-height {
            height: 100px;
            background-color: #7fbce1;
            border: #352c2c inset 1px;
        }

        /* box的样式: 大小, 边框样式, 固定定位 */
        .box-1 {
            height: 25px;
            width: 70px;
            background-color: #1beb00;
            border: black inset 1px;
            position: fixed;
            bottom: 20px;
            right: 20px;
        }

        /* 隐藏标签 */
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
<div>
    <div class="box-0">0</div>
    <button id="move-button">移动box-0</button>
    <button id="offset-button">获取box-0的偏移量</button>
</div>
<div>
    <div class="box-height">1</div>
    <div class="box-height">2</div>
    <div class="box-height">3</div>
    <div class="box-height">4</div>
    <div class="box-height">5</div>
    <div class="box-height">6</div>
    <div class="box-height">7</div>
    <div class="box-height">8</div>
    <div class="box-height">9</div>
    <div class="box-height">10</div>
    <div id='scroll-to-top' class="box-1 hidden">回到顶部</div>
</div>
<script>
    // 获取移动按钮的节点.
    $('#move-button').click(function () {
        // 将box-0向左移动200px.
        $('.box-0').offset({'left': 200});
    });

    // 获取偏移量按钮的节点.
    $('#offset-button').click(function () {
        // 获取box-0的位置对象
        let position = $('.box-0').position();
        let message = 'Top: ' + position.top + '\nLeft: ' + position.left;
        alert(message);
    });

    // 获取窗口节点.
    let $window = $(window);
    $window.scroll(function () {
        // 当滚动条距离顶部超过100px时显示scroll-to-top元素, 否则隐藏.
        if ($window.scrollTop() > 100) {
            $('#scroll-to-top').removeClass('hidden');
        } else {
            $('#scroll-to-top').addClass('hidden');
        }
    });

    // 使用scrollTop()将滚动条回到顶部
    $('#scroll-to-top').click(function () {
        $window.scrollTop(0);
    });
</script>
</body>
</html>

GIF 2023-9-21 13-43-00

4.6 尺寸操作

以下方法是用于获取和设置元素的尺寸:

* 1. width(): 获取或设置元素的宽度.
     可以使用参数来设置宽度的数值, 也可以不带参数来获取当前的宽度值.

* 2. height(): 获取或设置元素的高度.
     可以使用参数来设置高度的数值, 也可以不带参数来获取当前的高度值.

* 3. innerWidth(): 返回元素的宽度, 包括元素的内容区域和内边距(padding)的宽度.

* 4. innerHeight(): 返回元素的高度, 包括元素的内容区域和内边距(padding)的高度.

* 5. outerHeight(), 返回元素的高度, 包括元素的内容区域, 内边距(padding)和边框(border)的高度.
     如果需要获取包括外边距在内的高度, 可以使用: outerHeight(true).

* 6. outerWidth(): 返回元素的宽度, 包括元素的内容区域, 内边距(padding)和边框(border)的宽度.
     如果需要获取包括外边距在内的宽度, 可以使用: outerWidth(true).  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>尺寸相关</title>
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
    <style>
        /* 设置盒子的大小与边框样式 */
        .box0 {
            height: 100px;
            width: 100px;
            border: aqua inset 1px;
        }
    </style>
</head>
<body>

<div id="d0" class="box0">div</div>
<button id="button_0">获取盒子大小</button>
<button id="button_1">设置盒子大小</button>
<script>

    // 获取 div 节点.
    let $divEle = $('#d0')

    // 获取按键1的节点.
    $('#button_0').click(function () {
        let message = 'Height: ' + $divEle.width() + '\nWidth: ' + $divEle.height();
        alert(message);
    });

    // 获取按键2的节点.
    $('#button_1').click(function () {
        $divEle.width(50);
        $divEle.height(50);
    })
</script>
</body>
</html>

GIF 2023-9-21 21-46-18

4.7 标签内容操作

text()方法: 用于获取或设置元素的纯文本内容.
html()方法: 用于获取或设置元素的HTML内容.

区别:
html方法获取和操作的是元素的HTML内容, 包括标签, 样式和文本.
text方法获取和操作的是元素的纯文本内容, 即只有文本, 不包含任何HTML标签或样式.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容设置</title>
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
    <style>
        div {
            border: aqua inset 1px;
        }

        span {
            color: red;
        }
    </style>
</head>
<body>

<div id="d0"><span>Hello,</span> World!</div>
<br>
<div id="d1"></div>
<br>
<div id="d2"></div>
</body>
<script>
    // 将d0的纯文本内容复制到d1.
    $('#d1').text($('#d0').text());

    // 将d0的HTML内容复制到d2.
    $('#d2').html($('#d0').html());

</script>
</html>

image-20230921221507296

4.8 表单数据

val()方法: 用于获取或设置表单元素的值.

val()不包参数时它会返回第一个匹配元素的当前值. 
比如: $('#myInput').val() 将返回 id 'myInput'的输入框的当前值.

val()包含一个参数时, 它会设置所有匹配元素的值.
比如: $('#myInput').val('Hello') 将把 id 'myInput'的输入框的值设置为'Hello'.

val()包含一个数组参数时, 它会设置单选框radio, 多选框select或多选的select元素的值.
数组中的值对应于选项的value属性.
比如: $('#myCheckbox').val(['option1', 'option2']) 将选中值为'option1''option2'的复选框.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单数据</title>
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
</head>
<body>
<form action="">
    <p><label for="username">用户名称:</label>
        <input type="text" id="username"></p>

    <p><label for="password">用户密码:</label>
        <input type="password" id="password"></p>


    <p>性别:
        <label for="gender_0"></label>
        <input id='gender_0' type="radio" name="gender" value="male">

        <label for="gender_1"></label>
        <input id='gender_1' type="radio" name="gender" value="female">

        <label for="gender_2">其他</label>
        <input id='gender_2' type="radio" name="gender" value="other" checked="checked"></p>

    <p>课程:
        <input type="checkbox" name='course' value="Python">Python
        <input type="checkbox" name='course' value="Linux">Linux
        <input type="checkbox" name='course' value="Go">Go
    </p>
    <p>
        <!-- 下拉款多选: 按下ctrl后可多选 -->
        <label for="select_id">兴趣爱好:</label>
        <select name="hobby" multiple id="select_id">
            <option value="singing"></option>
            <option value="dancing"></option>
            <option value="rap">rap</option>
            <option value="playing basketball">打篮球</option>
        </select>
    </p>
</form>
<script>
    // 获取用户名称节点, 设置并获取值.
    let $username = $('#username').val('kid');
    console.log($username.val());

    // 获取用户密码节点, 设置并获取值.
    let $password = $('#password').val('123');
    console.log($password.val());

    // 获取用户性别节点, 设置并获取值. 单选框和多选框的值是一个列表.
    let $gender = $(':radio').val(['female']);
    console.log($gender.val());

    // 获取用户课程节点, 设置值, 这种方式是将checked的值设置为true, 而不是添加html属性.
    $(':checkbox').val(['Python', 'Go']);

    // 获取被选中的选择值.
    $(':checkbox:checked').each(function () {
        // 使用this获取当前遍历的对象, 将this转为jQuery对象, 从对象中获取值.
        console.log($(this).val());
    });

    // 获取下拉框节点, 设置值并获取值.
    let $select = $('#select_id').val(['singing', 'dancing']);
    // 遍历列表.
    $select.val().forEach(function (val) {
        console.log(val);
    });

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

image-20230922094839529

单选框radio与多选宽select被选中后, 会将checked的值设置为true, 而不是在html标签中添加checked='checked'属性.

2023-09-22_00001

检查用户输入的信息, 在输入框失去焦点的时候检查输入是否为空, 为空则给出提示, 获取焦点时取消提示.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录验证</title>
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
    <style>
        span {
            color: red;
        }
    </style>
</head>
<body>
<form action="">
    <p><label for="username">用户名称:</label>
        <input type="text" id="username">
        <span id="span_0"></span>
    </p>

    <p><label for="password">用户密码:</label>
        <input type="password" id="password">
        <span id="span_1"></span>
    </p>

</form>
<script>
    // 获取用户账户与用户密码输入框节点.
    let $username = $('#username');
    let $password = $('#password');

    // 获取span节点.
    let $span0 = $('#span_0');
    let $span1 = $('#span_1');

    // 失去焦点事件.
    $username.blur(function () {

        // 检查用户名称与用户密码是否为空.
        if (!$username.val()) {
            $span0.text('用户名称不能为空!');
        }
    })
    
    // 失去焦点事件.
    $password.blur(function () {

        // 检查用户名称与用户密码是否为空.
        if (!$username.val()) {
            $span1.text('用户密码不能为空!');
        }
    })

    // 获取焦点事件.
    $username.focus(function () {
        // 检查用户名称与用户密码是否为空.
        if (!$username.val()) {
            $span0.text('');
        }
    })

    // 获取焦点事件.
    $password.focus(function () {
        // 检查用户名称与用户密码是否为空.
        if (!$password.val()) {
            $span1.text('');
        }
    })

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

GIF 2023-9-22 18-05-10

4.9 属性操作2

HTML标签属性: 是定义在HTML标签上的属性.
它们用于提供关于元素的附加信息, 以及与元素相关的行为和样式
例如,  <input> 元素中, type, value和placeholder都是HTML标签属性.
<input type="text" value="Hello" placeholder="Enter your name">

DOM属性: 通过JavaScript的DOM操作接口来访问和操作的属性.
DOM属性表示HTML元素在JavaScript中的表示形式, 通过DOM接口可以以编程方式读取和修改元素的属性值.
当处理复选框(checkbox), 单选框(radio)和选项(option), 
使用特定的prop()和removeProp()方法更为合适, 而不是使用attr() removeAttr().

以下是更具体的说明:
* prop()方法: 用于获取或设置元素的DOM属性(property).
  对于复选框, 单选框和选项框, 使用prop()方法可以获得或设置它们的特定属性, 例如是否被选中.
  此外, 该方法还可以用于修改其他DOM属性(意思就是attr能做的它也能做).

* 2.removeProp()方法: 用于从元素中移除指定的DOM属性.
    对于复选框, 单选框和选项选择框, 一般不需要使用removeProp()方法.
    如果需要取消选中复选框或清除单选框的选择, 可以通过prop()方法将其对应的属性设置为false或空.

当涉及到操作复选框, 单选框和选项框的特定属性时, 推荐使用prop()方法.
而使用attr()与removeAttr()则更适合处理HTML标签属性和自定义属性.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性设置 2</title>
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
</head>
<body>

<p>性别:
    <input type="checkbox" name='gender' value="male"><input type="checkbox" name='gender' value="female"><input type="checkbox" name='gender' value="other">其他
</p>


<script>
    // 使用 jQuery 筛选器勾选男和女复选框.
    $(':checkbox[name="gender"][value="male"]').prop('checked', true);
    $(':checkbox[name="gender"][value="female"]').prop('checked', true);

    // 检查勾选状态.
    $(':checkbox[name="gender"]').each(function () {
        console.log($(this).val() + ': ' + $(this).prop('checked'));
    });

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

image-20230922223216050

4.10 节点操作

4.10.1 添加子元素
添加指定元素到指定元素内部.
* 1. $(A).append(B):    把元素B追加到元素A内部的末尾.
* 2. $(A).prepend(B):   把元素B前置到元素A内部的前面.
* 3. $(A).appendTo(B):  把元素A追加到元素B内部的末尾.
* 4. $(A).prependTo(B): 把元素A前置到元素B内部的前面.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加子元素</title>
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="d0">
    <p>2</p>
</div>
<script>
    // 获取d0节点.
    let $divEle0 = $('#d0');
    // 创建p节点(p节点需要独立, 只能使用一次...).
    let $peLE0 = $('<p>').text('1');
    let $peLE1 = $('<p>').text('3');

    // 前置子元素与插入子元素.
    $divEle0.prepend($peLE0);
    $divEle0.append($peLE1);
</script>
</body>
</html>

image-20230923003517880

4.10.2 添加兄弟元素
添加指定元素到元素的前后:
* 1. $(A).after(B): 将元素B插入到元素A之后.
* 2. $(A).before(B): 将元素B插入到元素A之前.
* 3. $(A).insertAfter(B): 将元素A插入到元素B之后.
* 4. $(A).insertBefore(B): 将元素A插入到元素B之前.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加兄弟元素</title>
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
</head>
<body>
<div>
    <p id="p0">2</p>
</div>

<script>
    // 获取p0节点.
    let $pEle = $('#p0');

    // 创建p节点.
    let pEle0 = $('<p>').text('1');
    let pEle1 = $('<p>').text('3');

    // 添加哥哥标签与弟弟标签.
    $pEle.before(pEle0);
    $pEle.after(pEle1);
</script>
</body>
</html>

image-20230923004153572

4.10.3 删除元素
删除元素:
* 1. $(A).remove(): 从DOM中删除所有匹配的元素及其子元素.
* 2. $(A).empty():  删除匹配的元素集合中所有的子节点.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除元素</title>
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
    <style>
        div {
            border: aqua inset 1px;
            height: 120px;
            width: 100px;
        }
    </style>
</head>
<body>
<div id="d0">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>
<hr>
<div id="d1">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

<button id="button0">删除box0签</button>
<button id="button1">删除box1</button>
<script>

    // 点击按键1, 删除d0及其子元素.
    $('#button0').click(function () {

        $('#d0').remove();
    });

    // 点击按键2, 删除d1下的子元素.
    $('#button1').click(function () {
        $('#d1').empty();
    });

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

GIF 2023-9-23 1-52-43

4.10.4 替换元素
替换元素:
* 1. $(A).replaceWith('新的文本内容'): 将被选中的元素替换为新的文本内容.
     $(A).replaceWith('<div>新的 HTML 元素</div>'): 将被选中的元素替换为新的HTML元素.
* 2. $('<div>新的 HTML 元素</div>').replaceAll(A): 将被选中的元素替换为新的HTML元素.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>替换元素</title>
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
    <style>
        span {
            color: red;
        }
    </style>
</head>
<body>
<div id="d0">Hello, World!</div>
<div id="d1">Hello, World!</div>
<div id="d2">Hello, World!</div>
</body>
<script>
    $('#d0').replaceWith('hao 123');
    $('#d1').replaceWith('<div>新的 <span>HTML</span> 元素</div>');
    // 使用jQuery创建对象.
    $('<div>新的 <span>HTML</span> 元素</div>').replaceAll($('#d2'))

</script>
</html>
4.10.5 克隆元素
clone()方法: 用于创建被选元素的副本.
它能够复制一个元素(包括元素的所有子元素, 文本内容和属性)并返回一个新的jQuery对象, 这个对象包含了复制的元素.
clone()方法默认情况下不会复制事件处理程序, 如果需要复制元素的事件处理程序, 可以将clone()方法的参数设置为true, 即clone(true).
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>克隆元素</title>
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>

</head>
<body>

<button id="button0">虚拟分身</button>
<hr>
<button id="button1">滴血重生</button>
<script>
    // 获取按键节点(不携带事件, 复制的按键没有效果.).
    let $btnEle0 = $('#button0');

    // 点击按键进行复制操作.
    $btnEle0.click(function () {
        // 将复制的元素对象插入到当前元素的后面.
        $btnEle0.clone().insertAfter($(this))
    })

    // 获取按键节点(携带事件, 复制的按键有效果).
    let $btnEle1 = $('#button1');

    // 点击按键进行复制操作.
    $btnEle1.click(function () {
        // 将复制的元素对象插入到当前元素的后面.
        $btnEle1.clone(true).insertAfter($(this))
    })

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

GIF 2023-9-23 2-17-44

5. 事件

5.1 事件的绑定与移除

事件的绑定与移除方式:
* 1. $('p').事件名称(): 典型的jQuery对象方法调用方式, 	某些事件没有提供对应的方法则不能使用.

* 2. .on( events [, selector ], function(){}): 用于将事件处理函数绑定到匹配选择器的元素上.
     events是一个或多个事件类型, 包括空格分隔的多个事件类型, 
     selector是一个可选的选择器, 用于过滤目标元素, function是事件处理函数.

* 3 .off( events [, selector ][, function(){}): 用于移除通过.on()方法绑定的事件处理函数.
     events是一个或多个事件类型, 包括空格分隔的多个事件类型, 
     selector是一个可选的选择器, 用于过滤目标元素, function是要移除的特定事件处理函数.

5.2 常用事件方法

常用的事件绑定方法:
* 1. click(function(){}): 当元素被点击时触发的事件.
* 2. hover(function(){}): 当鼠标悬停在元素上时触发的事件. 这是jQuery提供的封装方法, 原生JavaScript中没有类似的事件.
* 3. focus(function(){}): 当元素获得焦点(例如输入框被选中)时触发的事件, 通常用于处理用户输入.
* 4. blur(function(){}): 当元素失去焦点时触发的事件, 与focus相对应.
* 5. change(function(){}): 当元素的内容发生变化时触发的事件, 常用于处理输入框或下拉选择框的改变.
* 6. keyup(function(e){}): 当键盘的按键被抬起时触发的事件, 可以获取键盘事件对象'e;, 通过'e.keyCode'可以获取按下的键的码值.
* 7. keydown(function(e){}): 当键盘的按键被按下时触发的事件.
* 8. mouseover(function(e){}): 当鼠标移动到元素上方时触发的事件.
* 9. mouseenter(function(e){}): 当鼠标进入元素时触发的事件.
* 10. input(function(e){}): 当监听输入框的内容实时变化时触发的事件, 只能绑定到输入框元素上才能生效.
5.2.1 悬浮事件
.hover()方法可以同时绑定鼠标悬停事件的进入和离开两个处理函数。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>悬浮事件</title>
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
</head>
<body>
<p>悬浮</p>
<script>
    // 使用 jQuery 的 hover 方法绑定鼠标悬停事件
    $('p').hover(
        function () {
            $(this).css('color', 'red'); // 当鼠标悬停时,将文字颜色设置为红色
        },
        function () {
            $(this).css('color', ''); // 当鼠标离开时,将文字颜色恢复默认
        }
    );
</script>
</body>
</html>

GIF 2023-9-23 9-43-57

5.2.2 监听事件
.input事件: 用于在用户修改textarea, input:text, input:password和input:search等元素内容时立即触发.

当用户对这些元素的值进行修改时, input事件会立即被触发, 而不需要等到元素失去焦点.
这与onchange事件不同, 后者需要在元素失去焦点时才会触发.

jQuery并没有直接提供.input()方法来绑定input事件, 正确的方法是使用.on()方法来绑定input事件.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监听事件</title>
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
</head>
<body>
<form action="">
    <p>文本: <input type="text" id="d0"></p>
    <p>复制: <input type="text" id="d1"></p>
</form>
<script>
    $('#d0').on('input', function () {
        // 将d0的value数据同步到d1.
        $('#d1').val($('#d0').val())

    })
</script>
</body>
</html>

GIF 2023-9-23 10-17-23

5.3 阻止事件的默认行

在编写网页或应用程序时, 经常会遇到需要处理用户交互的情况, 比如点击按钮, 提交表单, 拖拽元素等等.
通过事件, 可以在特定的交互操作发生时执行相应的代码逻辑.
然而, 并非所有的交互事件都需要它执行默认行为, 而是需要阻止事件的默认行为, 只执行自定义函数中的功能.

阻止事件的默认行方式:
* 1. return false; 在事件末尾添加, 常用的用于阻止事件继续执行的方法, 通常用于阻止表单提交等操作.
* 2. e.preventDefault(); 通过事件对象e调用preventDefault()方法可以阻止事件的默认行为或默认动作的执行.
     常用于阻止超链接的跳转或表单的提交行为.
5.3.1 阻止标签默认行为
<input type="submit"> 元素被用于创建提交按钮, 用于表单的提交.
当用户点击这个按钮时, 会触发表单的提交操作, 并刷新页面或加载新的页面.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件默认行为</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>

<form action="">
  <input type="text" value="123">
  <input type="submit" id="i1">
</form>

<script>
    $("#i1").click(function (e) {
        alert(123);
        // submit默认绑定了 书籍提交按键 
        e.preventDefault();
    });
</script>
</body>
</html>

GIF 2023-9-23 11-32-47

5.3.2 阻止事件冒泡
事件冒泡(Event Bubbling)是指在DOM树中的事件传播过程中, 
事件首先在触发事件的元素上触发, 然后沿着父元素逐级向上冒泡, 直到达到DOM树的根节点(通常是document对象).

具体来说, 当一个DOM元素触发了某个事件(例如点击事件), 该事件会首先在该元素上触发, 然后逐级向上触发同类型的事件, 直到DOM树的根节点.
这意味着如果一个父元素和一个子元素都具有相同类型的事件监听器, 点击子元素也会触发父元素上的事件处理函数.
div > p > span; 三个标签都绑定了事件.
点击span的时候, 先触发span的事件, 接下来会依次触发p, div的事件.
在执行的事件后面写上e.stopPropagation(); 阻止后续事件的触发.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
    <style>
        div {
            height: 100px;
            width: 100px;
            background-color: #aaff00;
        }

        p {
            background-color: #657477;
        }

        span {
            background-color: red;
        }
    </style>
</head>
<body>
<div>
    <p>
        <span>点我</span>
    </p>
</div>

<script>
    $("span").click(function (e) {
        alert("span");
        // 阻止后续事件.
        // e.stopPropagation();
    });

    $("p").click(function () {
        alert("p");
    });
    $("div").click(function () {
        alert("div");
    })
</script>
</body>
</html>

GIF 2023-9-23 11-45-15

// 取消掉第34行的代码注释.
e.stopPropagation();

GIF 2023-9-23 11-48-45

5.4 事件委托

事件委托: 将事件的处理交给父元素或祖先元素来处理, 而不是直接处理事件的元素本身.
当某个元素触发事件时, 事件将沿着DOM树向上传播, 直到找到一个绑定了相应事件处理程序的元素.
这样可以实现事件的统一管理和更高效的事件处理.
事件委托常用于动态添加元素或减少监听器的数量, 提高性能.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托</title>
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
    <style>
        table {
            width: 100%;
            /*当将table-layout设置为fixed时, 表格的布局会使用固定模式.
            这意味着表格的列宽度将基于列中内容的宽度进行计算, 并且表格的总宽度将由列的宽度决定. */
            table-layout: fixed;
            /* 相邻单元格的边框将会合并为一个共享的边框, 使整个表格看起来更加紧凑和整洁. */
            border-collapse: collapse;
        }


        th, td {
            padding: 8px;
            text-align: left;
            border: aqua inset 1px;
        }

        .edit, .delete {
            cursor: pointer;
        }
    </style>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>姓名</th>
        <th>邮箱</th>
        <th>编辑</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>kid</td>
        <td>136@qq.com</td>
        <td>
            <span class="edit">&#9998;</span>
            <span class="delete">&#128465;</span>
        </td>
    </tr>
    <tr>
        <td>qz</td>
        <td>181@qq.com</td>
        <td>
            <span class="edit">&#9998;</span>
            <span class="delete">&#128465;</span>
        </td>
    </tr>
    </tbody>
</table>

<script>
    $(document).ready(function () {
        // 删除按钮点击事件处理函数
        $("table").on("click", ".delete", function () {
            // 查找最接近的包含当前元素的tr元素.
            let row = $(this).closest("tr");
            // 将tr元素删除.
            row.remove();
        });
    });
</script>
</body>
</html>


GIF 2023-9-23 23-20-52

6. 文档就绪函数

window.onload事件: 在整个网页(包括资源如图片, 样式表等)都加载完成后触发.
这意味着, 当页面上所有资源都已加载完成后, 才会执行相应的JavaScript代码.

ready(): 是jQuery提供的一个函数, 用于处理DOM就绪事件.
在DOM结构准备完毕后立即执行, 而不需要等待网页上所有资源的加载完成.
它通常用于在页面就绪后执行一些与DOM相关的操作或事件绑定.

写法:
$(document).ready(function(){
	// 在这里编写在 DOM 就绪后执行的 jQuery 代码.
})

简写:
$(function(){
	// 在这里编写在 DOM 就绪后执行的 jQuery 代码.
})

* 在需要操作DOM元素或绑定事件的情况下, 通常会使用$(function() {}).
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录验证2</title>
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
    <style>
        .error_mes {
            color: red;
        }
    </style>
</head>
<body>

<form action="">
    <p>
        <label for="username_id">用户名称</label>
        <input type="text" id="username_id" autocomplete="off">
        <span class="error_mes"></span>
    </p>
    <p>
        <label for="password_id">用户密码</label>
        <input type="password" id='password_id' autocomplete="off">
        <span class="error_mes"></span></p>
    <p><input type="submit" id="submit_id" value="登录"></p>
</form>
</body>
<script>
    $(function () {
        // 为登录按键绑定事件.
        $('#submit_id').click(function (e) {
            // 获取表单节点.
            $formEle = $('form');

            // 从表单中获取用户名称与密码框的节点.
            let $inputs = $formEle.find(':text, :password');
            // 遍历查询结果.
            $inputs.each(function () {
                // 获取输入框的值, 值是字符串类型.
                let value = $(this).val();
                // 输入框的值如果是空则进行提示, 并取消提交表单.
                if (value.length === 0) {
                    // 创建错误信息提示.
                    let error_msg = $(this).prev().text() + '不能为空!';
                    // 获取输入框后面的span标签.
                    $(this).next('.error_mes').text(error_msg);
                    e.preventDefault();
                }
            });
            // 为多个输入框绑定事件, 输入框聚焦时取消错误提示信息.
            $inputs.focus(function () {
                $(this).next('.error_mes').text('');
            });
        });
    });
</script>
</html>
代码主要实现的功能是当用户点击登录提交按钮时, 检查输入框中的内容是否为空, 如果为空则显示相应的错误信息.
代码说明:
* 1. 给提交按钮#submit_id绑定了一个点击事件处理程序.
* 2. 在事件处理程序中, 使用$formEle.find(':text, :password')获取所有的文本输入框和密码输入框.
* 3. 使用.each()方法遍历每个输入框.
* 4. 对于每个输入框, 使用$(this).val()获取其值.
* 5. 如果输入框的值为空(长度为0), 则创建错误信息(error_msg)提示.
* 6. 将错误信息显示在当前输入框后面的.error_mes元素中.
* 7. 使用e.preventDefault()取消表单的默认提交行为.
* 8. 最后, 为所有的文本输入框和密码输入框绑定一个focus事件处理程序, 在获取焦点时取消错误信息提示.

GIF 2023-9-23 23-25-01

7. 迭代

7.1 each函数

jQuery.each()方法: 是jQuery提供的一个通用的迭代函数, 用于无缝迭代对象和数组.
它接受两个参数: collection和callback.
collection: 是要迭代的对象或数组.
callback: 是在每次迭代中要执行的函数.

在每次迭代中, callback函数会被调用, 并传递两个参数: indexInArray和valueOfElement.
indexInArray: 表示迭代元素在集合中的索引.
valueOfElement: 则表示当前迭代的具体元素.

通过这种方式, 可以在callback函数中访问和操作集合中的每个元素, 无论是对象的属性还是数组的元素.

* jQuery.each()方法中的callback函数可以使用return false来提前终止迭代过程.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历对象</title>
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
    let l = [10, 20, 30, 40];
    $.each(l, function (indexInArray, valueOfElement) {
        console.log(indexInArray, valueOfElement);
    })
</script>
</body>
</html>

image-20230924011452700

7.2 迭代DOM元素

$.each()方法常用于迭代jQuery对象中的每个DOM元素.
在每次迭代中, 回调函数都会被调用, 并传递两个参数: 当前循环次数(0开始计数)和对应的DOM元素.
而且, 回调函数中的关键字this总是指向当前迭代的DOM元素, 因此可以在回调函数中使用this来操作和访问当前元素的属性和方法.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>迭代DOM元素</title>
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
    <style>
        .color {
            color: red;
        }
    </style>
</head>
<body>
<ul id="ul_id">
    <li>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
</ul>
</body>
<script>
    $(function () {
        // 获取li节点.
        $('#ul_id>li').each(function () {
            // 使用this获取节点对象, 为每一个li对象添加color属性.
            $(this).addClass('color')
        })
    })
</script>
</html>

image-20230924012037492

7.3 隐式迭代

隐式迭代: 在jQuery中, 很多方法会自动对集合中的每个元素进行迭代处理, 而无需显式地调用.each()方法.

当使用某些方法(: .addClass(), .removeClass(), .toggleClass(), .css())作用于jQuery对象时,
jQuery会自动遍历集合中的每个元素, 并对它们进行相同的操作.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐式迭代</title>
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
    <style>
        .color {
            color: red;
        }
    </style>
</head>
<body>
<ul id="ul_id">
    <li>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
</ul>
</body>
<script>
    $(function () {
        // 获取li节点, 对所有结点进行统一操作.
        $('#ul_id>li').addClass('color');
    })
</script>
</html>

image-20230924012651531

8. 元素存储数据

.data(name, value)方法: 用于在元素上存储或获取数据, 并通过指定名称来存储或获取特定的数据.
当使用.data()方法时, 它会在所有匹配的元素上存储一个带有指定名称和值的数据.
这些数据将与元素相关联, 并可以稍后通过.data(name)方法来获取.
如果没有指定值, .data() 方法获取匹配元素集合中第一个元素存储的所有数据对象.
需要注意的是, 当使用.data()方法存储数据时, jQuery会将数据存储在元素的缓存中, 而不是直接修改元素的属性.
这样可以避免属性污染的问题, 并且可以在不同的元素之间共享数据.
.removeData(key)方法: 用于移除存放在元素上的数据.
当使用.removeData(key)方法时, 它会移除指定名称的数据. 如果没有指定key参数, 则会移除所有保存的数据.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素存储数据</title>
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="d0"></div>
<div id="d1"></div>
<div id="d2"></div>

<!--HTML5 自定义数据属性的用法, 获取数据时不需要data前缀. -->
<div id='d3' data-color="blue" data-size="large"></div>
<div id="d4"></div>
<div id="d5"></div>
</body>
<script>
    // 获取div节点.
    let $divEle0 = $('#d0');

    // 数据存储.
    $divEle0.data({'name': 'kid'});
    $divEle0.data({'age': 18});
    // 获取数据.
    $('#d1').text($divEle0.data('name'));
    $('#d2').text($divEle0.data('age'));

    // 获取div节点.
    let $divEle3 = $('#d3');
    // 获取数据.
    $('#d4').text($divEle3.data('color'));
    $('#d5').text($divEle3.data('size'));
</script>
</html>

image-20230924095049496

9. 动画效果

常见的动画效果函数, 可以用于在网页中实现动态的元素展示和隐藏:

* 1. show([s, [e], [fn]]): 显示元素, 并可设置显示动画的速度.
* 2. hide([s, [e], [fn]]): 隐藏元素, 并可设置隐藏动画的速度.
* 3. toggle([s], [e], [fn]): 切换元素的显示和隐藏状态, 并可设置切换动画的速度.
* 4. slideDown([s], [e], [fn]): 向下滑动展示元素, 并可设置展示动画的速度.
* 5. slideUp([s, [e], [fn]]): 向上滑动隐藏元素, 并可设置隐藏动画的速度.
* 6. slideToggle([s], [e], [fn]): 切换元素的向下滑动和向上滑动状态, 并可设置切换动画的速度.
* 7. fadeIn([s], [e], [fn]): 淡入显示元素, 并可设置淡入动画的速度.
* 8. fadeOut([s], [e], [fn]): 淡出隐藏元素, 并可设置淡出动画的速度.
* 9. fadeTo([[s], o, [e], [fn]]): 改变元素的透明度到指定值, 并可设置透明度变化动画的速度.
* 10. fadeToggle([s, [e], [fn]]): 切换元素的淡入和淡出状态, 并可设置切换动画的速度.
* 11. animate(p, [s], [e], [fn]): 自定义动画效果, 可以指定元素的CSS属性进行动画变化.

参数说明:
- s:  动画的速度, 可以是 "slow", "normal", "fast", 或者是毫秒数值, 默认为"normal".
- e:  动画效果的缓动函数, 可选参数, 默认为"swing".
- fn: 动画完成后的回调函数, 可选参数.
- p:  一个包含CSS属性和值的对象, 用于定义自定义动画效果的目标属性值.
- o:  透明度的目标值, 取值范围为01之间.

9.1 显示和隐藏元素

.hide(): 隐藏元素.
.show(): 显示元素.
.toggle(): 切换元素的显示和隐藏状态.
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <title>显示和隐藏元素</title>

</head>
<body>
<div>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
    <p>你好</p>
</div>

<script>
    $("#hide").click(function () {
        $("p").hide();
    });

    $("#show").click(function () {
        $("p").show();
    });
</script>
</body>
</html>

GIF 2023-9-24 11-15-36

9.2 淡入淡出

.fadeIn()方法:  用于将已隐藏的元素以淡入的效果显示出来.
.fadeOut()方法: 用于将可见的元素以淡出的效果隐藏起来.

.fadeToggle()方法: 根据当前元素的可见性, 切换为淡入或淡出的效果.
如果动画正在运行中, 调用.fadeToggle()方法会停止当前动画并立即开始另一个动画.

语法:
$(selector).fadeIn(speed, easing, callback);
$(selector).fadeOut(speed, easing, callback);
$(selector).fadeToggle(speed, easing, callback);

参数说明:
speed(可选): 淡入动画的速度, 可以是毫秒数, 也可以是'slow', 'fast', 默认为'normal'400毫秒.
easing(可选): 淡入动画的缓动效果, 常见的有'swing''linear', 默认为"swing".
callback(可选): 淡入动画完成后的回调函数.
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
    <title>淡入淡出</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            display: none;
        }

        #d0 {
            background-color: aqua;
        }

        #d1 {
            background-color: greenyellow;
        }
    </style>

</head>
<body>
<p>
    <button id="btn0">淡入</button>
    <button id="btn1">淡出</button>
    <button id="btn2">切换状态</button>
</p>

<div id="d0"></div>
<div id="d1"></div>


<script>
    // 淡入
    $("#btn0").click(function () {
        $("#d0").fadeIn();
        $("#d1").fadeIn(3000, function () {
            alert('我来了')
        });
    });
    // 淡出
    $("#btn1").click(function () {
        $("#d0").fadeOut();
        $("#d1").fadeOut(3000, function () {
            alert('我走了')
        });
    });

    // 切换状态
    $("#btn2").click(function () {
        $("#d0").fadeToggle();
        $("#d1").fadeToggle(3000);
    });
</script>
</body>
</html>
元素淡入, display属性值 none--> block, opacity属性的值 0 --> 1.
元素淡出, display属性值 block--> none, opacity属性的值 1 --> 0.

GIF 2023-9-24 11-32-56

9.3 透明度

fadeTo()方法: 用于改变元素透明度的方法.
它可以通过指定目标透明度值和可选的动画时长来实现渐变效果.

语法: $(selector).fadeTo(duration, opacity, callback);

参数说明:
- duration: 可选参数, 表示动画的时长, 可以是字符串(: 'slow', 'fast')或数字(以毫秒为单位)
            默认为'normal'400毫秒.
- opacity: 目标透明度值, 取值范围为 0  1, 0表示完全透明, 1表示完全不透明.
- callback: 可选的回调函数, 在动画完成后执行.
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <title>设置透明度</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }

        #d0 {
            background-color: aqua;
        }

        #d1 {
            background-color: greenyellow;
        }
    </style>

</head>
<body>
<p>
    <button id="btn0">逐渐透明</button>
    <button id="btn1">逐渐清晰</button>
</p>


<div id="d0"></div>
<div id="d1"></div>

<script>
    // 逐渐透明.
    $("#btn0").click(function () {
        $("#d0").fadeTo('slow', 0.3);
        $("#d1").fadeTo(3000, 0.3);
    });

    // 逐渐清晰.
    $("#btn1").click(function () {
        $("#d0").fadeTo('slow', 1);
        $("#d1").fadeTo(3000, 1);
    });
</script>
</body>
</html>
元素透明,  opacity属性的值 1 --> x.
元素鲜明,  opacity属性的值 x --> 1.

GIF 2023-9-24 11-54-34

9.4 滑动展开与滑动收起

slideDown()方法: 用于将选中的元素向下滑动展开.

slideUp()方法: 用于将选中的元素向上滑动收起.

slideToggle()方法: 根据当前元素的可见性, 切换为展开或收起的效果.
如果动画正在运行中, 调用.slideToggle()方法会停止当前动画并立即开始另一个动画.

语法:
$(selector).slideDown(speed, [callback]);
$(selector).slideUp(speed, [callback]);
$(selector).slideToggle(speed, easing, callback);

参数说明:
- speed: 可选参数, 表示动画的时长, 可以是字符串(: "slow", "fast")或数字(以毫秒为单位).
         默认为"normal", 400毫秒.
- callback: 可选的回调函数, 在动画完成后执行.
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
    <title>滑动展开与滑动收起</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            display: none;
        }

        #d0 {
            background-color: #00c1ea;
        }
    </style>

</head>
<body>
<p>
    <button id="btn0">展开</button>
    <button id="btn1">收缩</button>
</p>

<div id="d0">hello</div>

<script>
    $("#btn0").click(function () {
        $("#d0").slideDown('slow', function () {
            // 展开动画完成后执行的回调函数.
            alert("元素已展开");
        });
    });

    $("#btn1").click(function () {
        $("#d0").slideUp(3000, function () {
            // 收起动画完成后执行的回调函数.
            alert("元素已收起");
        });
    });
</script>
</body>
</html>


GIF 2023-9-24 13-09-15

9.5 自定义动画

animate()方法: 方法用于创建自定义动画.

语法: $(selector).animate({params},speed,callback);

参数说明:
- params: 必需参数, 定义形成动画的CSS属性. 
- speed: 可选参数, 规定效果的时长.
- callback: 可选的回调函数, 在动画完成后执行.

默认情况下, 所有HTML元素都有一个静态位置, 且无法移动.
如需对位置进行操作, 要记得首先把元素的CSS position属性设置为relative, fixed或absolute!
9.5.1 点赞效果
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
    <title>点赞动画</title>
    <style>
        div {
            position: relative;
            display: inline-block;
        }

        i {
            /* i标签设置为行内块元素, 字体颜色为红色. 使用绝对定位, 右偏移-16px, 上偏移-5px. 透明度设置为 1 */
            display: inline-block;
            color: red;
            position: absolute;
            right: -16px;
            top: -5px;
            opacity: 1;
        }
    </style>
</head>
<body>

<div id="d1">点赞</div>

<script>
    $("#d1").on("click", function () {
        // 创建i节点, i节点的文本内容为+1.
        let $iEle = $("<i>").text("+1");

        // $iEle元素设置一个动画效果, 透明度从1渐变到0, 动画时长为1000毫秒.
        $iEle.animate({opacity: 0}, 1000);

        // 动画效果会在添加i元素到div后开始执行.
        $(this).append($iEle);

    })
</script>
</body>
</html>

GIF 2023-9-24 13-21-47

9.5.2 滑动效果
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
    <title>滑动动画</title>
    <style>
        #d0 {
            width: 350px;
            height: 350px;
            border: #352c2c inset 1px;
        }

        #d1 {
            width: 100px;
            height: 100px;
            background-color: #00c1ea;
            position: relative;
        }
    </style>

</head>
<body>
<p>
    <button id="btn0">向→滑动</button>
    <button id="btn1">向↓滑动</button>
    <button id="btn2">向←滑动</button>
    <button id="btn3">向↑滑动</button>
</p>

<div id="d0">
    <div id="d1">div1</div>

</div>


<script>
    // 获取div节点.
    let $divEle = $("#d1")

    // 设置左上偏移量, 右下无效.
    // 向→偏移250px.
    $("#btn0").click(function () {
        $divEle.animate({left: '250px'});
    });

    // 向→偏移0px.
    $("#btn1").click(function () {
        $divEle.animate({left: '0px'});
    });

    // 向↑偏移250px.
    $("#btn2").click(function () {
        $divEle.animate({top: '250px'});
    });
    // 向↑偏移0px.
    $("#btn3").click(function () {
        $divEle.animate({top: '0px'});
    });
</script>
</body>
</html>

GIF 2023-9-24 13-49-20

9.5.3 多参数设置
生成动画时, 可以同时使用多个属性来控制元素的动画效果.
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
    <title>多参数设置</title>
    <style>
        #d0 {
            width: 30px;
            height: 30px;
            background-color: #00c1ea;
            position: relative;
        }
    </style>

</head>
<body>
<p>
    <button id="btn0">变大</button>
    <button id="btn1">还原</button>
</p>

<div>
    <div id="d0"></div>
</div>


<script>
    $("#btn0").click(function () {
        /*  参数从默认值或者初始值--变化到-->预订值*/
        $("#d0").animate({
            left: '250px',
            opacity: '0.5',
            height: '150px',
            width: '150px'
        });
    });

    $("#btn1").click(function () {
        /*  参数从默认值或者初始值--变化到-->预订值*/
        $("#d0").animate({
            left: '0px',
            opacity: '1',
            height: '30px',
            width: '30px'
        });
    });
</script>
</body>
</html>

GIF 2023-9-24 18-28-35

9.5.4 相对值
通过'+=''-='来定义相对值, 可以基于元素当前的属性值进行动态调整, 实现更加灵活和自适应的动画效果.
请注意, 在使用这种方式时, 确保元素当前值是一个能够进行增减运算的属性, 比如长度, 尺寸等, 避免在不支持增减运算的属性上使用相对值.
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
    <title>定义相对值</title>
    <style>
        #d0 {
            width: 30px;
            height: 30px;
            background-color: #00c1ea;
            position: relative;
        }
    </style>

</head>
<body>
<p>
    <button id="btn0">变大</button>
    <button id="btn1">变小</button>
    <button id="btn2">还原</button>


</p>

<div>
    <div id="d0"></div>
</div>


<script>
    $("#btn0").click(function () {
        /* 第一次点击之后, 每次长宽加150 */
        $("#d0").animate({
            left: '250px',
            opacity: '0.5',
            height: '+=150px',
            width: '+=150px'
        });
    });

    $("#btn1").click(function () {
        /* 第一次点击之后, 每次长宽减150 */
        $("#d0").animate({
            left: '250px',
            opacity: '0.5',
            height: '-=150px',
            width: '-=150px'
        });
    });

    $("#btn2").click(function () {
        /*  恢复大小*/
        $("#d0").animate({
            left: '0px',
            opacity: '1',
            height: '30px',
            width: '30px'
        });
    });
</script>
</body>
</html>

GIF 2023-9-24 18-44-00

9.5.5 预定义值
 可以将属性的动画值设置为预定义的值, 这些值有助于在动画期间定义属性的起点和终点.
 
 预定义值:
'show': 将属性从隐藏状态过渡到显示状态.
'hide': 将属性从显示状态过渡到隐藏状态.
'toggle': 根据属性的当前状态, 在显示和隐藏之间切换.示例代码如下:
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
    <title>预定义值</title>
    <style>
        #d0 {
            width: 100px;
            height: 100px;
            background-color: #00c1ea;
            position: fixed;
        }
    </style>

</head>
<body>
<p><button>按键</button></p>

<div id="d0"></div>

<script>
    // 点击按键时, 它将检查元素的当前状态,
    // 如果元素是可见的, 则会以动画的方式将其右侧位置逐渐过渡到0,  使其隐藏; 同时, 透明度也会逐渐过渡到0,  使其变得透明.
    // 如果元素是隐藏的, 则会以动画的方式将其右侧位置逐渐过渡到默认位置, 使其显示; 同时, 透明度也会逐渐过渡到默认值, 使其不透明.
    $("button").click(function () {
        $("#d0").animate({
            right: 'toggle',
            opacity: "toggle",
        });
    });
</script>
</body>
</html>

GIF 2023-9-24 19-08-09

9.5.6 动画队列
jQuery提供了动画队列功能, 这意味着如果按顺序编写多个animate()方法调用, jQuery会创建一个内部队列, 逐一运行这些动画调用.

当连续调用多个animate()方法时, jQuery会将这些调用按照它们出现的顺序添加到内部队列中.
然后, jQuery会逐一处理队列中的动画调用, 确保它们按顺序执行.
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <script src="js/code.jquery.com_jquery-3.7.1.min.js"></script>
    <title>动画队列</title>
    <style>
        #d0 {
            width: 100px;
            height: 100px;
            background-color: #00c1ea;
            position: fixed;
        }
    </style>

</head>
<body>
<p>
    <button>按键</button>
</p>

<div id="d0"></div>

<script>
    $("button").click(function () {
        let $divEle = $("#d0");
        $divEle.animate(
            {height: '300px', opacity: '0.4'}
        ).animate(
            {width: '300px', opacity: '0.8'}
        ).animate(
            {height: '100px', opacity: '0.4'}
        ).animate(
            {width: '100px', opacity: '0.8'}
        );
    });
</script>
</body>
</html>

GIF 2023-9-24 19-18-55

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值