css/js备忘录

CSS 备忘笔记

链接伪类选择器

用于不同状态下链接元素的 CSS 选择器，以下是一些常用的备忘录笔记：

:link：选择未被访问过的链接。
:visited：选择已被访问过的链接。
:hover：选择鼠标悬停在链接上的状态
:active：选择链接被点击的状态
:focus：选择链接获得焦点时的状态

这些伪类选择器可以用于修改链接元素的样式，以提供视觉上的反馈或交互效果。

使用顺序：:link -> :visited -> :hover -> :active

这个顺序的原因在于，当链接被点击时，用户通常先悬停在链接上（:hover），然后触发链接点击（:active）。而 :visited 伪类选择器需要在 :link 之后定义，以确保样式覆盖正确。

示例;

a:link {
  color: blue; /* 未访问的链接的颜色为蓝色 */
}

a:visited {
  color: red; /* 已访问链接的颜色为红色 */
}

a:hover {
  color: yellow; /* 鼠标悬停时的颜色 */
}

a:active {
  color: green; /* 鼠标点击时的颜色 */
}

注：使用必须遵循顺序使用，否则部分属性会出现不生效的情况。

背景设置

当使用 CSS 设置背景时，以下是一些备忘录笔记：

设置背景颜色：

1	background-color: #ffffff; // 使用十六进制、RGB 或颜色关键词

设置背景图片：

1	background-image: url("image.jpg"); // 图片的路径或 URL

控制背景图片的重复：

background-repeat: repeat;          // 默认值，图片在水平和垂直方向上重复
background-repeat: repeat-x;        // 图片在水平方向上重复
background-repeat: repeat-y;        // 图片在垂直方向上重复
background-repeat: no-repeat;       // 图片不重复

设置背景图片的位置：

1
2
3

background-position: center center; // 图片居中
background-position: top left;      // 图片位于左上角
background-position: bottom right;  // 图片位于右下角

控制背景图片的大小：

1
2
3

background-size: auto;              // 默认值，图片按原始大小显示
background-size: cover;             // 图片铺满容器，并保持纵横比
background-size: contain;           // 图片适应容器，并保持纵横比

设置背景固定或滚动：

1
2
3

background-attachment: scroll;      // 默认值，背景图像会随着页面的滚动而滚动
background-attachment: fixed;       // 背景图像固定，不随页面滚动
background-attachment: local;       // 背景随页面滚动而滚动，即元素内部滚动时，背景也会随元素滚动

设置背景的整体属性：

1	background: #ffffff url("image.jpg") no-repeat center center fixed;

这些是一些常见的 CSS 背景设置备忘录笔记。你可以根据需要组合使用这些属性来实现所需的背景效果。

元素水平居中

要在CSS中实现水平居中，可以尝试以下几种方法：

方法一：使用文本对齐方式

.container {
  text-align: center;
}

.element {
  display: inline-block; /* 或者使用display: inline; */
  /* 其他样式属性 */
}

在上述示例中，将容器的 text-align 属性设置为 center，然后将要水平居中的元素设置为 display: inline-block;（或者使用 display: inline;）。这将使元素相对于容器水平居中。

方法二：使用Flexbox布局

.container {
  display: flex;
  justify-content: center;
}

.element {
  /* 其他样式属性 */
}

在上面的示例中，通过将容器的 display 属性设置为 flex，并使用 justify-content: center 来使元素水平居中。

方法三：使用绝对定位和自动边距

.container {
  position: relative;
}

.element {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* 其他样式属性 */
}

在上述示例中，将容器的 position 属性设置为 relative，然后将要水平居中的元素的 position 属性设置为 absolute。接下来，使用 left: 50%; 将元素的左侧边距移动到容器的中心，最后使用 transform: translateX(-50%); 将元素的自身宽度的一半偏移回左侧，从而实现水平居中。

以上是几种常见的方法，根据具体情况选择适合您的方法，并将相应的类名应用于容器和要水平居中的元素。

元素垂直居中

要在CSS中实现垂直居中笔记，您可以尝试以下几种方法：

方法一：使用 Flexbox 布局

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 100vh; /* 设置容器高度为视口高度 */
}

.note {
  /* 样式 */
}

在上面的示例中，.container 是包含笔记元素 .note 的容器。通过将容器的 display 属性设置为 flex，并使用 align-items: center 和 justify-content: center 将笔记内容垂直和水平居中。

方法二：使用绝对定位

.container {
  position: relative;
  height: 100vh; /* 设置容器高度为视口高度 */
}

.note {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 使用负的50%偏移来垂直和水平居中 */
}

在上述示例中，.container 是包含元素 .note 的容器。通过将容器的 position 属性设置为 relative，然后将笔记元素的 position 属性设置为 absolute，并使用 top: 50%; 和 left: 50%; 将其定位到父容器的中心。最后，使用 transform: translate(-50%, -50%); 来根据元素自身的宽度和高度来进行负偏移，以实现垂直和水平居中。

文本自动换行

要实现 CSS 中的文本自动换行，您可以使用 word-wrap 或 overflow-wrap 属性。

方法一：使用 word-wrap

1
2
3

.container {
  word-wrap: break-word;
}

通过将容器的 word-wrap 属性设置为 break-word，可以强制单词在需要时自动换行，以适应容器的宽度。

方法二：使用 overflow-wrap

1
2
3

.container {
  overflow-wrap: break-word;
}

通过将容器的 overflow-wrap 属性设置为 break-word，也可以实现文本的自动换行。这个属性与 word-wrap 的作用类似。

注意：word-wrap 和 overflow-wrap 属性的默认值是 normal，这意味着长单词或 URL 将会溢出容器，并不会自动换行。但在大多数情况下，建议使用上述方法之一来确保文本自动换行。

例如：

1
2
3

<div class="container">
  This is a long text that will wrap automatically when it reaches the container's width.
</div>

.container {
  width: 300px;
  word-wrap: break-word; /* 或者使用 overflow-wrap: break-word; */
}

在上述示例中，.container 类被应用于包裹文本的 <div> 元素中。通过为容器设置一个固定宽度，文本将在达到容器宽度时自动换行。

隐藏浏览器滚动条

要隐藏浏览器滚动条，您可以使用 CSS 的 overflow 属性。

方法一：隐藏整个页面的滚动条

1
2
3

body {
  overflow: hidden;
}

将上述样式应用于 <body> 元素，可以隐藏整个页面的滚动条。

方法二：仅隐藏垂直滚动条

1
2
3

body {
  overflow-y: hidden;
}

将上述样式应用于 <body> 元素，可以只隐藏垂直滚动条，保留水平滚动条。

方法三：自定义滚动条样式（Webkit内核浏览器）

body::-webkit-scrollbar {
  width: 0.5em;
}

body::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

body::-webkit-scrollbar-thumb {
  background-color: #888;
}

通过上述样式，可以自定义滚动条的宽度和颜色。

请注意，这些样式可能会因浏览器和操作系统的不同而有所差异。此外，隐藏滚动条可能会影响到用户体验，请确保在使用时适当考虑页面的可访问性和可用性。

将相应的样式应用于合适的元素或选择器，以达到您想要隐藏浏览器滚动条的效果。

水平镜像旋转元素

.example{
    -moz-transform:scaleX(-1); /* 针对 Mozilla Firefox 浏览器 */
    -webkit-transform:scaleX(-1); /* 针对 Webkit 内核的浏览器 */
    -o-transform:scaleX(-1); /* 针对 Opera 浏览器（弃用） */
    transform:scaleX(-1); /* 通用变换属性 */
}

媒体自适应

@media screen and (min-width: 768px) and (max-width: 1300px){
    .example{
    }
}

JS备忘笔记

let、var、const

var 关键字：函数级作用域
let 关键字：
- let 是块级作用域（花括号级的作用）
- let 是不存在变量提升的
const：声明后不允许改变（常量）
- const 不允许重新赋值。
- 必须声明的时候直接初始化
- const 块级作用域
- const 不能重复声明

三元运算符

三元运算符（也称为条件运算符）是一种简洁的条件表达式，用于根据一个条件的真假来选择不同的值。

1	condition ? expression1 : expression2

例：

1
2
3

let number = -5;
let result = number > 0 ? "正数" : "非正数";
console.log(result);

解释一下这个语法：

condition 是一个要求求值为布尔类型的表达式或变量。
如果 condition 为真（即 true），则返回 expression1 的值。
如果 condition 为假（即 false），则返回 expression2 的值。

可以将三元运算符看作是 if-else 语句的简化形式。它具有更简洁的语法，适用于只有一个判断条件和两个可能结果的情况。

循环语句

for循环

for 循环用于重复执行一系列语句，通常用于已知循环次数的情况。

1
2
3

for (初始化表达式; 条件表达式; 更新表达式) {
  // 循环体代码
}

例：

for (let i = 0; i < 5; i++) {
  console.log("当前计数：" + i);
}

// 九九乘法表
var sum = 1;
for (var i = 1; i <= 9; i++) {
  document.write("<br/>");
  for (var j = 1; j <= i; j++) {
    sum = i * j;
    document.write(i + "*" + j + "=" + sum + " ");
  }
}

while循环

while 循环用于重复执行一系列语句，直到指定的条件不再满足为止。只要条件为真，就会循环执行代码块。

1
2
3

while (condition) {
  // 循环执行的代码块
}

解释一下这个语法：

初始化 是在循环开始前执行的表达式，通常用于声明和初始化循环变量。
条件 是一个布尔表达式，用于定义循环的终止条件。只要条件为真，循环会一直执行。当条件为假时，循环停止，并继续执行循环后的代码。
迭代 是在每次循环迭代之后执行的表达式，通常用于更新循环变量的值。
循环执行的代码块是在每次循环迭代时执行的语句。

例：

let count = 0;

while (count < 5) {
  console.log("当前计数：" + count);
  count++;
}

条件语句

if-else 语句

if (condition) {
  // 当条件为 true 时执行的代码块
} else {
  // 当条件为 false 时执行的代码块
}

解释一下这个语法：

condition 是一个布尔表达式，用于定义判断条件。如果条件为 true，则执行 if 代码块中的语句；如果条件为 false，则执行 else 代码块中的语句。
if 代码块是在条件为 true 时执行的代码块。它可以包含一个或多个语句。
else 代码块是在条件为 false 时执行的代码块。它也可以包含一个或多个语句。

例：

let age = 18;

if (age >= 18) {
  console.log("你已经成年了");
} else {
  console.log("你还未成年");
}

switch 语句

switch 语句用于根据不同的条件执行不同的代码块。它是一种更复杂的分支语句，可以替代多个 if-else if-else 语句的情况。

switch (expression) {
  case value1:
    // 当 expression 等于 value1 时执行的代码块
    break;
  case value2:
    // 当 expression 等于 value2 时执行的代码块
    break;
  case value3:
    // 当 expression 等于 value3 时执行的代码块
    break;
  default:
    // 如果 expression 不等于任何一个 case 的值时执行的代码块
}

解释一下这个语法：

expression 是需要被评估的表达式或值。
每个 case 后面跟着一个具体的值（value1、value2、value3），用于与 expression 进行比较。如果 expression 等于某个 case 的值，则执行对应的代码块。
如果找到匹配的 case，则从匹配的 case 开始执行代码块，并且使用 break 来跳出 switch 语句。这样可以防止继续执行其他的 case。
如果没有找到与 expression 相匹配的 case，则执行 default 代码块（可选）。default 类似于 else，用于处理没有任何匹配的情况。

例：

let day = new Date().getDay();

switch (day) {
  case 0:
    console.log("今天是星期日");
    break;
  case 1:
    console.log("今天是星期一");
    break;
  case 2:
    console.log("今天是星期二");
    break;
  case 3:
    console.log("今天是星期三");
    break;
  case 4:
    console.log("今天是星期四");
    break;
  case 5:
    console.log("今天是星期五");
    break;
  case 6:
    console.log("今天是星期六");
    break;
  default:
    console.log("未知日期");
}

new Date().getDay() 返回当前的星期几，根据这个值，switch 分支会执行相应的代码块。

break与continue

相同点：break 和 continue 是在循环结构中使用的关键字，用于控制循环的执行流程。

break 关键字用于终止整个循环，当满足某个条件时，程序会跳出当前循环体，执行循环之后的代码。换句话说，break 会中断当前循环并退出循环结构。

例：

for i in range(1, 6):
    if i == 3:
        break
    print(i)

# 输出结果:
# 1
# 2

continue 关键字用于跳过当前迭代，继续进行下一次迭代。当满足某个条件时，程序会提前结束本轮循环，然后开始下一轮循环。

例：

for i in range(1, 6):
    if i == 3:
        continue
    print(i)

# 输出结果:
# 1
# 2
# 4
# 5

需要注意的是，break 和 continue 关键字通常用在循环结构（如 for 循环和 while 循环）中，它们并不适用于其他语句块（如条件语句）中。

常用字符串

charAt()：返回指定索引位置的字符。

1 2	let str = 'Hello World'; console.log(str.charAt(0)); // 输出：'H'

charCodeAt()：返回指定索引位置的字符的 Unicode 编码。

1 2	let str = 'Hello World'; console.log(str.charCodeAt(0)); // 输出：72

concat()：连接两个或多个字符串，并返回新的字符串。

let str1 = 'Hello';
let str2 = 'World';
let result = str1.concat(' ', str2);
console.log(result); // 输出：'Hello World'

includes()：检查一个字符串是否包含在另一个字符串中，返回布尔值。

1
2
3

let str = 'Hello World';
let includesWorld = str.includes('World');
console.log(includesWorld); // 输出：true

indexOf()：返回指定字符串在当前字符串中的索引位置，如果没有找到，则返回 -1。
1
2
3
let str = 'Hello World';
let index = str.indexOf('World');
console.log(index); // 输出：6
lastIndexOf()：返回指定字符串在当前字符串中的最后一个索引位置，如果没有找到，则返回 -1。
1
2
3
let str = 'Hello World Hello';
let lastIndex = str.lastIndexOf('Hello');
console.log(lastIndex); // 输出：13

length：返回字符串的长度。

1 2	let str = 'Hello World'; console.log(str.length); // 输出：11

match()：返回一个数组，包含所有匹配的子串，如果没有匹配项，则返回一个空数组。
1
2
3
let str = 'Hello World';
let matches = str.match(/l/g);
console.log(matches); // 输出：['l', 'l']

replace()：替换匹配的子串，并返回新的字符串。

1
2
3

let str = 'Hello World';
let replacedStr = str.replace('World', 'JavaScript');
console.log(replacedStr); // 输出：'Hello JavaScript'

search(): 返回字符串中第一个匹配项的索引位置，如果没有找到，则返回 -1。
1
2
3
let str = 'Hello World';
let index = str.search('World');
console.log(index); // 输出：6

slice()：提取字符串的一部分，并返回新的字符串。

1
2
3

let str = 'Hello World';
let slicedStr = str.slice(6, 11);
console.log(slicedStr); // 输出：'World'

split()：把字符串分割成字符串数组，并返回新的字符串数组。

1
2
3

let str = 'Hello World';
let arr = str.split(' ');
console.log(arr); // 输出：['Hello', 'World']

substr()：返回字符串中一个子字符串的索引位置，如果没有找到，则返回 -1。

1
2
3

let str = 'Hello World';
let substr = str.substr(6, 5);
console.log(substr); // 输出：'World'

substring()：返回字符串中一个子字符串的索引位置，如果没有找到，则返回 -1。

1
2
3

let str = 'Hello World';
let substring = str.substring(6, 11);
console.log(substring); // 输出：'World'

toLowerCase()：把字符串转换为小写，并返回一个新的字符串。

1 2	let str = 'Hello World'; console.log(str.toLowerCase()); // 输出：'hello world'

toUpperCase()：把字符串转换为大写，并返回一个新的字符串。

1 2	let str = 'Hello World'; console.log(str.toUpperCase()); // 输出：'HELLO WORLD'

trim()：删除字符串两端的空格，并返回一个新的字符串。

1
2
3

let str = '  Hello World  ';
let trimmedStr = str.trim();
console.log(trimmedStr); // 输出：'Hello World'

数组遍历

在 JavaScript 中，有多种方法可以遍历数组。下面介绍几种常用的数组遍历方式：

for 循环：

const arr = [1, 2, 3, 4, 5];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

forEach() 方法：

const arr = [1, 2, 3, 4, 5];

arr.forEach((element) => {
  console.log(element);
});

for…of 循环：

const arr = [1, 2, 3, 4, 5];

for (const element of arr) {
  console.log(element);
}

map() 方法：

const arr = [1, 2, 3, 4, 5];

arr.map((element) => {
  console.log(element);
});

for…in 循环（适用于遍历对象属性，不推荐用于遍历数组）：

const arr = [1, 2, 3, 4, 5];

for (const index in arr) {
  console.log(arr[index]);
}

这些方法都可以用来遍历数组，输出或处理数组中的每个元素。你可以根据具体的需求选择适合的遍历方式。

需要注意的是，在使用 forEach()、map() 或 for…of 循环遍历数组时，不建议在循环体内修改数组本身。如果需要修改数组，推荐使用 for 循环或其他方法。

数组静态方法

JavaScript 中的数组静态方法是可以直接通过 Array 类访问的方法，以下是几个常用的数组静态方法：

Array.from():
Array.from() 方法从一个类似数组或可迭代对象创建一个新的数组实例。
示例：
1
2
3
4
const str = "hello";
const arr = Array.from(str);

console.log(arr); // 输出 ["h", "e", "l", "l", "o"]

Array.isArray():
Array.isArray() 方法用于检查一个值是否为数组。

示例：

const arr = [1, 2, 3];
const isArr = Array.isArray(arr);
console.log(isArr); // 输出 true

const obj = { key: "value" };
const isObjArr = Array.isArray(obj);
console.log(isObjArr); // 输出 false

Array.of():
Array.of() 方法创建一个具有可变数量参数的新数组实例。

示例：

const arr1 = Array.of(1, 2, 3);
console.log(arr1); // 输出 [1, 2, 3]

const arr2 = Array.of(4);
console.log(arr2); // 输出 [4]

const arr3 = Array.of("apple", "banana", "orange");
console.log(arr3); // 输出 ["apple", "banana", "orange"]

Array.concat():
Array.concat() 方法用于合并两个或多个数组，并返回一个新的数组。

示例：

const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];

const newArr = Array.concat(arr1, arr2, arr3);

console.log(newArr); // 输出 [1, 2, 3, 4, 5, 6]

这些是一些常用的数组静态方法。通过使用这些方法，你可以方便地操作数组，执行各种操作。

常用数组

push()：在数组末尾添加一个或多个元素，并返回修改后的数组。

1
2
3

let fruits = ['apple', 'banana'];
fruits.push('orange');
console.log(fruits); // 输出：['apple', 'banana', 'orange']

pop()：从数组末尾删除一个元素，并返回删除的元素。

let fruits = ['apple', 'banana', 'orange'];
let lastFruit = fruits.pop();
console.log(lastFruit); // 输出：'orange'
console.log(fruits); // 输出：['apple', 'banana']

shift()：从数组开头删除一个元素，并返回删除的元素。

let fruits = ['apple', 'banana', 'orange'];
let firstFruit = fruits.shift();
console.log(firstFruit); // 输出：'apple'
console.log(fruits); // 输出：['banana', 'orange']

unshift()：在数组开头添加一个或多个元素，并返回修改后的数组。

1
2
3

let fruits = ['banana', 'orange'];
fruits.unshift('apple');
console.log(fruits); // 输出：['apple', 'banana', 'orange']

splice()：从数组中添加或删除元素，可以指定要添加或删除的元素、开始位置和删除的个数。

1
2
3

let fruits = ['apple', 'banana', 'orange'];
fruits.splice(1, 1, 'grape'); // 删除索引为1的元素，然后在此位置插入'grape'
console.log(fruits); // 输出：['apple', 'grape', 'orange']

slice()：返回一个新数组，其中包含原始数组的指定部分，不会修改原始数组。

let fruits = ['apple', 'banana', 'orange'];
let slicedFruits = fruits.slice(1, 3); // 提取索引为1和2的元素（不包括索引3）
console.log(slicedFruits); // 输出：['banana', 'orange']
console.log(fruits); // 输出：['apple', 'banana', 'orange']

concat()：将一个或多个数组连接到原始数组，并返回一个新的数组。

let fruits1 = ['apple', 'banana'];
let fruits2 = ['orange', 'grape'];
let mergedFruits = fruits1.concat(fruits2);
console.log(mergedFruits); // 输出：['apple', 'banana', 'orange', 'grape']

join()：将数组元素连接成一个字符串，并返回新的字符串。

1
2
3

let fruits = ['apple', 'banana', 'orange'];
let joinedString = fruits.join(', ');
console.log(joinedString); // 输出：'apple, banana, orange'

indexOf()：返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

1
2
3

let fruits = ['apple', 'banana', 'orange'];
let index = fruits.indexOf('banana');
console.log(index); // 输出：1

lastIndexOf()：返回数组中最后一个找到的指定元素的索引，如果不存在则返回-1。

1
2
3

let fruits = ['apple', 'banana', 'orange', 'banana'];
let lastIndex = fruits.lastIndexOf('banana');
console.log(lastIndex); // 输出：3

includes()：判断数组是否包含指定元素，返回布尔值。

1
2
3

let fruits = ['apple', 'banana', 'orange'];
let includesOrange = fruits.includes('orange');
console.log(includesOrange); // 输出：true

forEach()：对数组进行遍历，对数组中的每一项执行一次给定的函数。

let fruits = ['apple', 'banana', 'orange'];
fruits.forEach(function(fruit) {
  console.log(fruit);
});
// 输出：
// 'apple'
// 'banana'
// 'orange'

map()：对数组中的每一项执行一次给定的函数，并返回每次函数调用的结果组成的数组。

let fruits = ['apple', 'banana', 'orange'];
let fruitsWithLength = fruits.map(function(fruit) {
  return fruit.length;
});
console.log(fruitsWithLength); // 输出：[ 5, 6, 7 ]

filter()：对数组进行过滤，并返回符合条件所有元素的数组。

let fruits = ['apple', 'banana', 'orange'];
let fruitsWithLength = fruits.filter(function(fruit) {
  return fruit.length > 5;
});

reduce()：对数组中的每一项执行一个由您提供的 reducer 函数，并将其结果汇总为单个返回值。

let total = [0, 1, 2, 3].reduce(function(sum, currentValue) {
  return sum + currentValue;
}, 0);
console.log(total); // 输出：6

find()：返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined。

let fruits = ['apple', 'banana', 'orange'];
let fruit = fruits.find(function(fruit) {
  return fruit === 'orange';
});

reverse()：反转数组中的元素。

1
2
3

let fruits = ['apple', 'banana', 'orange'];
fruits.reverse();
console.log(fruits); // 输出：['orange', 'banana', 'apple']

sort()：对数组中的元素进行排序。

let fruits = [9, 6, 8, 7, 4, 1, 3, 5, 2];
fruits.sort(function(a, b) {
  return a - b;
});
console.log(fruits); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

function

函数（function）是一段可重复调用的代码块，它可以接受输入参数，执行特定的操作，并且可以返回一个值。

在大多数编程语言中，函数通常具有以下组成部分：

函数名（Function Name）：用于标识函数并在需要时调用它。
参数（Parameters）：函数可以接受零个或多个参数，这些参数是传递给函数的值，用于函数内部的操作。
函数体（Function Body）：包含了一系列要执行的语句，这些语句定义了函数的行为和操作。
返回值（Return Value）：函数可以选择性地返回一个值作为计算结果，也可以不返回任何值。

下面是一个简单的 JavaScript 函数示例，该函数将两个数字相加并返回结果：

function add(a, b) {
  return a + b;
}

// 调用函数并输出结果
const result = add(3, 5);
console.log(result); // 输出 8

在这个示例中，函数名是 add，它接受两个参数 a 和 b，并使用 return 语句返回它们的和。函数被调用时，传递的参数值是 3 和 5，函数执行完后将返回结果 8。

函数在编程中非常有用，它们可以将代码封装为可重用的模块，提高代码的可读性和可维护性。函数还可以帮助我们将复杂的任务分解为更小的、可管理的部分。

Math

Math 是一个内置的 JavaScript 对象，提供了许多用于数学计算的方法和属性。

下面是 Math 对象的一些常用方法：

Math.abs(x)：返回参数 x 的绝对值。
Math.ceil(x)：返回大于或等于参数 x 的最小整数。
Math.floor(x)：返回小于或等于参数 x 的最大整数。
Math.round(x)：返回参数 x 四舍五入后的整数。
Math.max(x1, x2, …)：返回参数中的最大值。
Math.min(x1, x2, …)：返回参数中的最小值。
Math.random()：返回一个大于等于 0 且小于 1 的随机数。
Math.sqrt(x)：返回参数 x 的平方根。
Math.pow(x, y)：返回 x 的 y 次幂。
Math.sin(x) / Math.cos(x) / Math.tan(x)：返回 x 的正弦值、余弦值和正切值（单位为弧度）。

这只是 Math 对象提供的一部分方法，还有其他一些有用的方法如三角函数、对数函数、指数函数等。

除了方法，Math 对象还提供了一些常见的数学常量，例如：

Math.PI：表示圆周率π的近似值。
Math.E：表示自然对数的底数e的近似值。

以下是一个 JavaScript 示例，演示了一些 Math 对象的使用：

console.log(Math.abs(-5)); // 输出 5

console.log(Math.ceil(4.3)); // 输出 5

console.log(Math.floor(4.7)); // 输出 4

console.log(Math.round(4.5)); // 输出 5

console.log(Math.max(2, 6, 9)); // 输出 9

console.log(Math.min(2, 6, 9)); // 输出 2

console.log(Math.random()); // 输出大于等于 0 且小于 1 的随机数

console.log(Math.sqrt(16)); // 输出 4

console.log(Math.pow(2, 3)); // 输出 8

console.log(Math.sin(Math.PI / 2)); // 输出 1

这样，你可以利用 Math 对象进行各种数学计算。

Date

Date 是一个用于处理日期和时间的内置对象。在 JavaScript 中，可以使用 Date 对象来获取当前日期和时间，以及进行日期和时间的计算和操作。

以下是一些常用的 Date 对象的方法和示例：

使用 new Date() 创建一个当前的日期对象。

1 2	const currentDate = new Date(); console.log(currentDate);

使用 new Date(year, month, day, hour, minute, second) 来创建一个指定日期和时间的对象。
1
2
const specificDate = new Date(2023, 6, 10, 12, 0, 0);
console.log(specificDate);
注意：月份是从 0 开始计数的，即 0 表示一月，1 表示二月，以此类推。

Date 对象提供了许多方法来获取和操作日期和时间的各个部分。以下是一些常用的方法：

getFullYear()：获取年份。

1 2	const year = currentDate.getFullYear(); console.log(year);

getMonth()：获取月份，返回值是 0 到 11 之间的整数。
1
2
const month = currentDate.getMonth();
console.log(month);

getDate()：获取月份中的日期。

1 2	const date = currentDate.getDate(); console.log(date);

getDay()：获取星期几，返回值是 0（周日）到 6（周六）之间的整数。
1
2
const day = currentDate.getDay();
console.log(day);

getHours()、getMinutes()、getSeconds()：获取小时、分钟和秒数。

const hours = currentDate.getHours();
const minutes = currentDate.getMinutes();
const seconds = currentDate.getSeconds();
console.log(hours, minutes, seconds);

getTime()：获取日期对象的时间戳，表示自 1970 年 1 月 1 日 00:00:00 UTC 起的毫秒数。
1
2
const timestamp = currentDate.getTime();
console.log(timestamp);

除了上面提到的方法，Date 对象还提供了一些用于设置日期和时间的方法，如 setFullYear()、setMonth()、setDate() 等。

通过 Date 对象，你可以处理和操作日期和时间。

document

document 是在前端 Web 开发中常用的全局对象，代表了当前网页的文档对象模型（Document Object Model，DOM）。它提供了许多方法和属性，用于操作和访问当前网页的内容。

以下是一些常见的 document 对象的方法和属性：

document.getElementById(id)：根据元素的唯一标识符 ID 获取元素对象。
document.getElementsByClassName(className)：根据类名获取一个包含所有匹配元素的元素集合。
document.getElementsByTagName(tagName)：根据标签名获取一个包含所有匹配元素的元素集合。
document.querySelector(selector)：根据 CSS 选择器获取第一个匹配元素。
document.querySelectorAll(selector)：根据 CSS 选择器获取所有匹配元素的节点列表。
document.createElement(tagName)：创建指定标签名称的 HTML 元素节点。
document.createTextNode(text)：创建包含指定文本内容的文本节点。
document.createElementNS(namespace, tagName)：创建指定命名空间和标签名称的元素节点。
document.createAttribute(name)：创建一个具有指定名称的属性节点。
document.createDocumentFragment()：创建一个空的文档片段，用于高效地批量添加和操作多个元素。
document.head：表示 <head> 元素的引用。
document.body：表示 <body> 元素的引用。
document.title：表示当前文档的标题。
document.URL：表示当前文档的 URL。

一些常用使用方法：

获取元素节点：

通过元素的 ID 获取对应的元素节点：

1	var element = document.getElementById('elementId');

通过类名获取一组元素节点：

1	var elements = document.getElementsByClassName('className');

通过标签名获取一组元素节点：

1	var elements = document.getElementsByTagName('tagName');

通过 CSS 选择器获取匹配的第一个元素节点：
1
var element = document.querySelector('selector');

通过 CSS 选择器获取匹配的所有元素节点：

1	var elements = document.querySelectorAll('selector');

修改元素内容：

获取或设置元素的文本内容：

1 2	var textContent = element.textContent; // 获取文本内容 element.textContent = 'New text content'; // 设置新的文本内容

获取或设置元素的 HTML 内容：

1 2	var htmlContent = element.innerHTML; // 获取 HTML 内容 element.innerHTML = '<p>New HTML content</p>'; // 设置新的 HTML 内容

修改元素样式：

获取或设置元素的 CSS 样式属性：

1 2	var styleValue = element.style.property; // 获取样式属性值 element.style.property = 'value'; // 设置样式属性值

创建和插入新的节点：
- 创建一个新的元素节点：
  1
  var newElement = document.createElement('tagName');
- 将新节点插入到父节点的末尾：
  1
  parentElement.appendChild(newElement);
- 在指定参考节点之前插入新节点：
  1
  parentElement.insertBefore(newElement, referenceNode);
删除节点：
- 从父节点中删除指定的子节点：
  1
  parentElement.removeChild(childNode);

通过使用 document 对象提供的这些属性和方法，你可以对网页进行动态操作，实现各种交互和效果。

Element

当我们在 JavaScript 中操作 HTML 元素时，可以使用 Element 对象来获取、修改和交互元素。下面是一些常见的 Element 对象的使用方法：

获取元素：
可以使用以下方法来获取元素对象：
- document.getElementById(id)：通过元素的 id 属性获取对应的元素对象。
- document.querySelector(selector)：通过 CSS 选择器获取第一个匹配的元素对象。
- document.querySelectorAll(selector)：通过 CSS 选择器获取所有匹配的元素对象。
示例：
1
2
3
var elementById = document.getElementById("elementId");
var elementBySelector = document.querySelector(".elementClass");
var elementsBySelectorAll = document.querySelectorAll("p");

操作元素属性和样式：

获取或设置元素的属性值：

1 2	var attributeValue = element.getAttribute("attributeName"); // 获取属性值 element.setAttribute("attributeName", "attributeValue"); // 设置属性值

获取或设置元素的样式：

1 2	var styleValue = element.style.propertyName; // 获取样式值 element.style.propertyName = "value"; // 设置样式值

操作元素内容：

获取或设置元素的文本内容：

1 2	var textContent = element.textContent; // 获取文本内容 element.textContent = "New text content"; // 设置新的文本内容

获取或设置元素的 HTML 内容：

1 2	var htmlContent = element.innerHTML; // 获取 HTML 内容 element.innerHTML = "<p>New HTML content</p>"; // 设置新的 HTML 内容

添加事件监听器：

添加事件监听器来响应特定事件：

1	element.addEventListener("click", eventHandler); // 添加点击事件监听器

移除事件监听器：

1	element.removeEventListener("click", eventHandler); // 移除点击事件监听器

这些是 Element 对象的一些常见用法示例，但并不限于此。通过使用其他属性和方法，你可以进一步操作和交互元素。

需要注意的是，在使用 Element 对象时，要确保在元素加载完成后再进行操作，或者将 JavaScript 代码放置在适当的位置（如 window.onload 事件处理程序中）以确保 DOM 树已经构建完毕。

事件处理程序

事件处理程序是用于响应特定事件的函数或代码块。在 JavaScript 中，您可以通过以下几种方式来添加事件处理程序：

HTML 属性中的事件处理程序：
在 HTML 元素上直接添加事件处理程序作为属性。例如，使用 onclick 属性添加点击事件处理程序：
1
<button onclick="myFunction()">点击我</button>
DOM 对象的属性赋值：
使用 JavaScript，您可以直接将函数赋值给 DOM 对象的事件属性。例如，使用 addEventListener 方法添加点击事件处理程序：
1
2
var button = document.querySelector("button");
button.addEventListener("click", myFunction);
匿名函数：
您可以直接在事件处理程序中定义匿名函数。这种方式常用于需要传递参数或临时处理事件的情况。例如：
1
2
3
4
var button = document.querySelector("button");
button.addEventListener("click", function() {
// 处理事件的代码
});
事件委托：
事件委托是一种将事件处理程序添加到父元素而不是每个子元素的技术。通过在父元素上捕获事件并检查事件目标，可以处理多个子元素的事件。例如：
1
2
3
4
5
6
var parentElement = document.querySelector("#parent");
parentElement.addEventListener("click", function(event) {
if (event.target.matches("button")) {
// 处理事件的代码
}
});

这些是常用的添加事件处理程序的方式。您可以根据需要选择适合您场景的方法。事件处理程序允许您响应用户交互、处理用户输入或执行其他操作，使您的网页或应用程序具有交互性和动态性。

鼠标事件

鼠标事件是指与鼠标交互相关的事件类型，JavaScript 提供了一组用于处理鼠标事件的事件类型。以下是常见的鼠标事件及其描述：

click：当用户单击鼠标按钮时触发的事件。
dblclick：当用户双击鼠标按钮时触发的事件。
mousedown：当用户按下鼠标按钮时触发的事件。
mouseup：当用户释放鼠标按钮时触发的事件。
mousemove：当用户移动鼠标时触发的事件。
mouseenter：当鼠标进入元素时触发的事件（不冒泡）。
mouseleave：当鼠标离开元素时触发的事件（不冒泡）。
mouseover：当鼠标进入元素时触发的事件（冒泡）。
mouseout：当鼠标离开元素时触发的事件（冒泡）。
contextmenu：当用户右键单击以显示上下文菜单时触发的事件。

这些事件可以通过添加事件处理程序来响应用户的鼠标操作。例如，使用 addEventListener 监听 click 事件：

var element = document.getElementById("myElement");

// DOM2事件，可以同时添加多个事件
element.addEventListener("click", function(event) {
  // 处理鼠标点击事件的代码
});

/** 或者 **/

// DOM0事件，无法同时添加多个事件
element.onclick = function() {
  // 处理鼠标点击事件的代码
}

在上述示例中，当用户单击 myElement 元素时，事件处理程序中的代码将被执行。

可以根据需要添加适当的事件处理程序来响应不同的鼠标事件，并对用户的鼠标交互做出相应的处理。事件对象 event 提供了更多关于事件的信息，例如鼠标的坐标位置、按下的按钮等，您可以使用它来进行更高级的事件处理。

Event 事件

event 是在 JavaScript 中表示事件的对象。它包含与事件相关的属性和方法，可以用于获取关于事件的详细信息，并执行特定的操作。

在事件处理函数中，通常会传递一个 event 对象作为参数。你可以使用这个对象来访问事件的属性和方法。

以下是一些常用的事件对象的属性和方法：

event.target：获取触发事件的元素。
event.currentTarget：获取绑定事件处理函数的元素。
event.type：获取事件的类型。
event.preventDefault()：阻止事件的默认行为。
event.stopPropagation()：停止事件的冒泡传播。
event.keyCode 或 event.key：获取按下的键盘按键的键码或键名。
event.clientX 和 event.clientY：获取鼠标指针相对于浏览器窗口的水平和垂直坐标。
event.pageX 和 event.pageY：获取鼠标指针相对于整个文档页面的水平和垂直坐标。
event.touches：获取触摸事件的触摸点列表。
event.preventDefault()：阻止事件的默认行为。

这里只列举了一些常见的属性和方法，实际上还有很多其他的属性和方法可以使用，具体取决于事件的类型和浏览器的支持情况。

你可以在事件处理函数中使用这些属性和方法来根据需要处理事件。例如，你可以使用 event.target 获取触发事件的元素，然后针对该元素执行特定的操作。

键盘事件

键盘事件是在用户操作键盘时触发的事件。通过处理键盘事件，你可以捕获用户按下、释放或长按的键的相关信息，并执行相应的操作。

常见的键盘事件包括：

keydown：当用户按下任意键时触发。
keyup：当用户释放任意键时触发。
keypress：当用户按下字符键（字母、数字等）时触发。

这些事件对象提供了一些属性来获取有关按下的键的信息，例如：

event.key：获取按下的键的键名。例如，”A”、”Enter”、”Shift” 等。
event.keyCode 或 event.which：获取按下的键的键码。键码是与特定键相对应的数字代码。
event.shiftKey、event.ctrlKey、event.altKey：判断是否同时按下了 Shift、Ctrl、Alt 键。
event.preventDefault()：阻止事件的默认行为，例如防止浏览器滚动或防止输入框输入文本。

以下是一个示例，展示如何使用 JavaScript 捕获并处理键盘事件：

<!DOCTYPE html>
<html>
<head>
  <title>键盘事件示例</title>
</head>
<body>
  <input type="text" id="myInput">

  <script src="//aeu.alicdn.com/waf/interfaceacting220819.js"></script><script src="//aeu.alicdn.com/waf/antidomxss_v640.js"></script><script>
    var input = document.getElementById("myInput");

    input.addEventListener("keydown", function(event) {
      console.log("按下了键：" + event.key);
      console.log("键码：" + event.keyCode);

      if (event.key === "Enter") {
        console.log("按下了回车键！");
      }
    });

    input.addEventListener("keyup", function(event) {
      console.log("释放了键：" + event.key);
    });
  </script>
</body>
</html>

在上述示例中，我们首先获取了具有指定 ID 的输入框元素，并将其赋值给 input 变量。

然后，我们使用 addEventListener 方法来绑定 keydown 和 keyup 事件的处理函数。当用户按下或释放键盘时，相应的回调函数会被触发。

在回调函数中，我们可以通过 event.key 获取按下或释放的键的键名，并通过 event.keyCode 获取键码。然后，我们可以根据需要执行特定的操作。

请注意，不同的浏览器对于某些键的键名和键码可能有所不同，所以在实际开发中，最好进行测试和跨浏览器兼容性处理。

表单事件

表单元素可以触发各种事件，这些事件可以用于在用户与表单进行交互时执行相应的操作。以下是一些常见的表单事件：

submit：当用户提交表单时触发该事件。可以使用 JavaScript 监听该事件，并执行表单验证、数据处理等操作。

form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止默认的提交行为

  // 在这里执行表单验证、数据处理等操作
});

reset：当用户重置表单时触发该事件。可以使用 JavaScript 监听该事件，并执行清除表单数据、恢复默认值等操作。

1
2
3

form.addEventListener('reset', function(event) {
  // 在这里执行重置表单的操作
});

change：当表单元素的值改变时触发该事件，适用于输入框、下拉菜单、单选按钮和复选框等元素。

1
2
3

input.addEventListener('change', function(event) {
  // 在这里处理表单元素值的改变
});

focus 和 blur：分别在表单元素获得焦点和失去焦点时触发该事件。

input.addEventListener('focus', function(event) {
  // 在这里处理元素获得焦点时的操作
});

input.addEventListener('blur', function(event) {
  // 在这里处理元素失去焦点时的操作
});

这些只是一些常见的表单事件，还有其他更多的事件可供使用，如 input、keydown、keyup 等。根据具体需求，选择适合的事件来监听和处理表单交互。

事件委托

事件委托（Event delegation）是一种通过将事件处理程序绑定到它们共同的父元素，来管理多个子元素上的事件的技术。与事件代理类似，事件委托可以简化代码，提高性能，并且适用于动态添加或删除子元素的情况。

使用事件委托时，我们将事件监听器绑定在父元素上，而不是直接在子元素上。当事件在子元素上触发时，事件会冒泡到父元素，然后通过判断事件的目标元素（event.target）来执行相应的操作。

以下是一个示例，假设有一个列表并且我们想要在每个列表项被点击时触发操作：

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

var list = document.getElementById('myList');

list.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    // 相同的操作逻辑
    console.log(event.target.textContent);
  }
});

在上面的代码中，我们将事件监听器绑定到 ul 元素上。当用户点击 li 元素时，事件会冒泡到 ul 元素，然后通过判断 event.target 是哪个具体的 li 元素，我们可以执行相同的操作逻辑。

事件委托的好处是，在多个子元素上触发相同事件时，只需在父元素上添加一个事件监听器。这样，即使后续动态添加或删除了子元素，事件仍然能够正常工作，而无需再为新的子元素添加事件监听器。

与事件代理类似，使用事件委托可以提高性能、减少内存消耗，并且简化代码结构。

防抖（Debounce）

防抖（Debounce）是一种常用的技术，用于限制连续触发的事件执行频率，确保在指定的时间间隔内只执行一次。

防抖的实现方式有多种，以下是两种常见的实现方式：

使用 setTimeout 和 clearTimeout：
1
2
3
4
5
6
7
8
9
function debounce(func, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
解释：定义了一个 debounce 函数，它接受两个参数：func 是执行的函数，delay 是延迟的时间间隔，每当函数被调用时，它会清除之前的计时器，并在延迟时间后执行传入的函数。

使用立即执行和延迟执行的组合：

function debounce(func, delay, immediate) {
  let timer;
  return function (...args) {
    const context = this;
    clearTimeout(timer);
    if (immediate && !timer) {
      func.apply(context, args);
    }
    timer = setTimeout(() => {
      if (!immediate) {
        func.apply(context, args);
      }
      timer = null;
    }, delay);
  };
}

在函数被调用时会立即执行一次，然后再延迟时间内不执行。只有当延迟时间过去后，才会再次触发执行。

使用防抖技术可以避免因为频繁触发事件而导致的不必要的计算和请求。常见的应用场景包括输入框搜索联想、按钮点击防重复提交等。

节流（throttle）

节流（throttle）是一种常用的技术，用于限制函数的执行频率。这样可以确保在一定时间间隔内，函数最多只会执行一次。以下是一个简单的 JavaScript 节流函数的实现：

function throttle(func, delay) {
  let lastTime = 0;
  return function (...args) {
    const currentTime = Date.now();
    if (currentTime - lastTime >= delay) {
      func.apply(this, args);
      lastTime = currentTime;
    }
  };
}

在上面的实现中，throttle函数接受两个参数：func 表示要节流的函数，delay 表示时间间隔。返回的是一个新的函数，该函数会限制 func 的执行频率。

例如，我们有一个需要节流的函数handleScroll：

function handleScroll() {
  console.log("Scroll event is being handled!");
}

const throttledHandleScroll = throttle(handleScroll, 1000);

现在，如果我们将 throttledHandleScroll 绑定到滚动事件上，它将确保 handleScroll 最多每隔1000毫秒执行一次：

1	window.addEventListener("scroll", throttledHandleScroll);

这样做可以避免在滚动事件中频繁地调用 handleScroll，从而提高性能并确保代码的平滑执行。请注意，实际的节流函数可能更复杂，取决于所需的功能和用例。

css/js备忘录

CSS 备忘笔记

链接伪类选择器

背景设置

元素水平居中

元素垂直居中

文本自动换行

隐藏浏览器滚动条

水平镜像旋转元素

媒体自适应

JS备忘笔记

let、var、const

三元运算符

循环语句

for循环

while循环

条件语句

if-else 语句

switch 语句

break与continue

常用字符串

数组遍历

数组静态方法

常用数组

function

Math

Date

document

Element

事件处理程序

鼠标事件

Event 事件

键盘事件

表单事件

事件委托

防抖（Debounce）

节流（throttle）

冰梦