JQuery 遍历：发现元素的魔法之旅

2023-11-16 22:21:59 浏览数 (1)

欢迎来到 JQuery 的奇妙世界，一个充满活力和灵感的地方。在这个世界里，我们将一起探讨 JQuery 的遍历功能，这是一个让你轻松发现和操作网页元素的神奇工具。无需太多前端经验，只要有一颗探险的心，你就能在 JQuery 遍历中找到属于你的宝藏。

前言

在 Web 开发中，我们常常需要在页面中找到特定的元素，然后对它们进行操作。这就是 JQuery 遍历的用武之地。遍历不仅仅是寻找元素，更是发现元素之美的一种方式。在这篇博客中，我们将深入研究 JQuery 遍历的方方面面，让你在前端的道路上越走越远。

遍历基础

在 JQuery 中，遍历主要通过选择器和遍历方法实现。首先，我们来看一下基础的选择器。

1. 元素选择器

元素选择器是最简单的一种选择器，通过元素的标签名选择对应的元素。比如，选择所有的段落元素可以这样写：

代码语言：html复制
<!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 元素选择器示例</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        /* 添加一些样式，让页面更有趣 */
        p {
            margin: 10px;
            padding: 10px;
            background-color: #f0f0f0;
            border: 1px solid #ddd;
        }
    </style>
    <script>
        $(document).ready(function() {
            // 选取所有段落元素并修改它们的样式
            $("p").css("color", "blue");
        });
    </script>
</head>
<body>
    <p>这是第一个段落。</p>
    <p>这是第二个段落。</p>
    <p>这是第三个段落。</p>
</body>
</html>

在这个例子中，$("p") 就是一个元素选择器，它选取了页面中所有的 <p> 元素，并通过 css() 方法修改它们的文字颜色。

2. 类选择器

类选择器通过元素的类名来选择对应的元素。比如，选择所有具有 highlight 类的元素：

代码语言：html复制
<!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 类选择器示例</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        /* 添加一些样式，让页面更有趣 */
        .highlight {
            background-color: yellow;
        }
    </style>
    <script>
        $(document).ready(function() {
            // 选取所有具有 highlight 类的元素并修改它们的样式
            $(".highlight").css("font-weight", "bold");
        });
    </script>
</head>
<body>
    <p class="highlight">这是一个高亮的段落。</p>
    <p>这是另一个普通的段落。</p>
    <p class="highlight">这是又一个高亮的段落。</p>
</body>
</html>

在这个例子中，.highlight 就是一个类选择器，它选取了页面中所有具有 highlight 类的元素，并通过 css() 方法修改它们的文字加粗样式。

3. ID 选择器

ID 选择器通过元素的唯一 ID 来选择对应的元素。比如，选择具有 unique ID 的元素：

代码语言：html复制
<!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 ID 选择器示例</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        /* 添加一些样式，让页面更有趣 */
        #unique {
            color: green;
        }
    </style>
    <script>
        $(document).ready(function() {
            // 选取具有 unique ID 的元素并修改它的样式
            $("#unique").text("这是一个有趣的元素").css("font-size", "18px");
        });
    </script>
</head>
<body>
    <p>这是一个普通的段落。</p>
    <!-- 具有 unique ID 的元素 -->
    <p id="unique"></p>
    <p>这是另一个普通的段落。</p>
</body>
</html>

在这个例子中，#unique 就是一个 ID 选择器，它选取了页面中具有 unique ID 的元素，并通过 text() 方法修改了它的文字内容，同时通过 css() 方法修改了文字颜色和字体大小。

这些基础的选择器让我们能够准确地选取页面上的元素，但有时候我们需要更灵活的方式来定位元素。这时就需要使用 JQuery 的遍历方法。

遍历方法

JQuery 提供了多种遍历方法，让你能够轻松地在文档中移动和操作元素。下面我们来介绍几个常用的遍历方法。

1. each() 方法

each() 方法用于遍历匹配元素集合中的每一个元素，对每个元素执行指定的函数。

代码语言：html复制
<!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;
        }
    </style>
    <script>
        $(document).ready(function() {
            // 选取所有具有 item 类的元素，并对每个元素执行函数
            $(".item").each(function(index, element) {
                // 在每个元素后面添加索引号
                $(element).text("这是第"   (index   1)   "个元素");
            });
        });
    </script>
</head>
<body>
    <!-- 具有 item 类的元素 -->
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</body>
</html>

在这个例子中，.item 是一个类选择器，选取了页面中所有具有 item 类的元素。通过 each() 方法，对每一个元素执行了一个函数，给每个元素添加了一个文字内容，内容包含了元素的索引号。

2. filter() 方法

filter() 方法用于从匹配的元素集合中筛选出符合条件的元素，返回一个新的集合。

代码语言：html复制
<!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 filter() 方法示例</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 类的元素，并筛选出具有 highlight 类的元素
            $(".item").filter(".highlight").text("这是被筛选出来的元素");
        });
    </script>
</head>
<body>
    <!-- 具有 item 类的元素 -->
    <div class="item"></div>
    <!-- 具有 item 类和 highlight 类的元素 -->
    <div class="item highlight"></div>
    <!-- 具有 item 类的元素 -->
    <div class="item"></div>
</body>
</html>

在这个例子中，.item 是一个类选择器，选取了页面中所有具有 item 类的元素。通过 filter() 方法，筛选出了具有 highlight 类的元素，然后给这些元素添加了一个文字内容。

3. find() 方法

find() 方法用于查找匹配元素集合中每个元素的后代元素，返回一个新的集合。

代码语言：html复制
<!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 find() 方法示例</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        /* 添加一些样式，让页面更有趣 */
        .parent {
            margin: 5px;
            padding: 10px;
            border: 1px solid #ddd;
        }

        .child {
            background-color: #f0f0f0;
        }
    </style>
    <script>
        $(document).ready(function() {
            // 选取所有具有 parent 类的元素，并查找它们的子元素
            $(".parent").find(".child").text("这是子元素");
        });
    </script>
</head>
<body>
    <!-- 具有 parent 类的元素 -->
    <div class="parent">
        <!-- 具有 child 类的子元素 -->
        <div class="child"></div>
    </div>
    <!-- 具有 parent 类的元素 -->
    <div class="parent">
        <!-- 具有 child 类的子元素 -->
        <div class="child"></div>
    </div>
    <!-- 具有 parent 类的元素 -->
    <div class="parent">
        <!-- 具有 child 类的子元素 -->
        <div class="child"></div>
    </div>
</body>
</html>

在这个例子中，.parent 是一个类选择器，选取了页面中所有具有 parent 类的元素。通过 find() 方法，查找了这些元素的子元素，具有 child 类的子元素，然后给这些子元素添加了一个文字内容。

4. first() 和 last() 方法

first() 和 last() 方法用于分别选择匹配元素集合中的第一个和最后一个元素。

代码语言：html复制
<!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 first() 和 last() 方法示例</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        /* 添加一些样式，让页面更有趣 */
        .item {
            margin: 5px;
            padding: 10px;
            border: 1px solid #ddd;
        }
    </style>
    <script>
        $(document).ready(function() {
            // 选取所有具有 item 类的元素，并选择它们的第一个和最后一个元素
            $(".item").first().text("这是第一个元素");
            $(".item").last().text("这是最后一个元素");
        });
    </script>
</head>
<body>
    <!-- 具有 item 类的元素 -->
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</body>
</html>

在这个例子中，.item 是一个类选择器，选取了页面中所有具有 item 类的元素。通过 first() 方法选择了这些元素的第一个元素，并给它添加了一个文字内容；通过 last() 方法选择了这些元素的最后一个元素，并给它添加了一个不同的文字内容。

复杂的遍历

有时候，我们需要进行更复杂的遍历，涉及到父元素、兄弟元素等。下面，我们将介绍一些涉及到多层级遍历的方法。

1. parent() 方法

parent() 方法用于获得匹配元素集合中每个元素的父元素，返回一个新的集合。

代码语言：html复制
<!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 parent() 方法示例</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        /* 添加一些样式，让页面更有趣 */
        .child {
            margin: 5px;
            padding: 10px;
            border: 1px solid #ddd;
        }

        .parent {
            background-color: #f0f0f0;
        }
    </style>
    <script>
        $(document).ready(function() {
            // 选取所有具有 child 类的元素，并获取它们的父元素
            $(".child").parent().addClass("parent").text("这是父元素");
        });
    </script>
</head>
<body>
    <!-- 具有 child 类的元素 -->
    <div class="child"></div>
    <!-- 具有 child 类的元素 -->
    <div class="child"></div>
    <!-- 具有 child 类的元素 -->
    <div class="child"></div>
</body>
</html>

在这个例子中，.child 是一个类选择器，选取了页面中所有具有 child 类的元素。通过 parent() 方法，获取了这些元素的父元素，并给父元素添加了一个类名和文字内容。

2. siblings() 方法

siblings() 方法用于获取匹配元素集合中每个元素的兄弟元素，返回一个新的集合。

代码语言：html复制
<!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 siblings() 方法示例</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 类的元素，并获取它们的兄弟元素
            $(".item").siblings().addClass("highlight").text("这是兄弟元素");
        });
    </script>
</head>
<body>
    <!-- 具有 item 类的元素 -->
    <div class="item"></div>
    <!-- 具有 item 类的元素 -->
    <div class="item"></div>
    <!-- 具有 item 类的元素 -->
    <div class="item"></div>
</body>
</html>

在这个例子中，.item 是一个类选择器，选取了页面中所有具有 item 类的元素。通过 siblings() 方法，获取了这些元素的兄弟元素，并给兄弟元素添加了一个类名和文字内容。

遍历的艺术

JQuery 的遍历方法就像艺术家的画笔，让你能够在页面上自由地漫游，发现元素的美丽和奥秘。通过简单而强大的选择器和遍历方法，你可以轻松地定位、修改和操作页面上的任何元素。

3. children() 方法

children() 方法用于获取匹配元素集合中每个元素的子元素，返回一个新的集合。

代码语言：html复制
<!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 children() 方法示例</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        /* 添加一些样式，让页面更有趣 */
        .parent {
            margin: 5px;
            padding: 10px;
            border: 1px solid #ddd;
        }

        .child {
            background-color: #f0f0f0;
        }
    </style>
    <script>
        $(document).ready(function() {
            // 选取具有 parent 类的元素，并获取它们的子元素
            $(".parent").children().addClass("child").text("这是子元素");
        });
    </script>
</head>
<body>
    <!-- 具有 parent 类的元素 -->
    <div class="parent">
        <!-- 子元素 -->
        <div></div>
        <!-- 子元素 -->
        <div></div>
        <!-- 子元素 -->
        <div></div>
    </div>
    <!-- 具有 parent 类的元素 -->
    <div class="parent">
        <!-- 子元素 -->
        <div></div>
        <!-- 子元素 -->
        <div></div>
        <!-- 子元素 -->
        <div></div>
    </div>
</body>
</html>

在这个例子中，.parent 是一个类选择器，选取了页面中所有具有 parent 类的元素。通过 children() 方法，获取了这些元素的子元素，并给子元素添加了一个类名和文字内容。

4. prev() 和 next() 方法

prev() 和 next() 方法分别用于选择匹配元素集合中每个元素的前一个兄弟元素和后一个兄弟元素。

代码语言：html复制
<!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 prev() 和 next() 方法示例</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 类的元素，并选择它们的前一个和后一个兄弟元素
            $(".item").prev().addClass("highlight").text("这是前一个兄弟元素");
            $(".item").next().addClass("highlight").text("这是后一个兄弟元素");
        });
    </script>
</head>
<body>
    <!-- 具有 item 类的元素 -->
    <div class="item"></div>
    <!-- 具有 item 类的元素 -->
    <div class="item"></div>
    <!-- 具有 item 类的元素 -->
    <div class="item"></div>
</body>
</html>

在这个例子中，.item 是一个类选择器，选取了页面中所有具有 item 类的元素。通过 prev() 方法选择了这些元素的前一个兄弟元素，并通过 next() 方法选择了这些元素的后一个兄弟元素，然后给它们添加了一个类名和文字内容。

5. closest() 方法

closest() 方法用于获取匹配元素集合中每个元素的祖先元素，从当前元素开始沿 DOM 树向上遍历，返回最先匹配给定选择器的祖先元素。

代码语言：html复制
<!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 closest() 方法示例</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style>
        /* 添加一些样式，让页面更有趣 */
        .child {
            margin: 5px;
            padding: 10px;
            border: 1px solid #ddd;
        }

        .parent {
            background-color: #f0f0f0;
        }
    </style>
    <script>
        $(document).ready(function() {
            // 选取具有 child 类的元素，并获取它们的最近的具有 parent 类的祖先元素
            $(".child").closest(".parent").addClass("highlight").text("这是最近的祖先元素");
        });
    </script>
</head>
<body>
    <!-- 具有 parent 类的元素 -->
    <div class="parent">
        <!-- 具有 child 类的元素 -->
        <div class="child"></div>
        <!-- 具有 child 类的元素 -->
        <div class="child"></div>
        <!-- 具有 child 类的元素 -->
        <div class="child"></div>
    </div>
</body>
</html>

在这个例子中，.child 是一个类选择器，选取了页面中所有具有 child 类的元素。通过 closest(".parent") 方法，获取了这些元素最近的具有 parent 类的祖先元素，并给这个祖先元素添加了一个类名和文字内容。

总结

通过本文的介绍，你已经对 JQuery 的遍历方法有了一个深入的了解。从基础的选择器到各种强大的遍历方法，你可以根据需要轻松地操作页面上的元素，实现丰富的交互效果。记住，JQuery 的力量在于它的简洁和灵活，让前端开发变得更加愉快和高效。

无论是 each() 方法的循环，还是 find() 方法的查找，每一个遍历方法都是你在前端探险中的得力助手。愿你在遍历元素的旅程中，发现更多有趣的功能和技巧，成为一位真正的前端大师。

愿你的代码如画笔一般，精妙而流畅，为用户带来愉悦的体验。继续探索，不断学习，让你的前端之路越走越宽广。前方还有更多的元素等待你的发现，一起加油吧！

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

2023腾讯·技术创作特训营第三期

0 人点赞