1. 从一段“改样式”的代码说起：隐式迭代到底省了什么

先说我实际遇到的一个场景。某次给一个内部管理系统加交互，页面上有三组列表，每一组都有五个项目，需求是鼠标悬停时高亮、点击时切换选中状态。刚接手项目的同事用原生JavaScript写了一段很标准的逻辑：

var listItems = document.querySelectorAll('.menu-item'); for (var i = 0; i < listItems.length; i++) { listItems[i].addEventListener('mouseenter', function () { this.style.backgroundColor = '#f0f7ff'; }); listItems[i].addEventListener('mouseleave', function () { this.style.backgroundColor = 'transparent'; }); }

这段代码没什么不对，逻辑清晰，能跑。但等我把同样的需求改写成jQuery之后，代码变成了两行：

$('.menu-item').on('mouseenter', function () { $(this).css('background-color', '#f0f7ff'); }).on('mouseleave', function () { $(this).css('background-color', 'transparent'); });

同事看了一眼代码，第一反应是：$('.menu-item')选出来的明明是一组元素，为什么不需要写循环，事件就直接绑到每一个元素上了？这个问题问到点子上了——它背后正是jQuery几个核心特性里最容易被忽略、却又在日常开发中无处不在的机制：隐式迭代。

这篇文章我从隐式迭代这个概念出发，把它的运行原理、和原生JS显式迭代的区别、实际应用场景、边界陷阱一次讲透。适合刚接触jQuery的开发者，也适合那些用了很久jQuery但始终没想明白“为什么不用写循环”的人。

2. 类数组的jQuery对象：理解隐式迭代的运行基础

要说隐式迭代，必须先搞清楚一个前提：jQuery选择器返回的到底是什么。很多人以为$('.menu-item')返回的是一个数组，里面存着一堆DOM元素。这个理解差一步，但这一步恰恰是关键。

2.1 jQuery对象的结构：有下标、有length，但不是数组

其实$('.menu-item')返回的是一个jQuery对象。这个对象的内部结构是一个类数组，它可以像数组一样通过下标访问，有length属性，但它不是Array类型：

var $items = $('.menu-item'); console.log($items.length); // 5，匹配到的元素个数 console.log($items[0]); // 第一个原生DOM元素 console.log($items[0].textContent); // 可以直接操作原生属性 console.log($items instanceof Array); // false，它不是数组

你可以把jQuery对象理解成一个“装了一组DOM元素的容器”，这个容器提供了索引访问的能力，但它真正的价值不在“存储层”，而在“操作层”。jQuery对象身上挂载了css、attr、on、addClass等方法，这些方法基本都是为“批量处理容器里全部元素”设计的。

这就像一个工具箱，里面装了好几把改锥。你不需要一把一把拿起来拧螺丝，而是把整个工具箱往螺丝上一盖，所有螺丝同时被拧好了。jQuery对象就是这个“工具箱”。

2.2 jQuery对象与原生DOM元素的相互转换

搞清楚这一点之后，另一个高频困惑就跟着来了：什么时候用$items[0]，什么时候用$items.eq(0)，什么时候直接$(this)？

三者对应了三种不同形态：

举个例子，获取第一个元素的文本，两种写法都能工作，但性质不同：

// 原生写法 var firstText = $items[0].textContent; // jQuery写法 var firstText2 = $items.eq(0).text();

$items[0]拿到的是原生元素，你要是顺手想调用css()就会报错，因为没有这个方法；而eq(0)拿到的还是jQuery对象，可以继续链式调用。这个区别在遍历回调里尤其重要，后面讲each()的时候会再提。

3. 读与写的不对称：jQuery方法内部决定是否遍历

隐式迭代这个词听起来玄乎，拆开看就是：jQuery方法在内部帮你做了遍历，你不需要显式写循环。但这里有一个非常关键的“不对称设计”——写操作遍历所有匹配元素，读操作只作用于第一个匹配元素。这是理解隐式迭代的命门。

3.1 写操作：一行代码批量处理全部元素

当你用jQuery方法给元素“设置”东西的时候，方法内部会遍历jQuery对象里的所有DOM元素，逐个执行操作。

// 设置样式：所有class为info的div全部变红 $('.info').css('color', 'red'); // 绑定事件：所有按钮都绑定点击事件 $('.btn').on('click', function () { ... }); // 添加类名：所有匹配元素都加上active $('.item').addClass('active');

模拟一下jQuery内部大概做了什么，差不多是这样的逻辑：

// jQuery内部简化示意 css: function (name, value) { // 遍历所有匹配元素，逐个设置样式 this.each(function () { this.style[name] = value; }); return this; // 返回自己，支持链式调用 }

所以$('.info').css('color', 'red')执行的时候，后台帮你做了一次循环，把容器里每个元素都设置了color。这就是“隐式迭代”的“隐式”二字的含义：循环是存在的，只是不用你亲手写。

3.2 读操作：只取第一个元素的结果

同样一个方法，不传值改成传参数“读取”的时候，行为就完全不同了：

// 读取第一个.info元素的字体颜色 var color = $('.info').css('color'); // 读取第一个input的值 var val = $('input.user-name').val(); // 读取第一个a标签的href var href = $('a.link').attr('href');

在jQuery的设计里，这样的读取操作只返回第一个匹配元素的值。为什么这样设计？理由其实很实际：一组元素各自可能有不同的值，读取的时候你拿哪一个是确定的？没有意义。与其返回一个数组让你自己去处理，不如明确“只取第一个”，让开发者在取值时用eq()、each()或map()去主动控制，反而更清晰。

这也是很多初学者踩坑的地方——以为$('input').val()能返回所有输入框的值，结果拿到的是第一个输入框的值，而且怎么调都不对。这个点后面还会专门展开，这里先记住这个不对称规律就行。

3.3 更直观的对比：css()方法的不同形态

js

// 设置形态：作用于全部匹配元素 $('p').css('font-size', '16px'); // 读取形态：只返回第一个匹配元素计算后的font-size var size = $('p').css('font-size'); // 对象形态批量设置：作用于全部匹配元素 $('p').css({ 'font-size': '16px', 'line-height': '1.6', 'color': '#333' });

同一个方法，因为传参方式不同，触发的是“遍历写入”还是“单点读取”完全不同的逻辑。用熟了之后，看到.css()你就该本能地判断出这次调用是批量写还是单个读，代码出问题的时候也能第一时间往这个方向排查。

4. 原生JS显式迭代与jQuery隐式迭代：把两种写法摆在一起看

理解了隐式迭代的运行机制，接下来要做一件很有价值的事情：把原生JS和jQuery处理同一个需求的代码放在左右两栏，逐行对比。这种对比能让你真正明白“隐式”省掉的到底是什么。

4.1 同一个需求，两种写法的体量差

假设页面上有五个导航项，需求是给每个导航项设置相同的文字颜色、相同的悬停背景色。原生JS：

var navItems = document.querySelectorAll('.nav-item'); for (var i = 0; i < navItems.length; i++) { navItems[i].style.color = '#2c3e50'; navItems[i].addEventListener('mouseenter', function () { this.style.backgroundColor = '#ecf0f1'; }); }

如果你用ES6的forEach，代码会稍微简洁一些：

var navItems = document.querySelectorAll('.nav-item'); navItems.forEach(function (item) { item.style.color = '#2c3e50'; item.addEventListener('mouseenter', function () { this.style.backgroundColor = '#ecf0f1'; }); });

jQuery写法：

$('.nav-item').css('color', '#2c3e50').on('mouseenter', function () { $(this).css('background-color', '#ecf0f1'); });

这里有三层差别值得说。

第一层是代码量差别。原生JS无论用for还是forEach，都要先选中元素集合，再声明回调函数，再在回调里做具体操作；jQuery直接把“选中元素 + 绑定操作”压缩成了一行。

第二层是循环控制权差别。原生JS的循环由你显式控制，循环变量、边界条件、遍历方式都由你负责；jQuery把循环放进了方法内部，你只关心“要对这一组元素做什么”，不关心“怎么一个个地做”。这就是显式迭代和隐式迭代的本质差异。

第三层是链式调用的差别。原生JS写navItems.forEach(...).forEach(...)会直接报错，因为forEach返回undefined；而jQuery方法天然返回jQuery对象，所以.css().on().addClass()可以一口气写下去，每个方法都作用于同一组匹配元素。

4.2 隐式迭代不是“魔法”，你完全可以复现它

用原生JS模拟jQuery的隐式迭代并不难，理解了这件事就不会觉得jQuery的机制神秘了：

function queryAll(selector) { var elements = document.querySelectorAll(selector); return { elements: elements, // 模拟jQuery的css方法：设置时遍历，读取时取第一个 css: function (name, value) { if (value === undefined) { return this.elements[0].style[name]; } this.elements.forEach(function (el) { el.style[name] = value; }); return this; // 返回this，支持链式调用 }, // 模拟jQuery的on方法：绑定事件时遍历所有元素 on: function (event, handler) { this.elements.forEach(function (el) { el.addEventListener(event, handler); }); return this; } }; }

这段模拟代码本身就是“读和写不对称”的体现：设置的时候遍历，读取的时候只取第一个，绑定事件的时候遍历，每次操作完返回自己便于继续链式调用。jQuery内部的实际实现比我这个模拟复杂得多，但骨架逻辑是同一套。理解了这套骨架，你再看jQuery源码里的.each()、.css()、.attr()这些方法，就不会觉得它们玄了。

4.3 两种迭代方式各自的适用场景

显式迭代和隐式迭代没有高低之分，只是解决问题的方式不同。以我自己的经验，会按下面这个标准选：

这套标准背后有一句话我认为值得所有前端开发者记住：能用一句隐式迭代写清楚的操作，不要写三行循环；但需要在循环体内做精细控制的场景，也不要强行省那几行代码。

5. 隐式迭代的五个典型使用场景

前四节解决了“是什么”和“为什么”的问题，这一节全部落在“怎么用”上。我选五个日常开发中出现频率最高的场景，逐个给你代码和拆解。

5.1 批量修改样式：表格斑马纹

最经典的需求，列表和表格交替变色。原生写法大概是：

var rows = document.querySelectorAll('tr'); for (var i = 0; i < rows.length; i++) { if (i % 2 === 1) { rows[i].style.backgroundColor = '#f7f8fa'; } }

jQuery写法利用选择器就能直接选出“奇数行”，再配合隐式迭代：

// 奇数行变灰 $('tr:odd').css('background-color', '#f7f8fa'); // 偶数行变白 $('tr:even').css('background-color', '#ffffff');

两行代码替代了循环加if判断，选中的每个tr都被设置了背景色。这里顺便提醒一句：jQuery的:odd和:even是0-indexed的，第一个tr算even，所以视觉上第二行是tr:odd。如果你用tr:nth-child(odd)那又不一样了——nth-child从1开始数。这两个选择器的差异是个经典面试题，实际开发中也经常搞混。

5.2 批量绑定事件：一组按钮全部可点击

页面上有多个操作按钮，需求是点击任意一个就弹出它对应的数据。原生写法：

var buttons = document.querySelectorAll('.action-btn'); for (var i = 0; i < buttons.length; i++) { buttons[i].addEventListener('click', function () { console.log(this.dataset.id); }); }

jQuery写法：

$('.action-btn').on('click', function () { console.log($(this).data('id')); });

这里还有一个隐式迭代的补充知识点：在事件回调函数里，this指向的是当前触发事件的那个原生DOM元素，不是jQuery对象。所以想用.data()、.css()这些jQuery方法，得先用$(this)包装一下。这个习惯刚上手时容易忘，写久了就变成肌肉记忆了。

5.3 批量设置属性：给图片统一加默认信息

有一组img标签需要统一设置alt文本和title，原生写法要循环，jQuery直接一行：

// 原生写法 var imgs = document.querySelectorAll('.cover'); for (var i = 0; i < imgs.length; i++) { imgs[i].setAttribute('alt', '暂无图片'); imgs[i].setAttribute('title', '点击查看大图'); } // jQuery写法 $('.cover').attr({ alt: '暂无图片', title: '点击查看大图' });

同样一次隐式迭代，两个属性同时搞定，还顺带把多个属性合并成了一次操作。如果你想给不同的图片设置不同的alt，那就不能靠隐式迭代了，得用each()加索引去精细处理：

var texts = ['封面图A', '封面图B', '封面图C']; $('.cover').each(function (index) { $(this).attr('alt', texts[index]); });

这个例子刚好展示了“什么时候该用隐式迭代、什么时候该用each()”的边界：操作对所有元素一致，用隐式迭代；操作因元素而异，用each()。

5.4 批量添加/移除类名

切换状态是前端交互里的高频操作。比如一个选项卡列表，点击某个选项卡时高亮它、移除其他所有选项卡的高亮状态。

// 点击事件内部 $('.tab-item').removeClass('active'); // 隐式迭代：全部移除 $(this).addClass('active'); // 当前项添加

两行代码，第一行利用隐式迭代把之前选中的高亮全部清掉，第二行给当前点击项高亮。如果你用原生JS写，第一行就要变成循环遍历加classList.remove，代码量直接翻倍。

5.5 动画批量执行：一组元素同时淡入

jQuery的动画方法同样支持隐式迭代，这个特性经常被人忽略：

// 所有.item元素在1秒内淡入 $('.item').fadeIn(1000); // 所有.item元素逐个执行动画（不是同时） $('.item').each(function (index) { $(this).delay(index * 200).fadeIn(500); });

fadeIn作用于全部匹配元素时，它们同时开始动画；如果希望依次错开出现，就需要each()配合delay(index * 200)。这种“同时与逐个”的差异，本质就是“隐式迭代的批处理”和“显式each的精细控制”之间的选择。

6. 边界、陷阱与手动遍历：用each()掌握主动权

隐式迭代用起来很爽，但它有明确的边界。这一节我把实际开发中踩过的坑和需要注意的边界条件一次性讲清楚。

6.1 最容易踩的坑：取值方法不会遍历

前面已经反复强调过：val()、text()、html()、attr()这些方法在读取时，只返回第一个匹配元素的结果。

看一个我实际遇到过的报错场景。页面上有两个输入框，一个填用户名一个填邮箱，提交按钮点击后需要拿到两个值：

// 错误示范：拿不到第二个值 var username = $('.form-input').val(); // 只返回第一input的值 var email = $('.form-input').val(); // 还是第一个input的值，坑在这 // 正确做法：分别用id或eq()取值 var username = $('#username').val(); var email = $('#email').val(); // 或者用eq()按索引取 var username = $('.form-input').eq(0).val(); var email = $('.form-input').eq(1).val();

这是jQuery隐式迭代设计中最容易让人“喷”的一点，但理解背后的设计逻辑也就释然了：一组元素的值各不相同，你让.val()返回什么？数组？数组里的顺序靠什么保证？真实业务里每个输入框含义不同，强行用同一个选择器批量取值本来就是不合理的需求。正确做法是给输入框加不同的id，各取各的值。

不过，如果你确实需要一次性获取一组元素各自的文本，jQuery也提供了专用方法：

// 用map()收集所有匹配元素的文本 var allTexts = $('.item').map(function () { return $(this).text(); }).get(); console.log(allTexts); // ['条目1', '条目2', '条目3']

注意末尾的.get()——不加它拿到的是jQuery对象，加了才变成真正的数组。这个细节我当初也卡了十分钟才想明白。

6.2 警惕链式调用中的“读之后写”陷阱

当链式调用中混入“读”操作，后续方法可能不再作用于全部元素。看这个例子：

// 本想记录第一个元素宽度，再给所有元素设置内边距 $('.box').css('width').addClass('has-width');

这个写法有个隐蔽问题：.css('width')是读操作，它返回的是字符串宽度值而不是jQuery对象，接下去的.addClass()会直接在字符串上调用，报错。这种问题在团队合作里很常见，有时候是同事改代码时不小心把一个写操作换成了读操作，后面整条链子断了。所以写链式调用时要时刻问自己：我这一句是读还是写？写操作返回jQuery对象，读操作返回具体值。

6.3 each()与$(this)：手动遍历的正确姿势

虽然jQuery帮你隐式迭代了大多数写操作，但总有需要精细控制的场景。这时候要用each()方法：

// 隐式迭代做不了的，each()来做 $('.card').each(function (index, element) { // element是原生DOM元素，this也指向这个元素 var $card = $(this); if (index % 2 === 0) { $card.addClass('even-card'); } else { $card.addClass('odd-card'); } });

each()的回调接收两个参数：第一个是索引，第二个是当前原生DOM元素。回调内部this也指向当前元素。想用jQuery方法时就用$(this)包装。

这里有一个经常被问到的问题：为什么$(this)而不是直接this？因为this是原生元素，只有原生属性和方法；$(this)是jQuery对象，才能调用.css()、.attr()、.addClass()这些jQuery方法。两者各自适用场景不同，我个人的习惯是：能直接操作原生属性就用this，涉及jQuery方法就一定先包一下。

6.4 性能边界：大量元素时的取舍

隐式迭代很方便，但它毕竟是一层包装，性能天然不如直接操作原生DOM。如果你要处理的是几百个元素，差别可以忽略；如果是几万个元素，比如画大量列表项或者在做性能敏感的场景，jQuery的隐式迭代确实会慢一些。

一个简单的经验是：先按数据量级判断，再选方案。常规业务页面里的批量操作，放心用隐式迭代，代码可读性远超性能损耗带来的收益；大数据量渲染场景，优先考虑原生JS或现代框架的数据驱动方式。jQuery本来就定位在“简化DOM操作”，拿它去做十万级节点渲染本身就超出了它的舒适区。

6.5 另一种隐式迭代：回调函数中的隐形遍历

事件绑定也会有“隐式迭代”的迷惑。回到开头那个例子：

$('.menu-item').on('click', function () { ... });

这里的代码只写了一次绑定，但点击发生在任意一个menu-item上时回调都会触发。这不是隐式迭代，但效果有点相似——on()内部确实遍历了所有匹配元素并逐个绑定事件。理解了这一点，你就不会疑惑“为什么我只绑了一次，所有元素都能响应”。

6.6 隐式迭代与each()的取舍标准

把选择标准做成一句话版：

• 需要对整组元素执行完全相同的操作 → 隐式迭代，代码最简
• 需要逐元素判断/取值/差异化处理→ each() + $(this)
• 需要收集整组元素的数据→ map() + get()
• 需要打破链式调用去取值 → 先暂存jQuery对象，再分别读写

这套取舍标准在实际代码评审时特别好用。看到有人为了一点点差异硬写隐式迭代，或者明明操作完全一致却非要多写一个each()做无用功，我都会用这套标准去打回来。

7. 再分享几个我自己用出来的经验

最后补充几条零碎但实用的经验，都是实际项目里赚来的教训。

第一条，读操作之前先确认jQuery对象是否为空。如果选择器没有匹配到任何元素，读操作不会报错但会返回undefined，而写操作会静默跳过。这一“静默”特性经常造成难排查的bug，尤其是选择器写错的时候。我习惯在批量操作前先打印或断言$('.selector').length，确认有元素再继续。

第二条，jQuery对象可以被二次过滤后再隐式迭代。选择器配合.filter()、.not()、.has()这些方法，先缩小元素集合再操作，比“把所有元素选出来然后在回调里if判断”要优雅得多。这在处理菜单、表格筛选这类场景时特别实用。

第三条，读操作想拿到数组时优先用.map().get()，不要自己手动push。我见过不少同事写：

var texts = []; $('.item').each(function () { texts.push($(this).text()); });

逻辑没问题，但同样的需求用一行$('.item').map(function(){ return $(this).text(); }).get()就能解决，少一个空数组变量、少一个push操作，代码也更聚焦。

第四条，写jQuery插件时，一定要保持隐式迭代语义。如果你自己在给jQuery写扩展方法，方法内部遍历所有匹配元素操作后，一定要return this，否则用户拿到undefined就链不起来了。jQuery官方插件规范里最核心的两条就是这两个，我自己写过几次插件之后才真正体会到“隐式迭代 + 返回this”这两个设计是多么精妙。

隐式迭代是jQuery里最容易被忽略但影响最深远的特性之一。你理解了它的“隐”，才算真正理解了jQuery这套写法的哲学：写操作批量执行、读操作明确取单、链式调用保持上下文、必要时用each()和map()接管控制权。这套哲学即使放在今天，对理解其他框架的批量操作设计也很有启发。