jQuery 引入 HTML 页面
jQuery 是一个快速、简洁的 JavaScript 库，可以简化 HTML 文档的遍历、事件处理、动画效果以及 Ajax 操作。它使得在 HTML 页面中使用 JavaScript 变得更加简单和方便。
本文将介绍如何在 HTML 页面中引入 jQuery，并提供一些常见用法和示例代码。
引入 jQuery
要在 HTML 页面中使用 jQuery，首先需要将 jQuery 库文件引入到页面中。可以通过以下两种方式来实现：
-
下载 jQuery 库文件并在 HTML 页面中引入：
<script src="path/to/jquery.min.js"></script>在这种方式下，需要先从 jQuery 官网（ jQuery 库文件，并将文件放置在项目中的合适路径下，再通过
<script>标签引入。 -
使用 CDN（内容分发网络）引入 jQuery：
<script src="CDN 是一种允许用户通过网络来获取资源的技术，通过使用 CDN 引入 jQuery，可以减少服务器压力，并加速加载速度。上述代码使用了 jsDelivr 提供的公共 CDN。
上述两种方式中的任何一种都可以将 jQuery 引入到 HTML 页面中，根据实际情况选择适合自己的方式。
jQuery 基本用法
一旦成功引入了 jQuery，就可以开始使用它了。
选择元素
使用 jQuery，可以通过选择器来选择 HTML 文档中的元素。以下是一些常见的选择器和示例代码：
| 选择器 | 示例代码 | 说明 |
|---|---|---|
| 元素选择器 | $('p') |
选择所有 <p> 元素 |
| 类选择器 | $('.myClass') |
选择所有类名为 myClass 的元素 |
| ID 选择器 | $('#myId') |
选择 ID 为 myId 的元素 |
| 属性选择器 | $('[name="myName"]') |
选择属性名为 name 的元素 |
| 后代选择器 | $('div p') |
选择所有 <div> 内部的 <p> 元素 |
| 子元素选择器 | $('div > p') |
选择所有 <div> 的直接子级 <p> 元素 |
| 过滤选择器 | $('p:first-child') |
选择所有 <p> 的第一个子元素 |
操作元素
一旦选择了元素，就可以对其执行各种操作，例如修改样式、添加/删除元素等。
以下是一些常见的操作元素的示例代码：
-
修改元素的 CSS 样式：
$('p').css('color', 'red');以上代码将选择所有
<p>元素，并修改它们的字体颜色为红色。 -
添加元素：
$('body').append('<p>Hello World</p>');以上代码将在
<body>元素的末尾添加一个新的<p>元素。 -
删除元素：
$('p').remove();以上代码将删除所有
<p>元素。
事件处理
jQuery 提供了丰富的事件处理方法，可以方便地对元素的交互行为进行处理。
以下是一个简单的点击事件处理的示例代码：
$('button').click(function() {
alert('Button clicked!');
});
以上代码将为所有 <button> 元素添加一个点击事件处理函数，当按钮被点击时，会弹出一个警告框显示 "Button clicked!"。
除了 click 事件外，jQuery 还支持许多其他事件，例如 mouseover、keydown、submit 等。
总结
本文介绍了如何在 HTML 页面中引入 jQuery，并提供了一些常见的用法和示例代码。通过选择元素、操作元素和处理事件，可以充分利用 jQuery 提供的强大功能，使得 JavaScript 编程更加高效和便捷。
通过上述示例代码，相信读者对于如何
