jquery 方法

jQuery 方法概述

jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互等操作。以下是 jQuery 的核心方法分类及常见用法。

DOM 操作

• 选择器
  $("selector") 是 jQuery 的核心选择器方法，支持 CSS 选择器语法：

  $("div")           // 选择所有 div 元素
  $(".class-name")   // 选择类名为 class-name 的元素
  $("#id-name")      // 选择 ID 为 id-name 的元素

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

  $("#element").html()       // 获取内容
  $("#element").html("<p>New content</p>")  // 设置内容

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

  $("#element").text()       // 获取文本
  $("#element").text("New text")  // 设置文本

• 属性操作
  attr() 获取或设置元素属性：

  $("#img").attr("src")               // 获取 src 属性
  $("#img").attr("src", "new.jpg")    // 设置 src 属性

事件处理

• 绑定事件
  on() 方法用于绑定事件：

  $("#button").on("click", function() {
    alert("Button clicked");
  });

• 快捷方法
  常见事件有快捷方法，如 click()、hover()：

  $("#button").click(function() {
    console.log("Clicked");
  });

动画效果

• 显示/隐藏
  show() 和 hide() 控制元素的显示与隐藏：

  

  $("#box").hide(1000);   // 1 秒内隐藏
  $("#box").show(500);    // 0.5 秒内显示

• 淡入淡出
  fadeIn() 和 fadeOut() 实现淡入淡出效果：

  $("#box").fadeOut(800);   // 0.8 秒淡出
  $("#box").fadeIn(400);    // 0.4 秒淡入

Ajax 请求

• GET 请求
  $.get() 发送 GET 请求：

  $.get("url", function(data) {
    console.log(data);
  });

• POST 请求
  $.post() 发送 POST 请求：

  $.post("url", { key: "value" }, function(data) {
    console.log(data);
  });

• 通用 Ajax
  $.ajax() 提供更灵活的配置：

  $.ajax({
    url: "url",
    type: "POST",
    data: { name: "John" },
    success: function(response) {
      console.log(response);
    }
  });

遍历与过滤

• 遍历元素
  each() 遍历匹配的元素：

  

  $("li").each(function(index) {
    console.log(index + ": " + $(this).text());
  });

• 过滤元素
  filter() 按条件过滤元素：

  $("li").filter(".active").css("color", "red");

实用工具方法

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

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

• 类型检测
  $.type() 检测变量类型：

  $.type("hello")   // 返回 "string"

注意事项

• jQuery 需在页面加载完成后执行代码，通常使用 $(document).ready()：

  $(document).ready(function() {
    // jQuery 代码
  });

• 简写形式 $(function() { ... }) 与 $(document).ready() 等效。

以上是 jQuery 的核心方法，更多细节可参考 jQuery 官方文档。