然前端框架百花齐放（React、Vue、Svelte 等），但 jQuery 依然是许多项目中不可或缺的一部分，特别是企业级后台系统中仍有大量 jQuery 代码维护需求；插件开发、快速原型和低代码平台仍依赖 jQuery；学习 jQuery 有助于理解 DOM 操作、事件机制、链式调用等原理。
今天这篇内容，我整理了50个最常用的 jQuery 技巧，结合最新技术趋势与实战案例，帮助你提高效率，快速掌握jQuery。
一、基础选择器
01、选择第一个元素
:first是 jQuery 的伪类选择器，用于获取某集合中的第一个元素。
$('ul li:first').addClass('active');02、选中最后一个元素
:last选择器用于选中父容器中的最后一个指定类型的子元素。
$('ul li:last').css('color', 'red');03、选择偶数
:even表示索引为 0、2、4... 的元素，适合用于列表样式交替。
$('ul li:even').css('background', '#ccc');04、选择奇数
:odd表示索引为 1、3、5... 的元素，jQuery 默认从 0 开始计数。
$('ul li:odd').css('background', '#eee');05、组合选择器
使用多个选择器组合可以对多个 DOM 类型或类名同时操作，提高效率。
$('div.alert, span.warning').fadeOut();二、DOM 操作
06、插入内容前后
.before()和 .after() 可用于在元素外部插入 HTML 节点。
$('p').before('<hr>').after('<hr>');07、包裹元素
.wrap()可为每个选中元素添加一层父容器，用于样式封装或插件集成。
$('img').wrap('<div class="img-wrapper"></div>');08、替换元素内容
.text()用于读取或设置纯文本内容，不解析 HTML。
$('.title').text('新标题');09、获取和设置表单值
.val()是表单输入元素最常用的操作方法之一。
$('#username').val('张三');10、克隆 DOM 元素
.clone() 可以复制一个元素（包括事件），常用于动态生成表单或项目项。
const newItem = $('#menu li:first').clone().appendTo('#menu');三、样式与动画
11、切换类名
.toggleClass()可自动根据当前类名状态进行添加或移除，适合 UI 动画切换。
$('.btn').toggleClass('active');12、链式动画
jQuery 支持方法链（Chaining），可以连续执行多个动画或操作。
$('#box').slideUp().slideDown().fadeOut();13、自定义动画
.animate()可实现对 CSS 属性的渐变动画控制，例如尺寸、位置、透明度等。
$('#box').animate({width: '200px', opacity: 0.5}, 500);14、动画完成回调
jQuery 动画方法可接收回调函数作为动画结束后的处理逻辑。
$('#box').fadeOut(300, function() {
alert('动画结束');
});15、动态添加CSS样式
.css() 方法支持一次设置多个样式属性，参数为对象时更可读。
$('body').css({
backgroundColor: '#f4f4f4',
fontSize: '16px'
});四、事件处理
16、事件委托
使用 .on() 将事件绑定在父元素上，适用于动态生成的元素，提高性能。
$(document).on('click', '.dynamic-btn', function() {
alert('你点击了动态按钮');
});17、一次性事件绑定
.one()方法确保事件只触发一次，适合用于初始化或首击。
$('#start').one('click', function() {
alert('首次点击触发');
});18、同时绑定多个事件
.on()可接受事件对象的形式，一次绑定多个事件类型，结构更清晰。
$('#hover-box').on({
mouseenter: function() { $(this).addClass('hovered'); },
mouseleave: function() { $(this).removeClass('hovered'); }
});19、解绑事件
.off()用于移除事件监听，适合在组件销毁或需要手动清理内存时使用。
$('#btn').off('click');20、阻止默认行为
通过事件对象 e.preventDefault() 可以阻止默认跳转、提交等行为。
$('form').on('submit', function(e) {
e.preventDefault();
alert('表单未提交，但触发了处理逻辑');
});五、遍历与过滤技巧
21、遍历元素 .each()
可遍历所有匹配的 jQuery 元素集合，结合 index 参数实现编号。
$('ul li').each(function(i) {
$(this).text(`第 ${i + 1} 项`);
});22、查找父元素 .closest()
从当前元素开始逐级向上匹配，适合表单校验、点击事件找容器。
$('.error-msg').closest('form').addClass('form-error');23、查找子元素 .find()
查找某元素的所有后代，支持深层次查找，返回匹配集合。
$('.menu').find('li.active').removeClass('active');24、过滤符合条件元素 .filter()
从已有的 jQuery 集合中筛选出满足条件的子集。
$('input').filter(':checked').addClass('highlight');25、排除某些元素 .not()
和 .filter() 相反，排除指定条件的元素，常用于禁用项过滤。
$('li').not('.disabled').css('cursor', 'pointer');六、表单技巧
26、判断是否选中
.is(':checked')可判断复选框、单选按钮是否被勾选。
if ($('#accept').is(':checked')) {
alert('已同意协议');
}27、表单序列化
.serialize()将表单字段转换成 URL 编码字符串，便于 Ajax 提交。
const formData = $('#form').serialize();28、实时监听输入 .on('input')
监听用户实时输入变化，用于搜索提示、数据同步等。
$('#search').on('input', function() {
console.log('你输入了：' + $(this).val());
});29、获取选中的下拉项
利用 option:selected 获取当前下拉框的值或文本。
const city = $('#city option:selected').text();30、重置表单
直接访问原生 DOM 元素的 .reset() 方法重置所有字段。
$('#form')[0].reset();七、Ajax 与数据交互技巧
31、简单 GET 请求
.get() 方法简洁易用，适合快速请求接口数据。
$.get('/api/user', function(data) {
console.log(data);
});32、简单 POST 请求
.post()用于发送数据到服务器，常用于表单异步提交。
$.post('/api/login', { username: 'admin' }, function(res) {
alert(res.message);
});33、通用 Ajax 请求
.ajax()提供更全面的设置（headers、超时、回调等）。
$.ajax({
url: '/api/data',
type: 'POST',
data: { id: 123 },
success(res) {
console.log('成功:', res);
},
error(err) {
console.error('失败:', err);
}
});34、预加载数据 .load()
用于快速将服务器返回的 HTML 注入 DOM。
$('#content').load('/partials/about.html');35、设置全局 Ajax 头部
.ajaxSetup()设置全局默认参数，比如身份验证、CSRF Token。
$.ajaxSetup({
headers: {
'Authorization': 'Bearer your_token'
}
});八、性能与优化技巧
36、缓存选择器结果
避免多次调用 jQuery 选择器造成 DOM 频繁访问。
const $box = $('#box');
$box.addClass('loaded');37、批量添加节点减少重绘
先拼接字符串或使用 fragment 后插入 DOM，避免频繁渲染。
let html = '';
for (let i = 0; i < 100; i++) {
html += `<li>项目 ${i + 1}</li>`;
}
$('ul').html(html);38、防抖处理事件
限制函数执行频率，常用于输入监听、resize、scroll 等事件。
let timer;
$(window).on('resize', function() {
clearTimeout(timer);
timer = setTimeout(() => {
console.log('窗口变化');
}, 300);
});39、卸载事件释放内存
在页面卸载、组件销毁时，移除绑定事件，避免内存泄漏。
$(window).off('resize');40、使用 DocumentFragment 插入 DOM
使用原生 fragment 进行高性能的批量 DOM 插入操作。
const frag = $(document.createDocumentFragment());
for (let i = 0; i < 50; i++) {
frag.append(`<p>段落 ${i}</p>`);
}
$('body').append(frag);九、插件与扩展技巧
41、判断插件是否存在
很多插件都是 jQuery 扩展方法，需判断是否已加载。
if ($.fn.modal) {
$('#myModal').modal('show');
}42、封装自定义插件
通过 $.fn 扩展 jQuery 方法，提升复用性和项目结构。
$.fn.highlight = function(color = 'yellow') {
return this.css('backgroundColor', color);
};
$('p').highlight();43、使用 jQuery UI 插件
jQuery UI 是官方 UI 插件库，提供拖拽、日期选择等功能。
$('#date').datepicker();44、引入第三方插件（如 Slick）
很多流行组件如轮播、弹窗都是基于 jQuery 封装的插件。
$('.carousel').slick({
autoplay: true,
dots: true
});45、动态调用插件方法
多数插件支持通过 API 接口调用对应行为。
$('#modal').modal('hide');十、工具与交互技巧
46、延迟执行函数
通过 setTimeout 延迟运行某逻辑，适用于提示框消失等场景。
setTimeout(() => {
$('#tip').fadeOut();
}, 3000);47、判断元素是否存在
用 .length 判断是否选中某元素，是动态渲染前常用手段。
if ($('#msg').length) {
$('#msg').fadeIn();
}48、判断元素是否可见
.is(':visible')可判断元素在页面中是否显示（非 display: none）。
if ($('#box').is(':visible')) {
console.log('box 可见');
}49、获取元素坐标位置
.offset() 返回元素相对于页面的 top/left 位置。
const pos = $('#target').offset();
console.log(pos.top, pos.left);50、平滑滚动到目标位置
通过动画滚动页面到目标元素，常用于锚点跳转或导航定位。
$('html, body').animate({
scrollTop: $('#section2').offset().top
}, 600);总结
虽然如今前端早已迈入组件化时代，jQuery 不再是主流框架，但它依然：适合快速开发、写 DEMO、操作老项目；是理解 JavaScript DOM 操作机制的最佳练手方式；拥有丰富的插件生态和工程沉淀。
希望这本小册，能帮助你在开发、重构、面试等各个场景下，用更优雅的方式写出高效、清晰的 jQuery 代码。