蓝桥杯jQuery复习（三）

冥王丁B

于 2023-03-06 13:54:35 发布

阅读量176

点赞数 1

文章标签：蓝桥杯 jquery Powered by 金山文档

本文链接：https://blog.csdn.net/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>