蓝桥杯jQuery复习

最新推荐文章于 2024-05-23 16:08:37 发布

sulli_la

最新推荐文章于 2024-05-23 16:08:37 发布

阅读量93

点赞数

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

本文链接：https://blog.csdn.net/qq_62401119/article/details/129288347

版权

基本选择器

元素选择器

jQuery中元素选择器的语法格式：

$("元素名");

ID选择器

ID选择器用于选择指定id名的元素，使用格式如下：

<标签名 id="id名"></标签名>

$("#id名")

类选择器

类选择器用于选择指定类名的元素：

<标签名 class="类名"></标签名>

$(".类名");

在jQuery中修改多个css样式时，可以给css方法传入一个json对象

$().css({"属性1":"属性值1","属性2":"属性值2"...})

群组选择器

群组选择器可以让我们同时定义多个选择器，多个选择器之间用 ,号隔开，最终返回一个 jQuery 对象，该对象中包含了这些选择器选中的全部元素。

其语法格式为：

$("选择器1, 选择器2,...");

元素选择器、类选择器、ID 选择器都可以组合在一起。

通配符选择器

通配符选择器就是可以设置全局样式的选择器，通俗来讲就是文档中的所有元素都要接受该规则。

在 jQuery 中，我们用 * 表示通配符选择器，使用格式如下所示：

$("*");

层次选择器

后代选择器

后代选择器用于选择某元素的后代元素，使用格式如下：

$("M N")//N是M的后代元素

子代选择器

子代选择器也是一种后代选择器，但是它只能对指定标签的子代元素进行操作，使用格式如下：

$("M>N")//N是M元素的子元素

兄弟选择器

兄弟选择器是查找元素后面的兄弟节点（即同级节点）从而进行操作。语法格式：

$("M~N")

相邻选择器

相邻选择器只能选到指定元素的邻居兄弟元素，如图所示：

$("M+N");//选择下一个兄弟节点 N

属性选择器

属性选择器就是根据属性来选择元素，其中我们可以使用正则表达式中的一些符号来选择带有某些属性值的元素。

常见的属性选择器如下：

选择器	说明
E[attr]	对带有attr属性的E元素进行操作。
E[attr="value"]	对attr值等于value的E元素进行操作
E[attr != "value"]	对attr值不等于value的E元素进行操作
E[attr ^= "value"]	对带有attr属性，其属性值以value字符串开头的E元素进行操作
E[attr $= "value"]	对带有attr属性，其属性值以value字符串结尾的E元素进行操作
E[attr *= "value"]	对带有attr属性，其属性值包含value字符串的E元素进行操作
E[attr ~= "value"]	对带有attr属性，其属性值为value或包含value的E元素进行操作
E[attr \|= "value"]	对带有attr属性，其属性值为value和以value开头的E元素进行操作

伪类选择器

位置伪类选择器

位置伪类选择器就是通过元素的位置来进行选择。

常见的位置伪类选择器如下所示：

选择器	说明
:first	选取指定元素的第一个该元素。
:last	选取指定元素的最后一个该元素。
:odd	选取指定元素序号为奇数的所有该元素。
:even	选取指定元素序号为偶数的所有该元素。
:eq(n)	选取指定元素的第 n 个该元素。
:lt(n)	选择指定元素中小于 n 的所有该元素。
:gt(n)	选取指定元素中大于 n 的所有该元素。

可见性伪类选择器

可见性伪类选择器是针对元素在页面上显式或者隐藏而言的

可见性伪类选择器如下所示：

选择器	说明
:visible	选取所有可见元素
:hidden	选取所有不可见元素

内容伪类选择器

内容伪类选择器是根据元素的内容来选择的。

内容选择器如下所示：

选择器	说明
:contains(text)	对包含指定text文本的元素进行操作
:has(selector)	对包含指定选择器的元素进行操作
:parent	对含有文本或者子元素的元素进行操作
:empty	对空元素进行操作

表单伪类选择器

表单伪类选择器是专用给表单元素设计的。

表单伪类选择器如下所示：

选择器	说明
:input	选取所有 input 元素。
:button	选取所有 input 类型为 button 的元素。
:submit	选取所有 input 类型为 submit 的元素。
:reset	选取所有 input 类型为 reset 的元素。
:text	选取所有 input 类型为 text 的元素。
:textarea	选取所有多行文本框。
:password	选取所有 input 类型为 password 的元素。
:radio	选取所有 input 类型为 radio 的元素。
:checkbox	选取所有 input 类型为 checkbox 的元素。
:image	选取所有图片域。
:file	选取所有 input 类型为 file 的元素。

表单对象属性选择器

表单对象属性选择器是根据表单元素的状态来选择的。

表单对象属性选择器如下所示：

选择器	说明
:checked	选取所有被选中的表单元素。
:selected	选取被选中的表单元素项。
:enabled	选取所有可用的表单元素。
:disabled	选取所有不可用的表单元素。
:read-only	选取只读权限的表单元素。
:focus	选取所有获得焦点的表单元素。

事件

页面事件

jQuery中页面事件的语法格式如下：

jQuery对象.事件名(事件处理函数)
//
$(document).ready(function(){})
//
$(function(){})

其中 $ 是 jQuery 对象的简写，$(document) 是把 dom 对象转换成 jQuery 对象。

页面事件用 ready 表示，它类似于 JavaScript 中的 onload 事件。但是 ready 要高级一点点，因为 ready 事件只等 dom 元素加载完毕即可执行内部代码，也就是说文档中引入的外部图片、 css 或者 js 文件就算没完成加载，该事件也可以执行

鼠标事件

鼠标事件是当鼠标处于某种状态会触发的事件。

鼠标事件有以下几种：

事件	说明
click	单击左键事件。
mouseover	鼠标移入事件。
mouseout	鼠标移出事件。
mousedown	鼠标按下事件。
mouseup	鼠标松开事件。
mousemove	鼠标移动事件。

键盘事件

键盘事件有以下三种：

事件	说明
keydown	键盘按下时触发。
keyup	键盘松开时触发。
keypress	事件会在键盘按键被按下并释放一个键时触发。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="jquery-3.6.0.min.js"></script>
    <title>键盘事件</title>
    <style>
      div {
        color: coral;
      }
    </style>
    <script>
      $(function () {
        // 键盘松开
        $("#num").keyup(function () {
          var limit = /^1[0-9]{10}$/; // 正则表达式，只能输入 11 位 0-9 之间的整数
          var value = $(this).val(); // 获取当前值
          if (limit.test(value)) {
            // test 方法用来检查当前输入是否符合 limit 中正则表达式的要求
            $("#div1").text("输入的手机号码符合要求!");
          } else {
            $("#div1").text("手机号码格式不正确");
          }
        });
        // 键盘按下
        $("#num").keydown(function () {
          // 注意如果这里获取内容是获取的上一次文本框的内容 因为键盘并没有弹起 本次输入的内容还没有加入到文本框中
          console.log("正在输入"); // 同学们可以加入 + $(this).val() 进行测试
        });
      });
    </script>
  </head>
  <body>
    电话号码：<input id="num" type="text" />
    <div id="div1"></div>
  </body>
</html>

表单事件

表单事件是表单元素处于某种状态下会触发的事件。

常见的表单事件如下所示：

事件	说明
focus	获得焦点时触发的事件。
blur	失去焦点时触发的事件。
select	选中单行或多行文本框会触发的事件。
change	单选框、复选框、下拉列表框等选中项发生改变触发的事件。

滚动事件

在jQuery中，使用scroll来绑定一个滚动事件。使用格式如下：

jQuery对象.scroll("事件处理函数");

绑定事件

在jQuery中，使用on或bind方法可以绑定一个或多个事件。

语法格式为：

jQuery对象.on(事件类型,事件处理函数);

jQuery对象.bind(事件类型，事件处理函数);

合成事件

合成事件就是一个事件来代表多个事件，例如：

使用hover方法来给元素同时绑定鼠标移入和移出的处理函数，即：

hover = mouseover + mouseout

语法结构为：

jQuery对象.hover(mouseover的事件处理函数，mouseout的事件处理函数);

函数 1 是鼠标移入事件会触发的处理函数；函数 2 是鼠标移出事件会触发的处理函数。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>合成事件</title>
    <style>
      div {
        width: 50px;
        height: 50px;
        margin: 20px 0 0 50px;
        text-align: center;
        background-color: #24a9dd;
      }
    </style>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
      $(function () {
        $("div").hover(
          function () {
            $(this).css("transform", "rotate(60deg)");
          },
          function () {
            $(this).css("transform", "rotate(360deg)");
          }
        );
      });
    </script>
  </head>
  <body>
    <div>旋转</div>
  </body>
</html>

自定义事件

自定义事件就是用户可以自己定义一个事件。在jQuery中，我们使用on方法来定义事件，然后通过trigger方法来触发该事件。

语法格式：

jQuery对象.on(事件类型，处理函数)//也可以使用bind
jQuery对象.trigger(事件类型)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自定义事件事件</title>
    <style>
      div {
        width: 50px;
        height: 50px;
        background-color: #b8b5ff;
        margin-left: 50%;
      }
    </style>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
      $(function () {
        // 自定义一个名为 changecolor 的事件
        $("div").on("changecolor", function () {
          $(this).css("background-color", "#ffce89");
        });
        $("div").click(function () {
          $("div").trigger("changecolor");
        });
      });
    </script>
  </head>
  <body>
    <div></div>
  </body>
</html>

事件对象

当事件发生的时候，会把该事件的详细信息记录在事件对象中，然后通过事件对象的属性来了解事件的相关信息。

在jQuery中，使用event来获取一个事件的信息

属性	说明
type	获取事件的类型
target	获取触发事件的元素
which	获取单机事件中鼠标的左、中、右键
clientX、clientY	获取鼠标相对于页面左上角的坐标
pageX、pageY	获取鼠标相对于页面左上角的坐标（包括滚动条滚动的x、y轴距离）
shiftKey	判断是否按下shift键
ctrlKey	判断是否按下ctrl键
altKey	判断是否按下alt键
keyCode	获取按下键盘的键码值

DOM操作

在jQuery中使用$()来创建元素节点，常见的创建有以下三种：

1、直接创建元素节点

2、创建带有文本的元素节点

3、创建带有属性的元素节点

直接创建元素节点

使用格式：

$("<标签名></标签名>");

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DOM 创建</title>
    <script src="jquery-3.6.0.min.js"></script>
    <style>
      div {
        width: 50px;
        height: 50px;
        margin-top: 20px;
        background-color: cornflowerblue;
      }
    </style>
    <script>
      $(function () {
        $("input").on("click", function () {
          var div = $("<div></div>"); // 创建一个 div 元素
          $("body").append(div); // 将创建的 div 元素放入 body 中
        });
      });
    </script>
  </head>
  <body>
    <input id="btn" type="button" value="创建元素" />
  </body>
</html>

创建带有文本的元素节点

使用格式：

$("<标签名>文本内容</标签名>");

创建带有属性的元素节点

使用格式：

$("<标签名 属性='属性值'>文本内容</标签名>");

元素的插入

在 jQuery 中，元素插入的方法有两类，分别是：

子级插入方法，包括 prepend()、prependTo()、append()、appendTo()。

同级插入方法，包括 before()、insertBefore()、after()、insertAfter()。

prepend()与perpendTo()

prepend() 与 prependTo() 是在元素子级的开头插入元素。

prepend 方法的语法格式为：

// 在 A 元素的子级最前面的位置插入B
$(A).prepend(B);

prependTo 方法的语法格式为：

// 在 A 元素的子级最前面的位置插入B
$(B).prependTo(A);

prepend() 与 prependTo() 起到的作用是一样的，只不过使用格式是颠倒的。

before()与insertBefore()

before() 与 insertBefore() 是在该元素的前面插入元素。

before 方法的语法格式为：

// 在 A 的前面插入 B
$(A).before(B);

insertBefore 方法的语法格式为：

// 在 A 的前面插入 B
$(B).insertBefore(A);

before 和 insertBefore 方法的作用也是相同的，只是使用格式上是颠倒的。

after()与insertAfter()

after() 与 insertAfter() 是在元素的后面插入元素。

after 方法的语法格式为：

// 在 A 的后面插入 B
$(A).after(B);

insertAfter 方法的语法格式为：

// 在 A 的后面插入 B
$(B).insertAfter(A);

after 和 insertAfter 方法的作用也是相同的，只是使用格式上是颠倒的。

元素的删除

remove()方法

remove 方法可以将指定的元素及其子元素删除。

其语法格式为：

$().remove();

empty()方法

empty 方法是用来清空指定元素的后代元素和内容的。

其语法格式为：

$().empty();

元素的替换

replaceWith 方法和 replaceAll 方法都可以用来把指定元素替换成其他元素，只是在使用格式上有些差别。

其语法格式为：

// 将 A 替换为 B
$(A).replaceWith(B);

// 将 A 替换为 B
$(B).replaceAll(A);

元素的遍历

在 jQuery 中，each 方法是用于元素遍历的。

其语法格式为：

$().each(function (index, element) {});

each 方法会接收一个匿名函数作为参数，函数中的 index 表示元素的索引号；而函数中的 element 表示当前元素。

属性操作

attr方法

attr方法可以用来获取指定元素的属性值，也可以用来设置指定属性的属性值。

语法格式：

jQuery对象.attr("属性名");//获取属性
jQuery对象.attr("属性名","属性值");//修改属性

removeAttr方法的使用

removeAttr 方法可以删除指定元素的某个属性。

其语法格式为：

jQuery对象.removeAttr("属性名");

样式操作

css方法的使用

css 方法可以用来获取指定属性的属性值，也可以用来设置属性值。

// 获取指定属性的属性值
$().css("属性名");

// 设置属性值
$().css("属性名", "属性值");

addClass方法的使用

addClass方法用于添加类选择器。

使用格式：

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

removeclass方法的使用

removeClass 方法可以用来移除已有的类选择器。

其语法格式为：

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

toggleClass方法的使用

toggleClass 方法是用来切换类选择器的。

其使用格式为：

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

内容操作

html方法的使用

html 方法可用来获取 HTML 文档中指定元素内部的元素标签和标签中的内容，也可以给元素添加内容。

其语法格式为：

// 获取元素内容
$().html();
// 设置元素内容
$().html("内容");

text方法的使用

text 方法可以获取指定标签里的文本，也可以为指定标签添加文本。

其语法格式为：

// 获取指定标签中的文本
$().text();
// 给指定标签设置文本
$().text("内容");

val方法的使用

val 方法用于获取表单元素的值，也可以给表单元素设置值。

动画

隐藏与显式

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

其语法格式为：

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

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

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

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

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

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

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

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

淡入与淡出

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

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

其语法格式为：

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

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

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

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

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

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

自定义动画

在jQuery中，使用animate方法可以实现自定义动画。

语法格式：

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

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

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

队列动画

让动画按照一定的顺序去执行多个动画效果时，需要使用队列动画。

语法格式：

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

回调函数

回调函数的格式如下：

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

自定义动画中animate函数的第三个参数是就是代表动画指定完毕以后的回调函数。

使用方法如下：

css 方法属于非动画方法，非动画方法不会加入到动画队列中，而是立即执行。该如何解决呢？

可以使用回调函数让非动画方法实现排队。

//... 省略其他代码
<script>
    $(function(){
        $(".btn1").click(function(){
            $("#title").animate({letterSpacing:"5px"},1000).animate({fontSize:"25px"},1000,function(){
              $("#title").css({"background-color":"yellow"})
            });

        });
    });
  </script>

停止动画

stop 方法的语法格式为：

$().stop(stopAll, goToEnd);

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

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

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

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

延迟动画

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

其语法格式为：

$().delay(speed);

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

遍历

遍历祖先元素

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

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

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

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

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

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

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

遍历兄弟元素

向前兄弟元素查找

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

其语法格式为：

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

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

后向兄弟元素查找

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

其语法格式为：

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

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

查找所有兄弟元素

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

其语法格式为：

$().siblings();

注：不包括元素本身

遍历后代元素

children方法的使用

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

children 语法格式为：

jQuery对象.children();

find方法的使用

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

其语法格式为：

jQuery对象.find(selector);

过滤元素

类名过滤

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

其使用格式为：

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

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

下标过滤

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

其语法格式为：

$().eq(n);

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

判断过滤

在 jQuery 中可以使用 is 方法来判断指定元素中是否有符合条件的存在。还可以判断一个元素当前是否处于某个状态。

其使用格式为：

$().is(selector);

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="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>
    <script src="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>
    <button id="btn">元素当前状态</button>
    <div></div>
    <p></p>
  </body>
</html>

反向过滤

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

其使用格式为：

$().not(selector|function)

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

AJAX

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

其使用格式为：

$().not(selector|function)

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

相比原生 AJAX，在 jQuery 中对 AJAX 操作进行了封装。

load方法

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

其语法格式为：

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

参数说明如下所示：

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

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

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

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

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

status：服务器响应的状态。

xhr：XMLHttpRequest 对象。

get方法

get 方法是通过 HTTP GET 请求从服务器请求数据。HTTP 是超文本传输协议，它是客户与服务器之间通信的一种协议，HTTP 有一些请求方法，在这些方法中 GET 和 POST 是最常见的。

其语法格式为：

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

参数说明如下所示：

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

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

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>get</title>
    <script src="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>
    <input type="button" value="加载数据" />
    <p>请求状态为：</p>
    <div></div>
  </body>
</html>

post方法

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

post 方法的使用格式如下：

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

参数说明如下所示：

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

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

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>post 方法</title>
    <script src="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>
    <input type="button" value="请求数据" />
    <p>请求状态：</p>
  </body>
</html>

post方法与get方法的比较

使用POST请求，提交的数据不会显示到URL上，查看历史记录不会看到提交的数据。而GET请求则相反，提交的数据会显示在URL上，并且查看历史记录可以看到提交的数据

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。

getJSON

在前面我们学了 ajax 方法，当我们要向服务器发送一个 GET 请求并获取 JSON 类型的数据时，写法如下：

$.ajax({
  type: "GET",
  dataType: "json",
  url: url,
  data: data,
  success: success,
});

getJSON 相当于是以上内容的缩写。

getJSON 其实看名字就很好理解，我们分开来看 get 和 JSON。在前面我们学过 get 方法，这里的 get 就是 GET 请求的意思，JSON 就是 JSON 编码了，把两个词合起来理解就是使用 GET 请求从服务器加载 JSON 格式的数据。

该方法的使用格式如下所示：

$.getJSON(url [,data] [,success(data, textStatus, jqXHR)])

参数说明如下：

参数	类型	描述
url	String	包含发送请求的 URL 字符串。
data	PlainObject	发送给服务器的字符串或 Key/value 键值对。
success(data, textStatus, jqXHR)	Function	当请求成功后执行的回调函数。

getScript

在前面我们学习了 ajax 方法，当我们使用 GET 请求从服务器中加载并执行一个 JavaScript 文件，写法如下：

$.ajax({
  url: url,
  dataType: "script",
  success: success,
});

getScript 也很容易理解，拆分成 get 和 Script 来看，get 是 GET 请求，Script 是 JavaSctip 文件，所以合在一起就是使用一个 GET 请求从服务器加载并执行一个 JavaScript 文件。

其使用格式如下所示：

$.getScript( url [, success(script, textStatus, jqXHR) ] )

参数说明如下所示：

参数	类型	说明
url	String	包含发送请求的 URL 字符串。
success(script, textStatus, jqXHR)	Function	当请求成功后执行的回调函数。

冬奥大抽奖

介绍

蓝桥云课庆冬奥需要举行一次抽奖活动，我们一起做一个页面提供给云课冬奥抽奖活动使用。

准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

├── css
│   └── style.css
├── effect.gif
├── index.html
└── js
    ├── index.js
    └── jquery.js

其中：

css/style.css 是样式文件。

index.html 是主页面。

js/jquery.js 是 jQuery 文件。

js/index.js 是需要补充的 js 文件。

effect.gif 是最终实现的效果图。

注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：

cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/9791/05.zip && unzip 05.zip && rm 05.zip

在浏览器中预览 index.html 页面效果如下：

目标

找到 index.js 中 rolling 函数，使用 jQuery 或者 js 完善此函数，达到以下效果：

点击开始后，以 class 为 li1 的元素为起点，黄色背景（.active 类）在奖项上顺时针转动。

当转动停止后，将获奖提示显示到页面的 id 为 award 元素中。获奖提示必须包含奖项的名称，该名称需与题目提供的名称完全一致。

转动时间间隔和转动停止条件已给出，请勿修改。

完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

规定

转动时间间隔和转动停止条件已给出，请勿修改。

请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。

请勿修改项目中提供的 id、class、函数名等名称，以免造成无法判题通过。

判分标准

本题完全实现题目目标得满分，否则得 0 分。

我的题解：

let rollTime; // 定义定时器变量用来清除定时器
let time = 0; // 转动次数
let speed = 300; // 转动时间间隔
let times; // 总转动次数
let i = 0;

// 开始按钮点击事件后开始抽奖
$("#start").on("click", function () {
  $("#award").text(""); //清空中奖信息
  times = parseInt(Math.random() * (20 - 30 + 1) + 20, 10); // 定义总转动次数，随机20-30次
  rolling();
});

// TODO：请完善此函数
function rolling() {
    time++; // 转动次数加1
    i++;
    if(i > 8){
        i = 1;
    }
  clearTimeout(rollTime);
  rollTime = setTimeout(() => {
    window.requestAnimationFrame(rolling); // 进行递归动画
  }, speed);
  $(`.li${i}`).addClass('active').siblings().removeClass('active');
  // time > times 转动停止
  if (time > times) {
    clearInterval(rollTime);
    var text = $(`.li${i}`).text();
    $('#award').text(`恭喜您抽中了${text}!!!`);
    time = 0;
    return;
  }
}