蓝桥杯jQuery复习（三）

最新推荐文章于 2025-05-21 12:04:25 发布
最新推荐文章于 2025-05-21 12:04:25 发布
阅读量243 收藏 2
点赞数 1
分类专栏： 前端 文章标签： 蓝桥杯 jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_49765699/article/details/129318720
版权

动画

隐藏与显示

show 方法用于显示出隐藏的被选元素。

其语法格式为：

$().show(speed, easing, callback);
注意：show() 只适用于通过 jQuery 方法和 CSS 中 display 属性隐藏的元素，不适用于通过 visibility 隐藏的元素。

hide 方法用于隐藏被选元素。

$().hide(speed, easing, callback);

show 和 hide 方法的参数说明如下：

  • speed 可选参数，用于设置显示的速度，其值可以是以毫秒为单位的数值，也可以是 slow、normal、fast 等值。

  • easing 可选参数，用于设置动画在不同点上元素的速度，其默认值是 swing，表示开头和结尾的速度慢，中间的速度快。

  • callback 可选参数，是方法执行完成后，执行的一个函数。

了解了 show 和 hide 方法，接下来我们做一下练习吧！

接下来，在 index.html 文件中写入以下内容。

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title></title><style>div {
        width: 50px;
        height: 50px;
        float: left;
        margin: 10px0010px;
        text-align: center;
        border: 1px solid rgb(27, 179, 128);
      }
    </style><scriptsrc="jquery-3.6.0.min.js"></script><script>
      $(function () {
        $("div")
          .mouseover(function () {
            $(this).hide(); // 鼠标移入时，隐藏该元素
          })
          .mouseout(function () {
            $(this).show(); // 鼠标移出时，显示该元素
          });
      });
    </script></head><body><div>1</div><div>2</div><div>3</div><div>4</div></body></html>

最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。

  • 上面代码中，我们让四个 div 元素左浮动显示在同一行，使用 mouseover 和 hide 方法实现，当鼠标放在元素上，该元素立马隐藏起来。

  • 使用 mouseout 和 show 方法实现，当鼠标移出元素，该元素又马上显示出来了。

下面我们给 hide 和 show 方法分别添加一个时间参数来看看代码执行的效果。

$(function () {
  $("div")
    .mouseover(function () {
      $(this).hide(3000);
    })
    .mouseout(function () {
      $(this).show(3000);
    });
});

从上图可以看出，当鼠标放在 div 元素上，该元素的长宽会越来越小，直到元素消失；当鼠标移开后，该元素就执行了一个与之相反的变化过程。

淡入与淡出

什么叫做动画的淡入与淡出呢？同学们做过 PPT 的话，应该知道我们可以设置每张 PPT 的切换方式，其中有一种就是淡入淡出，其效果让页面的内容颜色越来越淡，直到消失，下一张 PPT 的显示就从淡变深，这就是淡入淡出的效果了。

fadeIn 方法可以让元素淡入，它逐渐改变元素的不透明度，让不透明度从 0 逐渐变为 1，从而实现淡入的效果。

fadeOut 则用于让元素淡出，也是通过修改元素的不透明度，让不透明度逐渐从 1 变为 0，从而实现淡出的效果。

其语法格式为：

// 淡入
$().fadeIn(speed, easing, callback);

// 淡出
$().fadeOut(speed, easing, callback);

fadeIn 和 fadeOut 方法参数说明如下：

  • speed 可选参数，用于设置显示的速度，其值可以是以毫秒为单位的数值，也可以是 slow、normal、fast 等值。

  • easing 可选参数，用于设置动画在不同点上元素的速度，其默认值是 swing，表示开头和结尾的速度慢，中间的速度快。

  • callback 可选参数，是方法执行完成后，执行的一个函数。

介绍完 fadeIn 和 fadeOut 方法，接下来我们做一下练习吧！

新建一个 index1.html 文件，在文件中写入以下内容。

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>fadeIn 和 fadeOut 方法</title><style>div {
        width: 50px;
        height: 50px;
        float: left;
        margin: 10px0010px;
        text-align: center;
      }
      #item1 {
        background-color: #28b5b5;
      }
      #item2 {
        background-color: #8fd9a8;
      }
      #item3 {
        background-color: #d2e69c;
      }
    </style><scriptsrc="jquery-3.6.0.min.js"></script><script>
      $(function () {
        $("div")
          .mouseover(function () {
            $(this).fadeOut(500);
          })
          .mouseout(function () {
            $(this).fadeIn(500);
          });
      });
    </script></head><body><divid="item1"></div><divid="item2"></div><divid="item3"></div></body></html>

最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。

  • 上面代码中，在 body 标签中写入三个颜色不同的 div 元素，使用 fadeOut 方法实现当鼠标放在元素上，该元素的背景颜色会逐渐变淡直到消失。

  • 使用 fadeIn 方法实现当鼠标移出元素，背景颜色慢慢变深知道恢复原状。

自定义动画

在网页三剑客中我们学过关于动画的操作，回忆一下我们需要使用关键帧去定义一个动画函数，然后使用 animation 属性去调用，其实过程是比较麻烦的。在 jQuery 中，使用 animate 方法可以实现自定义动画。

其语法格式为：

$().animate({ style }, speed, callback);

style 是样式属性列表，我们的样式属性列表用逗号隔开写在 {} 中，speed 是动画持续的时间，callback 是动画结束后所执行的函数。

默认情况下，所有 HTML 元素的定位方式都是静态定位（即 position: static），且无法移动。 如需对位置进行操作，比如使用 “top”，“right”，“bottom”，“left” 属性要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

了解了自定义动画，我们一起来做练习吧！

新建一个 index2.html 文件，在文件中写入以下内容。

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>animate 方法</title><style>div {
        width: 50px;
        height: 50px;
        margin-top: 20px;
        /*默认情况下，元素是 static 不能被移动，所以这里设置为 relative*/position: relative;
        background-color: lightskyblue;
      }
    </style><scriptsrc="jquery-3.6.0.min.js"></script><script>
      $(function () {
        $(".btn1").click(function () {
          // 以元素本身的宽度为基点加 100 个像素
          $("div").animate({ left: "+=100px" });
        });
        $(".btn2").click(function () {
          // 元素的宽度变为 300 个像素
          $("div").animate({ width: "300px" });
        });
      });
    </script></head><body><buttonclass="btn1">向右移动</button><buttonclass="btn2">元素变长</button><div></div></body></html>

最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。

在上面代码中，我们给页面里的两个按钮分别绑定了点击事件，在第一个点击事件里，给 div 元素添加了左移的动画效果，left:"+=100px" 相当于 left = left + 100px。在第二个点击事件里，给 div 元素添加了改变宽度的动画效果。

队列动画

在之前的课中，我们已经学过了如何使用 animate 方法来自定义一些简单的动画。同学们有没有想过我们如何让动画按照一定的顺序去执行多个动画效果呢？这时队列动画就该上场了。

队列动画其语法格式为：

$().animate().animate()....animate();

接下来我们练习一下吧！

由于 jQuery 不支持变色，为了弥补这一缺陷，给 jQuery 的动画赋予变色的能力，我们需要执行以下命令来导入一个颜色库。

wget https://labfile.oss.aliyuncs.com/courses/3774/jquery.color-2.1.2.min.js

新建一个 index3.html 文件，在文件中写入以下内容。

<!DOCTYPE html><html lang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>队列动画</title><style>div {
        width: 300px;
        height: 150px;
        margin-top: 20px;
        text-align: center;
        position: absolute;
        border: 1px solid;
      }
      p {
        position: relative;
      }
    </style><scriptsrc="jquery-3.6.0.min.js"></script><!--导入 jQuery 的颜色库--><scriptsrc="jquery.color-2.1.2.min.js"></script><script>
      $(function () {
        $(".btn1").click(function () {
          // 改变标题中字的间距和字的大小
          $("#title")
            .animate({ letterSpacing: "5px" })
            .animate({ fontSize: "25px" });
        });
        $(".btn2").click(function () {
          $(".text").animate({ top: "5px" }).animate({ color: "#3252988" });
        });
        $(".btn3").click(function () {
          $("div").animate({ width: "400px", height: "200px" });
        });
      });
    </script></head><body><buttonclass="btn1">改变标题样式</button><buttonclass="btn2">改变内容样式</button><buttonclass="btn3">改变边框大小</button><div><pid="title">军行</p><pclass="text">骝马新跨白玉鞍，战罢沙场月色寒。</p><pclass="text">城头铁鼓声犹震，匣里金刀血未干。</p></div></body></html>

最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。

从上面的实验效果，我们可以看出队列动画的作用在于让每个动画效果有执行的先后顺序，就像排队一样。若是在一个 animate 方法中写多个属性，动画效果会同时出现，并无先后顺序。

停止动画

从前面的学习中，我们已经知道如何设置连续性的动画效果啦！但是同学们有没有想过，我们是否可以打断动画的执行呢？当然可以啦！这就是我们本节课要讲的停止动画的方法 stop。

stop 方法的语法格式为：

$().stop(stopAll, goToEnd);

stop 方法有两个参数，其参数意义如下所示：

  • 第一个参数 stopAll 代表是否停止所有动画，其取值为 true 或者 false，当为 true 时代表停止当前及后面的所有动画，当为 false 时代表只停止当前动画。

  • 第二个参数 goToEnd 代表停止动画后是否跳转到最后的动画效果，其取值也是布尔类型，当为 true 时，代表停止动画后会跳转到最后的动画效果，为 false 时则不跳转。

注：stop 方法的两个默认参数取值为 false，也就是当你写 stop() 时，相当于只停止当前动画并且不会跳转到动画的最后效果。

下面我们来练习一下吧～

新建一个 index5.html 文件，在文件中写入以下内容。

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>停止动画</title><style>div {
        width: 50px;
        height: 50px;
        margin-top: 10px;
        background-color: #8fe6d1;
      }
    </style><scriptsrc="jquery-3.6.0.min.js"></script><scriptsrc="https://labfile.oss.aliyuncs.com/courses/3774/jquery.color-2.1.2.min.js"></script><script>
      $(function () {
        $(".btn1").click(function () {
          $("div")
            .animate({ "background-color": "#ffc288" }, 2000)
            .animate({ width: "150px" }, 2000)
            .animate({ height: "150px" }, 2000);
        });
        $(".btn2").click(function () {
          $("div").stop();
        });
      });
    </script></head><body><buttonclass="btn1">开始</button><buttonclass="btn2">停止</button><div></div></body></html>

最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。

在我们的代码中给 div 元素设置了三个不同的动画效果，当执行第二个变宽的动画效果时，我们触发了 stop 方法，所以第二个动画效果停止，继续执行第三个动画效果。

延迟动画

在 jQuery 中我们可以使用 delay 方法来延迟动画的执行，比如，当我们打开页面并不想让动画立马执行，可以在 animate 前面加上延迟方法，来延缓动画的开始时间。

其语法格式为：

$().delay(speed);

delay 方法的必要参数 speed 是动画延迟的时间。

了解了延迟动画，接下来我们练习一下吧！

新建一个 index6.html 文件，在文件中写入以下内容。

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>延迟动画</title><style>div {
        width: 50px;
        height: 50px;
        margin-top: 20px;
        position: absolute;
        border: 1px solid;
      }
    </style><scriptsrc="jquery-3.6.0.min.js"></script><scriptsrc="jquery.color-2.1.2.min.js"></script><script>
      $(function () {
        $(".btn1").click(function () {
          $("div").animate({ width: "100px" });
          $("div").animate({ height: "100px" });
          $("div").delay(3000).animate({ "background-color": "#ddffbc" });
        });
      });
    </script></head><body><buttonclass="btn1">开始</button><div></div></body></html>

最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。

从上面的实验效果我们可以看出，当元素的长宽改变后，延迟了 3000 毫秒才执行了背景颜色填充的动画。

遍历

遍历祖先元素

何为祖先元素呢？祖先元素就是指某个元素的父元素或者祖父元素等上层元素，例如：

<body><div><p></p></div></body>

在上面例子中，我们 p 元素的父元素是 div 元素，p 元素的祖父元素是 body 元素。

在 jQuery 中，提供了方法用来找到指定元素的祖先元素，常用的方法有以下两种。

  • parent 方法是用来查找指定元素的父元素的。

  • parents 方法是用来查找指定元素的所有祖先元素的。

接下来通过代码例子来看看两者之间的区别吧！

parent 和 parents 的使用

获取 jQuery 库和 jQuery 的颜色库。

wget https://labfile.oss.aliyuncs.com/courses/3774/jquery-3.6.0.min.js

wget https://labfile.oss.aliyuncs.com/courses/3774/jquery.color-2.1.2.min.js

接着，在 index.html 文件中写入以下内容。

<!DOCTYPE html><html lang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>jQuery 祖先</title><style>div {
        width: 300px;
        height: 200px;
        border: 2px solid;
      }
    </style><scriptsrc="jquery-3.6.0.min.js"></script><scriptsrc="jquery.color-2.1.2.min.js"></script><script>
      $(function () {
        $("div").hover(
          function () {
            // 当鼠标放在元素上时，给整个列表添加一个背景颜色
            $("li").parent().css("background-color", "#edffec");
          },
          function () {
            // 当鼠标移出元素时，所有父辈的字体颜色都会发生改变
            $("li").parents().css("color", "#f2a154");
          }
        );
      });
    </script></head><body><div><h4>任务清单</h4><ul><li>晨读</li><li>练字</li><li>画画</li></ul></div></body></html>

最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。

  • 在上面代码中，当鼠标移入，通过 $("li").parent().css("background-color","#edffec") 会给 li 元素的父辈元素 ul 添加一个背景颜色。

  • 当鼠标移出，通过 $("li").parents().css("color","#f2a154") 会给 li 元素的所有祖先元素都设置字体颜色。

同学们可能会有疑问，$("li").parents() 明明查找的是父元素，为什么 li 元素本身会改变字体颜色呢？

我们按下 F12 打开控制台，可以看见，li 元素继承了其父元素的样式，所以它的字体颜色也改变了。

从上面的例子我们可以看出，parent 方法仅仅是对指定元素的父元素进行操作，而 parents 方法是对所有的父元素进行操作。

注意：我们还可以在方法中指定选择器。

遍历兄弟元素

遍历兄弟元素的方法分为三种：

  • 前向兄弟元素查找

  • 后向兄弟元素查找

  • 所有兄弟元素查找

前向兄弟元素查找

前向兄弟元素查找就是查找指定元素前面的兄弟元素，在 jQuery 中可以用以下两种方法来实现前向兄弟元素的查找。

其语法格式为：

$().prev(); // 查找指定元素前向第一个元素

$().preAll(); // 查找指定元素前向所有元素

prev 方法的使用

新建一个 index1.html 文件，在文件中写入以下内容。

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>prev 方法</title><style>div {
        width: 50px;
        height: 50px;
        border: 1px solid;
      }
    </style><scriptsrc="jquery-3.6.0.min.js"></script><script>
      $(function () {
        $("#div3").prev().css("background", "#a6d6d6");
      });
    </script></head><body><div>1</div><div>2</div><divid="div3">3</div><div>4</div></body></html>

最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。

我们指定给第三个 div 标签的前向兄弟标签设置了一个背景颜色，从效果图我们可以知道，prev 方法只能查找到指定元素的第一个前向兄弟元素。

prevAll 方法的使用

新建一个 index2.html 文件，在文件中写入以下内容。

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>prevAll</title><style>div {
        width: 50px;
        height: 50px;
        border: 1px solid;
      }
    </style><scriptsrc="jquery-3.6.0.min.js"></script><script>
      $(function () {
        $("#div3").prevAll().css("background", "#a6d6d6");
      });
    </script></head><body><div>1</div><div>2</div><divid="div3">3</div><div>4</div></body></html>

最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。

从上面的效果图可以看出第三个 div 元素的所有兄弟元素都被选中了。

后向兄弟元素查找

后向兄弟元素查找就是查找指定元素的后向元素。

其语法格式为：

$().next(); // 查找指定元素的第一个后向兄弟元素

$().nextAll(); // 查找指定元素的所有后向兄弟元素

新建一个 index3.html 文件，在文件中写入以下内容。

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>next</title><style>div {
        width: 50px;
        height: 50px;
        border: 1px solid;
      }
    </style><scriptsrc="jquery-3.6.0.min.js"></script><script>
      $(function () {
        $("#div3").next().css("background", "#a6d6d6");
      });
    </script></head><body><div>1</div><div>2</div><divid="div3">3</div><div>4</div></body></html>

最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。

nextAll 的用法与 prevAll 类似，这里就不再举例了，请同学们自行尝试。

查找所有兄弟元素

除了前面所讲的前向和后向的兄弟元素查找，jQuery 还给我们提供了查找所有兄弟元素的方法。

其语法格式为：

$().siblings();

新建一个 index4.html 文件，在文件中写入以下内容。

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>siblings</title><style>div {
        width: 50px;
        height: 50px;
        border: 1px solid;
      }
    </style><scriptsrc="jquery-3.6.0.min.js"></script><script>
      $(function () {
        $("#div3").siblings().css("background", "#a6d6d6");
      });
    </script></head><body><div>1</div><div>2</div><divid="div3">3</div><div>4</div></body></html>

最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。

从上图我们可以看出除了被指定的元素本身，它的其他兄弟元素都被查找到了。

遍历后代元素

遍历后代元素有两种方法，分别是：

  • children 方法

  • find 方法

children 方法的使用

children 方法和 find 方法都是用来查找元素的子元素的，区别是 children 只能获取元素的儿子节点，而 find 方法可以获取元素的所有符合条件的后代节点。

children 语法格式为：

jQuery对象.children();

新建一个 index5.html 文件，在文件中写入以下内容。

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>children</title><style>div {
        width: 300px;
        height: 170px;
        border: 1px solid;
      }
    </style><scriptsrc="jquery-3.6.0.min.js"></script><script>
      $(function () {
        $("div").click(function () {
          $(this).children("#title").css("font-size", "25px");
          $(this).children().css("text-align", "center");
        });
      });
    </script></head><body><div><pid="title">日出东南隅行</p><p>秦楼出佳丽，正值朝日光。</p><p>陌头能驻马，花处复添香。</p></div></body></html>

最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。

  • 打开页面我们会看到一个带有诗词的文本框，当点击 div 元素时，会触发 click 事件，使用 $(this).children("#title") 给 div 元素中 id 名为 title 的子元素设置字体大小属性。

  • 使用 $(this).children() 给 div 元素的所有子元素设置居中的效果。

find 方法的使用

find 方法也是查找指定元素的后代元素，但不同的是，find 方法可以查找到指定元素的所有后代元素。

其语法格式为：

jQuery对象.find(selector);

新建一个 index6.html 文件，在文件中写入以下内容。

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>find</title><style>divulli {
        display: inline-block;
        float: left;
        width: 60px;
        height: 30px;
        border: 1px solid blueviolet;
        margin-right: 10px;
      }
    </style><scriptsrc="jquery-3.6.0.min.js"></script><script>
      $(function () {
        $("div").click(function () {
          $(this).find("li").css("text-align", "center");
        });
      });
    </script></head><body><div><ul><li>首页</li><li>课程</li><li>会员</li><li>更多</li></ul></div></body></html>

最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。

  • 在上面代码中，页面上有个无序列表，当我们点击该元素时，会触发 click 事件。

  • 通过使用 $(this).find("li") 可以给 div 元素的所有 li 类型的子元素设置文字居中。

过滤元素

过滤元素就是通过指定的条件来查找元素，其有以下四种方式：

  • 类名过滤

  • 下标过滤

  • 判断过滤

  • 反向过滤

类名过滤

在 jQuery 中使用 hasClass 方法可以用来判断指定元素是否包含该类名的元素。

其使用格式为：

$().hasClass("类名");

hasClass 方法返回值为 boolean 类型，当查找到类名相符的指定元素时，则会返回 true，反之为 false。

新建一个 index7.html 文件，在文件中写入以下内容。

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>hasClass</title><style>div {
        float: left;
        margin-right: 10px;
        width: 50px;
        height: 50px;
        border: 1px solid;
      }
      .div2 {
        background-color: #b6c9f0;
      }
    </style><scriptsrc="jquery-3.6.0.min.js"></script><script>
      $(function () {
        $("div").click(function () {
          var value = $(this).hasClass("div2");
          if (!value) {
            $(this).addClass("div2");
          } else {
            alert("该元素已应用 div2 样式");
          }
        });
      });
    </script></head><body><div></div><div></div><div></div></body></html>

最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。

  • 在上面代码中，有三个 div 元素，当我们点击三个元素中的其中一个时，会触发 click 事件。

  • 使用 $("div").hasClass("div2") 来判断 div 元素中是否包含 class 名为 div2 的元素。

  • 使用 if 语句判断，如果没有该元素，则给该元素添加背景颜色；如果有，弹出警告框。

下标过滤

在 jQuery 中使用 eq 方法可以实现下标过滤。

其语法格式为：

$().eq(n);

n 是一个整数，取值为元素的下标值。

新建一个 index8.html 文件，在文件中写入以下内容。

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>eq</title><scriptsrc="jquery-3.6.0.min.js"></script><script>
      $(function () {
        $("body").click(function () {
          // 列表中下标值为 0-2 的元素会改变字体颜色var $li = $("li");
          for (var i = 0; i < 3; i++) {
            $li.eq(i).css("color", "#77acf1");
          }
        });
      });
    </script></head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></body></html>

最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。

  • 在上面代码中，我们使用 for 循环来遍历 li 元素。

  • 通过 for(var i=0; i<3; i++) 我们可以遍历列表的前三项。

  • 使用 eq(i).css("color","#77acf1") 给列表前三项的字设置颜色。

判断过滤

在 jQuery 中可以使用 is 方法来判断指定元素中是否有符合条件的存在。

其使用格式为：

$().is(selector);

is 方法返回的也是布尔类型的值，符合条件返回 true，反之 false。

前面我们学过类名过滤，可以判断是否存在该类名的元素，is 方法也可以实现。不过除了这一功能，我们的 is 方法拥有更多魔法，它还可以判断一个元素当前是否处于某个状态。

接下来我们举个例子来看看吧！

新建一个 index9.html 文件，在文件中写入以下内容。

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>is</title><style>div {
        width: 50px;
        height: 50px;
        background-color: #a7c5eb;
        margin-top: 20px;
      }
      p {
        color: #c7ffdb;
      }
    </style><scriptsrc="jquery-3.6.0.min.js"></script><script>
      $(function () {
        $("div")
          .delay(10000)
          .animate({ width: "100px" }, 2000)
          .animate({ height: "100px" }, 2000)
          .animate({ left: "+=200px" });
        $("#btn").click(function () {
          var value = $("div").is(":animated");
          if (value) {
            $("p").text("元素处于动画状态");
          } else {
            $("p").text("元素不处于动画状态");
          }
        });
      });
    </script></head><body><buttonid="btn">元素当前状态</button><div></div><p></p></body></html>

最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。

  • 在上面的代码中，点击「元素当前状态」按钮，触发 click 事件。

  • 在函数内部通过 $("div").is(":animated") 判断当前 div 元素是否处于动画状态。

  • 如果是，在 p 元素中写入“元素处于动画状态”；如果不是，在 p 元素中写入“元素不处于动画状态”。

反向过滤

在 jQuery 中使用 not 方法可以选择不符合条件的元素。

其使用格式为：

$().not(selector|function)

它的参数有两种，当为选择器时，我们会通过选择器来过滤不符合条件的元素；当为函数时，我们会通过函数来过滤不符合条件的元素。

新建一个 index10.html 文件，在文件中写入以下内容。

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>not</title><style>div {
        float: left;
        margin-right: 10px;
        width: 50px;
        height: 50px;
        border: 1px solid;
      }
    </style><scriptsrc="jquery-3.6.0.min.js"></script><script>
      $(function () {
        $("div").click(function () {
          $(this).not(".div2").css("background", "#ffc478");
        });
      });
    </script></head><body><div></div><divclass="div2"></div><div></div><div></div></body></html>

最后，开启 8080 端口，打开 Web 服务，会看到以下实验效果。

从上图中可以看出，除了 not 方法中类名为 div2 的选择器，其他选择器都能够显示背景颜色。

实验总结

本节实验学习了四类遍历查找元素的方法。这里我们来总结一下：

  • 遍历祖先元素：parent 和 parents 方法可以用来查找指定元素的祖先元素。

  • 遍历兄弟元素：有三种兄弟元素查找的方法，分别为

  • 前向兄弟元素查找 prev、preAll。

  • 后向兄弟元素查找 next、nextAll。

  • 所有兄弟元素查找 siblings()。

  • 遍历后代元素：children 和 find。

  • 过滤元素：有四种过滤方法，分别为

  • 类名过滤 hasClass。

  • 下标过滤 eq。

  • 判断过滤 is。

  • 反向过滤 not。

AJAX

load 方法

load() 方法让 AJAX 去请求服务器，并从中获得数据，最后将获得的数据放入到指定的元素中。

其语法格式为：

$().load(url, data, callback);

参数说明如下所示：

  • url 是被加载页面的地址，它是必选参数。

  • data 是发送到服务器的数据，它是可选参数。

  • callback 是请求完成后的回调函数，它是可选参数。

这里请注意，load 方法中的回调函数有三个额外的参数，以下所示：

  • response：服务器响应的结果数据。

  • status：服务器响应的状态。

  • xhr：XMLHttpRequest 对象。

了解了 load 方法，接下来我们做一做练习吧！

load 方法的使用

下面我们看一个加载 txt 文件的例子。

在环境中新建一个 index.html，在文件中写入以下内容。

<!DOCTYPE html
><htmllang="en">
<head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" />
<title>加载一个 txt 文件</title>
<scriptsrc="jquery-3.6.0.min.js"></script>
<script>
      $(function () {
        $(".text").load("text.txt"); // 获取 text.txt 文件中的数据
      });
    </script>
</head><body>
<divclass="text">
</div>
</body>
</html>

接着，新建一个 text.txt 文件，在文件中写入以下内容。

欢迎学习 jQuery 上手指南

最后，开启 8080 端口，打开 Web 服务，可以看到 text.txt 文件中的内容已经加载到页面上了。

接下来我们看一个带有回调函数的例子。

新建一个 index1.html，在文件中写入以下内容。

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>加载一个 txt 文件</title><scriptsrc="jquery-3.6.0.min.js"></script><script>
      $(function () {
        $(".text").load("text.txt", function (response, status, xhr) {
          $("p").text(
            "请求结果为：" + response + "；" + "请求状态为：" + status
          );
        });
      });
    </script></head><body><divclass="text"></div><p></p></body></html>

效果如下所示：

在上面代码中，我们使用回调函数把请求的结果和状态写入到了 p 元素中，使其呈现在页面上。

需要注意的是：load 方法一般用于向服务器请求静态的数据文件，如 html、txt 等文件。但是在实际工作中，如果我们要传递一些参数给页面，通常不会使用 load 方法。那么该使用什么呢？ 🤔
get 方法

get 方法是通过 HTTP GET 请求从服务器请求数据。HTTP 是超文本传输协议，它是客户与服务器之间通信的一种协议，HTTP 有一些请求方法，在这些方法中 GET 和 POST 是最常见的。同学们想了解更多关于 HTTP 的内容，可以阅读 HTTP 请求方法。

其语法格式为：

$.get(url, data, callback(data, status, xhr), dataType);

参数说明如下所示：

  • url：是请求的 url，它是必须参数。

  • data：是发送到服务器的数据，它是可选参数。

  • callback：是当请求成功时的回调函数，该方法包含三个参数，data 是请求的结果数据，status 是包含请求的状态，xhr 是 XMLHttpRequest 对象。

  • dataType：是服务器返回的数据格式，如 xml、html、json 等，默认的 jQuery 会智能判断它的类型。

了解了 get 方法，接下来我们一起来练习吧！

get 方法的使用

获取实验需要的 food.html 文件。

wget https://labfile.oss.aliyuncs.com/courses/3774/food.html

然后，在环境中新建一个 index2.html，在文件中写入以下内容。

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>get</title><scriptsrc="jquery-3.6.0.min.js"></script><script>
      $(function () {
        $("input").click(function () {
          $.get("food.html", function (data, status) {
            $("div").html(data);
            $("p").append(status);
          });
        });
      });
    </script></head><body><inputtype="button"value="加载数据" /><p>请求状态为：</p><div></div></body></html>

最后，开启 8080 端口，打开 Web 服务会看到如下效果。

从上面我们看到使用 get 请求获取到了 food.html 页面的数据，通过在方法中使用回调函数在页面上输出了请求页面的内容和请求页面的状态。

post 方法

前面我们学习了 get 方法，从练习中我们可以知道用 GET 请求指定页面，可以返回实体主体，它的请求会被缓存。post 方法是用的 POST 请求，它向指定资源提交数据进行处理请求，该请求不会被缓存。

接下来我们看看 jQuery 中 post 方法的应用吧！

post 方法的使用格式如下：

$.post(url, data, callback(data, textStatus, jqXHR), dataType);

参数说明如下所示：

  • url：是请求的 url，它是必须参数。

  • data：是发送到服务器的数据，它是可选参数。

  • callback：是当请求成功时的回调函数，该方法包含三个参数，data 是请求的结果数据，textStatus 是包含请求的状态，jqXHR 是 XMLHttpRequest 对象。

  • dataType：是服务器返回的数据格式，如 xml、html、json 等。

认识了 post 方法，接下来我们做一做练习吧！

post 方法的使用

新建一个 index3.html 文件，在文件中写入以下内容。

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>post 方法</title><scriptsrc="jquery-3.6.0.min.js"></script><script>
      $(function () {
        $("input").click(function () {
          // 如果链接失效，可以试试 https://labfile.oss.aliyuncs.com/courses/3774/posts.json
          $.post(
            "https://jsonplaceholder.typicode.com/posts",
            function (data, textStatus) {
              $("p").append(textStatus);
            }
          );
        });
      });
    </script></head><body><inputtype="button"value="请求数据" /><p>请求状态：</p></body></html>

最后，开启 8080 端口，打开 Web 服务，可以看到如下效果。

在上面代码中，当我们点击页面上的按钮时，触发点击事件，post 请求会去请求指定链接的数据，最后我们把请求的状态输出到 p 元素中。

post 与 get 方法的比较

post 和 get 有个明显的区别，使用 POST 请求，提交的数据不会显示到 URL 上，查看历史记录不会看到提交的数据。而 GET 请求，则相反，它提交的数据会显示在 URL 上，并且查看历史记录可以看到提交的数据。

接下来我们通过一个练习来比较一下吧！

新建一个 index4.html 文件，在文件中写入以下内容。

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>get 和 post 的对比</title><scriptsrc="jquery-3.6.0.min.js"></script><script>
      $(function () {
        $.get(
          "https://jsonplaceholder.typicode.com/users",
          {
            id: "2",
            name: "Cici",
          },
          function (data, success) {
            $("div").text("请求状态：" + success);
          }
        );
        $.post(
          "https://jsonplaceholder.typicode.com/users",
          {
            id: "3",
            name: "Lee",
          },
          function (data, success) {
            $("p").text("请求状态：" + success);
          }
        );
      });
    </script></head><body><div></div><p></p></body></html>

打开控制台，我们可以看到如下显示：

从上图我们可以看出，当使用 get 方法时，发送的数据内容会显示到 URL 上，而 post 方法发送的数据则不会显示。

ajax 方法

ajax 方法也是向服务器请求数据的，在方法内部我们可以指定是使用 POST 请求还是使用 GET 请求。在日常开发中 ajax 方法是最常用的。

ajax 方法的语法格式为：

$.ajax({ 配置项 });

接下来我们看一下配置项都有哪些参数吧！

参数

类型

描述

url

String

发送请求地址，默认为当前页面地址。

type

String

请求数据的方式（POST 或 GET），默认为 GET。

timeout

Number

设置请求超时的时间，其单位为毫秒。

data

Object 或 String

发送到服务器的数据。

dataType

String

服务器返回的数据类型。

beforeSend

Function

发送请求前可以修改的 XMLHttpRequest 对象的函数。

complete

Function

请求完成后的回调函数，这里的回调函数无论请求成功或者失败都会被调用。

success

Function

请求成功后的回调函数。

error

Function

请求失败后被调用的函数。

contentType

String

发送信息至服务器时内容的编码形式。

async

Boolean

设置请求方式，当值为 true 时，所有请求为异步请求；当值为 false 时，所有请求为同步请求，默认值为 true。

cache

Boolean

设置浏览器是否缓存当前页面，当值为 true 时浏览器会缓存该页面，反之不会，默认值为 false。

当然配置项中的参数不止我们上表介绍的这几种，同学们如果想了解更多参数，请阅读 jQuery 官方文档。

了解了 ajax 方法，我们来做一下练习吧！

ajax 的使用

新建一个 index5.html 文件，在文件中写入以下内容。

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>ajax 方法</title><scriptsrc="jquery-3.6.0.min.js"></script><script>
      $(function () {
        // 请求页面原始数据
        $.ajax({
          type: "GET",
          url: "https://jsonplaceholder.typicode.com/users",
          // 如地址失效，可以使用 https://labfile.oss.aliyuncs.com/courses/3774/users.jsonsuccess: function (users) {
            $.each(users, function (i, order) {
              $("#results").append("<li>" + order.name + "</li>");
            });
          },
          error: function () {
            alert("数据请求失败");
          },
        });
        // 添加新数据
        $("#addName").click(function () {
          $.ajax({
            type: "POST",
            url: "https://jsonplaceholder.typicode.com/users",
            // 如地址失效，可以使用 https://labfile.oss.aliyuncs.com/courses/3774/users.jsondata: { name: $("#name").val() },
            success: function (data) {
              $("#results").append("<li>" + data.name + "</li>");
            },
            error: function () {
              alert("数据请求失败");
            },
          });
        });
      });
    </script></head><body><divid="results"></div><!--当前添加的所有名字-->
    名字：<inputtype="text"id="name" /><!--名字输入框--><buttonid="addName">添加</button
    ><!--添加名字的按钮--></body></html>
练习题中的数据来自 JSONPlaceholder。

最后，开启 8080 端口，打开 Web 服务可以看到以下效果。

  • 在上面代码中，页面上有对 div 标签来显示当前存放的名字信息，另有一个按钮可以添加新的名字。

  • 当我们打开页面，可以看到我们发出的 GET 请求获得的数据已经加载到页面上了，我们只是获得了 JSON 文件中 name 的数据。

  • 在输入框写入数据，点击按钮会触发点击事件，在函数中我们使用 POST 请求获得数据，在当前列表中添加自定义的新名字。

实验总结

本节实验给大家介绍了 jQuery 中 AJAX 各种方法的使用。这里我们再来总结一下：

  • load 方法：让 AJAX 去请求服务器，并从中获得数据，最后将获得的数据放入到指定的元素中。

  • get 方法：通过 HTTP GET 请求从服务器请求数据。

  • post 方法：用的 POST 请求，它向指定资源提交数据进行处理请求，该请求不会被缓存。

  • ajax 方法：是向服务器请求数据，在方法内部我们可以指定是使用 POST 请求还是使用 GET 请求。

  • getJSON：请求时获取 JSON 类型的数据。

  • getScript：请求从服务器中加载并执行一个 JavaScript 文件。

【精】LintCode领扣算法问题答案：1909. 订单分配
二当家的白帽子
02-05 1700
1909. 订单分配： 打车派单场景, 假定有N个订单，待分配给N个司机。每个订单在匹配司机前，会对候选司机进行打分，打分的结果保存在N*N的矩阵score，其中score[i][j]代表订单i派给司机j的分值。 假定每个订单只能派给一位司机，司机只能分配到一个订单。求最终的派单结果，使得匹配的订单和司机的分值累加起来最大，并且所有订单得到分配。 1 <= N <= 8
【精】LintCode领扣算法问题答案：1897. 会议室 3
二当家的白帽子
02-03 542
1897. 会议室 3 描述 你有一个当前会议列表intervals，里面表明了每个会议的开始和结束时间，以及一些会议室rooms。现在有一系列会议ask需要加入，逐个判断他们能否被安排进当前的会议列表中而不产生冲突。一个会议室在同一时间只能进行一场会议。每个询问都相互独立。 保证输入可以被安排在rooms个会议室之中 保证任意一个会议的结束时间不大于50000 |Intervals|<=50000 |ask|<=50000 rooms<=20 样例 1： 输入: Intervals
【精】LintCode领扣算法问题答案：288. 容器设计
二当家的白帽子
02-19 2451
288. 容器设计 描述 你的任务是设计一个数据结构来存放一系列的数字，并且支持以下两种操作： add(element) 在数据结构中增加一个整数 element。 getSum() 对数据结构中的整数求和。 样例 1： 输入： add(1) add(2) getSum() add(4) getSum() 输出： [3, 7] 解释： 在加入了两个数字 1 和 2 之后，求得的和是 1 + 2 = 3. 又加入了数字 4 之后，求得的和变成 1 + 2 + 4 = 7.
【精】LintCode领扣算法问题答案：3. 统计数字
二当家的白帽子
07-19 8103
领扣LintCode问题答案-3. 统计数字 目录3. 统计数字鸣谢 3. 统计数字 计算数字 k 在 0 到 n 中的出现的次数，k 可能是 0~9 的一个值。 样例 1： 输入： k = 1, n = 1 输出： 1 解释： 在 [0, 1] 中，我们发现 1 出现了 1 次 (1)。 样例 2： 输入： k = 1, n = 12 输出： 5 解释： 在 [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] 中，我们发现 1 出现了 5 次 (1, 10, 1.
【精】领扣LintCode算法问题答案：1905. 字符删除
二当家的白帽子
10-14 473
领扣LintCode算法问题答案-1905. 字符删除 目录1905. 字符删除描述样例 1：题解鸣谢 1905. 字符删除 描述 输入两个字符串，从第一字符串中删除第二个字符串中所有的字符 String contains spaces 1 <= len(str),len(sub) <= 105 ​​ 样例 1： 输入: str=”They are students”，sub=”aeiou” 输出: ”Thy r stdnts” 题解 public class Solution { .
【精】LintCode领扣算法问题答案：316. 组合集
二当家的白帽子
10-29 244
领扣LintCode算法问题答案-316. 组合集 目录316. 组合集描述样例 1：题解分析鸣谢 316. 组合集 描述 给一个数组，给出所有可能的排列组合出的数小于给定的数字 1 <= len(num) <= 10 0 <= num[i] <= 9 target <= 106 忽略返回ans的数组顺序 样例 1： 输入 : num = [0,1,2,3] target = 30 输出: ans = [0,1,10,11,12,13,2,20,21,22,23.
【精】LintCode领扣算法问题答案：221. 链表求和 II
二当家的白帽子
01-23 189
221. 链表求和 II 描述 假定用链表表示两个数，其中每个节点仅包含一个数字。假设这两个数的数字顺序排列，请设计一种方法将两个数相加，并将其结果表现为链表的形式。 样例 1： 输入: 6->1->7 2->9->5 输出: 9->1->2 样例 2： 输入: 1->2->3 4->5->6 输出: 5->7->9 原题传送门 文章目录221. 链表求和 II描述样例 1：样例 2：题解最后说两句声明
【精】LintCode领扣算法问题答案：198. 排列序号II
二当家的白帽子
01-22 261
198. 排列序号II 描述 给出一个可能包含重复数字的排列，求这些数字的所有排列按字典序排序后该排列在其中的编号。编号从1开始。 样例 1： 输入: [1,4,2,2] 输出: 3 样例 2： 输入 : [1,6,5,3,1] 输出: 24 原题传送门 文章目录198. 排列序号II描述样例 1：样例 2：题解最后说两句声明 题解 public class Solution { /** * @param A: An array of integers * @re
【精】LintCode领扣算法问题答案：152. 组合
二当家的白帽子
12-23 213
152. 组合 描述 给定两个整数 n 和 k. 返回从 1, 2, … , n 中选出 k 个数的所有可能的组合. 你可以以任意顺序返回所有的组合, 但是一个组合内的所有数字需要是升序排列的. 样例 1： 输入: n = 4, k = 2 输出: [[1,2],[1,3],[1,4],[2,3],[2,4],[3,4]] 样例 2： 输入: n = 4, k = 1 输出: [[1],[2],[3],[4]] 原题传送门 文章目录152. 组合描述样例 1：样例 2：题解最后说两
【精】LintCode领扣算法问题答案：245. 子树
二当家的白帽子
01-23 144
245. 子树 描述 有两个不同大小的二叉树： T1 有上百万的节点； T2 有好几百的节点。请设计一种算法，判定 T2 是否为 T1的子树。 若 T1 中存在从节点 n 开始的子树与 T2 相同，我们称 T2 是 T1 的子树。也就是说，如果在 T1 节点 n 处将树砍断，砍断的部分将与 T2 完全相同。 样例 1： 输入： {1,2,3,#,#,4},{3,4} 输出： true 解释： 下面的例子中 T2 是 T1 的子树： 1 3
leetcode答案-leetcode-prictise:领扣算法题目练习
06-30
归并排序：是利用归并的思想实现的排序方法，该算法采用经典的分治（divide-and-conquer）策略（分治法将问题分(divide)成一些小的问题然后递归求解，而治(conquer)的阶段则将分的阶段得到的各答案"修补"在一起，即...
【精】LintCode领扣算法问题答案：32. 最小子串覆盖
二当家的白帽子
08-02 7439
32. 最小子串覆盖： 给定两个字符串 source 和 target. 求 source 中最短的包含 target 中每一个字符的子串. 如果没有答案, 返回 “”. 保证答案是唯一的. target 可能包含重复的字符, 而你的答案需要包含至少相同数量的该字符.
sizeof 和strlen的对比
我爱我想但不嫉妒 我哭我笑但不抱怨 我羞我愧但不悲叹 我怒我恨但不自弃
05-17 908
sizeof 和strlen的对比及数组和指针笔试题解析
高被引二区优化算法——肝癌算法（Liver Cancer Algorithm，LCA）深度解析+性能测试
woaipythonmeme的博客
05-19 1024
LCA的核心机制聚焦于肿瘤在寻找最有利生存环境时所表现出的适应性与侵袭性行为，算法通过演化搜索策略再现肝癌细胞在器官中逐步扩张并主导空间的动态机制，其数学建模确保了算法在解空间内的全局探索能力与局部开采能力之间的高效平衡。为确定肿瘤的体积，我们采用一种基于数学模型的计算方法，假设肿瘤呈半椭球形，该形态已在包括肝癌在内的多种癌症中被观察到。在LCA算法的该阶段中，其设计灵感源自真实肿瘤的扩散过程，假设肿瘤可在竞争环境中逐步选择最优路径深入肝脏的不同区域以实现侵占。）时，目标代理元素的肿瘤位置将被考虑。
黑马Java基础笔记-13常用查找算法
IKUNIKUNIKUNikun的博客
05-20 444
数学表达αnmαmn​，其中nnn为哈希表中当前元素数，mmm为桶的总数或槽位总数。意义：表示哈希表的“填充率”，负载因子高意味着更多的键映射到相同或相邻的位置，冲突概率也随之升高，从而增大查找或插入时的探测或链表长度。再哈希是指在哈希表运行过程中，检测到负载因子α\alphaα达到或超过预设阈值后，动态地创建一个更大的新表（通常容量翻倍），并将旧表中所有元素按照新表大小重新计算哈希并插入新表的过程。这一过程又称“扩容”（resize）或“重散列”，旨在降低α\alphaα。
C/C++实践(十)C语言冒泡排序深度解析：发展历史、技术方法与应用场景
致力于硬件设计、人工智能知识及技术的分享，不断鞭策自己成长，共同进步！
05-17 1121
冒泡排序在嵌入式系统、小规模数据排序及与其他算法结合使用中仍有应用。未来，冒泡排序的并行化改造、机器学习结合及量子计算适配等研究方向或为其带来新的发展机遇。
《算法笔记》11.7小节——动态规划专题-＞背包问题 问题 C: 货币系统
2401_88085478的博客
05-20 152
举例来说, 使用一个货币系统 {1,2,5,10,...}产生 18单位面值的一些可能的方法是:18x1, 9x2, 8x2+2x1, 3x5+2+1,等等其它。传统地，一个货币系统是由1,5,10,20 或 25,50, 和 100的单位面值组成的。母牛想知道有多少种不同的方法来用货币系统中的货币来构造一个确定的数值。写一个程序来计算有多少种方法用给定的货币系统来构造一定数量的面值。母牛们不但创建了他们自己的政府而且选择了建立了自己的货币系统。(1<= N<=10,000)输入包含多组测试数据。
《算法笔记》11.8小节——动态规划专题-＞总结 问题 E: 最大子矩阵
最新发布
2401_88085478的博客
05-21 119
再后面的若干行中，依次（首先从左到右给出第一行的N个整数，再从左到右给出第二行的N个整数……）给出矩阵中的N2个整数，整数之间由空白字符分隔（空格或者空行）已知矩阵的大小定义为矩阵中所有元素的和。给定一个矩阵，你的任务是找到最大的非空(大小至少是1 * 1)子矩阵。输入是一个N * N的矩阵。输入的第一行给出N (0 < N <= 100)测试数据可能有多组，对于每组测试数据，输出最大子矩阵的大小。已知矩阵中整数的范围都在[-127, 127]比如，如下4 * 4的矩阵。这个子矩阵的大小是15。
网络流算法
yaoct的博客
05-18 966
最大流算法和最小费用算法都有贪心的思想，每次迭代都会离最大流网络更近一步。网络流的题目难度主要在抽象建模，很多问题同网络流联系起来并不那边直观。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

冥王丁B

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值