【Java 进阶篇】JQuery 遍历 —— For 循环的奇妙之旅

浅浅的花香味﹌ 2024-02-18 11:15 68阅读 0赞

![在这里插入图片描述][fe098e18bcc24ed2aaff6195ef3f5a1a.png]

在前端开发的世界里，遍历是一个常见而重要的操作。它让我们能够浏览并操纵文档中的元素，为用户提供更加丰富和交互性的体验。而在 JQuery 中，遍历的方式多种多样，其中 `for` 循环是一种简单而灵活的选择。在本篇博客中，我们将探讨 JQuery 中的 `for` 循环，深入解析它的原理和用法。

### 探寻 `for` 循环的起源 ###

在深入研究 JQuery 中的 `for` 循环之前，让我们先了解一下 `for` 循环的起源。`for` 循环是一种控制流程的结构，它可以按照一定的次数重复执行一组语句。在 JavaScript 中，`for` 循环是一种常见的迭代结构，用于遍历数组、对象等数据结构。

而 JQuery 作为一个强大的 JavaScript 库，自然也继承了这一特性，提供了更加简便的方法来操作文档中的元素。在 JQuery 中，`for` 循环通常用于遍历匹配到的元素集合，执行特定的操作。

### 理解 JQuery 的选择器 ###

在开始 `for` 循环的奇妙之旅之前，我们需要先了解 JQuery 的选择器。选择器是 JQuery 的基础，它允许我们精确地选取文档中的元素。以下是一些常见的 JQuery 选择器：

*  **元素选择器：** 通过元素的名称选取元素，例如 `$('p')` 选取所有段落元素。
 *  **ID 选择器：** 通过元素的 ID 属性选取元素，例如 `$('#myId')` 选取 ID 为 “myId” 的元素。
 *  **类选择器：** 通过元素的类名选取元素，例如 `$('.myClass')` 选取所有具有 “myClass” 类的元素。

了解了这些选择器后，我们可以更加灵活地定位我们需要操作的元素。接下来，我们将通过 `for` 循环来展示如何遍历这些元素。

### JQuery 中的 `for` 循环 ###

在 JQuery 中，`for` 循环通常用于遍历匹配到的元素集合。我们通过 JQuery 的选择器选取一组元素，然后使用 `for` 循环遍历它们，执行特定的操作。下面是一个简单的例子：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JQuery For 循环示例</title>
        <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
        <style>
            /* 添加一些样式，让页面更有趣 */
            .item {
          
                margin: 5px;
                padding: 10px;
                border: 1px solid #ddd;
            }
    
            .highlight {
          
                background-color: yellow;
            }
        </style>
        <script>
            $(document).ready(function() {
          
                // 通过类选择器选取具有 item 类的元素
                var items = $(".item");
    
                // 使用 for 循环遍历选取到的元素
                for (var i = 0; i < items.length; i++) {
          
                    // 对每个元素执行操作，例如添加类名
                    $(items[i]).addClass("highlight").text("这是第" + (i + 1) + "个元素");
                }
            });
        </script>
    </head>
    <body>
        
        <div class="item"></div>
        
        <div class="item"></div>
        
        <div class="item"></div>
    </body>
    </html>

在这个例子中，我们首先通过类选择器 `$(".item")` 选取了具有 `item` 类的元素，并将它们存储在 `items` 变量中。然后，我们使用 `for` 循环遍历了这些元素，并对每个元素执行了一些操作，比如添加类名和修改文字内容。

这是一个简单的示例，但展示了 `for` 循环在 JQuery 中的基本用法。在实际项目中，你可能会在循环体中执行更加复杂的操作，比如修改元素的样式、绑定事件等。

### `for`循环的遍历方式 ###

JQuery 提供了几种不同的方式来遍历元素，除了常见的 `for` 循环之外，还有 `each()` 方法和其他遍历方法。在接下来的部分，我们将更深入地了解这些遍历方式。

#### 1. 使用 `each()` 方法 ####

`each()` 方法是 JQuery 中用于遍历集合的一种强大方式。它遍历一个 JQuery 对象的每个元素，为每个元素执行提供的函数。

让我们通过一个例子来演示如何使用 `each()` 方法遍历元素集合：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JQuery each() 方法示例</title>
        <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
        <style>
            /* 添加一些样式，让页面更有趣 */
            .item {
          
                margin: 5px;
                padding: 10px;
                border: 1px solid #ddd;
            }
    
            .highlight {
          
                background-color: yellow;
            }
        </style>
        <script>
            $(document).ready(function() {
          
                // 通过类选择器选取具有 item 类的元素
                var items = $(".item");
    
                // 使用 each() 方法遍历选取到的元素
                items.each(function(index) {
          
                    // 对每个元素执行操作，例如添加类名
                    $(this).addClass("highlight").text("这是第" + (index + 1) + "个元素");
                });
            });
        </script>
    </head>
    <body>
        
        <div class="item"></div>
        
        <div class="item"></div>
        
        <div class="item"></div>
    </body>
    </html>

在这个例子中，我们使用了 `each()` 方法，它接受一个函数作为参数，该函数会在集合的每个元素上被调用。在函数中，`this` 指向当前处理的元素，`index` 是当前元素在集合中的索引。我们通过这个方法遍历元素并执行相应的操作。

#### 2. `map()` 方法 ####

`map()` 方法是另一种遍历集合的方式。它会将集合中的每个元素传递给一个函数，然后将函数的返回值组成一个新的数组。这个方法在需要对元素进行转换或过滤时非常有用。

让我们看一个使用 `map()` 方法的例子：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JQuery map() 方法示例</title>
        <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
        <style>
            /* 添加一些样式，让页面更有趣 */
            .item {
          
                margin: 5px;
                padding: 10px;
                border: 1px solid #ddd;
            }
    
            .highlight {
          
                background-color: yellow;
            }
        </style>
        <script>
            $(document).ready(function() {
          
                // 通过类选择器选取具有 item 类的元素
                var items = $(".item");
    
                // 使用 map() 方法遍历选取到的元素
                var modifiedItems = items.map(function(index) {
          
                    // 对每个元素执行操作，返回新的值
                    return "这是修改后的第" + (index + 1) + "个元素";
                });
    
                // 将修改后的值插入到页面中
                items.each(function(index) {
          
                    $(this).text(modifiedItems[index]).addClass("highlight");
                });
            });
        </script>
    </head>
    <body>
        
        <div class="item"></div>
        
        <div class="item"></div>
        
        <div class="item"></div>
    </body>
    </html>

在这个例子中，我们使用了 `map()` 方法来遍历元素，并对每个元素执行了一个操作。然后，我们将返回的新值组成的数组插入到页面中，实现了对元素的修改。

### `for` 循环的局限性 ###

虽然 `for` 循环是一种常见的遍历方式，但在使用 JQuery 时，它可能不如 `each()` 方法和其他遍历方法那么灵活和方便。主要原因在于，JQuery 对象是类数组对象，而不是真正的数组。因此，直接使用 `for` 循环时，我们需要注意一些细节，比如使用索引访问元素等。

另外，`for` 循环在遍历 DOM 元素时，可能会受到动态操作的影响，因为在 `for` 循环开始时就获取了元素的数量，如果在循环中删除或添加元素，可能会导致意外的结果。

### 总结 ###

`for` 循环是一种在 JQuery 中遍历元素的基本方式，但在处理 JQuery 对象时，使用 `each()` 方法和其他遍历方法更为灵活和方便。了解这些遍历方法，可以让你更加高效地操作页面上的元素，提升前端开发的体验。

在实际项目中，选择合适的遍历方式取决于具体的需求。无论是简单的 `for` 循环还是强大的 `each()` 方法，都是你工具箱中的有用工具。希望通过本文的介绍，你对 JQuery 遍历有了更加深入的理解，能够更加灵活地运用它们。在前端的征途上，愿你的遍历之旅充满奇妙和愉悦。加油吧，少年！

<table> 
 <tbody> 
  <tr> 
   <td> <strong><font>作者信息</font></strong><br> <br> <font> 作者 ： 繁依Fanyi</font><br> <font>CSDN：</font> <a href="https://blog.csdn.net/qq_21484461?spm=1000.2115.3001.5343" rel="nofollow"><font>https://techfanyi.blog.csdn.net</font></a><br> <font>掘金：</font><a href="https://juejin.cn/user/4154386571867191" rel="nofollow"><font>https://juejin.cn/user/4154386571867191</font></a> </td> 
  </tr> 
 </tbody> 
</table>

[fe098e18bcc24ed2aaff6195ef3f5a1a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/80fc630628cd4ea5b4f8145bc22511fd.png