做营销网站建设_个人网页生成_深圳网站优化哪家好_怎样申请网站

一、引言：为什么需要 jQuery？

在前端开发的漫长历史中，jQuery 曾是当之无愧的“瑞士军刀”。它诞生于 2006 年，由 John Resig 创造，核心目标是“write less, do more”——通过封装复杂的原生 JavaScript 操作，让开发者用简洁的语法完成 DOM 操作、事件处理、动画效果和 AJAX 交互。尽管现代前端框架（如 Vue、React、Angular）蓬勃发展，但 jQuery 仍在兼容性处理、快速原型开发和旧项目维护中占据重要地位。本文将从基础语法到高级特性，带您全面掌握这门经典工具库。

二、快速入门：jQuery 基础语法与核心概念

1. 引入 jQuery

首先，在 HTML 中引入 jQuery 库（以 3.6.0 版本为例）：

<!-- 本地引入 -->
<script src="jquery-3.6.0.min.js"></script>
<!-- 或通过 CDN -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. 核心函数：$() 与 jQuery 对象

• 选择器引擎：$(selector) 是 jQuery 的入口，支持 CSS 选择器、原生 DOM 元素、HTML 字符串等。

  // 选择所有 <div> 元素
  var divs = $("div");
  // 通过 ID 选择
  var container = $("#container");
  // 选择类名为 "box" 的元素
  var boxes = $(".box");
  // 选择属性为 type="button" 的元素
  var btn = $("button[type='button']");
  

• jQuery 对象 vs 原生 DOM 对象：$(selector) 返回的是 jQuery 对象，包含一套专属方法（如 click()、append()），可通过 [index] 或 get(index) 转换为原生对象。

3. DOM 操作：增删改查全掌握

内容操作

// 获取文本内容（包括子元素文本）
$("#title").text(); 
// 设置文本内容
$("#title").text("新标题"); 
// 获取 HTML 内容（包括子元素）
$("#content").html(); 
// 设置 HTML 内容
$("#content").html("<p>新内容</p>"); 
// 获取/设置属性
$("a").attr("href"); 
$("a").attr("href", "https://example.com"); 
// 移除属性
$("a").removeAttr("target"); 

元素操作

// 内部插入：在匹配元素内部末尾添加
$("#list").append("<li>新列表项</li>"); 
// 外部插入：在匹配元素之后添加
$("#list").after("<div>新分区</div>"); 
// 删除元素
$(".old-item").remove(