当前位置： 首页 > news >正文

【前端】【Jquery】一篇文章学习Jquery所有知识点

news 2025/5/30 17:15:28

第一章 jQuery简介

1.1 jQuery概述

1.1.1 jQuery定义

jQuery 是一个快速、简洁的 JavaScript 库，它封装了 JavaScript 中常用的功能，以一种更简洁、高效的方式让开发者操作 HTML 文档、处理事件、创建动画效果以及实现 AJAX 交互等😃。简单来说，它就像是一个“魔法工具箱”，把原本复杂的 JavaScript 操作变得轻松简单。例如，在原生 JavaScript 中要选择一个元素可能需要写好几行代码，而使用 jQuery 只需要一行代码就能搞定。就像下面这样👇：

// 原生 JavaScript 获取元素
var element = document.getElementById('myElement');// jQuery 获取元素
var $element = $('#myElement');
1.1.2 jQuery的优势
  • 简洁的语法：jQuery 提供了简洁的选择器和链式调用方法，大大减少了代码量。比如，要隐藏一个元素，原生 JavaScript 可能要这样写：
var element = document.getElementById('myElement');
element.style.display = 'none';

而使用 jQuery 只需要：

$('#myElement').hide();
  • 跨浏览器兼容：不同浏览器对 JavaScript 的支持存在差异，编写兼容所有浏览器的代码是一件很头疼的事情。但 jQuery 已经处理好了这些兼容性问题，开发者只需要编写一套代码，就能在各种主流浏览器中正常运行👍。
  • 丰富的插件：jQuery 拥有庞大的插件库，这些插件可以帮助开发者快速实现各种功能，如轮播图、表单验证、日期选择器等，节省了大量的开发时间。
  • 强大的事件处理：jQuery 提供了简洁的事件绑定和处理方法，让开发者可以轻松地为元素添加各种事件，如点击事件、鼠标悬停事件等。

1.2 jQuery的发展历程

1.2.1 版本迭代
  • 2006 年 1 月：John Resig 在 BarCamp NYC 上正式发布了 jQuery 0.1 版本，这标志着 jQuery 的诞生🎉。
  • 2007 年 8 月：jQuery 1.0 版本发布，这个版本具有了基本的选择器、DOM 操作、事件处理等功能，得到了广泛的关注。
  • 2012 年 6 月：jQuery 1.7 版本发布，引入了全新的事件绑定机制 on() 和 off()，提高了事件处理的灵活性。
  • 2013 年 7 月：jQuery 2.0 版本发布，该版本不再支持 IE6、IE7 和 IE8 等旧版本浏览器，代码更加简洁高效。
  • 2016 年 6 月：jQuery 3.0 版本发布，这是一个重大的更新版本，修复了许多 bug，提高了性能，并引入了一些新的特性。
1.2.2 重要版本特性
  • jQuery 1.7：引入了 on() 和 off() 方法，用于统一处理事件绑定和解除绑定。例如：
// 绑定点击事件
$('#myButton').on('click', function() {alert('按钮被点击了！');
});// 解除点击事件
$('#myButton').off('click');
  • jQuery 2.0：移除了对旧版本 IE 浏览器的支持，使得代码更加简洁，性能也有所提升。
  • jQuery 3.0：引入了 $.Deferred 对象的改进，增强了 AJAX 操作的异步处理能力；同时，对选择器引擎进行了优化，提高了选择元素的性能。

1.3 jQuery的应用场景

1.3.1 网页特效实现

jQuery 可以轻松实现各种网页特效，如淡入淡出、滑动、旋转等。例如，实现一个元素的淡入效果：

$('#myElement').fadeIn(1000); // 在 1 秒内淡入元素

还可以实现图片轮播效果，通过不断切换图片的显示和隐藏，营造出动态的效果😎。

1.3.2 表单验证

在网页开发中，表单验证是非常重要的一环。jQuery 可以方便地对表单元素进行验证，如验证用户名、密码、邮箱等是否符合要求。例如，验证邮箱格式：

$('#myForm').submit(function() {var email = $('#email').val();var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;if (!emailRegex.test(email)) {alert('请输入有效的邮箱地址！');return false;}
});
1.3.3 事件处理

jQuery 提供了丰富的事件处理方法，可以为元素绑定各种事件。例如，为按钮添加点击事件：

$('#myButton').click(function() {alert('你点击了按钮！');
});

还可以处理鼠标悬停、键盘输入等事件，实现更加丰富的交互效果。

1.3.4 AJAX交互

AJAX 可以在不刷新整个页面的情况下与服务器进行异步通信，更新部分网页内容。jQuery 封装了 AJAX 操作，让开发者可以更方便地使用。例如，发送一个 GET 请求获取服务器数据：

$.get('https://example.com/api/data', function(data) {$('#result').html(data);
});

这样就可以将服务器返回的数据显示在指定的元素中。

第二章 jQuery的安装与引入

2.1 下载jQuery

2.1.1 官方网站下载

  • 访问官网：首先，你需要打开 jQuery 的官方网站 https://jquery.com/。这就像是你去一个大型商场（官网），里面有你想要的商品（jQuery 库）😃。
  • 选择版本：在官网首页，你会看到“Download jQuery”的按钮。jQuery 有不同的版本，主要分为压缩版（Minified）和未压缩版（Uncompressed）。
    • 压缩版：文件体积小，适合在生产环境中使用。它就像是把东西压缩打包了，虽然看起来不那么直观，但占用空间小，传输速度快🚀。
    • 未压缩版：代码是可读的，适合在开发和调试阶段使用。就像打开包装的商品，你可以清楚地看到里面的样子🧐。
  • 下载文件：点击对应的版本链接，就可以将 jQuery 文件下载到本地啦。下载完成后，你会得到一个 .js 后缀的文件，这就是 jQuery 库文件。

2.1.2 CDN 引入

CDN（Content Delivery Network）即内容分发网络。使用 CDN 引入 jQuery 就像是你直接从附近的便利店（CDN 节点）获取商品，而不用自己去商场（官网）购买再带回家，这样可以提高资源的加载速度。

  • 常用 CDN 服务：有很多知名的 CDN 服务可以提供 jQuery 库，比如百度 CDN、新浪 CDN、谷歌 CDN 等。
  • 引入代码示例：以百度 CDN 为例，在 HTML 文件的 <head> 标签或 <body> 标签中添加以下代码：
<script src="https://apps.bdimg.com/libs/jquery/3.6.0/jquery.min.js"></script>

这样，当浏览器加载页面时，就会从百度的 CDN 节点加载 jQuery 库文件。

2.2 在 HTML 中引入 jQuery

2.2.1 本地文件引入

  • 准备文件：将之前从官网下载的 jQuery 文件（.js 文件）放在你的项目文件夹中。可以创建一个专门的 js 文件夹来存放这些脚本文件📁。
  • 引入代码：在 HTML 文件中，使用 <script> 标签引入本地的 jQuery 文件。通常将 <script> 标签放在 <body> 标签的末尾，这样可以确保页面的 HTML 结构先加载完成，再加载 jQuery 脚本。示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>引入本地 jQuery</title>
</head>
<body><!-- 页面内容 --><script src="js/jquery-3.6.0.min.js"></script>
</body>
</html>

这里的 js/jquery-3.6.0.min.js 是 jQuery 文件在项目中的相对路径，你需要根据实际情况进行调整。

2.2.2 CDN 引入的注意事项

  • 网络依赖：使用 CDN 引入 jQuery 依赖于网络连接。如果用户的网络不稳定或者 CDN 节点出现故障，可能会导致 jQuery 库加载失败。为了避免这种情况，可以提供一个本地的备用方案。示例代码如下：
<script src="https://apps.bdimg.com/libs/jquery/3.6.0/jquery.min.js"></script>
<script>if (typeof jQuery === 'undefined') {document.write('<script src="js/jquery-3.6.0.min.js"><\/script>');}
</script>

这段代码的意思是，先尝试从 CDN 加载 jQuery 库，如果加载失败（即 typeof jQuery === 'undefined'），则使用本地的 jQuery 文件。

  • 版本兼容性：不同版本的 jQuery 可能在功能和 API 上存在差异。在选择 CDN 上的 jQuery 版本时，要确保与你的项目兼容。

2.3 验证 jQuery 是否引入成功

2.3.1 简单的测试代码

在 HTML 文件中添加以下测试代码，来验证 jQuery 是否成功引入：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>验证 jQuery 引入</title><!-- 引入 jQuery，这里以 CDN 为例 --><script src="https://apps.bdimg.com/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body><script>$(document).ready(function() {alert('jQuery 引入成功！');});</script>
</body>
</html>

解释一下这段代码：

  • $(document).ready() 是 jQuery 的一个事件处理函数，它表示当文档（即 HTML 页面）加载完成后执行里面的代码。
  • alert('jQuery 引入成功！') 会弹出一个提示框，显示“jQuery 引入成功！”。如果页面加载后弹出了这个提示框，就说明 jQuery 已经成功引入啦🎉。

第三章 jQuery选择器

jQuery 选择器是 jQuery 强大功能的重要组成部分，它允许你快速、便捷地选择 HTML 元素，就像在茫茫人海中精准地找到你想要的人一样😎。接下来我们将详细介绍各种 jQuery 选择器。

3.1 基本选择器

基本选择器是最常用、最基础的选择器，它们就像是选择器家族中的“元老”，简单而实用。

3.1.1 ID选择器

ID 选择器通过元素的 id 属性来选择元素。每个 HTML 元素的 id 应该是唯一的，就像每个人的身份证号码一样😜。

语法：$("#id名")

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>ID选择器示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$(document).ready(function () {$("#myDiv").css("background-color", "yellow");});</script>
</head><body><div id="myDiv">这是一个带有特定 ID 的 div 元素。</div>
</body></html>

在这个示例中，我们使用 ID 选择器选择了 id 为 myDiv 的 div 元素，并将其背景颜色设置为黄色。

3.1.2 类选择器

类选择器通过元素的 class 属性来选择元素。一个元素可以有多个类名，多个元素也可以使用同一个类名，就像一群人穿着相同颜色的衣服一样👚。

语法：$(".类名")

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>类选择器示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$(document).ready(function () {$(".myClass").css("color", "red");});</script>
</head><body><p class="myClass">这是一个带有特定类名的段落。</p><span class="myClass">这是一个带有相同类名的 span 元素。</span>
</body></html>

在这个示例中，我们使用类选择器选择了所有 class 为 myClass 的元素，并将它们的文本颜色设置为红色。

3.1.3 标签选择器

标签选择器通过 HTML 标签名来选择元素。它会选择页面中所有指定标签的元素，就像把所有同一种类型的物品都收集起来一样📦。

语法：$("标签名")

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>标签选择器示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$(document).ready(function () {$("p").css("font-size", "20px");});</script>
</head><body><p>这是一个段落。</p><p>这是另一个段落。</p>
</body></html>

在这个示例中，我们使用标签选择器选择了所有的 p 标签元素，并将它们的字体大小设置为 20 像素。

3.1.4 通配符选择器

通配符选择器使用 * 来选择页面中的所有元素，就像一把大扫帚，把所有东西都扫进来一样🧹。

语法：$("*")

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>通配符选择器示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$(document).ready(function () {$("*").css("border", "1px solid black");});</script>
</head><body><div>这是一个 div 元素。</div><p>这是一个段落。</p>
</body></html>

在这个示例中，我们使用通配符选择器选择了页面中的所有元素，并为它们添加了一个 1 像素宽的黑色边框。

3.1.5 群组选择器

群组选择器允许你同时选择多个不同的元素，就像一次邀请多个不同类型的朋友参加聚会一样🎉。

语法：$("选择器1, 选择器2, ...")

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>群组选择器示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$(document).ready(function () {$("#myDiv, .myClass, p").css("background-color", "lightblue");});</script>
</head><body><div id="myDiv">这是一个带有特定 ID 的 div 元素。</div><p class="myClass">这是一个带有特定类名的段落。</p><p>这是另一个段落。</p>
</body></html>

在这个示例中，我们使用群组选择器同时选择了 id 为 myDiv 的元素、class 为 myClass 的元素和所有的 p 标签元素，并将它们的背景颜色设置为浅蓝色。

3.2 层次选择器

层次选择器允许你根据元素之间的层次关系来选择元素，就像在家族树中根据亲属关系来寻找特定的人一样🧐。

3.2.1 后代选择器

后代选择器用于选择某个元素的所有后代元素，不管它们嵌套的层次有多深，就像寻找一个家族中某个人的所有子孙后代一样👨‍👩‍👧‍👦。

语法：$("祖先元素 后代元素")

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>后代选择器示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$(document).ready(function () {$("div p").css("color", "green");});</script>
</head><body><div><p>这是 div 元素的直接子元素段落。</p><span><p>这是 div 元素的间接子元素段落。</p></span></div>
</body></html>

在这个示例中，我们使用后代选择器选择了所有 div 元素的后代 p 元素，并将它们的文本颜色设置为绿色。

3.2.2 子元素选择器

子元素选择器用于选择某个元素的直接子元素，不包括间接子元素，就像只选择一个人的亲生子女一样👨‍👩‍👧‍👦。

语法：$("父元素 > 子元素")

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>子元素选择器示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$(document).ready(function () {$("div > p").css("font-weight", "bold");});</script>
</head><body><div><p>这是 div 元素的直接子元素段落。</p><span><p>这是 div 元素的间接子元素段落。</p></span></div>
</body></html>

在这个示例中，我们使用子元素选择器选择了所有 div 元素的直接子元素 p 元素，并将它们的字体加粗。

3.2.3 相邻兄弟选择器

相邻兄弟选择器用于选择某个元素的下一个相邻兄弟元素，就像选择一个人的隔壁邻居一样🏠。

语法：$("元素 + 相邻兄弟元素")

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>相邻兄弟选择器示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$(document).ready(function () {$("p + span").css("text-decoration", "underline");});</script>
</head><body><p>这是一个段落。</p><span>这是段落的下一个相邻兄弟元素。</span><span>这是另一个 span 元素。</span>
</body></html>

在这个示例中，我们使用相邻兄弟选择器选择了所有 p 元素的下一个相邻兄弟 span 元素，并为它们添加了下划线。

3.2.4 通用兄弟选择器

通用兄弟选择器用于选择某个元素的所有后续兄弟元素，就像选择一个人后面的所有兄弟姐妹一样👨‍👩‍👧‍👦。

语法：$("元素 ~ 兄弟元素")

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>通用兄弟选择器示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$(document).ready(function () {$("p ~ span").css("background-color", "pink");});</script>
</head><body><p>这是一个段落。</p><span>这是段落的后续兄弟元素。</span><span>这是另一个后续兄弟元素。</span>
</body></html>

在这个示例中，我们使用通用兄弟选择器选择了所有 p 元素的后续兄弟 span 元素，并将它们的背景颜色设置为粉色。

3.3 过滤选择器

过滤选择器允许你根据元素的特定条件或状态来选择元素，就像在一群人中筛选出符合特定要求的人一样🤓。

3.3.1 基本过滤选择器

3.3.1.1 :first

:first 选择器用于选择匹配元素集合中的第一个元素，就像在一排人中选择排在最前面的那个人一样👫。

语法：$("选择器:first")

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>:first 选择器示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$(document).ready(function () {$("p:first").css("color", "blue");});</script>
</head><body><p>这是第一个段落。</p><p>这是第二个段落。</p>
</body></html>

在这个示例中，我们使用 :first 选择器选择了所有 p 元素中的第一个元素，并将其文本颜色设置为蓝色。

3.3.1.2 :last

:last 选择器用于选择匹配元素集合中的最后一个元素，就像在一排人中选择排在最后面的那个人一样👫。

语法：$("选择器:last")

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>:last 选择器示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$(document).ready(function () {$("p:last").css("color", "purple");});</script>
</head><body><p>这是第一个段落。</p><p>这是第二个段落。</p>
</body></html>

在这个示例中，我们使用 :last 选择器选择了所有 p 元素中的最后一个元素，并将其文本颜色设置为紫色。

3.3.1.3 :eq()

:eq() 选择器用于选择匹配元素集合中指定索引位置的元素，索引从 0 开始，就像在一排人中选择第几个位置的人一样👫。

语法：$("选择器:eq(索引)")

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>:eq() 选择器示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$(document).ready(function () {$("p:eq(1)").css("color", "orange");});</script>
</head><body><p>这是第一个段落。</p><p>这是第二个段落。</p>
</body></html>

在这个示例中，我们使用 :eq(1) 选择器选择了所有 p 元素中索引为 1 的元素（即第二个元素），并将其文本颜色设置为橙色。

3.3.1.4 :gt()

:gt() 选择器用于选择匹配元素集合中索引大于指定值的元素，就像在一排人中选择位置比某个编号更靠后的人一样👫。

语法：$("选择器:gt(索引)")

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>:gt() 选择器示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$(document).ready(function () {$("p:gt(0)").css("color", "brown");});</script>
</head><body><p>这是第一个段落。</p><p>这是第二个段落。</p><p>这是第三个段落。</p>
</body></html>

在这个示例中，我们使用 :gt(0) 选择器选择了所有 p 元素中索引大于 0 的元素（即第二个和第三个元素），并将它们的文本颜色设置为棕色。

3.3.1.5 :lt()

:lt() 选择器用于选择匹配元素集合中索引小于指定值的元素，就像在一排人中选择位置比某个编号更靠前的人一样👫。

语法：$("选择器:lt(索引)")

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>:lt() 选择器示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$(document).ready(function () {$("p:lt(2)").css("color", "gray");});</script>
</head><body><p>这是第一个段落。</p><p>这是第二个段落。</p><p>这是第三个段落。</p>
</body></html>

在这个示例中，我们使用 :lt(2) 选择器选择了所有 p 元素中索引小于 2 的元素（即第一个和第二个元素），并将它们的文本颜色设置为灰色。

3.3.1.6 :even

:even 选择器用于选择匹配元素集合中索引为偶数的元素，索引从 0 开始，就像在一排人中选择位置编号为偶数的人一样👫。

语法：$("选择器:even")

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>:even 选择器示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$(document).ready(function () {$("p:even").css("color", "teal");# 第四章 jQuery DOM操作在网页开发中，jQuery 为我们提供了强大的 DOM 操作能力，能够方便地对网页元素进行各种操作。下面我们就来详细了解 jQuery 的 DOM 操作方法。## 4.1 DOM 内容操作### 4.1.1 html() 方法
`html()` 方法用于获取或设置元素的 HTML 内容。- **获取 HTML 内容**：当不传递参数时，`html()` 方法会返回匹配元素的第一个元素的 HTML 内容。```javascript// 获取 id 为 test 的元素的 HTML 内容var htmlContent = $('#test').html();console.log(htmlContent);
  • 设置 HTML 内容：当传递一个字符串参数时，html() 方法会将匹配元素的 HTML 内容替换为该字符串。
    // 设置 id 为 test 的元素的 HTML 内容
$('#test').html('<p>新的 HTML 内容</p>');

4.1.2 text() 方法

text() 方法用于获取或设置元素的文本内容。

  • 获取文本内容：当不传递参数时，text() 方法会返回所有匹配元素的文本内容，会将 HTML 标签去除。
    // 获取 id 为 test 的元素的文本内容
var textContent = $('#test').text();
console.log(textContent);
  • 设置文本内容：当传递一个字符串参数时，text() 方法会将匹配元素的文本内容替换为该字符串。
    // 设置 id 为 test 的元素的文本内容
$('#test').text('新的文本内容');

4.1.3 val() 方法

val() 方法主要用于获取或设置表单元素的值。

  • 获取表单元素的值：当不传递参数时，val() 方法会返回匹配的表单元素的值。
    // 获取 id 为 inputTest 的输入框的值
var inputValue = $('#inputTest').val();
console.log(inputValue);
  • 设置表单元素的值：当传递一个字符串参数时，val() 方法会将匹配的表单元素的值设置为该字符串。
    // 设置 id 为 inputTest 的输入框的值
$('#inputTest').val('新的输入值');

4.2 DOM 属性操作

4.2.1 attr() 方法

attr() 方法用于获取或设置元素的属性。

  • 获取属性值：当传递一个属性名作为参数时，attr() 方法会返回匹配元素的第一个元素的该属性的值。
    // 获取 id 为 imgTest 的图片元素的 src 属性值
var srcValue = $('#imgTest').attr('src');
console.log(srcValue);
  • 设置属性值：当传递属性名和属性值两个参数时，attr() 方法会将匹配元素的该属性设置为指定的值。
    // 设置 id 为 imgTest 的图片元素的 src 属性值
$('#imgTest').attr('src', 'newImage.jpg');

4.2.2 removeAttr() 方法

removeAttr() 方法用于移除元素的指定属性。

// 移除 id 为 imgTest 的图片元素的 src 属性
$('#imgTest').removeAttr('src');

4.2.3 prop() 方法

prop() 方法用于获取或设置元素的属性，与 attr() 不同的是，prop() 主要用于处理布尔属性（如 checked、disabled 等）。

  • 获取属性值：当传递一个属性名作为参数时，prop() 方法会返回匹配元素的第一个元素的该属性的值。
    // 获取 id 为 checkboxTest 的复选框的 checked 属性值
var isChecked = $('#checkboxTest').prop('checked');
console.log(isChecked);
  • 设置属性值：当传递属性名和属性值两个参数时，prop() 方法会将匹配元素的该属性设置为指定的值。
    // 设置 id 为 checkboxTest 的复选框为选中状态
$('#checkboxTest').prop('checked', true);

4.2.4 removeProp() 方法

removeProp() 方法用于移除元素的指定属性。需要注意的是，对于一些内置的布尔属性，移除后可能会有默认行为。

// 移除 id 为 checkboxTest 的复选框的 checked 属性
$('#checkboxTest').removeProp('checked');

4.2.5 addClass() 方法

addClass() 方法用于为元素添加一个或多个类名。

// 为 id 为 test 的元素添加 'newClass' 类名
$('#test').addClass('newClass');

4.2.6 removeClass() 方法

removeClass() 方法用于移除元素的一个或多个类名。

// 移除 id 为 test 的元素的 'oldClass' 类名
$('#test').removeClass('oldClass');

4.2.7 toggleClass() 方法

toggleClass() 方法用于切换元素的类名，如果元素有该类名则移除，如果没有则添加。

// 切换 id 为 test 的元素的 'toggleClass' 类名
$('#test').toggleClass('toggleClass');

4.2.8 hasClass() 方法

hasClass() 方法用于判断元素是否有指定的类名，返回布尔值。

// 判断 id 为 test 的元素是否有 'checkClass' 类名
var hasCheckClass = $('#test').hasClass('checkClass');
console.log(hasCheckClass);

4.2.9 css() 方法

css() 方法用于获取或设置元素的 CSS 样式。

  • 获取 CSS 样式值：当传递一个 CSS 属性名作为参数时，css() 方法会返回匹配元素的第一个元素的该 CSS 属性的值。
    // 获取 id 为 test 的元素的 color 属性值
var colorValue = $('#test').css('color');
console.log(colorValue);
  • 设置 CSS 样式值：当传递 CSS 属性名和属性值两个参数时，css() 方法会将匹配元素的该 CSS 属性设置为指定的值。
    // 设置 id 为 test 的元素的 color 属性值为红色
$('#test').css('color', 'red');

4.3 DOM 元素操作

4.3.1 创建元素

在 jQuery 中，可以使用 $() 函数来创建新的元素。

// 创建一个新的 p 元素
var newElement = $('<p>这是一个新的段落元素</p>');

4.3.2 插入元素

4.3.2.1 append() 方法

append() 方法用于将指定的元素插入到匹配元素的内部的末尾。

// 将新创建的元素插入到 id 为 container 的元素内部的末尾
$('#container').append(newElement);
4.3.2.2 prepend() 方法

prepend() 方法用于将指定的元素插入到匹配元素的内部的开头。

// 将新创建的元素插入到 id 为 container 的元素内部的开头
$('#container').prepend(newElement);
4.3.2.3 appendTo() 方法

appendTo() 方法与 append() 相反，是将匹配的元素插入到指定元素的内部的末尾。

// 将新创建的元素插入到 id 为 container 的元素内部的末尾
newElement.appendTo('#container');
4.3.2.4 prependTo() 方法

prependTo() 方法与 prepend() 相反，是将匹配的元素插入到指定元素的内部的开头。

// 将新创建的元素插入到 id 为 container 的元素内部的开头
newElement.prependTo('#container');
4.3.2.5 after() 方法

after() 方法用于将指定的元素插入到匹配元素的后面。

// 将新创建的元素插入到 id 为 target 的元素后面
$('#target').after(newElement);
4.3.2.6 before() 方法

before() 方法用于将指定的元素插入到匹配元素的前面。

// 将新创建的元素插入到 id 为 target 的元素前面
$('#target').before(newElement);
4.3.2.7 insertAfter() 方法

insertAfter() 方法与 after() 相反，是将匹配的元素插入到指定元素的后面。

// 将新创建的元素插入到 id 为 target 的元素后面
newElement.insertAfter('#target');
4.3.2.8 insertBefore() 方法

insertBefore() 方法与 before() 相反，是将匹配的元素插入到指定元素的前面。

// 将新创建的元素插入到 id 为 target 的元素前面
newElement.insertBefore('#target');

4.3.3 删除元素

4.3.3.1 remove() 方法

remove() 方法用于移除匹配的元素及其所有子元素。

// 移除 id 为 toRemove 的元素
$('#toRemove').remove();
4.3.3.2 empty() 方法

empty() 方法用于清空匹配元素的所有子元素，但保留元素本身。

// 清空 id 为 toEmpty 的元素的所有子元素
$('#toEmpty').empty();

4.3.4 复制元素

4.3.4.1 clone() 方法

clone() 方法用于复制匹配的元素及其所有子元素。

// 复制 id 为 toClone 的元素
var clonedElement = $('#toClone').clone();
// 将复制的元素插入到 id 为 container 的元素内部的末尾
$('#container').append(clonedElement);

4.3.5 替换元素

4.3.5.1 replaceWith() 方法

replaceWith() 方法用于用指定的元素替换匹配的元素。

// 用新创建的元素替换 id 为 toReplace 的元素
$('#toReplace').replaceWith(newElement);
4.3.5.2 replaceAll() 方法

replaceAll() 方法与 replaceWith() 相反，是用匹配的元素替换指定的元素。

// 用新创建的元素替换 id 为 toReplace 的元素
newElement.replaceAll('#toReplace');

4.3.6 包裹元素

4.3.6.1 wrap() 方法

wrap() 方法用于将每个匹配的元素用指定的元素包裹起来。

// 用一个 div 元素包裹 id 为 toWrap 的元素
$('#toWrap').wrap('<div class="wrapper"></div>');
4.3.6.2 wrapAll() 方法

wrapAll() 方法用于将所有匹配的元素用一个指定的元素包裹起来。

// 用一个 div 元素包裹所有 class 为 toWrapAll 的元素
$('.toWrapAll').wrapAll('<div class="wrapper"></div>');
4.3.6.3 wrapInner() 方法

wrapInner() 方法用于将每个匹配元素的内容用指定的元素包裹起来。

// 用一个 span 元素包裹 id 为 toWrapInner 的元素的内容
$('#toWrapInner').wrapInner('<span class="innerWrapper"></span>');
4.3.6.4 unwrap() 方法

unwrap() 方法用于移除匹配元素的父元素。

// 移除 id 为 toUnwrap 的元素的父元素
$('#toUnwrap').unwrap();

🎉 通过以上这些 jQuery 的 DOM 操作方法，我们可以方便地对网页元素进行内容、属性和结构的修改，从而实现丰富的交互效果。

第五章 jQuery事件处理

5.1 事件绑定

5.1.1 bind()方法

bind() 方法是 jQuery 早期用于为元素绑定事件的方法。它的基本语法如下：

$(selector).bind(eventType, [data], handler);
  • eventType：是要绑定的事件类型，比如 click、mouseover 等。
  • data（可选）：是传递给事件处理函数的额外数据。
  • handler：是事件触发时要执行的函数。

示例代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>bind()示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head><body><button id="myButton">点击我</button><script>$('#myButton').bind('click', function () {alert('按钮被点击了！');});</script>
</body></html>

在这个示例中，当按钮被点击时，就会弹出一个提示框😃。

5.1.2 live()方法（已弃用）

live() 方法曾经用于为当前以及未来动态添加到 DOM 中的元素绑定事件。不过由于性能问题，在 jQuery 1.7 版本之后就被弃用了。它的语法如下：

$(selector).live(eventType, [data], handler);

虽然现在不建议使用，但了解它的功能有助于理解 jQuery 事件绑定的发展历程。

5.1.3 delegate()方法

delegate() 方法允许为当前或未来的元素（子元素）绑定一个或多个事件，基于一个特定的父元素。语法如下：

$(parentSelector).delegate(childSelector, eventType, [data], handler);
  • parentSelector：是父元素的选择器。
  • childSelector：是子元素的选择器。
  • eventType：是要绑定的事件类型。
  • data（可选）：是传递给事件处理函数的额外数据。
  • handler：是事件触发时要执行的函数。

示例代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>delegate()示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head><body><div id="parentDiv"><button class="myButton">点击我</button></div><script>$('#parentDiv').delegate('.myButton', 'click', function () {alert('按钮被点击了！');});</script>
</body></html>

这样，即使后续在 parentDiv 中动态添加新的 myButton 按钮，点击时也会触发相应的事件👏。

5.1.4 on()方法

on() 方法是 jQuery 1.7 版本之后推荐使用的事件绑定方法，它可以替代 bind()、live() 和 delegate() 方法。语法如下：

$(selector).on(eventType, [childSelector], [data], handler);
  • eventType：是要绑定的事件类型。
  • childSelector（可选）：如果提供了该参数，事件会委托给子元素。
  • data（可选）：是传递给事件处理函数的额外数据。
  • handler：是事件触发时要执行的函数。

示例代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>on()示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head><body><button id="myButton">点击我</button><script>$('#myButton').on('click', function () {alert('按钮被点击了！');});</script>
</body></html>

使用 on() 方法可以更灵活地处理事件绑定😎。

5.2 事件解绑

5.2.1 unbind()方法

unbind() 方法用于移除通过 bind() 方法绑定的事件处理程序。语法如下：

$(selector).unbind([eventType], [handler]);
  • eventType（可选）：要移除的事件类型。如果不提供，则移除所有绑定的事件。
  • handler（可选）：要移除的特定事件处理函数。

示例代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>unbind()示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head><body><button id="myButton">点击我</button><button id="unbindButton">解绑点击事件</button><script>function clickHandler() {alert('按钮被点击了！');}$('#myButton').bind('click', clickHandler);$('#unbindButton').click(function () {$('#myButton').unbind('click', clickHandler);});</script>
</body></html>

点击“解绑点击事件”按钮后，再点击“点击我”按钮就不会触发事件了🤔。

5.2.2 die()方法（已弃用）

die() 方法用于移除通过 live() 方法绑定的事件处理程序。由于 live() 方法已弃用，所以 die() 方法也不再推荐使用。

5.2.3 undelegate()方法

undelegate() 方法用于移除通过 delegate() 方法绑定的事件处理程序。语法如下：

$(parentSelector).undelegate([childSelector], [eventType], [handler]);
  • parentSelector：是父元素的选择器。
  • childSelector（可选）：是子元素的选择器。
  • eventType（可选）：要移除的事件类型。
  • handler（可选）：要移除的特定事件处理函数。

示例代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>undelegate()示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head><body><div id="parentDiv"><button class="myButton">点击我</button></div><button id="undelegateButton">解绑委托事件</button><script>function clickHandler() {alert('按钮被点击了！');}$('#parentDiv').delegate('.myButton', 'click', clickHandler);$('#undelegateButton').click(function () {$('#parentDiv').undelegate('.myButton', 'click', clickHandler);});</script>
</body></html>

点击“解绑委托事件”按钮后，parentDiv 中的 myButton 按钮点击事件就被移除了😏。

5.2.4 off()方法

off() 方法是 jQuery 1.7 版本之后推荐使用的事件解绑方法，它可以替代 unbind()、die() 和 undelegate() 方法。语法如下：

$(selector).off([eventType], [childSelector], [handler]);
  • eventType（可选）：要移除的事件类型。
  • childSelector（可选）：如果之前是委托事件，这里指定子元素选择器。
  • handler（可选）：要移除的特定事件处理函数。

示例代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>off()示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head><body><button id="myButton">点击我</button><button id="offButton">解绑事件</button><script>function clickHandler() {alert('按钮被点击了！');}$('#myButton').on('click', clickHandler);$('#offButton').click(function () {$('#myButton').off('click', clickHandler);});</script>
</body></html>

使用 off() 方法可以更方便地移除事件绑定👍。

5.3 事件触发

5.3.1 trigger()方法

trigger() 方法用于触发指定元素上的指定事件。语法如下：

$(selector).trigger(eventType, [extraParameters]);
  • eventType：要触发的事件类型。
  • extraParameters（可选）：传递给事件处理函数的额外参数。

示例代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>trigger()示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head><body><button id="myButton">点击我</button><button id="triggerButton">触发点击事件</button><script>$('#myButton').on('click', function () {alert('按钮被点击了！');});$('#triggerButton').click(function () {$('#myButton').trigger('click');});</script>
</body></html>

点击“触发点击事件”按钮，就会触发“点击我”按钮的点击事件😜。

5.3.2 triggerHandler()方法

triggerHandler() 方法与 trigger() 方法类似，但有一些区别。它不会触发浏览器的默认行为，并且只会影响第一个匹配的元素。语法如下：

$(selector).triggerHandler(eventType, [extraParameters]);
  • eventType：要触发的事件类型。
  • extraParameters（可选）：传递给事件处理函数的额外参数。

示例代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>triggerHandler()示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head><body><form id="myForm"><input type="submit" value="提交表单"></form><button id="triggerHandlerButton">触发提交事件</button><script>$('#myForm').on('submit', function () {alert('表单提交了！');return false;});$('#triggerHandlerButton').click(function () {$('#myForm').triggerHandler('submit');});</script>
</body></html>

点击“触发提交事件”按钮，会触发表单的提交事件处理函数，但不会真正提交表单🤓。

5.4 常用事件

5.4.1 鼠标事件

5.4.1.1 click()方法

click() 方法用于绑定或触发元素的点击事件。语法如下：

$(selector).click(handler);

示例代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>click()示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head><body><button id="myButton">点击我</button><script>$('#myButton').click(function () {alert('按钮被点击了！');});</script>
</body></html>
5.4.1.2 dblclick()方法

dblclick() 方法用于绑定或触发元素的双击事件。语法如下：

$(selector).dblclick(handler);

示例代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>dblclick()示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head><body><div id="myDiv">双击我</div><script>$('#myDiv').dblclick(function () {alert('元素被双击了！');});</script>
</body></html>
5.4.1.3 mouseover()方法

mouseover() 方法用于绑定或触发元素的鼠标悬停事件，当鼠标指针进入元素或其子元素时触发。语法如下：

$(selector).mouseover(handler);

示例代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>mouseover()示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>#myDiv {width: 100px;height: 100px;background-color: lightblue;}</style>
</head><body><div id="myDiv">悬停我</div><script>$('#myDiv').mouseover(function () {$(this).css('background-color', 'lightgreen');});</script>
</body></html>
5.4.1.4 mouseout()方法

mouseout() 方法用于绑定或触发元素的鼠标移出事件，当鼠标指针离开元素或其子元素时触发。语法如下：

$(selector).mouseout(handler);

示例代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>mouseout()示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>#myDiv {width: 100px;height: 100px;background-color: lightblue;}</style>
</head><body><div id="myDiv">移出我</div><script>$('#myDiv').mouseout(function () {$(this).css('background-color', 'lightblue');});</script>
</body></html>
5.4.1.5 mouseenter()方法

mouseenter() 方法用于绑定或触发元素的鼠标进入事件，只有当鼠标指针进入元素本身时触发，不包括子元素。语法如下：

$(selector).mouseenter(handler);

示例代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>mouseenter()示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>#myDiv {width: 100px;height: 100px;background-color: lightblue;}</style>
</head><body><div id="myDiv">进入我</div><script>$('#myDiv').mouseenter(function () {$(this).css('background-color', 'lightgreen');});</script>
</body></html>
5.4.1.6 mouseleave()方法

mouseleave() 方法用于绑定或触发元素的鼠标离开事件，只有当鼠标指针离开元素本身时触发，不包括子元素。语法如下：

第六章 jQuery特效与动画

6.1 基本特效

6.1.1 show()方法

show()方法用于显示隐藏的 HTML 元素😃。它可以将元素的 display 属性值设置为其默认值，从而使元素可见。

语法：

$(selector).show(speed,callback);
  • speed：可选参数，规定元素显示的速度，可以是 “slow”、“fast” 或毫秒数。例如，$( "p" ).show( "slow" ); 会以较慢的速度显示所有 <p> 元素。
  • callback：可选参数，是 show() 方法执行完后要执行的函数。比如：
$( "p" ).show( "slow", function() {alert( "段落已显示" );
});

6.1.2 hide()方法

hide()方法与 show() 方法相反，它用于隐藏可见的 HTML 元素😜。会将元素的 display 属性设置为 “none”。

语法：

$(selector).hide(speed,callback);

参数含义与 show() 方法类似。例如，$( "div" ).hide( "fast" ); 会快速隐藏所有 <div> 元素。

6.1.3 toggle()方法

toggle()方法可以在元素的显示和隐藏状态之间进行切换🤹‍♂️。如果元素当前是隐藏的，调用 toggle() 会显示它；如果元素当前是显示的，调用 toggle() 会隐藏它。

语法：

$(selector).toggle(speed,callback);

示例：

$( "button" ).click(function() {$( "p" ).toggle( "slow" );
});

点击按钮时，<p> 元素会以较慢的速度切换显示或隐藏状态。

6.1.4 fadeIn()方法

fadeIn()方法用于淡入已隐藏的元素，即元素从透明逐渐变为不透明，给人一种渐渐显现的视觉效果✨。

语法：

$(selector).fadeIn(speed,callback);

例如：

$( "button" ).click(function() {$( "p" ).fadeIn( "slow" );
});

点击按钮时，<p> 元素会以较慢的速度淡入显示。

6.1.5 fadeOut()方法

fadeOut()方法与 fadeIn() 相反，它用于淡出可见的元素，使元素从不透明逐渐变为透明，最终隐藏起来😵‍💫。

语法：

$(selector).fadeOut(speed,callback);

示例：

$( "button" ).click(function() {$( "p" ).fadeOut( 2000 );
});

点击按钮时，<p> 元素会在 2000 毫秒（2 秒）内淡出隐藏。

6.1.6 fadeToggle()方法

fadeToggle()方法结合了 fadeIn() 和 fadeOut() 的功能，用于在元素的淡入和淡出状态之间切换😎。

语法：

$(selector).fadeToggle(speed,callback);

示例：

$( "button" ).click(function() {$( "p" ).fadeToggle( "fast" );
});

点击按钮时，<p> 元素会快速切换淡入或淡出状态。

6.1.7 fadeTo()方法

fadeTo()方法可以将元素的不透明度渐变为指定的值，而不是像 fadeIn() 和 fadeOut() 那样完全显示或隐藏元素🎚️。

语法：

$(selector).fadeTo(speed,opacity,callback);
  • opacity：必需参数，规定元素的不透明度，取值范围是 0.0（完全透明）到 1.0（完全不透明）。
    例如：
$( "button" ).click(function() {$( "p" ).fadeTo( "slow", 0.5 );
});

点击按钮时，<p> 元素会以较慢的速度将不透明度变为 0.5。

6.1.8 slideDown()方法

slideDown()方法用于向下滑动显示隐藏的元素，就像拉窗帘一样，元素从顶部开始逐渐向下展开😏。

语法：

$(selector).slideDown(speed,callback);

示例：

$( "button" ).click(function() {$( "p" ).slideDown( "fast" );
});

点击按钮时，<p> 元素会快速向下滑动显示。

6.1.9 slideUp()方法

slideUp()方法与 slideDown() 相反，用于向上滑动隐藏可见的元素，元素从底部开始逐渐向上收缩👆。

语法：

$(selector).slideUp(speed,callback);

示例：

$( "button" ).click(function() {$( "p" ).slideUp( 1500 );
});

点击按钮时，<p> 元素会在 1500 毫秒（1.5 秒）内向上滑动隐藏。

6.1.10 slideToggle()方法

slideToggle()方法用于在元素的向上滑动隐藏和向下滑动显示状态之间切换，结合了 slideUp() 和 slideDown() 的功能🚪。

语法：

$(selector).slideToggle(speed,callback);

示例：

$( "button" ).click(function() {$( "p" ).slideToggle( "slow" );
});

点击按钮时，<p> 元素会以较慢的速度切换向上或向下滑动状态。

6.2 自定义动画

6.2.1 animate()方法

animate()方法允许创建自定义动画，你可以指定元素的 CSS 属性值，让元素从当前状态过渡到指定状态，实现各种独特的动画效果🎨。

语法：

$(selector).animate({params},speed,callback);
  • params：必需参数，是一个包含 CSS 属性和值的对象，用于指定动画的目标状态。例如：
$( "button" ).click(function() {$( "div" ).animate({left: '250px',opacity: '0.5',height: '150px',width: '150px'});
});

点击按钮时，<div> 元素会同时改变其 left 位置、不透明度、高度和宽度。

6.2.2 动画队列

jQuery 会将动画放入队列中，当一个动画完成后，才会开始执行队列中的下一个动画。例如：

$( "button" ).click(function() {var div = $( "div" );div.animate({height: '300px', opacity: '0.4'}, "slow");div.animate({width: '300px', opacity: '0.8'}, "slow");div.animate({height: '100px', opacity: '0.4'}, "slow");div.animate({width: '100px', opacity: '0.8'}, "slow");
});

点击按钮后，<div> 元素会依次执行这四个动画，一个接着一个。

6.2.3 停止动画

6.2.3.1 stop()方法

stop()方法用于停止元素当前正在运行的动画。

语法：

$(selector).stop(stopAll,goToEnd);
  • stopAll：可选参数，布尔值。如果设置为 true，则停止元素的所有动画队列；如果为 false 或省略，则只停止当前正在运行的动画。
  • goToEnd：可选参数，布尔值。如果设置为 true，则立即完成当前正在运行的动画；如果为 false 或省略，则停止动画并保持当前状态。

示例：

$( "button" ).click(function() {$( "div" ).stop();
});

点击按钮时，<div> 元素当前正在运行的动画会停止。

6.2.4 延迟动画

6.2.4.1 delay()方法

delay()方法用于设置动画队列中当前动画的延迟时间，即暂停一段时间后再继续执行下一个动画⏱️。

语法：

$(selector).delay(duration,queueName);
  • duration：必需参数，规定延迟的毫秒数。
  • queueName：可选参数，规定要延迟的队列名称。

示例：

$( "button" ).click(function() {$( "div" ).animate({height: 300}, 1000).delay(2000).animate({width: 300}, 1000);
});

点击按钮后，<div> 元素先将高度变为 300px，然后延迟 2000 毫秒（2 秒），再将宽度变为 300px。

6.2.5 完成回调函数

在许多 jQuery 动画方法中，都可以传入一个回调函数，这个回调函数会在动画完成后执行。例如：

$( "button" ).click(function() {$( "p" ).slideUp(300, function() {alert( "段落已隐藏" );});
});

当 <p> 元素向上滑动隐藏完成后，会弹出一个提示框显示 “段落已隐藏”。

6.2.6 动画选项

6.2.6.1 速度参数

在 jQuery 动画方法中，速度参数可以控制动画的执行速度。常见的取值有：

  • "slow"：大约 600 毫秒。
  • "fast"：大约 200 毫秒。
  • 具体的毫秒数，如 300、1000 等。

例如：

$( "p" ).fadeOut( "slow" ); // 以较慢的速度淡出
$( "p" ).fadeOut( 500 ); // 在 500 毫秒内淡出
6.2.6.2 缓动函数

缓动函数用于控制动画的速度变化方式，即动画在执行过程中的加速或减速情况。jQuery 中常用的缓动函数有：

  • "linear"：匀速运动，动画在整个过程中速度保持不变。
  • "swing"：默认值，动画开始和结束时速度较慢，中间速度较快。

示例：

$( "button" ).click(function() {$( "div" ).animate({left: '250px'}, 1000, "linear");
});

点击按钮时，<div> 元素会以匀速运动的方式向右移动 250px。

第七章 jQuery AJAX

7.1 AJAX基础

7.1.1 AJAX概念

AJAX 即“Asynchronous JavaScript and XML”（异步的 JavaScript 和 XML），它并不是一种新的编程语言，而是一种用于创建快速动态网页的技术😎。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面，但使用 AJAX 技术，就可以在不刷新整个页面的情况下，与服务器进行异步通信并更新部分网页内容。

举个例子🌰，当你在搜索引擎的搜索框中输入关键词时，搜索框下方会实时显示相关的搜索建议，这就是 AJAX 在背后发挥作用。它在你输入的同时，将输入的内容发送给服务器，服务器返回相关的建议数据，然后更新到页面上，而不需要刷新整个页面。

7.1.2 AJAX的优点

  • 无刷新更新页面✨：用户在操作页面时，不需要刷新整个页面就能更新部分内容，提供了更好的用户体验。比如在电商网站中，当你添加商品到购物车时，购物车的数量会实时更新，而页面不会闪烁或刷新。
  • 异步通信🚀：在向服务器发送请求的同时，用户可以继续操作页面，不会出现页面卡顿的情况。例如在在线游戏中，玩家可以在游戏进行的同时，通过 AJAX 与服务器同步数据，而不影响游戏的流畅性。
  • 减轻服务器负担💪：AJAX 可以只向服务器请求必要的数据，而不是整个页面，从而减少了服务器的负载。比如在新闻网站中，当你点击加载更多新闻时，只请求新的新闻数据，而不是重新加载整个页面。
  • 增强页面交互性🎉：通过 AJAX 可以实现各种动态效果，如拖拽、动画等，使页面更加生动有趣。例如在社交媒体网站中，用户可以通过 AJAX 实现点赞、评论等操作，即时看到反馈。

7.1.3 AJAX的工作原理

AJAX 的工作原理主要涉及以下几个步骤👇：

  1. 创建 XMLHttpRequest 对象：这是 AJAX 的核心对象，用于与服务器进行异步通信。在 JavaScript 中，可以使用 new XMLHttpRequest() 来创建该对象。
  2. 打开请求：使用 open() 方法指定请求的类型（GET 或 POST）、请求的 URL 以及是否异步等信息。例如：xhr.open('GET', 'example.php', true);
  3. 发送请求：使用 send() 方法将请求发送给服务器。如果是 POST 请求，还需要设置请求头并在 send() 方法中传递数据。
  4. 监听状态变化：通过监听 XMLHttpRequest 对象的 onreadystatechange 事件，当状态发生变化时，检查 readyState 和 status 属性，判断请求是否成功。
  5. 处理响应数据：如果请求成功，从 responseText 或 responseXML 属性中获取服务器返回的数据，并更新到页面上。

下面是一个简单的 AJAX 请求示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8">
</head><body><button id="btn">发送请求</button><div id="result"></div><script>document.getElementById('btn').addEventListener('click', function () {// 创建 XMLHttpRequest 对象var xhr = new XMLHttpRequest();// 打开请求xhr.open('GET', 'data.txt', true);// 监听状态变化xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {// 处理响应数据document.getElementById('result').innerHTML = xhr.responseText;}};// 发送请求xhr.send();});</script>
</body></html>

7.2 jQuery AJAX方法

7.2.1 $.ajax()方法

$.ajax() 是 jQuery 中最底层的 AJAX 方法，它可以处理各种类型的 AJAX 请求，提供了丰富的配置选项。以下是一个基本的 $.ajax() 示例：

$.ajax({url: 'example.php', // 请求的 URLtype: 'GET', // 请求类型data: { name: 'John', age: 30 }, // 发送的数据success: function (response) { // 请求成功时的回调函数console.log('请求成功：', response);},error: function (error) { // 请求失败时的回调函数console.log('请求失败：', error);}
});

7.2.2 $.get()方法

$.get() 是一个简化的 AJAX 方法，用于发送 GET 请求。它的语法如下：

$.get('example.php', { name: 'John', age: 30 }, function (response) {console.log('请求成功：', response);
});

7.2.3 $.post()方法

$.post() 用于发送 POST 请求，语法与 $.get() 类似：

$.post('example.php', { name: 'John', age: 30 }, function (response) {console.log('请求成功：', response);
});

7.2.4 $.getJSON()方法

$.getJSON() 用于发送 GET 请求并期望服务器返回 JSON 数据。它会自动将服务器返回的 JSON 数据解析为 JavaScript 对象。示例如下：

$.getJSON('data.json', function (data) {console.log('JSON 数据：', data);
});

7.2.5 $.load()方法

$.load() 方法用于从服务器加载数据，并将返回的数据插入到指定的 HTML 元素中。它的语法如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8">
</head><body><button id="loadBtn">加载数据</button><div id="content"></div><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$('#loadBtn').on('click', function () {$('#content').load('data.html');});</script>
</body></html>

7.3 AJAX事件

7.3.1 ajaxStart()方法

ajaxStart() 方法在 AJAX 请求开始时触发。可以使用它来显示加载提示，例如显示一个加载动画。示例如下：

$(document).ajaxStart(function () {$('#loading').show();
});

7.3.2 ajaxStop()方法

ajaxStop() 方法在所有 AJAX 请求完成时触发。可以使用它来隐藏加载提示，例如隐藏加载动画。示例如下：

$(document).ajaxStop(function () {$('#loading').hide();
});

7.3.3 ajaxSend()方法

ajaxSend() 方法在 AJAX 请求发送之前触发。可以使用它来设置请求头或进行其他预处理操作。示例如下：

$(document).ajaxSend(function (event, xhr, settings) {xhr.setRequestHeader('Authorization', 'Bearer token');
});

7.3.4 ajaxComplete()方法

ajaxComplete() 方法在 AJAX 请求完成后触发，无论请求是否成功。可以使用它来进行一些清理工作或显示提示信息。示例如下：

$(document).ajaxComplete(function (event, xhr, settings) {console.log('AJAX 请求完成');
});

7.3.5 ajaxError()方法

ajaxError() 方法在 AJAX 请求失败时触发。可以使用它来显示错误信息或进行错误处理。示例如下：

$(document).ajaxError(function (event, xhr, settings, error) {console.log('AJAX 请求失败：', error);
});

7.3.6 ajaxSuccess()方法

ajaxSuccess() 方法在 AJAX 请求成功时触发。可以使用它来处理服务器返回的数据或进行其他操作。示例如下：

$(document).ajaxSuccess(function (event, xhr, settings) {console.log('AJAX 请求成功');
});

7.4 跨域AJAX

7.4.1 JSONP原理

由于浏览器的同源策略，不同源的页面之间无法直接进行 AJAX 请求。JSONP（JSON with Padding）是一种跨域数据交互的技术，它的原理是利用 <script> 标签的 src 属性不受同源策略限制的特点。

具体步骤如下👇：

  1. 客户端在页面中动态创建一个 <script> 标签，并将请求的 URL 作为 src 属性的值，同时在 URL 中添加一个回调函数名作为参数。
  2. 服务器接收到请求后，将返回的数据包装在回调函数中返回给客户端。
  3. 客户端的 <script> 标签会执行服务器返回的 JavaScript 代码，从而调用回调函数并处理返回的数据。

7.4.2 使用JSONP实现跨域请求

以下是一个使用 jQuery 实现 JSONP 跨域请求的示例：

$.ajax({url: 'http://example.com/api/data',dataType: 'jsonp', // 指定数据类型为 JSONPjsonp: 'callback', // 指定回调函数名的参数名success: function (data) {console.log('跨域请求成功：', data);},error: function (error) {console.log('跨域请求失败：', error);}
});

在服务器端，需要将返回的数据包装在回调函数中返回，例如：

<?php
$callback = $_GET['callback'];
$data = array('name' => 'John', 'age' => 30);
echo $callback . '(' . json_encode($data) . ')';
?>

这样，客户端就可以通过 JSONP 实现跨域 AJAX 请求啦😃。

第八章 jQuery插件

8.1 插件概述

8.1.1 插件的作用

jQuery 本身已经提供了很多强大的功能，但在实际开发中，我们常常会遇到一些特定的需求，而这些需求可能需要复杂的代码来实现。这时，jQuery 插件就派上用场啦😎！

  • 提高开发效率：插件是对一些常用功能的封装，我们可以直接使用这些插件，而不需要自己从头编写复杂的代码。比如，实现一个图片轮播效果，如果自己编写代码，需要处理图片的切换、动画效果、定时器等多个方面，而使用图片轮播插件，只需要简单的配置就可以实现。
  • 功能扩展：jQuery 插件可以为网页添加各种各样的功能，如表单验证、日期选择器、滑动菜单等。这些功能可以让网页更加丰富和实用。
  • 代码复用：插件可以在不同的项目中重复使用，避免了重复开发，提高了代码的可维护性。

8.1.2 常见的jQuery插件

  • Slick：一个强大的响应式滑块插件，可以用于创建各种类型的滑块，如图片滑块、内容滑块等。它支持无限滚动、自适应高度、触摸滑动等功能，使用起来非常方便👍。
  • Magnific Popup：用于创建弹出框的插件，可以弹出图片、视频、HTML 内容等。它具有丰富的动画效果和自定义选项，能够为用户带来良好的交互体验。
  • jQuery Validation：专门用于表单验证的插件，它可以轻松地对表单中的各种字段进行验证，如必填项、邮箱格式、密码长度等。只需要在表单元素上添加相应的规则，插件就会自动进行验证，并给出提示信息。
  • FullCalendar：一款优秀的日历插件，可以创建交互式的日历，支持月视图、周视图、日视图等多种视图模式。可以在日历上添加事件、拖动事件等，适用于各种需要展示日程安排的场景。

8.2 插件的使用

8.2.1 引入插件文件

在使用 jQuery 插件之前，首先要确保已经引入了 jQuery 库文件，因为插件是基于 jQuery 开发的。然后，再引入插件的相关文件，通常包括 CSS 文件（如果有样式的话）和 JavaScript 文件。

引入文件的方式可以使用 <script> 和 <link> 标签，示例如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入 jQuery 库文件 --><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><!-- 引入插件的 CSS 文件（如果有） --><link rel="stylesheet" href="plugin.css"><title>jQuery 插件使用</title>
</head><body><!-- 网页内容 --><!-- 引入插件的 JavaScript 文件 --><script src="plugin.js"></script>
</body></html>

8.2.2 初始化插件

引入插件文件后，就可以对插件进行初始化了。不同的插件初始化方式可能会有所不同，但一般都是通过 jQuery 选择器选中要使用插件的元素，然后调用插件的初始化方法。

例如，使用一个简单的图片轮播插件，初始化代码可能如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="slider-plugin.js"></script><title>图片轮播插件使用</title>
</head><body><div class="slider"><img src="image1.jpg" alt="Image 1"><img src="image2.jpg" alt="Image 2"><img src="image3.jpg" alt="Image 3"></div><script>$(document).ready(function () {// 初始化图片轮播插件$('.slider').sliderPlugin();});</script>
</body></html>

8.3 自定义插件

8.3.1 插件开发的基本结构

自定义 jQuery 插件有多种方式，其中一种常见的方式是使用 $.fn 来扩展 jQuery 的原型。基本结构如下：

(function ($) {// 插件名称$.fn.pluginName = function (options) {// 默认参数var settings = $.extend({// 这里可以定义默认参数param1: 'default value 1',param2: 'default value 2'}, options);// 遍历选中的元素return this.each(function () {// 在这里编写插件的具体逻辑// 可以使用 settings 中的参数console.log(settings.param1);});};
})(jQuery);

8.3.2 插件的参数设置

在插件开发中，通常需要提供一些参数，让用户可以根据自己的需求进行配置。在上面的基本结构中，我们使用 $.extend() 方法来合并用户传入的参数和默认参数。

例如，用户可以这样调用插件并传入参数：

$('.element').pluginName({param1: 'new value 1',param2: 'new value 2'
});

8.3.3 插件的作用域

在插件开发中，要注意作用域的问题。为了避免全局变量的污染，我们通常使用立即执行函数（IIFE）来包裹插件代码，就像上面基本结构中的 (function ($) {... })(jQuery);。

这样做的好处是，插件内部的变量和函数都被限制在这个函数的作用域内，不会影响到全局作用域。同时，通过传入 jQuery 作为参数，使用 $ 别名，也可以避免在其他库中 $ 冲突的问题。

在插件内部，使用 this 通常指向当前选中的 jQuery 对象。例如，在 return this.each(function () {... }); 中，this 指向每个选中的元素，通过 $(this) 可以将其转换为 jQuery 对象进行操作。

总之，合理处理作用域可以让插件更加健壮和可靠😃。

第九章 jQuery性能优化

9.1 选择器优化

9.1.1 避免使用复杂选择器

在 jQuery 中，选择器的使用频率非常高，而复杂的选择器会大大降低性能😣。

  • 复杂选择器的问题：复杂选择器通常包含多个层级、伪类、属性选择器等，jQuery 在解析这些选择器时需要进行大量的 DOM 遍历和匹配操作。例如，像 $('body div:nth-child(2) ul li[data-type="special"] a') 这样的选择器，jQuery 需要从 body 开始，一层一层地查找符合条件的元素，这个过程会消耗大量的时间和资源。
  • 优化建议：尽量使用简单的选择器，如 ID 选择器、类选择器等。ID 选择器是最快的，因为在 DOM 中 ID 是唯一的，jQuery 可以直接通过 ID 找到对应的元素。例如，$('#myElement') 就比上面的复杂选择器快很多👍。

9.1.2 缓存选择器结果

在代码中多次使用相同的选择器时，如果每次都重新进行选择操作，会造成不必要的性能开销。

  • 示例代码：
// 未缓存选择器结果
for (let i = 0; i < 10; i++) {$('div.myClass').hide(); // 每次都重新查找元素
}// 缓存选择器结果
const $myDivs = $('div.myClass');
for (let i = 0; i < 10; i++) {$myDivs.hide(); // 直接使用缓存的元素集合
}
  • 解释：在未缓存选择器结果的代码中，每次循环都要重新查找 div.myClass 元素；而在缓存选择器结果的代码中，只需要查找一次，然后将结果存储在变量 $myDivs 中，后续直接使用这个变量，避免了重复的查找操作，提高了性能🚀。

9.2 事件委托

9.2.2 事件委托的原理

事件委托是基于事件冒泡的原理实现的。事件冒泡是指当一个元素上的事件被触发时，这个事件会从该元素开始，依次向上级元素传播，直到到达文档根节点。

  • 示例场景：假设有一个 <ul> 列表，里面有很多 <li> 元素，我们希望为每个 <li> 元素添加点击事件。如果直接为每个 <li> 元素绑定事件，当列表元素很多时，会占用大量的内存。而使用事件委托，我们可以将事件绑定到 <ul> 元素上。当某个 <li> 元素被点击时，点击事件会冒泡到 <ul> 元素上，在 <ul> 元素的事件处理函数中，我们可以通过 event.target 属性来判断是哪个 <li> 元素触发了事件。
  • 示例代码：
<ul id="myList"><li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>
<script>$('#myList').on('click', 'li', function() {alert('You clicked on ' + $(this).text());});
</script>
  • 解释：在这个例子中，我们将点击事件绑定到了 <ul> 元素上，通过 on 方法的第二个参数指定了事件委托的目标元素为 <li>。当点击某个 <li> 元素时，事件会冒泡到 <ul> 元素上，触发绑定的事件处理函数，同时可以通过 $(this) 获取到实际触发事件的 <li> 元素😎。

9.2.2 事件委托的应用场景

事件委托在很多场景下都非常有用：

  • 动态添加元素：当页面中会动态添加新的元素时，如果使用传统的事件绑定方式，新添加的元素不会自动绑定事件。而使用事件委托，由于事件是绑定在父元素上的，新添加的元素只要符合委托的目标元素条件，就会自动具有相应的事件处理能力。例如，在一个评论列表中，用户可以随时添加新的评论，使用事件委托为评论的点赞、删除等操作绑定事件就非常方便👍。
  • 大量元素的事件处理：当页面中有大量的元素需要绑定相同的事件时，使用事件委托可以减少事件处理函数的数量，降低内存开销。比如一个包含上千个 <li> 元素的列表，为每个 <li> 元素绑定点击事件会占用大量内存，而将事件委托到父元素上就可以避免这个问题🚀。

9.3 动画优化

9.3.1 避免过多的动画效果

过多的动画效果会占用大量的 CPU 资源，导致页面性能下降，尤其是在移动设备上，用户体验会变得很差😣。

  • 优化建议：只在必要的时候使用动画效果，并且尽量简化动画的复杂度。例如，避免同时进行多个复杂的动画，如同时进行元素的移动、缩放和旋转等操作。可以选择只使用一些简单的淡入淡出、滑动等动画效果，这样既能达到一定的交互效果，又不会对性能造成太大的影响👍。

9.3.2 使用 CSS3 动画替代 jQuery 动画

CSS3 动画在性能上通常比 jQuery 动画更优越。

  • 性能优势：CSS3 动画是由浏览器的渲染引擎直接处理的，它可以利用硬件加速，从而提高动画的流畅度和性能。而 jQuery 动画是通过 JavaScript 不断修改元素的样式属性来实现的，会消耗更多的 CPU 资源。
  • 示例代码：
<style>.box {width: 100px;height: 100px;background-color: red;transition: width 1s;}.box:hover {width: 200px;}
</style>
<div class="box"></div>
  • 解释：在这个例子中，我们使用 CSS3 的 transition 属性实现了一个简单的宽度变化动画。当鼠标悬停在 .box 元素上时，元素的宽度会在 1 秒内从 100px 变为 200px。这种方式比使用 jQuery 的 animate 方法实现相同的动画效果性能更好🚀。

9.4 减少 DOM 操作

9.4.1 批量操作 DOM

频繁的 DOM 操作会导致浏览器频繁地进行重排和重绘，从而影响页面性能。

  • 示例代码：
// 非批量操作
for (let i = 0; i < 10; i++) {$('#myDiv').append('<p>Item ' + i + '</p>'); // 每次循环都进行一次 DOM 插入操作
}// 批量操作
let html = '';
for (let i = 0; i < 10; i++) {html += '<p>Item ' + i + '</p>';
}
$('#myDiv').append(html); // 一次性将所有 HTML 插入到 DOM 中
  • 解释：在非批量操作的代码中，每次循环都会进行一次 DOM 插入操作，这会导致浏览器多次进行重排和重绘。而在批量操作的代码中，我们先将所有要插入的 HTML 字符串拼接好，然后一次性插入到 DOM 中，这样只需要进行一次重排和重绘，大大提高了性能👍。

9.4.2 使用文档片段

文档片段（DocumentFragment）是一种轻量级的 DOM 对象，它可以在内存中创建和操作，不会引起页面的重排和重绘。

  • 示例代码：
const fragment = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {const p = document.createElement('p');p.textContent = 'Item ' + i;fragment.appendChild(p);
}
document.getElementById('myDiv').appendChild(fragment);
  • 解释：在这个例子中，我们先创建了一个文档片段 fragment，然后在循环中创建 <p> 元素并添加到文档片段中。由于文档片段是在内存中操作的，不会影响页面的渲染。最后，将文档片段一次性添加到 DOM 中，这样只需要进行一次重排和重绘，提高了性能🚀。

第十章 jQuery与其他技术的结合

10.1 jQuery与HTML5

10.1.1 利用HTML5新特性增强jQuery功能

1. 拖放API与jQuery

HTML5引入了拖放API，允许用户在网页上实现元素的拖放操作。借助jQuery，可以更方便地处理拖放事件。

  • 示例场景：在一个网页游戏中，玩家需要将一个物品图标从物品栏拖放到指定的使用区域。
  • 代码实现：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>HTML5 Drag and Drop with jQuery</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head><body><div id="item" draggable="true">物品图标</div><div id="target">使用区域</div><script>$(document).ready(function () {$('#item').on('dragstart', function (e) {e.originalEvent.dataTransfer.setData('text/plain', 'item');});$('#target').on('dragover', function (e) {e.preventDefault();});$('#target').on('drop', function (e) {e.preventDefault();alert('物品已放置到使用区域！');});});</script>
</body></html>

在这个例子中，通过jQuery监听dragstart、dragover和drop事件，实现了物品图标的拖放功能😎。

2. 本地存储与jQuery

HTML5的本地存储（localStorage和sessionStorage）可以在浏览器中存储数据，结合jQuery可以实现数据的动态存储和读取。

  • 示例场景：在一个购物网站中，用户选择的商品信息可以存储在本地，下次打开页面时可以直接显示。
  • 代码实现：
$(document).ready(function () {// 存储数据$('#saveButton').click(function () {var productName = $('#productName').val();localStorage.setItem('selectedProduct', productName);});// 读取数据var storedProduct = localStorage.getItem('selectedProduct');if (storedProduct) {$('#displayProduct').text('您上次选择的商品是：' + storedProduct);}
});

通过这种方式，利用HTML5的本地存储和jQuery的事件处理，实现了数据的持久化存储和展示🤗。

10.1.2 jQuery操作HTML5元素

1. 操作<video>和<audio>元素

HTML5引入了<video>和<audio>元素，用于在网页中嵌入视频和音频。jQuery可以方便地控制这些元素的播放、暂停等操作。

  • 示例代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>jQuery Control Video</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head><body><video id="myVideo" width="320" height="240" controls><source src="example.mp4" type="video/mp4">您的浏览器不支持视频播放。</video><button id="playButton">播放</button><button id="pauseButton">暂停</button><script>$(document).ready(function () {$('#playButton').click(function () {$('#myVideo')[0].play();});$('#pauseButton').click(function () {$('#myVideo')[0].pause();});});</script>
</body></html>

在这个例子中，通过jQuery选择<video>元素，并调用其原生的play()和pause()方法来控制视频的播放和暂停🎬。

2. 操作<canvas>元素

<canvas>元素是HTML5中用于绘制图形的元素，jQuery可以辅助操作<canvas>元素的属性和事件。

  • 示例代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>jQuery and Canvas</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head><body><canvas id="myCanvas" width="200" height="200"></canvas><button id="drawButton">绘制圆形</button><script>$(document).ready(function () {$('#drawButton').click(function () {var canvas = $('#myCanvas')[0];var ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(100, 100, 50, 0, 2 * Math.PI);ctx.stroke();});});</script>
</body></html>

这里通过jQuery监听按钮的点击事件，然后在<canvas>元素上绘制一个圆形🟢。

10.2 jQuery与CSS3

10.2.1 jQuery控制CSS3动画

1. 使用animate()方法结合CSS3过渡

jQuery的animate()方法可以与CSS3的过渡效果相结合，实现更复杂的动画。

  • 示例场景：一个元素在鼠标悬停时逐渐变大。
  • 代码实现：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>jQuery and CSS3 Animation</title><style>#box {width: 100px;height: 100px;background-color: blue;transition: all 0.5s;}</style><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head><body><div id="box"></div><script>$(document).ready(function () {$('#box').hover(function () {$(this).animate({width: '200px',height: '200px'}, 500);}, function () {$(this).animate({width: '100px',height: '100px'}, 500);});});</script>
</body></html>

在这个例子中，当鼠标悬停在#box元素上时，通过animate()方法改变元素的宽度和高度，同时利用CSS3的过渡效果实现平滑的动画🎊。

2. 动态添加和移除CSS3动画类

可以通过jQuery动态地为元素添加或移除CSS3动画类，从而控制动画的播放和停止。

  • 示例代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>jQuery and CSS3 Animation Class</title><style>#element {width: 100px;height: 100px;background-color: red;}.animate {animation: rotate 2s infinite;}@keyframes rotate {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}</style><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head><body><div id="element"></div><button id="startButton">开始动画</button><button id="stopButton">停止动画</button><script>$(document).ready(function () {$('#startButton').click(function () {$('#element').addClass('animate');});$('#stopButton').click(function () {$('#element').removeClass('animate');});});</script>
</body></html>

通过点击按钮，使用jQuery的addClass()和removeClass()方法来控制元素的CSS3动画，实现动画的开始和停止🚀。

10.2.2 CSS3选择器与jQuery选择器的配合

1. 利用CSS3属性选择器

CSS3的属性选择器可以与jQuery选择器结合使用，更精确地选择元素。

  • 示例场景：选择所有data-type属性为image的元素。
  • 代码实现：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>CSS3 and jQuery Selectors</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head><body><div data-type="image">图片1</div><div data-type="text">文本1</div><div data-type="image">图片2</div><script>$(document).ready(function () {$('div[data-type="image"]').css('color', 'blue');});</script>
</body></html>

在这个例子中，使用CSS3的属性选择器[data-type="image"]结合jQuery的选择器，将所有data-type属性为image的div元素的文字颜色设置为蓝色💙。

2. 结合CSS3伪类选择器

CSS3的伪类选择器（如:nth-child()、:first-child等）也可以与jQuery选择器配合使用。

  • 示例代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>CSS3 Pseudo-class and jQuery Selectors</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head><body><ul><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul><script>$(document).ready(function () {$('li:nth-child(2)').css('background-color', 'yellow');});</script>
</body></html>

这里使用CSS3的:nth-child(2)伪类选择器结合jQuery选择器，将列表中的第二个列表项的背景颜色设置为黄色💛。

10.3 jQuery与JavaScript原生代码

10.3.1 jQuery与原生JavaScript的交互

1. 从jQuery对象获取原生DOM元素

在jQuery对象中，可以通过[0]或.get(0)方法获取对应的原生DOM元素，然后使用原生JavaScript进行操作。

  • 示例代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>jQuery to DOM</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head><body><div id="myDiv">这是一个div元素</div><script>$(document).ready(function () {var $div = $('#myDiv');var divElement = $div[0];divElement.style.color = 'green';});</script>
</body></html>

在这个例子中，先使用jQuery选择器选择#myDiv元素，然后通过[0]方法获取其对应的原生DOM元素，最后使用原生JavaScript修改其文字颜色为绿色🟢。

2. 从原生DOM元素创建jQuery对象

如果有一个原生DOM元素，可以使用$(element)将其转换为jQuery对象，从而使用jQuery的方法。

  • 示例代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>DOM to jQuery</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head><body><div id="myDiv">这是一个div元素</div><script>var divElement = document.getElementById('myDiv');var $div = $(divElement);$div.hide();</script>
</body></html>

这里先使用原生JavaScript的getElementById()方法获取#myDiv元素，然后将其转换为jQuery对象，最后使用jQuery的hide()方法隐藏该元素🙈。

10.3.2 何时使用jQuery，何时使用原生JavaScript

1. 使用jQuery的场景
  • 简化DOM操作：当需要频繁操作DOM元素，如选择元素、修改属性、添加或删除元素等，jQuery提供了简洁的方法，减少了代码量。例如，选择所有p元素并修改其文本内容：
$('p').text('新的文本内容');
  • 事件处理：jQuery统一了不同浏览器的事件处理机制，使得事件绑定和处理更加方便。例如，为按钮添加点击事件：
$('#myButton').click(function () {alert('按钮被点击了！');
});
  • 动画效果：jQuery的动画方法可以快速实现各种动画效果，无需编写复杂的CSS3动画代码。例如，实现元素的淡入效果：
$('#myElement').fadeIn();
2. 使用原生JavaScript的场景
  • 性能要求高：在对性能要求极高的场景下，原生JavaScript的执行速度通常比jQuery快，因为它没有jQuery的封装开销。例如，在一个大型游戏中，需要频繁更新DOM元素的位置和状态，使用原生JavaScript可以提高性能。
  • 小型项目：对于一些简单的小型项目，使用原生JavaScript可以避免引入jQuery库的额外开销，使代码更加简洁。例如，一个简单的表单验证功能：
var input = document.getElementById('myInput');
if (input.value === '') {alert('输入不能为空！');
}
  • 兼容性要求低：如果项目只需要支持现代浏览器，且对兼容性没有严格要求，使用原生JavaScript可以充分利用现代浏览器的新特性，而无需依赖jQuery的兼容性处理。例如，使用ES6的箭头函数和模板字符串：
const message = '欢迎使用原生JavaScript！';
console.log(`消息内容：${message}`);

总之，在实际开发中，应根据项目的具体需求和场景，灵活选择使用jQuery或原生JavaScript😃。

http://www.xdnf.cn/news/699517.html

相关文章：

  • keepalived两台设备同时出现VIP问题
  • MySql--explain的用法
  • 【Linux网络篇】：简单的TCP网络程序编写以及相关内容的扩展
  • css样式块重复调用
  • 楼宇自控系统重塑建筑设备管理：告别低效，迈向智能管理时代
  • 华为OD机试真题——书籍叠放（2025A卷：200分）Java/python/JavaScript/C/C++/GO最佳实现
  • Linux系统之cal命令的基本使用
  • 国有企业采购方式及适用情形
  • Java集合进阶
  • C++补充基础小知识：什么是接口类 和 抽象类？为什么要继承？
  • 线程的生命周期？怎么终止线程？线程和线程池有什么区别？如何创建线程池？说一下 ThreadPoolExecutor 的参数含义？
  • yolov12毕设前置知识准备 1
  • Linux基本指令/上
  • Python常用模块实用指南
  • Python人工智能算法学习 禁忌搜索算法求解旅行商问题（TSP）的研究与实现
  • .net Winfrom 如何将窗口设置为MDI容器
  • QGIS新手教程2：线图层与多边形图层基础操作指南（点线互转、中心点提取与WKT导出）
  • Git：现代软件开发的基石——原理、实践与行业智慧·优雅草卓伊凡
  • go实例化结构体的方式
  • 【C/C++】设计模式之工厂模式：从简单到抽象的演进
  • 《接口和抽象类到底怎么选？设计原则与经典误区解析》
  • com.alibaba.fastjson.JSONException: default constructor not found.
  • 【25-cv-05887、25-cv-05893、25-cv-05897】一张图片连发3案！
  • 【Python实例】读取/处理 Landsat LST数据
  • Three.js引擎基础
  • HIS系统——药库管理模块功能解析
  • 【操作系统】内存管理知识点深度解析
  • 直播框架：基础知识点
  • 【基础题库回复四则】2022-1-26
  • git提交更改