怎么使用jquery
引入 jQuery 库
在 HTML 文件中通过 <script> 标签引入 jQuery 库。可以从 CDN 获取最新版本：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>基本语法
jQuery 的核心是通过 $ 或 jQuery 函数选择 DOM 元素并操作它们。基本语法为：
$(selector).action()selector：用于选择 HTML 元素的字符串，类似于 CSS 选择器。action()：对选中元素执行的操作方法。
选择元素
通过选择器获取 DOM 元素：
// 选择所有 <p> 元素
$("p")
// 选择 class 为 "example" 的元素
$(".example")
// 选择 id 为 "demo" 的元素
$("#demo")事件处理
绑定事件监听器：
// 点击事件
$("#btn").click(function() {
alert("按钮被点击");
});
// 鼠标悬停事件
$(".item").hover(
function() { $(this).css("background", "yellow"); }, // 鼠标进入
function() { $(this).css("background", "white"); } // 鼠标离开
);修改内容和样式
动态修改元素内容和样式：
// 修改文本内容
$("#text").text("新内容");
// 修改 HTML 内容
$("#html").html("<strong>加粗文本</strong>");
// 修改 CSS
$("#box").css("color", "red");
// 添加类
$("#box").addClass("highlight");
// 移除类
$("#box").removeClass("highlight");动画效果
内置动画方法：
// 隐藏元素
$("#box").hide();
// 显示元素
$("#box").show();
// 淡入淡出
$("#box").fadeIn();
$("#box").fadeOut();
// 滑动效果
$("#box").slideUp();
$("#box").slideDown();AJAX 请求
发送异步 HTTP 请求：
$.ajax({
url: "https://api.example.com/data",
method: "GET",
success: function(response) {
console.log("请求成功", response);
},
error: function(error) {
console.log("请求失败", error);
}
});DOM 操作
动态添加或移除元素：
// 在元素末尾添加内容
$("#list").append("<li>新项目</li>");
// 在元素开头添加内容
$("#list").prepend("<li>第一项</li>");
// 移除元素
$("#item").remove();遍历元素
对选中的元素集合进行遍历：
$("li").each(function(index) {
console.log(index + ": " + $(this).text());
});链式调用
jQuery 支持链式调用，可以连续执行多个操作：
$("#box")
.css("color", "blue")
.slideUp(1000)
.slideDown(1000);
