jquery 菜鸟

jQuery 入门基础

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

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

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

基本语法
jQuery 使用 $ 符号作为简写，语法结构为 $(selector).action()：

$(document).ready(function() {
  // 文档加载完成后执行代码
  $("button").click(function() {
    $("p").hide(); // 隐藏所有 <p> 元素
  });
});

常用方法

选择器
jQuery 使用 CSS 选择器选取元素：

$("#id")      // 通过 ID 选择
$(".class")   // 通过类选择
$("p")        // 选择所有 <p> 元素
$("ul li")    // 选择嵌套的 <li> 元素

事件处理
常见事件包括 click、mouseenter、keypress 等：

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

DOM 操作
修改元素内容或属性：

$("#demo").text("新文本");    // 修改文本内容
$("#demo").html("<b>加粗文本</b>"); // 修改 HTML 内容
$("img").attr("src", "new-image.jpg"); // 修改属性

动画效果

显示与隐藏

$("#box").hide();     // 隐藏元素
$("#box").show();     // 显示元素
$("#box").toggle();   // 切换显示/隐藏状态

淡入淡出

$("#box").fadeIn();   // 淡入
$("#box").fadeOut();  // 淡出
$("#box").fadeToggle(); // 切换淡入/淡出

Ajax 请求

加载远程数据
使用 $.ajax() 或简写方法（如 $.get()）：

$.get("url", function(data) {
  $("#result").html(data); // 将返回数据插入元素
});

$.post("url", { name: "John" }, function(data) {
  console.log(data); // 处理 POST 请求的响应
});

链式调用

jQuery 支持链式调用，允许多个方法串联执行：

$("#box")
  .css("color", "red")
  .slideUp(1000)
  .slideDown(1000);

插件扩展

jQuery 支持通过插件扩展功能，例如表单验证插件 jQuery Validation：

<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>

以上是 jQuery 的基础使用方法，适合初学者快速上手。如需深入学习，可参考官方文档或相关教程。