jQuery 核心技术指南：选择器、事件处理与 DOM 交互实践
jQuery 库概述
jQuery 是一个快速、简洁的 JavaScript 库，其核心设计理念是"写的更少，做的更多"（Write Less, Do More）。它封装了大量的 JavaScript 函数，简化了 HTML 文档遍历、事件处理、动画设计以及 Ajax 交互。
引入方式
在项目中使用 jQuery 通常有两种主流方案：
- 本地引用：从官网下载
jquery.js。生产环境建议使用 Production version（经过压缩，体积更小）；开发调试阶段建议使用 Development version（代码可读性好）。 - CDN 引用：通过内容分发网络（Content Delivery Network）直接加载远程服务器上的资源。这种方式可以利用缓存加速页面加载速度。
<!-- 示例：通过 HTML 标签引入本地库 -->
<script src="js/vendor/jquery-3.6.0.min.js"></script>
基础语法与快速上手
jQuery 的基本语法架构为：$(selector).action()。其中 $ 是 jQuery 的别名，selector 用于定位 HTML 元素，action() 则是对选中的元素执行的操作。
<button id="btn_toggle">交互测试</button>
<p class="content_box">初始文本内容</p>
<script>
// 当点击按钮时，改变段落文本
$('#btn_toggle').on('click', function() {
$('.content_box').text('内容已被 jQuery 更新！');
});
</script>
选择器对比
相比于原生 JavaScript，jQuery 提供了更为强大且简洁的选择器系统，它几乎支持所有的 CSS 选择器语法。
// 原生 JavaScript 选择方式
document.getElementById('header');
document.getElementsByClassName('nav_item');
document.querySelectorAll('div > p');
// jQuery 选择方式
$('#header'); // ID 选择器
$('.nav_item'); // 类选择器
$('div > p'); // 层级选择器
$('ul li:first-child'); // 伪类选择器
事件驱动机制
jQuery 简化了事件绑定的逻辑。为了确保 DOM 元素在操作前已完全加载，通常将代码包裹在文档就绪事件中。
<div id="canvas_area" style="width:300px; height:200px; border:2px dashed #333;">
请在此区域移动鼠标
</div>
<p>当前位置：<span id="coord_info">等待检测...</span></p>
<script>
// 简写版文档就绪函数
$(function() {
const $display = $('#coord_info');
$('#canvas_area').mousemove(function(event) {
let posX = event.pageX;
let posY = event.pageY;
$display.html('<strong>X: </strong>' + posX + ' | <strong>Y: </strong>' + posY);
});
});
</script>
DOM 元素操作
jQuery 提供了直观的方法来读写元素的内容、属性和样式。
1. 内容读写
// 获取与设置纯文本
let textVal = $('#title').text();
$('#title').text('新标题');
// 获取与设置 HTML 结构
let htmlMarkup = $('.container').html();
$('.container').html('<span class="highlight">高亮内容</span>');
2. CSS 样式控制
// 动态修改样式
$('.info_card').css({
"background-color": "#f0f0f0",
"border-radius": "5px",
"padding": "10px"
});
// 快速显示与隐藏（本质是操作 display 属性）
$('#secret_panel').hide(); // 隐藏
$('#secret_panel').show(); // 显示
脚本执行顺序说明
在使用 jQuery 编写业务逻辑时，必须严格遵守脚本的加载顺序：
1. 首先加载 jQuery 核心库文件。
2. 其次加载 依赖于 jQuery 的插件或自定义脚本。
由于 JavaScript 是解释型语言，按顺序执行，如果在 jQuery 库加载完成前调用 $ 符号，浏览器会抛出 ReferenceError: $ is not defined 的错误。
