使用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秒完成动画

注意事项

1. 避免冲突：如果其他库也使用 $，可通过 jQuery.noConflict() 释放 $ 的控制权。
2. 文档就绪事件：确保 DOM 加载完成后再执行脚本：

   $(document).ready(function() {
   // 代码在这里执行
   });

3. 性能优化：缓存重复选择的元素，例如：

   var $element = $("#element");
   $element.hide();
   $element.show();