使用jquery
引入 jQuery 库
在 HTML 文件中通过 <script> 标签引入 jQuery 库。可以从 CDN（如 Google 或 jQuery 官方）加载：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>确保在编写 jQuery 代码之前引入库文件。
基础语法
jQuery 的核心是通过 $() 或 jQuery() 函数选择 DOM 元素并操作。语法示例：
$(selector).action();selector：CSS 选择器（如#id、.class或tag）。action()：对选中元素执行的方法（如hide()、click()）。
常用方法
DOM 操作
// 获取或设置内容
$("#element").text("Hello"); // 设置文本
$("#element").html("<b>Hello</b>"); // 设置 HTML
// 修改属性
$("#image").attr("src", "new-image.jpg");
// 添加/移除类
$("#box").addClass("active");
$("#box").removeClass("inactive");事件处理
$("#button").click(function() {
alert("Button clicked");
});
// 表单提交事件
$("form").submit(function(e) {
e.preventDefault(); // 阻止默认提交
console.log("Form submitted");
});AJAX 请求
$.ajax({
url: "api/data",
method: "GET",
success: function(response) {
console.log("Data received:", response);
},
error: function(xhr, status, error) {
console.error("Error:", error);
}
});动态元素操作
遍历元素
$("li").each(function(index) {
console.log(index + ": " + $(this).text());
});创建与插入元素
// 创建新元素
var newDiv = $("<div>", { class: "new", text: "Dynamic div" });
// 插入到 DOM 中
$("#container").append(newDiv); // 末尾插入
$("#container").prepend(newDiv); // 开头插入动画效果
显示/隐藏
$("#box").hide(500); // 500ms 隐藏动画
$("#box").show("slow"); // 慢速显示
$("#box").toggle(); // 切换状态自定义动画
$("#box").animate({
opacity: 0.5,
left: "+=50px"
}, 1000); // 1秒完成动画注意事项
- 避免冲突：如果其他库也使用
$，可通过jQuery.noConflict()释放$的控制权。 - 文档就绪事件：确保 DOM 加载完成后再执行脚本：
$(document).ready(function() { // 代码在这里执行 }); - 性能优化：缓存重复选择的元素，例如：
var $element = $("#element"); $element.hide(); $element.show();
