jQuery：高效JavaScript库，简化DOM操作与跨浏览器兼容

$("div.item").css({
  "background-color": "#f5f5f5",
  "border": "1px solid #ddd"
}).find("span").addClass("highlight");

// 基本事件绑定
$("button").on("click", function() {
  alert("按钮被点击");
});

// 事件委托（高效处理动态生成元素）
$("ul").on("click", "li", function() {
  $(this).toggleClass("active");
});

// 事件触发
$("form").trigger("submit");

// 基础动画
$("#box").slideDown(300).delay(1000).fadeOut();

// 自定义动画
$(".progress").animate({
  width: "75%"
}, 1500, "easeInOutQuad", function() {
  $(this).text("75% 完成");
});

// 简单GET请求
$.get("api/data.json", function(data) {
  console.log("获取数据成功", data);
}).fail(function(error) {
  console.error("请求失败", error);
});

// 复杂AJAX配置
$.ajax({
  url: "api/users",
  method: "POST",
  data: JSON.stringify({name: "John", age: 30}),
  contentType: "application/json",
  timeout: 5000,
  success: function(response) {
    alert("用户创建成功");
  }
});

## npm
npm install jquery --save

## yarn
yarn add jquery

<!-- 官方CDN -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- 国内CDN -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

## 克隆仓库
git clone https://github.com/jquery/jquery.git
cd jquery

## 安装依赖
npm install

## 构建仅含核心和DOM模块的自定义版本
npm run build -- --exclude=ajax --exclude=effects --filename=jquery-custom.js

// 方式1：传统方式
$(document).ready(function() {
  console.log("页面DOM已加载完成");
});

// 方式2：简洁写法
$(function() {
  // 选择所有p元素并添加类
  $("p").addClass("text-content");
  
  // 为按钮绑定点击事件
  $("button#submit").on("click", function() {
    $("form").submit();
  });
});

<div class="table-container"></div>

<script>
$(function() {
  // 显示加载状态
  $(".table-container").html("<div class='loading'>加载中...</div>");
  
  // 从API获取数据
  $.getJSON("https://api.example.com/users")
    .done(function(data) {
      // 创建表格
      let table = $("<table>").addClass("data-table");
      
      // 创建表头
      let thead = $("<thead>").appendTo(table);
      $("<tr>").append(
        $("<th>").text("ID"),
        $("<th>").text("姓名"),
        $("<th>").text("邮箱")
      ).appendTo(thead);
      
      // 创建表体
      let tbody = $("<tbody>").appendTo(table);
      $.each(data.users, function(index, user) {
        $("<tr>").append(
          $("<td>").text(user.id),
          $("<td>").text(user.name),
          $("<td>").append(
            $("<a>").attr("href", "mailto:" + user.email).text(user.email)
          )
        ).appendTo(tbody);
      });
      
      // 替换加载状态为表格
      $(".table-container").html(table);
      
      // 添加表格动画效果
      table.hide().fadeIn(500);
    })
    .fail(function() {
      $(".table-container").html("<div class='error'>加载数据失败</div>");
    });
});
</script>

// 定义插件
$.fn.highlight = function(options) {
  // 默认配置
  const settings = $.extend({
    color: "yellow",
    duration: 1000
  }, options);
  
  // 遍历匹配元素
  return this.each(function() {
    const $element = $(this);
    // 保存原始背景色
    const originalColor = $element.css("background-color");
    
    // 应用高亮动画
    $element.animate({backgroundColor: settings.color}, settings.duration / 2)
            .animate({backgroundColor: originalColor}, settings.duration / 2);
  });
};

// 使用插件
$("p.important").highlight({color: "#ffeb3b", duration: 1500});

// 不推荐：多次DOM修改
$("ul").append("<li>Item 1</li>");
$("ul").append("<li>Item 2</li>");
$("ul").append("<li>Item 3</li>");

// 推荐：一次DOM修改
const items = ["Item 1", "Item 2", "Item 3"];
const listItems = items.map(item => `<li>${item}</li>`).join("");
$("ul").append(listItems);

// 不推荐：直接绑定（动态元素无效）
$("li.item").on("click", function() { ... });

// 推荐：事件委托（动态元素有效且性能更好）
$("ul").on("click", "li.item", function() { ... });

// 不推荐：多次选择同一元素
$("div.content").find("p").text("Hello");
$("div.content").css("color", "black");
$("div.content").addClass("active");

// 推荐：缓存对象
const $content = $("div.content");
$content.find("p").text("Hello");
$content.css("color", "black");
$content.addClass("active");