jQuery 核心功能与应用详解
jQuery 概述
jQuery 是一个轻量级、功能丰富的 JavaScript 库，旨在简化 HTML 文档遍历、事件处理、动画和 Ajax 交互。其核心理念是"写得更少，做得更多"（Write Less, Do More），极大提升了前端开发效率。
引入方式
可通过 CDN 引入最新版本：
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
也可下载到本地项目中，使用相对路径导入。
基本语法
jQuery 使用 $() 函数作为入口，它是 jQuery() 的简写形式，用于选择 DOM 元素并执行操作。
选择器系统
基础选择器
$('p')：选取所有 p 标签$('#myId')：通过 ID 选择元素$('.myClass')：通过类名选择元素$('div, .myClass, #myId')：组合多个选择器$('p#myId')：结合标签与 ID 精确匹配
层级选择器
$('a b')：后代选择器，选 a 内所有 b$('a > b')：子代选择器，仅直接子元素$('a + b')：相邻兄弟，紧接在 a 后的 b$('a ~ b')：通用兄弟，a 之后的所有同级 b
过滤器表达式
在选中元素集合上进一步筛选：
:first / :last：首/末元素:even / :odd：索引为偶数或奇数的元素（从0开始）:eq(n)：第 n 个元素:gt(n) / :lt(n)：索引大于/小于 n 的元素:not(selector)：排除符合 selector 的元素:has(selector)：包含指定子元素的元素
属性选择器
根据元素属性进行匹配：
$('[href]')：含有 href 属性的元素$('[href="#"]')：href 值等于 "#" 的元素$('[href*="site"]')：href 包含 "site" 的元素$('[href^="https"]')：href 以 "https" 开头$('[href$=".pdf"]')：href 以 ".pdf" 结尾$('[src^="img/"][src$=".jpg"]')：同时满足多个条件
表单相关选择器
专门用于选取表单控件：
$(':text')：文本输入框（等价于input[type="text"]）$(':password')：密码框$(':checked')：选中的复选框、单选框或下拉选项$(':selected')：仅选中的下拉项（<option>）$(':input')：所有表单控件（input, select, textarea, button）
DOM 遍历方法
在已选元素基础上查找关联节点：
- 兄弟节点：
.next(),.prev(),.siblings() - 祖先节点：
.parent(),.parents(),.closest() - 后代节点：
.children(),.find() - 范围限定：
.nextUntil(),.prevUntil(),.parentsUntil()
元素操作
类名控制
| jQuery 方法 | 原生等效 |
|---|---|
.addClass('active') |
element.classList.add('active') |
.removeClass('hidden') |
element.classList.remove('hidden') |
.toggleClass('visible') |
element.classList.toggle('visible') |
.hasClass('error') |
element.classList.contains('error') |
样式设置
.css() 可获取或设置 CSS 属性：
// 设置单个样式
$('p').css('color', 'red');
// 批量设置
$('p').css({
'font-size': '16px',
'background': '#eee'
});
// 获取样式值
let color = $('p').css('color');
内容与值操作
.text()：读写纯文本内容（类似 innerText）.html()：读写 HTML 字符串（类似 innerHTML）.val()：获取或设置表单字段的值
属性管理
区分 attr() 与 prop()：
.attr()：操作 HTML 特性（如title,src）.prop()：操作 DOM 属性状态，尤其适用于布尔属性（如checked,disabled,selected）
例如，动态控制复选框应使用 .prop('checked', true) 而非 .attr()。
节点插入与删除
.append(content)：内部末尾添加.prepend(content)：内部开头添加.after(content)：外部后面插入.before(content)：外部前面插入.remove()：移除自身及子元素.empty()：清空子元素
事件处理机制
绑定方式
推荐使用 .on() 方法：
$('#btn').on('click', function() {
console.log('按钮被点击');
});
支持快捷方式如 .click()、.change()，但不适用于动态元素。
事件委托
解决动态元素事件绑定问题：
$('body').on('click', '.dynamic-btn', function() {
alert('动态按钮被点击');
});
将事件绑定到稳定父容器（如 body），通过第二个参数指定实际触发目标的选择器。
事件控制
- 阻止默认行为：
return false;— 同时阻止默认和冒泡event.preventDefault();— 仅阻止默认行为
- 阻止冒泡：
return false;event.stopPropagation();
动画效果
.show(1000)/.hide(1000)：渐显/渐隐.fadeIn()/.fadeOut()：淡入淡出.slideDown()/.slideUp()：滑动展开/收起.animate({ opacity: 0.5, left: '+=50' }, 800)：自定义动画
对象类型转换
jQuery 对象本质是封装了 DOM 元素的伪数组。
- jQuery → DOM：
$('#elem')[0]或$('#elem').get(0) - DOM → jQuery：
$(document.getElementById('elem'))
注意：原生 DOM 方法（如 onclick）不能直接在 jQuery 对象上调用，需先转换。
典型应用场景
监听输入框实时变化：
$('#searchInput').on('input', function() {
console.log('当前输入:', $(this).val());
});
该事件在每次输入内容变更时触发，适合实现搜索建议等功能。
