• 关于jQuery隐式迭代

    ❓什么是jQuery的隐式迭代

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

    🎯代码示例如下

    1. html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ajax studytitle>
    7.   <script src="https://code.jquery.com/jquery-3.6.1.min.js">script>
    8. head>
    9. <style>
    10.   div {
    11.     width: 10rem;
    12.     margin-bottom: 1rem;
    13.   }
    14. style>
    15.  
    16. <body>
    17.   <div>第一个div标签div>
    18.   <div>第二个div标签div>
    19.   <div>第三个div标签div>
    20.   <div>第四个div标签div>
    21.   <div>第五个div标签div>
    22. body>
    23. <script>
    24.   // jQuery使用css()方法修改css样式，而不是style（修改div的背景颜色为黄色）
    25.   // 因为jQuery的隐式迭代，所以$("div")对所有的div进行相同的操作
    26.   $("div").css("background", "yellow");
    27. script>
    28.  
    29. html>

    🧩对比JavaScript 

    在使用jQuery之前，若要用原生JavaScript实现上述操作，需要先获取到一个元素集合，然后对该集合进行遍历，取出每一个元素，再执行操作。

    🎯代码示例如下

    1. html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ajax studytitle>
    7.   <script src="https://code.jquery.com/jquery-3.6.1.min.js">script>
    8. head>
    9. <style>
    10.   div {
    11.     width: 10rem;
    12.     margin-bottom: 1rem;
    13.   }
    14. style>
    15.  
    16. <body>
    17.   <div>第一个div标签div>
    18.   <div>第二个div标签div>
    19.   <div>第三个div标签div>
    20.   <div>第四个div标签div>
    21.   <div>第五个div标签div>
    22. body>
    23. <script>
    24.   // 通过document.getElementsByTagName('div')或者document.querySelectorAll('div')来获取元素集合
    25.   // var div = document.getElementsByTagName('div');
    26.   var div = document.querySelectorAll('div');
    27.   // 通过for循环来遍历获取的div集合
    28.   for (var i = 0; i < div.length; i++) {
    29.     // console.log(div[i].innerHTML); 
    30.     // console.log(div[i]); 
    31.     div[i].style.background = 'yellow';
    32.   }
    33. script>
    34.  
    35. html>

    ❗注意

    需要留意不同获取元素的方式（以div为例）

    • document.querySelector('div') 返回指定选择器的第一个元素对象，返回一个元素

    • document.querySelectorAll('div') 返回指定选择器的所有元素对象集合，返回一个集合

    • document.getElementsByTagName('div') 根据标签获取元素，返回一个集合

    • $("div") 创建div元素的jQuery对象

    📄总结

    jQuery具有隐式迭代的效果，再开发的过程中不需要手动进行遍历，jQuery会根据元素的数量自动进行处理，这一特点相比较JavaScript而言，更加方便。

  • 相关阅读:
    点赞量上三千了
    【规范】代码分支管理规范
    【git 使用】使用 git rebase -i 修改任意的提交信息/合并多个提交
    聊聊JAVA 中 13 种锁的实现方式
    docker基本使用
    基于Springboot+MySQL的个人健康监控管理系统
    HiveSQL源码之语法词法编译文件解析一文详解
    【go实战系列四】go语言中 Hot path 热路径 从sync.Once去理解如何设计我们自己的 struct
    趋动云模型--猫狗识别
    口袋参谋：如何挑选淘宝热词？这一招很重要！
  • 原文地址：https://blog.csdn.net/weixin_53231455/article/details/127399197