[JavaScript知识库] 关于jQuery隐式迭代

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 关于jQuery隐式迭代 -> 正文阅读

[JavaScript知识库]关于jQuery隐式迭代

?什么是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而言，更加方便。