jquery 函数

jQuery 是一个快速、简洁的 JavaScript 库，提供了丰富的函数（方法）来简化 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是 jQuery 中常用的函数分类及示例：

DOM 操作函数

• $() 或 jQuery()：核心函数，用于选择元素或创建 DOM 对象。

  // 选择所有 <p> 元素
  $("p").css("color", "red");

• .html()：获取或设置元素的 HTML 内容。

  // 获取 div 内容
  var content = $("#myDiv").html();
  // 设置 div 内容
  $("#myDiv").html("<p>New content</p>");

• .text()：获取或设置元素的文本内容。

  // 获取段落文本
  var text = $("p").text();
  // 设置段落文本
  $("p").text("Updated text");

事件处理函数

• .on()：绑定事件处理程序。

  // 点击事件
  $("#btn").on("click", function() {
    alert("Button clicked");
  });

• .click()：绑定或触发点击事件。

  

  // 绑定点击事件
  $("#btn").click(function() {
    console.log("Clicked");
  });

动画效果函数

• .animate()：自定义动画效果。

  // 移动元素
  $("#box").animate({ left: "250px" }, 1000);

• .fadeIn() / .fadeOut()：淡入淡出效果。

  // 淡入
  $("#box").fadeIn(500);
  // 淡出
  $("#box").fadeOut(500);

Ajax 相关函数

• $.ajax()：执行异步 HTTP 请求。

  

  $.ajax({
    url: "data.json",
    method: "GET",
    success: function(data) {
      console.log(data);
    }
  });

• $.get() / $.post()：简化 GET/POST 请求。

  // GET 请求
  $.get("data.json", function(data) {
    console.log(data);
  });

工具函数

• $.each()：遍历数组或对象。

  $.each([1, 2, 3], function(index, value) {
    console.log(index + ": " + value);
  });

• $.extend()：合并对象。

  var obj1 = { a: 1 };
  var obj2 = { b: 2 };
  var merged = $.extend(obj1, obj2);
  console.log(merged); // { a: 1, b: 2 }

实用示例

// 动态加载内容并绑定事件
$(document).ready(function() {
  $("#loadBtn").click(function() {
    $.get("content.html", function(data) {
      $("#container").html(data);
    });
  });
});

jQuery 的函数设计注重链式调用，例如：

$("p")
  .css("color", "blue")
  .slideUp(200)
  .slideDown(200);

注意：现代开发中，原生 JavaScript（ES6+）和框架（如 React、Vue）逐渐替代 jQuery，但 jQuery 仍广泛用于旧项目或简单场景。