【蓝桥杯】复习一遍

Jrenc
88 阅读28分钟

薄弱点

1. CSS

单位

fr 就是占据等分的意思，比如 1fr 2fr 3fr 就是占据 1:2:3 的比例。
角度单位:deg

媒体查询
  1. 页面媒体查询
    在Web开发中，媒体查询（Media Queries）是一种CSS技术，用于根据不同的媒体类型和视口特性来应用不同的样式规则。这对于响应式设计尤为重要，因为它允许开发者为不同尺寸的设备（如手机、平板和桌面计算机）创建适应性布局。
    媒体查询的基本语法如下： 
    @media not|only mediatype and (expressions) {
  CSS-Code;
}
    • not|only：这是可选的。not 用于排除某些媒体类型，only 用于指定某些媒体类型，大多数情况下不使用这些关键字。
    • mediatype：指定媒体类型，如 screen、print 等。
      • 在CSS媒体查询中，mediatype 用于指定媒体类型，以便根据不同的设备或媒体环境应用不同的样式。主要的媒体类型有 screen、print 等，下面是一些常见的 mediatype 及其含义：
      • screen：指屏幕设备，通常用于电脑显示器、平板和手机等。这是最常用的媒体类型，用于为屏幕浏览器定义样式。
      • print：指打印机或打印预览模式。使用这个媒体类型，可以为打印文档定义特定的样式，比如隐藏不必要的背景图像、导航元素等，以确保打印出来的页面是清晰可读的。
      • all：适用于所有设备，包括屏幕、打印和听觉设备等。如果样式适用于所有设备类型，可以使用这个类型。
    • expressions：检查媒体特性的条件，如宽度、高度等。
    • CSS-Code：当媒体查询条件满足时应用的 CSS 代码。
    @media screen and (max-width: 600px) {
     body {
     background-color: lightblue;
     }
 }
     
@media screen and (min-width: 601px) and (max-width: 1200px) {
     body {
     background-color: lightgreen;
     }
 }
  2. 页面媒体查询-点击页面实现
    如果只用css，不使用js，他是如何记录点击状态的？
    利用复选框（checkbox）和标签（label）模拟点击
    可以利用复选框（checkbox）隐藏，通过与之关联的标签（label）点击来改变复选框的选中状态，并使用 :checked 伪类与兄弟选择器来改变其他元素的样式，从而实现点击状态的模拟。 
    <style>
  #toggle {
    display: none; /* 隐藏复选框 */
  }

  #toggle:checked + .content {
    display: block; /* 当复选框被选中时显示内容 */
  }
</style>

<input type="checkbox" id="toggle">
<label for="toggle">点击切换</label>
<div class="content" style="display:none;">内容显示</div>
    在这个例子中，点击标签会改变复选框的选中状态，从而根据复选框的选中状态来控制 .content 的显示与隐藏。
    综上所述，虽然CSS本身不提供直接识别点击状态的功能，但通过上述技巧和方法，可以实现类似的效果。
选择器
  1. 类选择器 .
  2. ID选择器 #
  3. 子代选择器 空格
  4. 后代选择器 >
  5. 想临兄弟选择器 +
  6. 兄弟选择器 ~
  7. type选择器 input[type="checkbox"]
  8. 伪类
    :hover - 当鼠标悬停在元素上时应用样式。 :focus - 当元素获得焦点（例如，通过点击或使用键盘导航）时应用样式。 :active - 当元素被激活（例如，通过鼠标点击）时应用样式。 :visited - 用于链接，当链接已被访问时应用样式。 :link - 用于链接，在链接未被访问时应用样式。 :first-child - 选择其父元素的第一个子元素。 :last-child - 选择其父元素的最后一个子元素。 :nth-child(n) - 选择其父元素的第 n 个子元素。 :nth-last-child(n) - 选择其父元素的倒数第 n 个子元素。 :first-of-type - 选择其父元素下同类型的第一个元素。 :last-of-type - 选择其父元素下同类型的最后一个元素。 :nth-of-type(n) - 选择其父元素下同类型的第 n 个元素。 :nth-last-of-type(n) - 选择其父元素下同类型的倒数第 n 个元素。 :not(selector) - 选择不匹配给定选择器的元素。 :empty - 选择没有任何子元素（包括文本节点）的元素。 :checked - 选择被选中的输入元素（如复选框或单选按钮）。 :disabled - 选择被禁用的输入元素。 :enabled - 选择启用的输入元素。 :root - 选择文档的根元素，通常是 html 元素。
动画

  1. 渐变动画

        transtion: property duration timing-function delay;

  2. 关键帧动画

    1. @keyframes 规则

      • 用于定义动画的中间步骤（关键帧）。在 @keyframes 规则中，可以设定在动画过程中某个或某些时刻元素的样式。
      @keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

      或者使用百分比来指定多个关键帧：

      @keyframes example {
  0%   {background-color: red;}
  50%  {background-color: blue;}
  100% {background-color: yellow;}
}

      @keyframes 规则什么时候出发？

      • 当元素绑定了 animation-name 属性，并且动画开始时，@keyframes 规则中定义的关键帧将按照指定的时间和速度曲线进行执行。
      • 例如，上面的 example 动画在 animation-name 属性中绑定到元素后，将按照 animation-duration 和 animation-timing-function 属性的设置进行执行。

    2. animation-name 属性

      • 指定需要绑定到选择器的 @keyframes 名称。
      .element {
  animation-name: example;
}

    3. animation-duration 属性

      • 定义动画完成一个周期所花费的时间，例如秒或毫秒。
      .element {
  animation-duration: 2s;
}

    4. animation-timing-function 属性

      • 定义动画的速度曲线，例如 linear, ease, ease-in, ease-out, ease-in-out, 或者 cubic-bezier 函数。
      .element {
  animation-timing-function: ease-in-out;
}

      在CSS动画中，可以通过指定动画的速度曲线来控制动画的变化速度。以下是一些常用的速度曲线：

      1. linear

        • 动画从头到尾的速度是相同的。这意味着动画以恒定速度平滑地进行，没有加速或减速的过程。

      2. ease

        • 默认的速度曲线。动画以低速开始，然后加速，最后再减速。这使得动画看起来更自然，因为它模拟了现实世界中物体的运动状态。

      3. ease-in

        • 动画以低速开始，随着动画的进行，速度逐渐增加，直到结束。这种曲线适用于需要强调动作开始阶段的场景。

      4. ease-out

        • 动画以全速开始，然后逐渐减速直到停止。这种曲线适用于需要强调动作结束阶段的场景。

      5. ease-in-out

        • 动画以低速开始和结束，中间部分以较快的速度运动。这种速度曲线是ease-in和ease-out的结合，适用于需要平滑过渡的场景。

      6. cubic-bezier(n,n,n,n)

        • 允许你自定义一个速度曲线。cubic-bezier 函数接受四个参数，这些参数定义了一个三次贝塞尔曲线，可以精确控制动画的加速和减速过程。CSS提供了一个cubic-bezier 工具，帮助你可视化和调整这四个参数。 ease-n. 容易；舒适，自在 v. 减轻，缓和，放松；缓缓移动；使容易；降低；使离职；熟悉

  3. animation-delay 属性

    • 设置动画在启动前的延迟时间。
    .element {
  animation-delay: 1s;
}

    1. animation-iteration-count 属性

      • 定义动画应该播放的次数，可以是数字或者 infinite 表示无限次重复。
      .element {
  animation-iteration-count: infinite;
}

    2. animation-direction 属性

      • 指定动画是否应该轮流反向播放。常见值有 normal, reverse, alternate, alternate-reverse。
      .element {
  animation-direction: alternate;
}

    3. animation-fill-mode 属性

      • 指定在动画执行之前和之后如何为目标元素应用样式。例如，forwards 保留最后一帧的样式。
      .element {
  animation-fill-mode: forwards;
}

      animation-fill-mode 属性在CSS动画中用来指定一个动画在执行之前和之后如何将样式应用到其目标元素上。简而言之，它决定了动画执行前后元素的样式表现。animation-fill-mode 属性接受以下几个值：

      1. none

        • 默认值。不改变默认行为。动画不会将任何样式应用于目标元素，动画结束后元素会回到动画未执行时的状态。

      2. forwards

        • 动画完成后，元素将保留由动画的最后一个关键帧计算值决定的样式。即动画结束后元素会保留动画结束时的样式。

      3. backwards

        • 动画将在应用于元素的那一刻立即应用第一关键帧的样式，即使动画延迟开始。这意味着元素会立即获得动画初始状态的样式，直到动画真正开始。

      4. both

        • 动画遵循forwards和backwards的规则，意味着动画会在延迟期间应用第一关键帧的样式，并在动画结束后保留最后一个关键帧的样式。

      例如，如果你有一个淡出动画，你可能希望动画结束后元素保持透明

弹性盒子

容器和项目： Flex容器：通过将一个元素的 display 属性设置为 flex 或 inline-flex 来创建一个新的弹性盒子容器。
Flex项目：容器内的直接子元素自动成为弹性项目。
方向性：
Flexbox 允许你定义项目的布局方向（横向或纵向）。通过 flex-direction 属性可以设置为 row（行，水平方向）、row-reverse、column（列，垂直方向）或 column-reverse。
对齐、分布和排序：
可以轻松地对齐项目（水平和垂直对齐）、分配额外空间（即使在项目大小不一时）或在容器内重新排序项目。使用 justify-content、align-items 和 align-content 等属性来实现。
灵活性：
弹性项目可以通过 flex 属性来调整和扩展以填充可用空间，或者收缩以防止溢出。


<div style="display: flex;">
    <div style="flex: 1;">项目 1</div>
    <div style="flex: 1;">项目 2</div>
    <div style="flex: 1;">项目 3</div>
</div>

2. HTML

HTML5本地存储
// 存储数据
localStorage.setItem('username', 'John Doe');

// 读取数据
var user = localStorage.getItem('username');
console.log(user); // 输出：John Doe

// 移除数据
localStorage.removeItem('username');

// 清空所有数据
localStorage.clear();


// 存储数据
sessionStorage.setItem('sessionName', 'SessionData');

// 读取数据
var data = sessionStorage.getItem('sessionName');
console.log(data); // 输出：SessionData

// 移除数据
sessionStorage.removeItem('sessionName');

// 清空会话存储
sessionStorage.clear();

3. JS

  1. 数组API

    JavaScript中的函数式编程支持多种实用的函数，主要包括但不限于以下几类：

    1. 映射（Map）：对数组中的每个元素应用一个函数，并创建一个新数组，该数组包含应用函数后的结果。

      const numbers = [1, 2, 3, 4];
const doubled = numbers.map(x => x * 2); // [2, 4, 6, 8]

    2. 过滤（Filter）：根据测试函数确定是否保留数组中的元素，创建一个包含通过测试的元素的新数组。

      const numbers = [1, 2, 3, 4];
const evens = numbers.filter(x => x % 2 === 0); // [2, 4]

    3. 归约（Reduce）：将数组元素组合起来，通过reducer函数减少为单个值。 Array.prototype.reduce() 方法在JavaScript中是一个非常强大的工具，用于将数组中的所有元素归并（或者说“减少”）为单个值。这个方法对于累加数组中的值、合并数组内容或者在单个遍历中实现复杂的数据转换等操作非常有用。

      reduce 方法的基本用法如下：

        array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)

      就是回调函数的默认参数，callback：执行数组中每个值的函数，包含四个参数：
      accumulator：累加器累加回调的返回值；它是上一次调用回调时返回的累积值，或者是提供的初始值（initialValue）。
      currentValue：数组中正在处理的元素。
      currentIndex（可选）：数组中正在处理的当前元素的索引。如果提供了initialValue，则起始索引号为0，否则为1。
      array（可选）：调用 reduce 方法的数组。

      initialValue（可选）：作为第一次调用 callback 函数时第一个参数（accumulator）的值。如果没有提供初始值，则将使用数组的第一个元素。

       const numbers = [1, 2, 3, 4];
 const sum = numbers.reduce((accumulator, current) => accumulator + current, 0); // 10

    4. 每个（Every）：检查数组中的所有元素是否都符合提供的测试函数。
      无论如何every返回的都是布尔值，如果他接受的不是布尔值，他会将其转换成布尔值进行运算。 在JavaScript中，Array.prototype.every() 方法确实期望一个函数作为参数，这个函数对数组中的每个元素执行测试。如果回调函数对每个元素都返回一个真值（truthy value），every 方法才会返回 true；否则返回 false。
      这个回调函数不一定非得返回布尔值（true 或 false）。JavaScript中的任何值都可以被视为真值或假值（falsy value）。如果回调函数返回的值可以被转换成布尔上下文中的 true ，那么这个值就被认为是真值。常见的假值包括 0、null、undefined、NaN、空字符串 "" 和 false 本身。除此之外的所有值都被认为是真值。 例如，如果回调函数返回数字 1，尽管 1 不是布尔值，但它是一个真值，因此 every 会将其解释为 true 。如果回调函数返回 0（一个假值），every 会将其解释为 false。

      const numbers = [1, 2, 3, 4];
const allPositive = numbers.every(x => x > 0); // true

    5. 某个（Some）：检查数组中是否至少有一个元素符合提供的测试函数。也与every同理。

      const numbers = [1, 2, 3, 4];
const hasNegative = numbers.some(x => x < 0); // false

    6. 查找（Find）：返回数组中满足提供的测试函数的第一个元素的值。

      const numbers = [1, 2, 3, 4];
const firstEven = numbers.find(x => x % 2 === 0); // 2

    7. 查找索引（FindIndex）：返回数组中满足提供的测试函数的第一个元素的索引。

      const numbers = [1, 2, 3, 4];
const indexOFEven = numbers.findIndex(x => x % 2 === 0); // 1

    8. 排序（Sort）：对数组的元素进行排序，并返回排序后的数组。

      const numbers = [4, 2, 3, 1];
numbers.sort((a, b) => a - b); // [1, 2, 3, 4]

    9. 切片（Slice）：返回数组的一部分，不修改原数组。返回一个新的数组，包含从 start（包括该元素） 到 end （**不包括该元素 **）的 arrayObject 中的元素。

      const numbers = [1, 2, 3, 4];
const middleTwo = numbers.slice(1, 3); // [2, 3]

    这些函数是函数式编程在JavaScript中的基本工具，它们提供了一种声明式和不可变的编程范式，有助于写出更清晰、更易于维护的代码。
    现在让我们去默写一遍这些功能。
    简单默写一下你熟悉的函数式JS，API

    1. every,他的作用是将数组的每个API去执行一下回调，如果数组的所有元素回调返回的值为true，那它就会返回为true，如果有一个不为true就返回false。 2. same，和every同理，如果有一个返回为true就为true，都返回false就返回false。 3. map，他的作用是映射，就是将一个数组里的每个数变成回调函数的返回值，然后最后组合起来返回一个数组。 4. filter，他的作用是过滤，就是将满足回调函数的数保留起来，不满足回调函数，也就是回调函数返回false的数就删除，他接受的回调函数也是要接受一个布尔类型的。 5. find，他的作用是将数组里每个数进行查询，如果数组的数满足回调函数，就返回这个数，回调接受的也是个布尔类型。 6. findindex，和find一样不过它返回的是这个数的索引。 7. sort，排序，将数组的数按规则排序，怎么按规则排序呢？他接受两个数，如果返回负数，那就是a在前，如果返回正数，那就是b在前，如果返回0，那就是不变。最后也是返回排序后的数组。 8. slice，切片，他接受两个参数，不接受回调。它的两个参数，一个是开始的元素一个是结束的元素，返回[,)的一个数组，就是不包括结束元素的数组。 9. reduce，他是将整个数组归一化的函数，他可以让一数组变成一个数，简单的应用比如可以做累加器。也可以做数组变成列表的操作。他接受两个参数，一个是回调函数，一个是初始值，回调函数第一个值是之前的返回值，第二个值是当前值。

    这些其实不只是函数化编程，更多的其实是Array的一些对象方法。那除此之外还有什么对象方法呢？

    • concat()：连接两个或更多的数组，并返回一个新的数组。
      • copyWithin()：在数组内部，将一系列元素从指定位置复制到另一个指定位置，并返回修改后的数组。
      • entries()：返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。
      • every()：测试数组的所有元素是否都通过了指定函数的测试。
      • fill()：使用一个固定值来填充数组中从起始索引到终止索引的全部元素。
      • filter()：创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
      • find()：返回数组中满足提供的测试函数的第一个元素的值。
      • findIndex()：返回数组中满足提供的测试函数的第一个元素的索引。
      • forEach()：对数组的每个元素执行一次提供的函数。
      • from()：从类数组或可迭代对象中创建一个新数组实例。
      • includes()：判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。
      • indexOf()：返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
      • isArray()：判断传入的参数是否是一个数组。
      • join()：将数组中的所有元素连接成一个字符串并返回。
      • keys()：返回一个包含数组中每个索引键的Array Iterator对象。
      • lastIndexOf()：返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1。
      • map()：创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
      • pop()：从数组中删除最后一个元素，并返回该元素的值。
      • push()：向数组的末尾添加一个或更多元素，并返回新的长度。
      • reduce()：对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。
      • reduceRight()：接受一个函数作为累加器和数组的每个值（从右到左），将其减少到单个值。
      • reverse()：颠倒数组中元素的位置，第一个元素成为最后一个元素，最后一个元素成为第一个元素。
      • shift()：从数组中删除第一个元素，并返回该元素的值。
      • slice()：返回一个由开始和结束（不包括结束）决定的浅拷贝数组的一部分，并以新数组对象的形式返回。
      • some()：测试数组中的某些元素是否通过由提供的函数实现的测试。
      • sort()：对数组元素进行排序，并返回数组。
      • splice()：通过删除现有元素和/或添加新元素来更改一个数组的内容。
      • toString()：返回一个字符串，表示指定的数组及其元素。
      • unshift()：向数组的开头添加一个或更多元素，并返回新的长度。
      • valueOf()：返回数组对象的原始值。 新增方法：
      • Array.of()：创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。
      • Array.at()：接受一个整数值并返回该索引处的元素，允许使用正数和负数索引。
      • Array.flat()：根据指定的深度递归进入数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组。
      • Array.flatMap()：首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。

  2. 字符串API

    1. charAt()：返回指定索引位置的字符。
    2. indexOf(): 返回字符串中指定文本的第一个匹配项的索引。console.log(str.indexOf("abc")); //输出结果：0
    3. lastIndexOf(): 返回字符串中指定文本的最后一个匹配项的索引。console.log(str.lastIndexOf("abc")); //输出结果：0
    4. includes(): 判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false。console.log(str.includes("abc")); //输出结果：true
    5. startsWith(): 判断字符串是否以指定的字符串开头，根据情况返回 true 或 false。console.log(str.startsWith("abc")); //输出结果：true
    6. endsWith(): 判断字符串是否以指定的字符串结尾，根据情况返回 true 或 false。console.log(str.endsWith("abc")); //输出结果：false
    7. concat(): 连接两个或多个字符串，并返回一个新的字符串。console.log(str.concat("efg","hijk")); //输出结果："abcefghijk"
    8. split(): 将字符串拆分为子字符串数组，然后将结果作为字符串数组返回。console.log(str.split("")); //输出结果：["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k"]
    9. slice(): 通过删除现有元素和/或添加新元素来更改一个字符串的内容。let str = "abcdefg"; str.slice(1,6); // 输出结果："bcdef" "
    10. toLowerCase(): 将字符串转换为小写字母。console.log(str.toLowerCase()); //输出结果："abcdefghijk"
    11. toUpperCase(): 将字符串转换为大写字母。console.log(str.toUpperCase()); //输出结果："ABCDEFGHIJK"
    12. replace(): 替换字符串中的某些字符。console.log(str.replace("abc", "123")); //输出结果："123defghijk"
    13. search() ：搜索字符串中指定的子字符串，或正则表达式，并返回第一个匹配的索引。console.log(str.search("abc")); //输出结果：0
    14. trim(): 去除字符串两端的空格。console.log(str.trim()); //输出结果："abcdefghijk"
    15. trimStart(): 去除字符串开头的空格。console.log(str.trimStart()); //输出结果："abcdefghijk"
    16. trimEnd(): 去除字符串结尾的空格。console.log(str.trimEnd()); //输出结果："abcdefghijk"
    17. repeat(): 返回一个新字符串，表示将原始字符串重复 n 次。console.log(str.repeat(2)); //输出结果："abcdefghijkabcdefghijk"
    18. padStart(): 用另一个字符串填充当前字符串，以便产生的字符串达到给定的长度。console.log(str.padStart(20, "123")); //输出结果："123123123123123abc" "1".padStart(3, '0') // 输出结果： '001'
    19. padEnd():尾部补全。该方法也是接收两个参数，第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串.
    20. parseInt()方法用于可解析一个字符串，并返回一个整数。console.log(parseInt("10")); //输出结果：10 ,如果要解析二进制就parseInt("17",2);
    21. parseFloat()方法用于解析一个字符串，并返回一个浮点数。console.log(parseFloat("10.33")); //输出结果：10.33

  3. 数字API 1. toFixed(): 将数字转换为字符串，保留指定的小数位数。console.log(num.toFixed(2)); //输出结果：10.00 2. toPrecision(): 根据数字的长度来格式化数字。console.log(num.toPrecision(2)); //输出结果：10 3. toString(): 把数字转换为字符串。console.log(num.toString()); //输出结果："10" 4. parseInt(): 将字符串转换为整数。console.log(parseInt("10")); //输出结果：10 5. parseFloat(): 将字符串转换为浮点数。console.log(parseFloat("10.33")); //输出结果：10.33 6. isNaN(): 检查一个值是否是NaN。console.log(isNaN(num)); //输出结果：false 7. isFinite(): 检查一个值是否是有限的。console.log(isFinite(num)); //输出结果：true 8. Math.abs(): 返回一个数的绝对值。console.log(Math.abs(-10)); //输出结果：10 9. Math.ceil(): 对一个数进行上舍入。console.log(Math.ceil(10.33)); //输出结果：11 10. Math.floor(): 对一个数进行下舍入。console.log(Math.floor(10.33)); //输出结果：10 11. Math.max(): 返回一组数中的最大值。console.log(Math.max(10, 20)); //输出结果：20 12. Math.min(): 返回一组数中的最小值。console.log(Math.min(10, 20)); //输出结果：10 13. Math.pow(): 返回一个数的指定次幂。console.log(Math.pow(10, 2)); //输出结果：100 14. Math.random(): 返回一个随机数。console.log(Math.random()); //输出结果：0.123456789 15. Math.round(): 对一个数进行四舍五入。console.log(Math.round(10.33)); //输出结果：10 16. Math.sqrt(): 返回一个数的平方根。console.log(Math.sqrt(64)); //输出结果：8 17. Math.trunc(): 返回一个数的整数部分。console.log(Math.trunc(10.33)); //输出结果：10

  4. DOM和BOM

    1. document.getElementById(): 返回对拥有指定 id 的第一个对象的引用。
    2. document.getElementsByTagName(): 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
    3. document.getElementsByClassName(): 返回文档中所有指定类名的元素集合。
    4. document.querySelector(): 返回文档中匹配指定 CSS 选择器的一个元素。
    5. document.querySelectorAll(): 返回文档中匹配指定 CSS 选择器的所有元素。
    6. document.createElement(): 创建元素节点。
    7. document.createTextNode(): 创建文本节点。
    8. document.getElementById(): 返回对拥有指定 id 的第一个对象的引用。
    9. document.getElementsByTagName(): 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
    10. document.getElementsByClassName(): 返回文档中所有指定类名的元素集合。
    11. document.querySelector(): 返回文档中匹配指定 CSS 选择器的一个元素。
    12. document.querySelectorAll(): 返回文档中匹配指定 CSS 选择器的所有元素。
    13. document.createElement(): 创建元素节点。
    14. document.createTextNode(): 创建文本节点。
    15. element.innerHTML: 设置或返回元素的内容。
    16. element.style.property: 设置或返回元素的样式属性。
    17. element.setAttribute(): 设置元素的属性。
    18. element.getAttribute(): 返回元素的属性值。
    19. element.appendChild(): 向节点添加最后一个子节点。
    20. element.removeChild(): 删除子节点。
    21. element.replaceChild(): 替换子节点。
    22. element.insertBefore(): 在已有的子节点前插入一个新的子节点。
    23. element.addEventListener(): 向元素添加事件句柄。
    24. window.open(): 打开新窗口。
    25. window.close(): 关闭当前窗口。
    26. window.moveTo(): 移动当前窗口。
    27. window.resizeTo(): 调整当前窗口的尺寸。
    28. window.alert(): 显示带有一段消息和一个确认按钮的警告框。
    29. window.confirm(): 显示带有一段消息以及确认按钮和取消按钮的对话框。
    30. window.prompt(): 显示可提示用户输入的对话框。

  5. Dom事件

    1. 添加事件监听器addEventListener
    let button = document.querySelector('button');
button.addEventListener('click', function() {
    alert('按钮被点击了！');
});
button.removeEventListener('click', functionName);
button.addEventListener('click', function(event) {
    console.log(event.target); // 打印触发事件的元素
});

    鼠标事件 click：用户点击元素时触发。 dblclick：用户双击元素时触发。 mousedown：用户按下鼠标按钮时触发。 mouseup：用户释放鼠标按钮时触发。 mousemove：鼠标移动时触发。 mouseover：鼠标移到元素上时触发。 mouseout：鼠标从元素上移开时触发。 mouseenter：鼠标进入元素边界时触发（不冒泡）。 mouseleave：鼠标离开元素边界时触发（不冒泡）。 键盘事件 keydown：用户按下键盘键时触发。 keyup：用户释放键盘键时触发。 keypress：用户按下键盘键产生字符时触发（逐渐被废弃）。 焦点事件 focus：元素获得焦点时触发。 blur：元素失去焦点时触发。 focusin：元素即将获得焦点时触发（可冒泡）。 focusout：元素即将失去焦点时触发（可冒泡）。 表单事件 change：元素的值改变时触发（例如在 input、textarea、select 中）。 submit：表单提交时触发。 reset：表单重置时触发。 触摸事件 touchstart：用户开始触摸屏幕时触发。 touchmove：用户手指在屏幕上滑动时触发。 touchend：用户手指离开屏幕时触发。 touchcancel：触摸被意外中断时触发。 滚动事件 scroll：元素或窗口滚动时触发。

     function formSubmit() {
 // TODO：待补充代码
 const quescontent = document.getElementById("quescontent");
 const result = document.getElementById("result");
 const weight = document.getElementById("weight").value;
 const height = document.getElementById("height").value;
 const male = document.querySelector('[type="radio"]:checked').value;
 const place = document.querySelectorAll('[name="place"]:checked');
 const placeArr = [];
 place.forEach((el) => placeArr.push(el.nextSibling.textContent.trim()));
 const res = `身高${height}cm，体重${weight}kg，性别 ${
 male == 0 ? "男" : "女"
 }，会在${[...placeArr]}健身锻炼`;
 result.innerHTML += `<br> ${res}`;
 quescontent.style.display = "none";
 result.style.display = "block";

  6. set和map

  7. AJAX语法 使用AJAX的基本步骤通常包括以下几个方面：

    1. 创建一个XMLHttpRequest对象。
    2. 使用open()方法设置请求的类型（如GET或POST）、URL以及是否异步。
    3. 使用send()方法发送请求。
    4. 通过监听XMLHttpRequest对象的onreadystatechange事件来处理服务器的响应。

    以下是一个简单的AJAX使用示例：

    // 步骤1: 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 步骤2: 配置请求
xhr.open('GET', 'your-api-url', true);

// 步骤3: 设置当请求状态改变的事件处理函数
xhr.onreadystatechange = function () {
    // readyState 为 4 表示请求已完成，且响应已就绪
    if (xhr.readyState == 4 && xhr.status == 200) {
        // 处理响应数据
        console.log(xhr.responseText);
    }
};

// 步骤4: 发送请求
xhr.send();

    说明：

    1. open()方法：第一个参数是请求的方法（如GET, POST），第二个参数是请求的URL，第三个参数是布尔值，表示请求是否异步处理。
    2. onreadystatechange事件监听器：这是一个事件处理函数，每当readyState属性改变时，它就会被调用。readyState属性表示请求/响应过程的当前活动阶段。
    3. readyState属性：这个属性有5个可能的值，从0到4，每个值对应请求过程中的一个不同阶段。当readyState等于4时，表示请求已完成，且响应已就绪。
    4. status属性：HTTP请求的状态码，如200表示请求成功，404表示未找到等。
    5. responseText属性：以字符串形式返回服务器响应的文本。

    ajax处理json数据 如果需要发送或接收JSON格式的数据，需要在发送前将对象转换为JSON字符串，接收时将JSON字符串解析为JavaScript对象。

    <!-- 通过CDN引入jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

```javascript
// 发送JSON数据
var data = JSON.stringify({ key: 'value' });
xhr.send(data);

// 解析JSON响应
var responseData = JSON.parse(xhr.responseText);

    设置请求头
    对于POST请求或需要在HTTP请求中包含特定信息的情况，你可能需要使用setRequestHeader()方法设置HTTP请求头。

    xhr.setRequestHeader('Content-Type', 'application/json');

  8. Axios基础语法

    1.它是如何使用的？

          //发送 GET 请求
     axios.get('https://api.example.com/data')
     .then(function (response) {
       // 处理成功情况
       console.log(response);
     })
     .catch(function (error) {
       // 处理错误情况
       console.log(error);
     })
     .finally(function () {
       // 总是会执行
     });

      // 发送 POST 请求
     axios.post('https://api.example.com/data', {
         firstName: 'Fred',
         lastName: 'Flintstone'
       })
       .then(function (response) {
         console.log(response);
       })
       .catch(function (error) {
         console.log(error);
       });
  
      // 请求配置
     axios({
       method: 'get', // 请求方法
       url: 'https://api.example.com/data', // 请求地址
       params: { ID: 12345 }, // 查询参数
       headers: {'X-Requested-With': 'XMLHttpRequest'}, // 设置请求头
       timeout: 1000, // 超时时间（毫秒）
     })
     .then(response => { console.log(response); })
     .catch(error => { console.log(error); });
 
     // 同步请求
     async function getUser() {
     try {
       const response = await axios.get('https://api.example.com/user');
       console.log(response);
     } catch (error) {
       console.error(error);
     }
   }

     // 请求json文件的数据
    axios.get('./a.json').than(function(res){})

     // 请求拦截器
     // 请求拦截器可以让你在发送请求之前执行一些操作，比如在所有请求头中添加一个 token，或者对请求数据进行一些处理：
     axios.interceptors.request.use(
       config => {
         // 在发送请求之前做些什么
         config.headers['Authorization'] = 'Bearer yourToken';
         return config;
       },
       error => {
         // 对请求错误做些什么
         return Promise.reject(error);
       }
     );

 
     // 响应拦截器
     // 响应拦截器可以让你在接收到响应之后、在你的 then 或 catch 处理之前执行一些操作，比如根据响应状态码统一处理错误：
     axios.interceptors.response.use(
       response => {
         // 对响应数据做点什么
         return response;
       },
       error => {
         // 对响应错误做点什么
         if (error.response.status === 401) {
           // 处理 401 错误
         }
         return Promise.reject(error);
       }
     );

     // 响应拦截器
     /* Axios 请求失败时会返回一个错误对象，你可以通过这个对象获取错误信息，并据此进行相应的错误处理。错误对象主要包含以下几个属性：
     message：错误信息
     response：响应对象，包含了服务器的响应信息（如果服务器有响应的话）
     request：请求对象，包含了请求的相关信息
     config：请求的配置信息
     你可以这样处理错误：
   
     axios.interceptors.response.use(
       response => {
         // 对响应数据做点什么
         return response;
       },
       error => {
         // 对响应错误做点什么
         if (error.response.status === 401) {
           // 处理 401 错误
         }
         return Promise.reject(error);
       }
     );

    1. Axios 可以非常适合用来实现中间层，尤其是在 Node.js 环境下。中间层，也称为服务端代理层，通常位于客户端（如浏览器）和后端服务（如 API 服务器）之间。它的主要目的是为了解决跨域请求问题、集中处理请求、提高安全性、进行数据处理和转换等。

    2. this问题 对于Vue2，他是有this实例问题的。

      axios.get('goodsList.json').then(function(res){
   this.goodsList=res.data
   console.log(this.goodsList)
})
console.log(this.goodsList)

      在这个代码里，我这个this赋值是赋值成功的吗？不是哦。因为在 axios.get 的回调函数中，this 并不指向 Vue 实例。
      因此 this.goodsList = res.data 并没有正确地设置 Vue 实例的 goodsList 数据。
      这是因为在 JavaScript 中，函数内部的 this 指向调用它的对象，但是箭头函数没有自己的 this，箭头函数内部的 this 是继承自外围最近一层非箭头函数的 this。 在 JavaScript 中，箭头函数与普通函数 (function 关键字定义的函数) 在处理 this 时存在一些关键的区别：

      箭头函数中的 this： 箭头函数没有自己的 this 绑定。它们不会创建自己的 this 上下文，因此 this 的值由外围（最近一层的非箭头函数）的作用域决定。
      由于箭头函数没有自己的 this，所以 call()、apply() 和 bind() 这些方法只能传递参数，但是无法绑定 this。
      这使得箭头函数特别适合用在需要保留外层 this 值的回调函数中，例如在 Vue 实例的生命周期钩子或者 axios 请求的 .then() 方法中。
      普通函数中的 this： 普通函数（使用 function 关键字定义的函数）有自己的 this 上下文。函数中的 this 值取决于函数是如何被调用的。
      当普通函数作为对象的方法被调用时，this 通常指向该对象。
      当函数被单独调用时（即不作为任何对象的方法调用时），this 的值会指向全局对象（在浏览器中是 window 对象，在 Node.js 中是 global 对象），在严格模式（'use strict'）下，this 会是 undefined。
      可以使用 call()、apply() 和 bind() 方法改变普通函数中 this 的指向。
      因此，在需要确保 this 上下文指向 Vue 实例时，特别是在异步操作或回调函数中，推荐使用箭头函数。这样可以避免因为 this 指向错误而引起的问题。

  9. JSON解析

    var jsonString = '{"name": "John", "age": 30}';
    var obj = JSON.parse(jsonString);
    console.log(obj.name); // 输出: John

    var obj = {name: "John", age: 30};
    var jsonString = JSON.stringify(obj);
    console.log(jsonString); // 输出: '{"name":"John","age":30}'
avatar
文章
阅读
粉丝