jquery使用

jQuery 基础用法

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

引入 jQuery 在 HTML 文件中通过 CDN 引入 jQuery：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

选择器 jQuery 使用 CSS 选择器语法选取 DOM 元素：

$("#id")      // ID 选择器
$(".class")   // 类选择器
$("div")      // 标签选择器
$("div.class") // 组合选择器

DOM 操作 常见 DOM 操作方法：

$("p").text("新内容")       // 设置文本
$("p").html("<b>加粗</b>") // 设置 HTML
$("input").val("值")       // 设置表单值
$("div").append("<p>追加</p>") // 追加内容

事件处理

jQuery 简化了事件绑定：

$("button").click(function() {
  alert("按钮被点击");
});

$("input").on("change", function() {
  console.log($(this).val());
});

Ajax 请求

jQuery 提供了简洁的 Ajax 方法：

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

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

动画效果

内置动画方法：

$("div").hide(1000);           // 隐藏元素
$("div").show(1000);           // 显示元素
$("div").fadeIn(500);          // 淡入
$("div").animate({
  opacity: 0.5,
  left: "+=50"
}, 1000);                      // 自定义动画

链式调用

jQuery 支持链式调用：

$("div")
  .css("color", "red")
  .slideUp(200)
  .slideDown(200);

实用工具方法

常用工具函数：

$.trim(" 字符串 ")     // 去除空格
$.isArray(obj)         // 检查是否为数组
$.each(array, function(index, value) {
  console.log(index, value);
});

插件扩展

jQuery 支持通过插件扩展功能：

$.fn.myPlugin = function() {
  this.css("color", "blue");
};
$("p").myPlugin();

以上是 jQuery 的核心功能概览，更多高级用法可参考官方文档。注意现代前端开发中，原生 JavaScript 和框架（如 React、Vue）已逐渐取代 jQuery，但在维护旧项目时仍可能用到。