然前端框架百花齐放（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 代码。