jquery的方法

jQuery 是一个快速、简洁的 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是 jQuery 常用方法的分类和示例：

选择器方法

$() 或 jQuery() 是核心方法，用于选择 DOM 元素。
示例：

$("#id") // 通过 ID 选择
$(".class") // 通过类选择
$("div") // 通过标签名选择

DOM 操作

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

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

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

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

val() 获取或设置表单元素的值。

$("input").val(); // 获取
$("input").val("New value"); // 设置

事件处理

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

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

click() 绑定点击事件。

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

CSS 和样式

css() 获取或设置 CSS 属性。

$("#element").css("color"); // 获取
$("#element").css("color", "red"); // 设置

addClass() 添加类。

$("#element").addClass("active");

removeClass() 移除类。

$("#element").removeClass("active");

动画效果

hide() 隐藏元素。

$("#element").hide();

show() 显示元素。

$("#element").show();

fadeIn() 淡入效果。

$("#element").fadeIn();

fadeOut() 淡出效果。

$("#element").fadeOut();

Ajax

$.ajax() 发送异步 HTTP 请求。

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

$.get() 发送 GET 请求。

$.get("example.com/api", function(data) {
  console.log(data);
});

$.post() 发送 POST 请求。

$.post("example.com/api", { key: "value" }, function(data) {
  console.log(data);
});

遍历和过滤

each() 遍历元素集合。

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

find() 查找子元素。

$("#parent").find(".child");

链式调用

jQuery 支持链式调用，可以在一个语句中执行多个操作。

$("#element")
  .css("color", "red")
  .addClass("active")
  .fadeOut();

这些方法覆盖了 jQuery 的核心功能，适用于大多数 Web 开发场景。