JQuery(四)---【使用JQuery实现动画效果】

目录

前言

一.隐藏和显示

1.1使用方法

1.2案例演示(1)

1.3隐藏/显示效果一键切换

二.淡入淡出效果

2.1使用方法

 2.2案例演示(fadeIn)

2.3案例演示(fadeOut)

2.4案例演示(fadeToggle)

2.5案例演示(fadeTo)

三.滑动

3.1使用方法

 3.2案例演示(slideDown)

3.3案例演示(slideUp)

3.4案例演示(slideToggle)

四.动画【重要】

4.1使用方法

4.2案例演示

4.3使用队列功能实现多个动画

五.停止动画

5.1使用方法

5.2案例演示

六.callback函数

6.1使用方法

6.2为什么要使用callback函数

七.chaining绑定

7.1chaining介绍

7.2chaining使用方法

 7.3案例演示

前言

JQuery(一)---【JQuery简介、安装、初步使用、各种事件】-CSDN博客

JQuery(二)---【使用JQuery对HTML、CSS进行操作】-CSDN博客

JQuery(三)---【使用JQuery动态设置浏览器窗口尺寸、JQuery的遍历】-CSDN博客

一.隐藏和显示

1.1使用方法

通过JQuery可以使用：“hide()”和“show()”方法来隐藏和显示HTML元素：

使用格式：

  • “hide”：$(selector).hide(speed,callback)
  • “show”：$(selector).show(speed,callback)

两个参数：

  1. speed：规定隐藏/显示的速度，可以取以下值：“slow”、“fast”、“100”(毫秒数值)
  2. callback：隐藏或显示完成后所执行的函数

1.2案例演示(1)

下面是一个：“点击按钮来控制div标签显示/隐藏的案例”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <p id="p1">如果点击“隐藏”按钮,我就会消失</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
    <script>
        $(document).ready(function(){
            $("#hide").click(function(){
                $("#p1").hide();
            });
            $("#show").click(function(){
                $("#p1").show();
            });
        });
    </script>
</body>
</html>

点击前：

点击后：

1.3隐藏/显示效果一键切换

除了手动使用：“hide()”和“show()”方法来设置某个元素的状态，我们还可以使用：“toggle()”方法来自动进行状态的切换，切换规则如下：

  1. “如果当前是显示状态，那么就会切换到隐藏状态”
  2. “如果当前是隐藏状态，那么就会切换到显示状态

 使用格式：

  • $(selector).toggle(speed,callback)

 这里的“speed”和“callback”参数使用同上，就不再赘述了

二.淡入淡出效果

2.1使用方法

通过JQuery可以实现元素的淡入淡出，即渐变式消失/隐藏

我们通过以下四种方法实现：

  1. “fadeIn(speed,callback)”：淡入已隐藏元素(将隐藏元素渐变的显示出来)
  2. “fadeOut(speed,callback)”：淡出可见元素(将可见元素渐变的隐藏)
  3. “fadeToggle(speed,callback)”：淡入隐藏/可见元素(将隐藏/可见元素渐变的显示/隐藏)
  4. “fadeTo(speed,opacity,callback)”：淡出可见元素(将可见元素渐变的隐藏)同时允许指定淡出的不透明度(值介于0-1之间)

 2.2案例演示(fadeIn)

下面是一个：“点击按钮之后，将三个隐藏的不同颜色的矩形渐变的显示出来”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <p>演示带有不同参数的fadeIn方法</p>
    <button id="bt1">点击之后,将三个矩形淡入</button>
    <br><br>
    <div id="div1" style="width: 80px;height: 80px;background-color: red;margin: 10px;display: none;"></div>
    <div id="div2" style="width: 80px;height: 80px;background-color: green;margin: 10px;display: none;"></div>
    <div id="div3" style="width: 80px;height: 80px;background-color: blue; margin: 10px;display: none;"></div>
    <script>
        $(document).ready(function(){
            $("#bt1").click(function(){
                $("#div1").fadeIn();
                $("#div2").fadeIn("slow");
                $("#div3").fadeIn(3000);
            });
        });
    </script>
</body>
</html>

点击前：

点击后：

动图不方便制作，建议小伙伴们自己敲一下代码，看一下这个动画效果

2.3案例演示(fadeOut)

下面是一个：“点击按钮之后，将三个不同颜色的矩形渐变的隐藏”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <p>演示带有不同参数的fadeIn方法</p>
    <button id="bt1">点击之后,将三个矩形淡入</button>
    <br><br>
    <div id="div1" style="width: 80px;height: 80px;background-color: red;margin: 10px;"></div>
    <div id="div2" style="width: 80px;height: 80px;background-color: green;margin: 10px;"></div>
    <div id="div3" style="width: 80px;height: 80px;background-color: blue; margin: 10px;"></div>
    <script>
        $(document).ready(function(){
            $("#bt1").click(function(){
                $("#div1").fadeOut();
                $("#div2").fadeOut("slow");
                $("#div3").fadeOut(3000);
            });
        });
    </script>
</body>
</html>

点击前：

点击后：

2.4案例演示(fadeToggle)

下面是一个：“点击按钮之后，将三个不同颜色的矩形渐变的隐藏/显示”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <p>演示带有不同参数的fadeIn方法</p>
    <button id="bt1">点击之后,将三个矩形切换状态</button>
    <br><br>
    <div id="div1" style="width: 80px;height: 80px;background-color: red;margin: 10px;"></div>
    <div id="div2" style="width: 80px;height: 80px;background-color: green;margin: 10px;"></div>
    <div id="div3" style="width: 80px;height: 80px;background-color: blue; margin: 10px;"></div>
    <script>
        $(document).ready(function(){
            $("#bt1").click(function(){
                $("#div1").fadeToggle();
                $("#div2").fadeToggle("slow");
                $("#div3").fadeToggle(3000);
            });
        });
    </script>
</body>
</html>

效果：

建议小伙伴自己敲代码看一下过程，这个动画还是很不错的！

2.5案例演示(fadeTo)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <p>演示带有不同参数的fadeIn方法</p>
    <button id="bt1">点击之后,将三个矩形切换状态</button>
    <br><br>
    <div id="div1" style="width: 80px;height: 80px;background-color: red;margin: 10px;"></div>
    <div id="div2" style="width: 80px;height: 80px;background-color: green;margin: 10px;"></div>
    <div id="div3" style="width: 80px;height: 80px;background-color: blue; margin: 10px;"></div>
    <script>
        $(document).ready(function(){
            $("#bt1").click(function(){
                $("#div1").fadeTo("slow",0.15);
                $("#div2").fadeTo("slow",0.4);
                $("#div3").fadeTo("slow",0.7);
            });
        });
    </script>
</body>
</html>

效果：

三.滑动

3.1使用方法

使用JQuery可以使元素实现滑动效果

JQuery提供了三种方法供我们滑动：

  • “slideDown(speed,callback)”：向下滑动元素
  • “slideUp(speed,callback)”：向上滑动元素
  • “slidToggle(speed,callback)”：在向上/向下滑动之间自动切换

 3.2案例演示(slideDown)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        .flip{
            width: 200px;
            background-color: #e5eecc;
            border: solid 1px #c3c3c3;
            text-align: center;
            padding: 5px;
            margin: 0px;
        }
        div.flip{
            height: 120px;
            display: none;
        }
    </style>
</head>
<body>
    <p class="flip">请点击这里</p>
    <div class="flip">
        <p>这是一个例子</p>
        <p>这是另一个例子</p>
    </div>
    <script>
        $(document).ready(function(){
            $("p.flip").click(function(){
                $("div.flip").slideDown("slow");
            });
        });
    </script>
</body>
</html>

点击前：

点击后：

3.3案例演示(slideUp)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        .flip{
            width: 200px;
            background-color: #e5eecc;
            border: solid 1px #c3c3c3;
            text-align: center;
            padding: 5px;
            margin: 0px;
        }
        div.flip{
            height: 120px;
        }
    </style>
</head>
<body>
    <div class="flip">
        <p>这是一个例子</p>
        <p>这是另一个例子</p>
    </div>
    <p class="flip">请点击这里</p>
    <script>
        $(document).ready(function(){
            $("p.flip").click(function(){
                $("div.flip").slideUp("slow");
            });
        });
    </script>
</body>
</html>

点击前：

点击后：

3.4案例演示(slideToggle)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        .flip{
            width: 200px;
            background-color: #e5eecc;
            border: solid 1px #c3c3c3;
            text-align: center;
            padding: 5px;
            margin: 0px;
        }
        div.flip{
            height: 120px;
        }
    </style>
</head>
<body>
    <div class="flip">
        <p>这是一个例子</p>
        <p>这是另一个例子</p>
    </div>
    <p class="flip">请点击这里</p>
    <script>
        $(document).ready(function(){
            $("p.flip").click(function(){
                $("div.flip").slideToggle("slow");
            });
        });
    </script>
</body>
</html>

效果：


使用“slideToggle”之后我们可以很方便的实现对元素滑动的控制

而使用“slideUp”和“slideDown”实现滑动，只能是单侧方向，并不能“收回”

四.动画【重要】

4.1使用方法

JQuery支持我们创建自定义的动画，从而实现“花里胡哨”的功能

使用“animate()”方法可以创建一个自定义动画

使用方法：

  • $(selector).animate({params},speed,callback)

参数说明：

  • params参数定义形成动画的CSS属性
  • speed规定动画的时长，可以取：“slow”、“fast”、“100(数值单位)”(毫秒)
  • callback表示动画完成后执行的函数

通过使用animate我们可以修改一个元素的“几乎所有的CSS”属性，从而实现更加复杂的动画效果

PS：“如果我们需要对某个元素实现移动动画，需要将这个元素的position属性设置为absolute、relative、fixed其中一种”

4.2案例演示

下面是一个：“点击按钮后，div矩形向右移动，并且透明度为50%，高度/宽度变为150”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <button>开始动画</button>
    <p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
    <div style="background-color: aqua;height: 100px;width: 100px;position: absolute;"></div>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("div").animate({
                    left : '250px',
                    opacity : '0.5',
                    height : '150px',
                    width : '150px'
                });
            });
        });
    </script>
</body>
</html>

点击前：

点击后：

（ps：“除了使用固定值来控制移动的距离，我们也可以使用相对值来控制元素的移动，使用方法是在值的前面加上’+=‘或’-=‘来表示加或减”）

4.3使用队列功能实现多个动画

如果我们想要一次执行多个连续的动画，我们就需要使用：“队列”的功能

使用方法也很简单，就是一次性写入多个animate()方法即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <button>开始动画</button>
    <p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
    <div style="background-color: aqua;height: 100px;width: 100px;position: absolute;"></div>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("div").animate({height : '300px',opacity : '0.4'},"slow");
                $("div").animate({width : '300px',opacity : '0.8'},"slow");
                $("div").animate({height : '100px',opacity : '0.4'},"slow");
                $("div").animate({height : '100px',opacity : '0.8'},"slow");
            });
        });
    </script>
</body>
</html>

效果：

图片会不断进行依次进行四个方向的拉伸

五.停止动画

5.1使用方法

JQuery提供“stop()”方法在动画结束之前强制停止动画

使用方法：

  • $(selector).stop(stopAll,goToEnd);

参数说明：

  1. stopAll规定是否应该清除动画队列，默认是false，只停止这个动画，该动画所属队列中的其他动画不停止
  2. goToEnd规定是否立即完成当前动画(相当于强制完成动画省略过程也算停止了)，默认是false

5.2案例演示

下面是一个：“点击按钮后，div标签内容出现并且以很慢的速度向下滑动，直到点击停止滑动或者点击按钮停止”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <button>停止滑动</button>
    <p id="sample">点我向下滑动面板</p>
    <div style="background-color: aqua;height: 200px;width: 200px;display: none;">
        <p>这是一个例子</p>
    </div>
    <script>
        $(document).ready(function(){
            $("#sample").click(function(){
                $("div").slideDown(5000);
            });
            $("button").click(function(){
                $("div").stop();
            });
        });
    </script>
</body>
</html>

效果：

六.callback函数

6.1使用方法

callback函数用来在动画100%完成后执行

callback函数将一个函数名作为一个参数传递给它

6.2为什么要使用callback函数

我们假设一个场景：“假设我们点击一个按钮之后，<p>段落会逐渐消失，并且在消失完成后会弹出一个弹窗提示<p>段落已经消失”

我们先看看不使用callback的状态：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <button>点我隐藏段落</button>
    <p id="sample">这是一个示例段落</p>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#sample").hide();
                alert("段落被成功隐藏了");
            });
        });
    </script>
</body>
</html>

点击后：

可以看到，段落还没被隐藏，弹窗就已经出现了，此时我们点击“确定”后，段落才会被隐藏，这显而是不正确的。

错误原因：如果大家接触过软件开发，会明白软件开发中经常要用到多线程，在这里“隐藏功能”被视作一个“子线程”，而“弹窗”被视作一个“主线程”，此时“主线程”堵塞了“子线程”

如果我们使用callback函数，可以很好的解决这个问题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <button>点我隐藏段落</button>
    <p id="sample">这是一个示例段落</p>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#sample").hide(1000,function(){
                    alert("段落被成功隐藏了")
                ;});
            });
        });
    </script>
</body>
</html>

效果：

可以看到在动画完成后，弹窗才会出现

七.chaining绑定

7.1chaining介绍

JQuery允许我们将方法链接起来，使用链接可以方便我们对某些方法的复用

例如：“假设我们有一个id为p1的段落，我们想要它执行slideDown方法和slideUp方法”，我们可以很轻松的写出下面代码：

$("#p1").slideUp(1000);
$("#p1").slideDown(1000);

可以看到，我们写了两条语句，让这个元素执行这个两个功能

但是如果一个元素需要执行非常多的功能，假设有100个，我们就要写100条语句，这对于“程序员”来说很不方便！

为此，我们可以使用链接来简化书写！

7.2chaining使用方法

chaining使用方法：

  • $(selector).方法1.方法2.方法3.方法4.....

 7.3案例演示

下面的例子：

将css()，slideUp()，sildeDown()链接在p1上

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function()
  {
  $("button").click(function(){
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
  });
});
</script>
</head>

<body>

<p id="p1">jQuery 乐趣十足！</p>
<button>点击这里</button>

</body>
</html>

效果：

点击后p1会“依次”执行：“css()”、“slideUp”、“slideDown”

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

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

相关文章

SpringBoot中使用Jackson序列化返回

SpringBoot中使用Jackson序列化返回

SpringBoot中使用Jackson序列化返回 在Spring Boot应用中&#xff0c;使用Jackson库来处理JSON的序列化和反序列化是一种常见的做法。Jackson是一个高效的JSON处理器&#xff0c;广泛用于Java环境中&#xff0c;尤其是在与Spring框架集成时。本文将详细介绍如何在Spring Boot中…
阅读更多...
预付费电表管理系统

预付费电表管理系统

预付费电表管理系统是一种现代化的电力管理系统&#xff0c;它将信息化技术和电力系统紧密结合&#xff0c;旨在提供更加高效、便捷的电力使用与管理方式。该系统能够有效地解决传统计费方法中存在的延迟计费、欠费风险等问题&#xff0c;通过预付费的方式&#xff0c;既保证了…
阅读更多...
【动态规划】【01背包 尽量装满背包】Leetcode 1049. 最后一块石头的重量 II

【动态规划】【01背包 尽量装满背包】Leetcode 1049. 最后一块石头的重量 II

【动态规划】【01背包 尽量装满背包】Leetcode 1049. 最后一块石头的重量 II 解法 ---------------&#x1f388;&#x1f388;题目链接&#x1f388;&#x1f388;------------------- 解法 &#x1f612;: 我的代码实现> 动规五部曲 ✒️确定dp数组以及下标的含义 d…
阅读更多...
[数据结构]——二叉树链式结构的实现

[数据结构]——二叉树链式结构的实现

目录 1. 前置说明 2. 二叉树的遍历 1. 前序、中序以及后序遍历 1.前序遍历递归 1.图解&#xff1a;​编辑 2.代码 2.中序遍历递归 3.后序遍历递归 3. 节点个数以及高度等 1.二叉树节点个数 2.叶子节点个数 3.树的高度 4.K层节点个数 5.二叉树查找值为x的节点是否存在…
阅读更多...
【考研数学】跟张宇，刷《660》正确率惨不忍睹，怎么办？

【考研数学】跟张宇，刷《660》正确率惨不忍睹，怎么办？

接下来要先改错 50%的正确率 &#xff0c;说明一半的题目都有一些问题导致了结果错误。 做题不是检查完结果&#xff0c;得到一个正确率就完事了。 核心是把错题的原因找到&#xff0c;计算出问题&#xff1f;有思路把公式忘了&#xff1f;或是根本没解题思路&#xff1f;还…
阅读更多...
《深入Linux内核架构》第3章 内存管理（1）

《深入Linux内核架构》第3章 内存管理（1）

目录 3.1 概述 3.2 NUMA模型的内存组织 3.2.1 概述 3.2.2 三个数据结构 3.2.2.1 node 3.2.2.2 zone 3.2.2.3 page 本专栏文章将有70篇左右&#xff0c;欢迎关注&#xff0c;订阅后续文章。 本章讲物理内存的管理&#xff0c;而不是虚拟内存地址空间。 3.1 概述 页帧&a…
阅读更多...
DC/DC电源模块直流升压变换器电压控制输出5V12V24V转0-50V80V110V150V180V200V250V300V500V800V1000V

DC/DC电源模块直流升压变换器电压控制输出5V12V24V转0-50V80V110V150V180V200V250V300V500V800V1000V

特点 效率高达 75%以上1*2英寸标准封装单电压输出可直接焊在PCB 上工作温度: -40℃~75℃阻燃封装&#xff0c;满足UL94-V0 要求温度特性好电压控制输出,输出电压随控制电压线性变化 应用 GRB 系列模块电源是一种DC-DC升压变换器。该模块电源的输入电压分为&#xff1a;4.5~9V、…
阅读更多...
记录Python的pandas库详解

记录Python的pandas库详解

如何生成一个pd import pandas as pd df pd.DataFrame([[1,2,3],[4,5,6]],index[A,B],columns[C1,C2,C3])df ---------------------------------------------------------------------------C1 C2 C3 A 1 2 3 B 4 5 6df.T -------------------------------------------------…
阅读更多...
字节8年经验之谈 —— 接口测试框架接入性能测试实践分享！

字节8年经验之谈 —— 接口测试框架接入性能测试实践分享！

1. 前言 现如今接口测试在软件质量行业中的地位&#xff0c;已经越来越重要&#xff0c;相对于上层的UI自动化测试和下层的单元测试&#xff0c;接口测试的“低”投入、“高”回报&#xff0c;也成了绝大多数质量保障实践的首选。 在开展接口测试时&#xff0c;往往很多时候都…
阅读更多...
python使用redis存储时序数据

python使用redis存储时序数据

import redisdef ts_demo():"""时序数据存储RedisTimeSeries测试"""# 连接到Redisr redis.Redis(hostlocalhost, password"xxxx", port63790, db0)r1 r.ts()# print(r1.get("ts_key"))# print(r.exists(ts_key))# # 清空键…
阅读更多...
PyQt5 快速入门

PyQt5 快速入门

PyQt5 简介和开发环境搭建 简介 PyQt是一个GUI小部件工具包。 它是Qt的Python接口&#xff0c; Qt是最强大&#xff0c;最受欢迎的跨平台GUI库之一。 PyQt由RiverBank Computing Ltd.开发。最新版本的PyQt可从其官方网站下载 - riverbankcomputing.com PyQt API是一组包含大…
阅读更多...
【leetcode】双指针算法技巧——滑动窗口

【leetcode】双指针算法技巧——滑动窗口

标题&#xff1a;【leetcode】双指针算法技巧——滑动窗口 水墨不写bug 正文开始&#xff1a; 滑动窗口介绍 滑动窗口是一种常用的算法技巧&#xff0c;用于解决一些涉及 连续子数组或子串 的问题。它的基本思想是 维护一个窗口&#xff0c;通过 在窗口内移动 来寻找满…
阅读更多...
SD-WAN为什么能让网络运维更简单

SD-WAN为什么能让网络运维更简单

在数字化浪潮席卷的今天&#xff0c;企业面临着网络规模的不断扩大、分支机构的广泛分布以及云服务需求的日益增长。企业目前的网络不足以达到这些要求&#xff0c;因而出现网络性能下降、运维复杂度剧增、成本攀升的问题。而SD-WAN&#xff08;软件定义广域网&#xff09;作为…
阅读更多...
SASE：打造数据安全保障新模式

SASE：打造数据安全保障新模式

在企业纷纷拥抱数字业务的过程中&#xff0c;由于边缘计算、云服务、混合网络的逐渐兴起&#xff0c;使得本就漏洞百出的传统网络安全架构更加岌岌可危&#xff0c;而且远远无法满足企业数字业务的需要。 伴随企业全球化发展&#xff0c;企业的数据中心不再是用户与设备访问需…
阅读更多...
socket编程——tcp

socket编程——tcp

在我这篇博客&#xff1a;网络——socket编程中介绍了关于socket编程的一些必要的知识&#xff0c;以及介绍了使用套接字在udp协议下如何通信&#xff0c;这篇博客中&#xff0c;我将会介绍如何使用套接字以及tcp协议进行网络通信。 1. 前置准备 在进行编写代码之前&#xff…
阅读更多...
Docker部署Prometheus+AlertManager实现邮件告警

Docker部署Prometheus+AlertManager实现邮件告警

文章目录 一、环境准备1、硬件准备&#xff08;虚拟机&#xff09;2、关闭防火墙&#xff0c;selinux3、所有主机安装docker 二、配置Prometheus1、docker启动Prometheus 三、添加监控节点1、docker启动node-exporter 四、Prometheus配置node-exporter1、修改prometheus.yml配置…
阅读更多...
Docker构建Golang项目常见问题

Docker构建Golang项目常见问题

Docker构建Golang项目常见问题 1 dockerfile报错&#xff1a;failed to read expected number of bytes: unexpected EOF2 go mod tidy: go.mod file indicates go 1.21, but maximum supported version is 1.17 1 dockerfile报错&#xff1a;failed to read expected number o…
阅读更多...
鸿蒙语言TypeScript学习第18天：【泛型】

鸿蒙语言TypeScript学习第18天：【泛型】

1、TypeScript 泛型 泛型&#xff08;Generics&#xff09;是一种编程语言特性&#xff0c;允许在定义函数、类、接口等时使用占位符来表示类型&#xff0c;而不是具体的类型。 泛型是一种在编写可重用、灵活且类型安全的代码时非常有用的功能。 使用泛型的主要目的是为了处…
阅读更多...
【Linux】详解如何利用共享内存实现进程间通信

【Linux】详解如何利用共享内存实现进程间通信

一、共享内存&#xff08;Shared Memory&#xff09;的认识 共享内存&#xff08;Shared Memory&#xff09;是多进程间共享的一部分物理内存。它允许多个进程访问同一块内存空间&#xff0c;从而在不同进程之间共享和传递数据。这种方式常常用于加速进程间的通信&#xff0c;因…
阅读更多...
JS打包工具 Vite

JS打包工具 Vite

Vite是 JS 新一代的打包的工具&#xff0c;它所解决的问题&#xff0c;是前端打包慢的问题&#xff0c;随着前端应用复杂度越来越大&#xff0c;项目文件越来越多&#xff0c;通常项目中都是使用 Webpack 进行打包&#xff0c;Webpack是个静态的打包工具&#xff0c;每次改动都…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站