【Java 进阶篇】JQuery 遍历：发现元素的魔法之旅

在这里插入图片描述

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

前言

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

遍历基础

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

1. 元素选择器

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

<!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 类的元素：

<!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 的元素：

<!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() 方法用于遍历匹配元素集合中的每一个元素，对每个元素执行指定的函数。

<!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() 方法用于从匹配的元素集合中筛选出符合条件的元素，返回一个新的集合。

<!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() 方法用于查找匹配元素集合中每个元素的后代元素，返回一个新的集合。

<!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() 方法用于分别选择匹配元素集合中的第一个和最后一个元素。

<!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() 方法用于获得匹配元素集合中每个元素的父元素，返回一个新的集合。

<!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() 方法用于获取匹配元素集合中每个元素的兄弟元素，返回一个新的集合。

<!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() 方法用于获取匹配元素集合中每个元素的子元素，返回一个新的集合。

<!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() 方法分别用于选择匹配元素集合中每个元素的前一个兄弟元素和后一个兄弟元素。

<!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 树向上遍历，返回最先匹配给定选择器的祖先元素。

<!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() 方法的查找，每一个遍历方法都是你在前端探险中的得力助手。愿你在遍历元素的旅程中，发现更多有趣的功能和技巧，成为一位真正的前端大师。

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

作者信息

作者 ： 繁依Fanyi
CSDN： https://techfanyi.blog.csdn.net
掘金：https://juejin.cn/user/4154386571867191

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/154987.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

一个项目进行测试的一些最基本环境

一个项目进行测试的一些最基本环境

在一个项目开发到发布的整个过程中&#xff0c;会使用到很多个环境进行测试和运行项目。最基本的开发环境、测试环境、准生产环境、生成环境 一、开发环境 开发环境顾名思义就是我们程序猿自己把项目放到自己的电脑上&#xff0c;配置好以后&#xff0c;跑起来项目&#xff0…
阅读更多...
分享6个超绝的设计素材网站，绝对好用！

分享6个超绝的设计素材网站，绝对好用！

设计师平时都去哪里找素材呢&#xff1f;收藏好这6个网站&#xff0c;绝对能解决你80%的素材需求&#xff0c;话不多说&#xff0c;直接上干货。 设计素材 1、菜鸟图库 https://www.sucai999.com/?vNTYxMjky 菜鸟图库是一个非常大的素材库&#xff0c;站内包含设计、办公、自…
阅读更多...
差分详解（附加模板和例题）

差分详解（附加模板和例题）

一、一维差分 1.一维差分运用 设a[N]为原数组,b[N]为差分数组&#xff0c;c[N]为进行操作后得到的新数组 (1).先求出差分数组b[N] for(i1;i<n;i) {cin>>a[i];b[i]a[i]-a[i-1]; } (2).进行差分操作&#xff0c;利用void insert(int l,int r,int c)函数 void ins…
阅读更多...
MathType2024最新word公式编辑器

MathType2024最新word公式编辑器

使用word进行论文编写时&#xff0c;常需要使用公式编辑器&#xff0c;但有些word中并没有公式编辑器&#xff0c;这时应该怎么办呢&#xff1f;本文将围绕word里没有公式编辑器怎么办&#xff0c;word中的公式编辑器怎么用的内容进行介绍。 一、word里没有公式编辑器怎么办 …
阅读更多...
ARM 自动资源管理

ARM 自动资源管理

Java 7 增加了一个新特性&#xff0c;该特性提供了另外一种管理资源的方式&#xff0c;这种方式能自动关闭文件。这个特性有时被称为自动资源管理(Automatic Resource Management, ARM)&#xff0c; 该特性以 try 语句的扩展版为基础。自动资源管理主要用于当不再需要文件&…
阅读更多...
Linux ：远程访问的 16 个最佳工具（一）

Linux ：远程访问的 16 个最佳工具（一）

通过远程桌面协议 (RDP) 可以访问远程 Linux 桌面计算机&#xff0c;这是 Microsoft 开发的专有协议。它为用户提供了一个图形界面&#xff0c;可以通过网络连接连接到另一台/远程计算机。 FreeRDP 是 RDP 的免费实现。 RDP以客户端/服务器模型工作&#xff0c;其中远程计算机必…
阅读更多...
MYSQL之DCL

MYSQL之DCL

阅读更多...
echarts双轴右边的轴刻度不显示

echarts双轴右边的轴刻度不显示

图表单轴的时候&#xff0c;yAxis 和 series 是一个对象&#xff0c;但是当双轴显示的时候&#xff0c;yAxis 和 series 就都是一个数组里面包含两个对象&#xff0c;如果是多轴&#xff0c;就是多个对象 看下代码&#xff0c;关键代码 yAxisIndex: 1, 多轴的时候需要指定ind…
阅读更多...
大数据架构Lambda-架构师（六十九）

大数据架构Lambda-架构师（六十九）

随着信息时代技术的发展&#xff0c;数据量的快速增加逐渐飙升到了惊人的数量级别。并且数据的采集与处理技术还在更新加快。大数据中&#xff0c;结构化占比百分之15左右&#xff0c;其余百分之85都是非结构化数据&#xff0c;他们大量存在于社交网络、互联网和电子商务等领域…
阅读更多...
candence出现no connect property onpin,,,,错误，该怎么办？

candence出现no connect property onpin,,,,错误，该怎么办？

原因是上面有引脚添加了 属性no connect&#xff0c;但依然连接了网络&#xff0c;这个时候需要把线剪切&#xff0c;然后看到引脚上有个X, 解决方法&#xff1a; 工具栏&#xff02;place >no connect "X 再连上线&#xff0c;再生成网标的时候&#xff0c; 就不报错了…
阅读更多...
Vue 简介

Vue 简介

1.Vue是什么&#xff1f; Vue 是一个用于 构建用户界面 的 渐进式 框架 1. 构建用户界面&#xff1a;基于 数据 动态 渲染 页面 2. 渐进式&#xff1a; 循序渐进 的学习&#xff0c;理解一部分即可进行实现 3. 框架&#xff1a;一套完整的项目解决方案&#xff0c; 提…
阅读更多...
锐捷练习-ospf虚链路及rip路由相互引入

锐捷练习-ospf虚链路及rip路由相互引入

一、相关知识补充 1、ospf基本概述 OSPF&#xff08;Open Shortest Path First&#xff09;是一种链路状态路由协议&#xff0c;用于在计算机网络中进行路由选择。它是内部网关协议&#xff08;IGP&#xff09;之一&#xff0c;常用于大规模企业网络或互联网服务提供商的网络…
阅读更多...
Web UI 自动化测试方案（超级干货）看完不会你找我！

Web UI 自动化测试方案（超级干货）看完不会你找我！

项目讨论 一、项目中符合自动化测试的部分有哪些&#xff1f;(目标和范围 scope&#xff0c; 准入准出标准) 1、稳定的需求点、变动较少的页面 2、每日构建后的测试验证 daily build 3、比较频繁的回归测试 4、需要在多平台上运行的相同测试案例、组合遍历型的测试、大量的重…
阅读更多...
SystemVerilog学习 （7）——面向对象编程

SystemVerilog学习 （7）——面向对象编程

一、概述 对结构化编程语言,例如Verilog和C语言来讲&#xff0c;它们的数据结构和使用这些数据结构的代码之间存在很大的沟壑。数据声明、数据类型与操作这些数据的算法经常放在不同的文件里,因此造成了对程序理解的困难。 Verilog程序员的境遇比C程序员更加棘手,因为 Verilog …
阅读更多...
Vue h5页面手指滑动图片

Vue h5页面手指滑动图片

场景&#xff1a; 四张图&#xff0c;要求随着手指滑动而滑动 代码&#xff1a; imgs是父盒子 poster-item是每个图片 .imgs {white-space: nowrap;overflow: hidden;overflow-x: auto;margin-bottom: 17px;.poster-item {display: inline-block;vertical-align: middle;wid…
阅读更多...
渗透测试——2

渗透测试——2

zoomeye是一个非常厉害的搜索引擎。
阅读更多...
MySQL存储架构

MySQL存储架构

连接管理与安全性 每个客户端连接都会在服务器进程中拥有一个线程&#xff0c;这个连接的查询只会在这个线程中执行。MySQL5.5以后支持了一个API叫线程池插件&#xff0c;可以用少量线程服务大量连接&#xff0c;因此不用每次都新建连接然后销毁。 客户端连接MySQL服务器时候&…
阅读更多...
Excel vlookup 如何使用

Excel vlookup 如何使用

Excel vlookup 如何使用 打开WX, 搜索 “程序员奇点” Excel vlookup可以说是利器&#xff0c;非常好用的工具&#xff0c;用来查询 Excel 或者进行数据匹配&#xff0c;十分方便。 VLookuP 如何使用&#xff0c;不常用的同学经常容易忘记&#xff0c;这次做个记录&#xff…
阅读更多...
网络安全（大厂面试真题集）

网络安全（大厂面试真题集）

前言 随着国家政策的扶持&#xff0c;网络安全行业也越来越为大众所熟知&#xff0c;想要进入到网络安全行业的人也越来越多。 为了拿到心仪的 Offer 之外&#xff0c;除了学好网络安全知识以外&#xff0c;还要应对好企业的面试。 作为一个安全老鸟&#xff0c;工作这么多年…
阅读更多...
使用UART烧录N76E003AT20核心板

使用UART烧录N76E003AT20核心板

目录 模块简介烧录方式利用ISP对N76E003AT20核心板进行烧录ICP烧录BootloaderISP烧录程序&#xff08;UART&#xff09;测试现象 总结 模块简介 N76E003为带有flash的增强型8位8051内核微控制器&#xff08;1T工作模式&#xff09;&#xff0c;指令集与标准的80C51完全兼容并具…
阅读更多...
最新文章

Copyright @ 2022~2023