jquery方法

jQuery 方法概述

jQuery 是一个快速、简洁的 JavaScript 库，提供了简化 DOM 操作、事件处理、动画和 Ajax 交互的方法。以下是一些常用的 jQuery 方法分类及示例：

DOM 操作

• 选择元素
  $("selector") 通过 CSS 选择器获取元素，例如 $("#id") 或 $(".class")。

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

  $("#div").html("<p>New content</p>");

  text() 获取或设置纯文本内容：

  $("#div").text("Hello World");

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

  $("img").attr("src", "new-image.jpg");

  removeAttr() 删除属性：

  $("img").removeAttr("alt");

事件处理

• 绑定事件
  on() 绑定事件监听器：

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

• 简写方法
  click()、hover() 等：

  $("#btn").click(function() {
    console.log("Click event");
  });

• 解绑事件
  off() 移除事件监听器：

  $("#btn").off("click");

动画效果

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

  $("#box").hide(500); // 500ms 动画

• 淡入淡出
  fadeIn() 和 fadeOut()：

  $("#box").fadeIn(1000);

• 自定义动画
  animate() 实现自定义动画：

  $("#box").animate({ left: "+=50px", opacity: 0.5 }, 1000);

Ajax 请求

• GET/POST 请求
  $.get() 和 $.post() 发送异步请求：

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

• 完整 Ajax 方法
  $.ajax() 提供更多配置选项：

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

工具方法

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

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

• 扩展对象
  $.extend() 合并对象：

  let obj = $.extend({}, {a: 1}, {b: 2});

链式调用

jQuery 支持链式调用，多个方法可连续执行：

$("#div")
  .css("color", "red")
  .addClass("highlight")
  .fadeOut(500);

通过组合这些方法，可以高效实现复杂的交互逻辑。