?什么是jQuery的隐式迭代
我们在使用jQuery选择器获取元素后，如果不考虑获取到的元素数量，直接对元素进行操作，则在元素操作时会发生隐式迭代（遍历内部DOM元素（伪数组形式存储）的过程）。所以，隐式迭代就是指，当我们要操作的元素实际不止一个的时候，jQuery会自动对所有的元素进行操作。
🎯代码示例如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ajax study</title> <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script> </head> <style> div { width: 10rem; margin-bottom: 1rem; } </style> <body> <div>第一个div标签</div> <div>第二个div标签</div> <div>第三个div标签</div> <div>第四个div标签</div> <div>第五个div标签</div> </body> <script> // jQuery使用css()方法修改css样式，而不是style（修改div的背景颜色为黄色） // 因为jQuery的隐式迭代，所以$("div")对所有的div进行相同的操作 $("div").css("background", "yellow"); </script> </html>
🧩对比JavaScript?
在使用jQuery之前，若要用原生JavaScript实现上述操作，需要先获取到一个元素集合，然后对该集合进行遍历，取出每一个元素，再执行操作。
🎯代码示例如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ajax study</title> <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script> </head> <style> div { width: 10rem; margin-bottom: 1rem; } </style> <body> <div>第一个div标签</div> <div>第二个div标签</div> <div>第三个div标签</div> <div>第四个div标签</div> <div>第五个div标签</div> </body> <script> // 通过document.getElementsByTagName('div')或者document.querySelectorAll('div')来获取元素集合 // var div = document.getElementsByTagName('div'); var div = document.querySelectorAll('div'); // 通过for循环来遍历获取的div集合 for (var i = 0; i < div.length; i++) { // console.log(div[i].innerHTML); // console.log(div[i]); div[i].style.background = 'yellow'; } </script> </html>
?注意
需要留意不同获取元素的方式（以div为例）
document.querySelector('div') 返回指定选择器的第一个元素对象，返回一个元素
document.querySelectorAll('div') 返回指定选择器的所有元素对象集合，返回一个集合
document.getElementsByTagName('div') 根据标签获取元素，返回一个集合
$("div") 创建div元素的jQuery对象
📄总结
jQuery具有隐式迭代的效果，再开发的过程中不需要手动进行遍历，jQuery会根据元素的数量自动进行处理，这一特点相比较JavaScript而言，更加方便。
