jQuery选择器是否自动遍历所有匹配元素？两种事件绑定方式效果一致原因问询

你遇到的两种绑定事件写法效果完全一致，核心是jQuery内置了隐式迭代的默认机制。

原理说明 #

• 用$('.link')这类选择器执行查询后，返回的是包含所有匹配DOM元素的jQuery集合对象
• 所有用于「修改/操作元素」的jQuery实例方法（包括事件绑定、样式修改、属性修改、内容修改等，比如你用到的.on()，还有常见的.css()、.addClass()、.attr()、.hide()等），默认都会自动遍历集合内的每一个元素，执行对应操作，不需要开发者手动写循环遍历。

你第一种直接调用.on()的写法，jQuery内部已经帮你完成了和第二种手动.each()遍历完全一致的逻辑，所以最终运行效果没有区别。

隐式迭代的适用场景 #

jQuery的隐式迭代不是所有方法都生效，有明确的适用范围：

• 支持隐式迭代的场景：所有执行「写入/修改」操作的实例方法，调用时会自动遍历所有匹配元素执行操作，无需手动循环
• 不支持隐式迭代的场景：执行「读取/取值」操作的实例方法不会触发隐式迭代，比如不带参数调用.text()、.attr('属性名')、.val()时，只会返回集合中第一个元素的对应值，如果需要获取所有元素的对应值，才需要手动写.each()遍历处理。

举个简单的例子验证：

// 不用加each，所有class为link的元素文字都会变成红色，就是隐式迭代的作用
$('.link').css('color', 'red');

// 不带参数调用text()，只会返回第一个Link的文本「Link1」，不会遍历返回所有元素的文本
console.log($('.link').text());

内容的提问来源于stack exchange，提问作者Hooman Bahreini