关于jQuery隐式迭代

最新推荐文章于 2023-05-12 22:46:31 发布

黛琳ghz

最新推荐文章于 2023-05-12 22:46:31 发布

阅读量559

点赞数 3

分类专栏：前端 # JavaScript # jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_53231455/article/details/127399197

版权

前端同时被 3 个专栏收录

172 篇文章 17 订阅

订阅专栏

JavaScript

47 篇文章 4 订阅

订阅专栏

jQuery

8 篇文章 2 订阅

订阅专栏

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

黛琳ghz

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
关于jQuery隐式迭代

我们在使用jQuery选择器获取元素后，如果不考虑获取到的元素数量，直接对元素进行操作，则在元素操作时会发生隐式迭代（遍历内部DOM元素（伪数组形式存储）的过程）。所以，隐式迭代就是指，当我们要操作的元素实际不止一个的时候，jQuery会自动对所有的元素进行操作。
复制链接

扫一扫