JavaScript笔记

Vermouth-1

于 2024-03-17 20:09:15 发布

阅读量1k

点赞数 15

分类专栏：常用笔记文章标签： javascript 笔记开发语言

本文链接：https://blog.csdn.net/qq_45601874/article/details/136788742

版权

常用笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JavaScript笔记

1. 根据标签 ID 改变标签的内容和属性

根据标签的id修改标签的内容

<!DOCTYPE html>
<html>
<body>

<p id="demo">JavaScript 可以更改 HTML 内容。</p>

<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">单击按钮修改p标签的内容</button>

</body>
</html>

根据标签id 修改标签的属性

<body>
<button onclick="document.getElementById('text').style='color: red'">红色文本</button>

<span id="text" style="color: red">文字</span>

<button onclick="document.getElementById('text').style='color: green'">绿色文本</button>

</body>

根据标签ID 修改该标签的指定css样式

<body>

<p id="demo">JavaScript 能够改变 HTML 元素的样式。</p>

<button type="button" onclick="document.getElementById('demo').style.color='red'">
点击按钮，让字体颜色变为红字
</button>

</body>

根据标签id 隐藏和显示这个标签

<body>

<p id="demo">JavaScript 能够隐藏 HTML 元素。</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'">
点击隐藏
</button>
<button type="button" onclick='document.getElementById("demo").style.display="block"'>
点击显示
</button>

</body>

2.`<script>` 标签

概念

<script>标签里面用于存放 js 脚本代码
<script>标签可以放在head标签和body标签里面，推荐放在body标签里面的最后位置
因为如果放在head标签中会先加载全部的脚步再显示HTML内容，体验不好
<script src="myScript.js"></script> 通过src属性可以引入外部 js文件，注意：外部脚本不包含 <script> 标签

<body>

<p id="demo">一个段落。</p>
<!-- 当点击按钮时执行函数 myFunction -->
<button type="button" onclick="myFunction()">单击按钮改变段落文本内容</button>

<script>
// 定义一个函数，在被调用的时候会执行里面的代码
function myFunction() {
    // 根据ID修改标签里面的文本内容，这个内容如果是 html标签会被解析
    // .innerText 则不会解析html标签，会原样输出
    document.getElementById("demo").innerHTML = "段落已被更改。";
}
</script>
</body>

3. JavaScript显示文本方案

使用 innerHTML 写入 HTML 元素

<p id="demo"></p>

<script>
 // 页面加载时会执行此代码
 // 根据id获得元素节点，并且将 5+6 的值显示到这个标签里面
 document.getElementById("demo").innerHTML = 5 + 6;
</script>

使用 document.write() 将里面的参数显示到当前页面中，并且会清除HTML标签里面的所有内容只显示里面的参数（不推荐使用）

<body>

<script>
// 当页面加载完毕时执行这行代码，将write() 方法里面的内容写到当前页面中
document.write(5 + 6);
</script>
</body>

使用window.alert()将文本写入弹出框

<body>

<script>
// 当页面加载完毕时，执行这行代码，将alert() 方法里面的参数显示到弹出框中
window.alert(5 + 6);
</script>
</body>

使用 console.log() 写入浏览器控制台

<body>

<script>
// 当页面加载完毕时，执行这行代码, 将log() 方法里面的参数显示到浏览器控制台中（F12查看）
console.log(5 + 6);
</script>
</body>

4. JS语法

JS 注释
- 单行注释： // 注释内容
- 多行注释：/* 注释内容（中间可换行） */

变量

var x,y;  // 声明两个变量，用于存储数据，默认值为空 ( undefined )
x = 1; y = 2; // 分别给这个两个变量赋值
z = x + y;  // 数字类型的变量可以进行算术运算 + - * /

var a = 5;  // 声明变量并赋值
var str = 'Java' + 'Script'  // 字符串使用 + 意为拼接两个字符串

var carName = "porsche";
var carName;  // 二次声明同一个变量名，变量的值是不变的  

var b = "8" + 3 + 5;  // 3 会被当成字符串和8拼接，5 又会被当成字符串和 83 拼接为 835

var x = 3 + 5 + "8";  // 3和5会先相加为 8 再拼接 字符串 8 为 88

字面量则是纯文本数据，就叫字面量
JavaScript 对大小写敏感 变量 lastName 和 lastname，是两个不同的变量
JS 变量的命名
- 下划线： first_name, last_name
- 驼峰式大小写: FirstName, LastName
- JavaScript 程序员倾向于使用以小写字母开头的驼峰大小写: firstName, lastName
- 变量名可包含字母、数字、下划线和美元符号
- 变量名必须以字母 $ 或 _ 开头
- 关键字和保留字无法用作变量名称

5. 变量作用域

全局作用域：全局（在函数之外）声明的变量拥有全局作用域
函数作用域：局部（函数内）声明的变量拥有函数作用域变量只能在函数使用

块作用域 let 关键字声明变量

// 通过 var 关键词声明的变量没有块作用域
{ 
  // 和全局变量一样， 并且如果之前有定义过该变量，这个变量的值也会变为现在的值
  var x = 10; 
}
// 此处可以使用 x


// 可以使用 let 关键词声明拥有块作用域的变量
{ 
  let y = 10;
}
// 此处不可以使用 y

let i = 7;  // 外部使用 let声明了一个变量
for (let i = 0; i < 10; i++) {
  // 内部再次声明一个变量 i 和外部的变量 i 互不影响
  // 一些语句
}
// 此处 i 为 7

6. 常量

概念

JavaScript const 变量必须在声明时赋值
常量一旦赋值不可修改
如果赋的值是一个对象，则可以修改这个对象的属性
如果赋的值是一个数组，也可以修改这个数组的元素，或添加元素

不能使用已有的变量名作为常量名再次声明

// 您可以创建 const 对象：
const car = {type:"porsche", model:"911", color:"Black"};

// 您可以更改属性：
car.color = "White";

// 您可以添加属性：
car.owner = "Bill";


// 您可以创建常量数组：
const cars = ["Audi", "BMW", "porsche"];

// 您可以更改元素：
cars[0] = "Honda";

// 您可以添加元素：
cars.push("Volvo");

常量的作用域

var x = 10;
{ 
  // 块中的常量和全局变量 x 互不影响
  const x = 6;
}
// 此处，x 为 10

7. 运算符

赋值运算符： var x = 1; , 将值 ’ 1 ‘ 赋值给 x 变量
加法运算符： var x = 1 + 2; , 将 1 + 2 的值赋值给 x
乘法运算符： var x = 2 * 2;, 将 2 * 2 的值赋值给 x
求余运算符：var x = 9 % 2;, 将 9 / 2 的余数赋值给 x
幂(次方)运算符：var x = 5 ** 2; , 将5 的二次方赋值给 x
递增运算符： var num = 2; num++; , 将num的值加1 等于 3
加法赋值运算符： var num = 2; num+=3;, 将num的值加3，再赋值给num变量本身等于 5
比较运算符

运算符描述
== 等于
=== 等值等型
!= 不相等
!== 不等值或不等型
> 大于
< 小于
>= 大于或等于
<= 小于或等于
? 三元运算符
逻辑运算符

运算符描述
&& 逻辑与
|| 逻辑或
! 逻辑非
变量类型查看关键字

方法描述
typeof 变量返回变量的类型。
instanceof 变量如果变量是对象类型，返回 true，否则返回false

运算符	描述
==	等于
===	等值等型
!=	不相等
!==	不等值或不等型
>	大于
<	小于
>=	大于或等于
<=	小于或等于
?	三元运算符

运算符	描述
&&	逻辑与
\|\|	逻辑或
!	逻辑非

方法	描述
typeof 变量	返回变量的类型。
instanceof 变量	如果变量是对象类型，返回 true，否则返回false

8.JS数据类型

JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等

var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
// 可以使用 cars[0] 获得数组的第一个元素
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
// 可以使用 x.firstName 取出属性对应的值
var x = {firstName:"Bill", lastName:"Gates"};    // 对象
var x = true; 								// 布尔类型

当数值和字符串相加时，JavaScript 将把数值视作字符串

var x = 911 + "Porsche";
// JavaScript 会这样处理上面的例子
var x = "911" + "Porsche";

JavaScript 从左向右计算表达式。不同的次序会产生不同的结果

JavaScript 拥有动态类型，这意味着相同变量可用作不同类型

var x;               // 现在 x 是 undefined
var x = 7;           // 现在 x 是数值
var x = "Bill";      // 现在 x 是字符串值

JavaScript 只有一种数值类型，写数值时用不用小数点均可

var x1 = 34.00;     // 带小数点
var x2 = 34;        // 不带小数点

超大或超小的数值可以用科学计数法来写

var y = 123e5;      // 12300000 , e5表示加5个0
var z = 123e-5;     // 0.00123  ， e-5表示小数点向前移5位

typeof 运算符查看变量的数据类型, 在 JavaScript 中数组属于对象

type = typeof "Bill"  // type值为 "string"
// typeof 运算符对数组返回 "object"
type = typeof ["Bill",'Tom']  // type值为 "object"

var person = null;           // 值是 null，但是类型仍然是对象

Undefined 与 Null 的区别

// Undefined 与 null 的值相等，但类型不相等
typeof undefined              // undefined
typeof null                   // object
null === undefined            // false
null == undefined             // true

9. JS函数

概念

语法

// function关键字定义一个函数 name 为函数名，括号中是需要传递的参数
function name(参数 1, 参数 2, 参数 3) {
    // 要执行的代码
}

函数的定义和传参

<body>

<p id="demo"></p>

<script>
// 定义一个函数，需要传入两个参数
function myFunction(p1, p2) {
    // 返回两数乘积
    return p1 * p2;
}
// 页加载时会执行
// 根据ID获得标签节点，并将函数的返回值添加到标签里面显示
document.getElementById("demo").innerHTML = myFunction(7, 8);
    
// 使用变量存储函数的返回值
var result = myFunction(2, 2)  // 调用函数，将 2 * 2 的结果赋值给变量
</script>

</body>

在 JavaScript 函数中声明的变量，会成为函数的局部变量

// 此处的代码不能使用 carName

function myFunction() {
    var carName = "Volvo";
    // 此处的代码可以使用 carName
}

// 此处的代码不能使用 carName

10. JS对象

概念

js对象有可以有多个属性，属性的值可以是任意类型
比如：字符串、数字、布尔值、数组、对象、函数等

定义一个对象变量

// 声明一个变量存储对象数据
var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() { // 匿名函数
    return this.firstName + " " + this.lastName;
  }
};

// 获得对象属性的值, 方式一
var firstName = person.firstName

// 获得对象属性的值, 方式二
var firstName = person['lastName']

// 获得对象属性的值，并且这个值为函数
// 获得对象里面的函数的返回值，或者只执行该函数  
var fullName = person.fullName()

11. JS事件

HTML事件属性

事件	描述
onchange	HTML 元素已被改变
onclick	用户单击 HTML 元素时执行js函数
onmouseover	用户把鼠标移动到 HTML 元素上时执行js函数
onmouseout	用户把鼠标移开 HTML 元素时执行js函数
onkeydown	用户按下键盘按键时执行js函数
onload	浏览器已经完成页面加载时执行js函数

12. 字符串的方法

定义一个字符串变量

var carname = "Porsche 911";  // 定义字符串变量
var sln = carname.length;  // 获得字符串的长度

// 字符串也可通过关键词 new 定义为对象
var firstName = new String("Bill")  // 不推荐这样写，它会拖慢执行速度

// typeof carname 将返回 string
// typeof firstName 将返回 object

有效的转义序列

代码	结果
\b	退格键
\f	换页
\n	新行
\r	回车
\t	水平制表符
\v	垂直制表符

字符串的方法

indexOf( ) 获得指定字符或字符串在另一个字符串中的首次出现的起始下标位置, 没有找到则返回 -1

var str = 'JavaScript';
var index = str.indexOf("va");  // index的值为 2

lastIndexOf( ) 获得指定字符或字符串在另一个字符串中的最后一次出现起始下标位置， 没有找到则返回 -1

var str = 'JavaScript JavaScript';
// 方法向后进行检索（从尾到头）
// 假如第二个参数是 50，则从位置 50 开始检索，直到字符串的起点
var index = str.lastIndexOf("va");  // index的值为 13

以上两个方法都接受作为检索起始位置的第二个参数

var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China", 18);

search() 获得指定字符串在另一个字符串中第一次出现的位置

var str = 'JavaScript';
var index = str.search("va");  // index的值为 2

indexOf()和search() 的区别
- search() 方法无法设置第二个开始位置参数。
- indexOf() 方法无法设置更强大的搜索值（正则表达式）。

slice() 根据起始下标和结束下标 获得字符串中的所需字符串

var str = "Apple, Banana, Mango";
// 含头不含尾
var res = str.slice(7,13);  // res 的值为 Banana
// 下标也可以是负数的，从-1开始，也是含头不含尾
var res2 = str.slice(-13,-7);  // res1 的值为 Banana
// 从下标7开始截取到结尾(包含7)
var res3 = str.slice(7);  // res 的值为 Banana, Mango

substring() 根据起始下标和结束下标 获得字符串中的所需字符串

var str = "Apple, Banana, Mango";
// substring无法使用负数索引
var res = str.substring(7,13);  // res 的值为 Banana

substr() 根据起始下标和要截取的字符个数 获得字符串中的所需字符串

var str = "Apple, Banana, Mango";
var res = str.substr(7,6);  // res 的值为 Banana
// 从下标7开始截取到结尾(包含7)
var res1 = str.substr(7);
// 从下标-5开始截取到结尾(包含-5)
var res1 = str.substr(-5);

replace() 将字符串中的指定内容替换为新的内容，返回新的字符串

str = "Please visit Microsoft!";
// replace(目标字符, 要替换成为的字符)
var n = str.replace("Microsoft", "W3School");
//  /Microsoft/g 表示全局匹配
var n = str.replace(/Microsoft/g, "W3School");

toUpperCase() 将字符串转为大写，返回新的字符串

var text1 = "Hello World!";       // 字符串
var text2 = text1.toUpperCase();  // 将字符串转为大写，并返回新的字符串

toLowerCase() 将字符串转为小写，返回新的字符串

var text1 = "Hello World!";       // 字符串
var text2 = text1.toLowerCase();  // 将字符串转为小写，并返回新的字符串

concat() 连接多个字符串

var str1 = "a"
var str2 = "b"
var str3 = "c"
fullStr = str1.concat(b,c)  // fullStr的值为 abc

trim() 方法去除字符串左右两边的空格返回新的字符串

var str = "       Hello World!        ";
alert(str.trim());  // 输出 Hello World!

// 给String内置对象添加属性，以支持ie8
if (!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
};
var str = "       Hello World!        ";
alert(str.trim());

charAt() 方法返回字符串中指定下标（位置）的字符

var str = "HELLO WORLD";
str.charAt(0);            // 返回 H

charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码

var str = "HELLO WORLD";
str.charCodeAt(0);         // 返回 72

split() 将字符串根据指定的字符分割为数组

var txt = "a,b,c,d,e";   // 字符串
var arr = txt.split(",");          // 根据逗号分隔为数组
arr[0];  //  值为 a 

var txt = "Hello";       // 字符串
var arr2 = txt.split("");  // 将每个字符作为一个元素存入数组中

match() 方法根据正则表达式在字符串中搜索匹配项，并将匹配项存入数组对象中返回

let text = "The rain in SPAIN stays mainly in the plain";
var arr = text.match(/ain/g)    // 返回数组 [ain,ain,ain]

如果字符串包含指定值，includes() 方法返回 true

let text = "Hello world, welcome to the universe.";
text.includes("world")    // 返回 true
// 检查字符串是否包含 "world"，从位置 12 开始搜索
text.includes("world", 12)    // 返回 false

如果字符串以指定值开头，则 startsWith() 方法返回 true，否则返回 false

let text = "Hello world, welcome to the universe.";
// 判断字符串是否以指定的字符串开头
var bol = text.startsWith("Hello")   // 返回 true
// 从下标6开始判断
var bol2 = text.startsWith("world", 6)    // 返回 true

如果字符串以指定值结尾，则 endsWith() 方法返回 true，否则返回 false

var text = "Bill Gates";
// 从尾到头
text.endsWith("Gates")    // 返回 true
// 从下标11开始判断
text.endsWith("world", 11)    // 返回 true

13. 字符串模板

示例

let firstName = "Bill";
let lastName = "Gates";
// 使用 `` 定义字符串里面可以嵌套变量  ${变量名}
let text = `Welcome ${firstName}, ${lastName}!`;

// 生成html模板
let header = "Templates Literals";
let tags = ["template literals", "javascript", "es6"];

let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
  html += `<li>${x}</li>`;
}

html += `</ul>`;

14. JS数字类型和方法

定义数字变量

var x = 3.14;    // 带小数点的数值
var y = 3;       // 不带小数点的数值

// 在所有数字运算中，JavaScript 会尝试将字符串转换为数字
var x = "100";
var y = "10";
var z = x - y;      // z 将是 90

// 尝试用一个非数字字符串进行除法会得到 NaN（Not a Number）
var x = 100 / "Apple";  // x 将是 NaN（Not a Number）
var bol = isNaN(x);  // 判断变量是否为NaN

// NaN 是数，typeof NaN 返回 number
typeof NaN;   // 返回 "number"

// Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值
var x =  2 / 0;          // x 将是 Infinity
var y = -2 / 0;          // y 将是 -Infinity

// Infinity 是数：typeOf Infinity 返回 number
typeof Infinity;        // 返回 "number"

BigInt

// 声明BigInt类型的变量
let x = 1234567890123456789012345n;
let y = BigInt(1234567890123456789012345)

// BigInt 的 JavaScript 类型是 "bigint"
let type = typeof x; 

// 注意：不允许在 BigInt 和 Number 之间进行算术运算（类型转换会丢失信息）

JS数字方法

方法	描述
toString()	将数字作为字符串返回。
toExponential()	返回以科学计数法表示数字。
toFixed()	返回带小数位数的数字。
toPrecision()	返回指定长度的数字。
ValueOf()	以数字形式返回数字。

toString() 方法，将数字转为字符串

let x = 123;
x.toString();
(123).toString();
(100 + 23).toString();

toFixed() 方法 , 将数字转为指定小数位数

let x = 9.656;
x.toFixed(0);
x.toFixed(2);
x.toFixed(4);
x.toFixed(6);

toPrecision() 方法，返回一个字符串，其中包含指定数字个数

let x = 9.656;
x.toPrecision();  // 原样转为字符串 9.656
x.toPrecision(2); // 保留两位数字并四舍五入 9.7
x.toPrecision(3); // 保留四位数字并四舍五入 9.66

valueOf() 方法，以数字形式返回数字

let x = 123;
x.valueOf();
(123).valueOf();
var num = (100 + 23).valueOf();  // num的类型为number

Number() 方法，可用于将 JavaScript 变量转换为数字

Number(true); // true 返回1
Number(false);  // false 返回0
Number("10");
Number("  10");
Number("10  ");
Number(" 10  ");
Number("10.33");
Number("10,33");  // 中间有逗号无法转换数字，返回 NaN
Number("10 33");  // 中间有空格无法转换数字，返回 NaN
Number("Bill");  // 字符无法转换数字，则返回 NaN
Number(new Date("1970-01-01"));  // 日期类型返回对应的时间戳

parseInt() 方法,解析字符串并返回整数。允许有空格。仅返回第一个数字

parseInt("-10");    // -10
parseInt("-10.33"); // -10
parseInt("10");   // 10
parseInt("10.33");  // 10
parseInt("10 20 30");  // 10
parseInt("10 years");  // 10
parseInt("years 10");  // NaN

parseFloat() 方法, 解析字符串并返回数字包含小数。允许有空格。仅返回第一个数字

parseFloat("10");   // 10
parseFloat("10.33");   // 10.33
parseFloat("10 20 30");  // 10
parseFloat("10 years");  // 10
parseFloat("years 10");  // NaN

Number 对象方法, 这些对象方法属于 Number 对象

方法	描述
Number.isInteger()	如果参数是整数则返回 true。
Number.isSafeInteger()	如果参数是安全整数，则返回 true。
Number.parseFloat()	将字符串转换为数字。
Number.parseInt()	将字符串转换为整数。

补充：所有 JavaScript 数据类型都有 valueOf() 和 toString() 方法

15. 数组

概念

数组是一种特殊类型的对象。在 JavaScript 中对数组使用 typeof 运算符会返回 “object”
数组的元素可以使任意类型的数据

定义数组变量

// 定义数组变量方式一（推荐使用）
var cars = ["Saab", "Volvo", "BMW"];

// 定义数组变量方式二
var cars2 = new Array("Saab", "Volvo", "BMW");

// 根据数组下标取出对应的元素
var ele = cars[0];  // 取出第一个元素 Saab
cars[0] = 'Opel';  //  修改数组下标对应的元素

var len = cars.length; // 获得数组的长度（元素个数）

// 循环取出数组中的所有元素
for (i = 0;i < len; i++){
    alert(cars[i])  // 循环弹出每一个元素
}

// 使用Array.forEach() 函数 遍历数组
// forEach方法需要传入一个函数，函数需要接收一个参数
// 这个参数就是每一个数组元素
// forEach会循环调用这个方法，并将每个元素传进去处理
cars.forEach(fun);
function fun(value){
    alert(value); // 循环弹出每一个元素
}

// 使用put方法向数组尾部添加一个元素
cars.put('Lemon')

// 使用数组长度作为下标给他赋值，因为数组长度永远比最后一个下标大1
cars[cars.length] = "Lemon";

// 判断变量是否为数组类型
var bol = Array.isArray(cars);     // 返回 true

16. 数组的方法

toString() 把数组转换为数组值**（逗号分隔）的字符串**

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var str = fruits.toString();  // str的值为 Banana,Orange,Apple,Mango

数组的 join方法将每个元素拼接为一个字符串

var fruits = ["Banana", "Orange","Apple", "Mango"];
var str = fruits.join(" - "); // 每个元素之间使用 - 号链接（也可以什么都不传，默认使用逗号连接）

pop() 方法从数组中删除最后一个元素,并将它返回

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var str = fruits.pop();              // 删除数组的最后一个元素，并返回这个元素 str 的值为 Mango

shift() 方法会删除数组的第一个元素，并将它返回

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var str = fruits.shift();            // 删除数组的第一个元素,并将它返回

push() 方法（在数组结尾处）向数组添加一个新的元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var len = fruits.push("Kiwi");       // 向数组尾部添加一个元素，并返回添加元素后的数组长度  len的值为5

unshift() 方法（在开头）向数组添加新元素，原来的元素依次向后位移

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var len = fruits.unshift("Lemon");  // 在数组开头添加一个元素，数组里的元素依次向后位移，并且返回添加后的数组长度 5

delete 关键字将数组元素删除变为 undefined （不推荐使用）

var fruits = ["Banana", "Orange", "Apple", "Mango"];
// 使用 delete 会在数组留下未定义的空洞 undefined
// 删除元素建议使用  pop() 或 shift()
delete fruits[0]; // 把 fruits 中的首个元素改为 undefined

splice() 方法可用于向数组的指定下标替换新元素，并返回被替换的旧元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
// 第一个参数：要替换的起始下标
// 第二个参数：要替换的元素个数
// 其余参数为：新的元素
// 将指定的元素移除并替换为新的元素
var remove = fruits.splice(2, 2, "Lemon", "Kiwi");  // remove是被删除的元素的字符串形式 Apple,Mango

// splice() 也可用于删除数组中指定的元素
// 表示从下标 1 开始，删除一个元素，也就是 Orange，
// 该方法删除元素不会有空洞
var remove = fruits.splice(1,1); // 删除元素 Orange

concat() 方法通过合并（连接）现有数组来创建一个新数组

// concat() 方法不会更改现有数组。它总是返回一个新数组
var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // 将连个数组合并为一个新的数组

slice() 方法用数组的某个片段切出新数组 （切片）

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
// 从原数组的指定下标开始截取到结尾，组成一个新的数组
var citrus = fruits.slice(1); 
// 从原数组的指定下标1 开始截取到下标 3 的位置，含头不含尾
var citrus2 = fruits.slice(1,3);  // 值为 ["Orange", "Lemon"]

17. 数组的排序

sort() 方法以字母顺序对数组进行排序

var fruits = ["Banana", "Orange", "Apple", "Mango"];
// 原数组的元素位置被改变，也可以用新变量接收数组
var arr = fruits.sort();            // 对 fruits 中的元素进行排序
alert(arr);   // Apple,Banana,Mango,Orange
alert(fruits);  // Apple,Banana,Mango,Orange

reverse() 方法反转数组中的元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
// 原数组的元素位置被反转，也可以用新变量接收数组
var arr = fruits.reverse();         // 反转元素顺序
alert(arr);   // Mango,Apple,Orange,Banana
alert(fruits);  // Mango,Apple,Orange,Banana

数组中的数字排序

// 比值函数, 比较函数应该返回一个负数，零或正值，这取决于参数
// 如果返回正数 a 则将被排到 b 的后面，负数和0则位置不变 （升序从小到大）
// 以此类推，完成数字的排序
// function(a, b){return a-b}

var points = [40, 100, 1, 5, 25, 10];
{  // 块作用域
    // 对数组中的数字元素进行升序排序，从小到大
    let arr1 = points.sort(function(a, b){return a - b});
    alert(arr1);  // 1,5,10,25,40,100
}
// 对数组中的数字元素进行降序排序，从大到小
var arr2 = points.sort(function(a, b){return b - a}); 
alert(arr2);  // 100,40,25,10,5,1
// 原数组被改变
alert(points);  // 100,40,25,10,5,1

// 顺序排序数组
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()});

查找最高（或最低）的数组值

var points = [40, 100, 1, 5, 25, 10];
// 对数组进行升序排序，再取其下标0就是数组中的最小值
var min = points.sort(function(a, b){return a - b})[0];
// 对数组进行降序排序，再取其下标0就是数组中的最大值
var max = points.sort(function(a, b){return b - a})[0];
alert(min);  // 数组中的最小值  1
alert(min);  // 数组中的最大值  100

// ===============================
// 也可以先升序排序同时获得最小值和最大值
points.sort(function(a, b){return a - b});
alert(points[0]);  // 下标0即为数组中的最小值  1
alert(points[points.length-1]);  // 下标数组长度-1即为数组中的最大值  100

// 推荐============如果您仅仅需要找到最高或最低值，对整个数组进行排序是效率极低的方法==============
// 使用 Math.min.apply(null, arr) 获得数组中的最小值
var min = Math.min.apply(null, points);
// 使用 Math.min.apply(null, arr) 获得数组中的最大值
var max = Math.max.apply(null, points);

数字元素是对象，对它们进行排序

var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}];
// 根据对象的年份进行升序排序（从小到大）
cars.sort(function(a, b){return a.year - b.year});
// 根据对象的字符串属性进行排序
cars.sort(function(a, b){
	  var x = a.type.toLowerCase();
	  var y = b.type.toLowerCase();
	  if (x < y) {return -1;}
	  if (x > y) {return 1;}
	  return 0;
});

18. 数组迭代

Array.forEach() 方法， 为每个数组元素调用一次函数（回调函数）

var numbers = [45, 4, 9, 16, 25];
// 使用数组的 forEach() 方法传入一个回调函数，每个数组元素都会调用一次该函数
numbers.forEach(myFunction);
// 每个元素都会调用一个该函数，并把它的值、索引和本身的数组传递过来
function myFunction(value, index, array) {
  // 弹出每个数组元素和对应的下标，
  alert(value,index,array)
}

Array.map() 方法，对每个数组元素执行一次函数返回新数组

var numbers1 = [45, 4, 9, 16, 25];
// 对原数组的每个元素进行统一的操作并存入一个新的数组中
var numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;
}

Array.filter() 方法， 对数组的每个元素调用一个函数，用于过滤，并返回新的过滤后的数组

var numbers = [45, 4, 9, 16, 25];
// 对数组进行过滤，返回新的数组
var over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  // 每个元素使用同一的过滤条件
  // 如果元素值大于18则会被添加到新的数组中，否则舍弃
  return value > 18;
}

Array.reduce() 方法 可以对数组的每个元素进行求和返回一个总数

var numbers1 = [45, 4, 9, 16, 25];
// 使用数组的reduce 方法对数组元素进行求和，返回总和
var sum = numbers1.reduce(myFunction);

// 未使用的参数 index, array 可以省略
function myFunction(total, value, index, array) {
  // 对每个元素进行相加
  return total + value;
}

Array.every() 方法 判断数组中的每个元素是否符合规则，要有一个不符合将返回false，全部符合才返回true

var numbers = [45, 4, 9, 16, 25];
var bol = numbers.every(myFunction);  // false

function myFunction(value, index, array) {
  // 判断每个元素是否大于18，只要有一个元素小于18，every() 将返回false
  return value > 18;
}

Array.some() 方法 判断数组中的每个元素是否符合规则，有一个符合规则就返回true, 全部符合规则才返回false

var numbers = [45, 4, 9, 16, 25]; 
// 每个元素都将调用一次 myFunction 函数
var someOver18 = numbers.some(myFunction); // true

function myFunction(value, index, array) {
  return value > 18;
}

indexOf() 方法 在数组中搜索元素值并返回其位置

var fruits = ["Apple", "Orange", "Apple", "Mango", "Apple"];
// 使用indexOf() 查找指定元素在数组中的首次出现的下标位置
var index = fruits.indexOf("Apple");  // 0

// 使用lastIndexOf() 查找指定元素在数组中的首次出现的下标位置(从后面开始查找)
var index = fruits.lastIndexOf("Apple");  // 4

Array.find() 方法 返回符合规则的第一个数组元素

var numbers = [4, 9, 16, 25, 29];
// 返回符合规则的第一个数组元素 25
var first = numbers.find(myFunction);  
// 返回符合规则的第一个数组元素的下标 3
var firstIndex = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

19. 数组Const

使用 const 声明数组
const 变量在声明时必须赋值
用 const 声明的数组不能重新赋值

用 const 声明的数组具有块作用域 ,里面和外面的变量是互不影响的

// const定义的数字即可以修改元素也可以新增元素，但不能重新赋值为另一个数组
const cars = ["Saab", "Volvo", "BMW"];  // 声明时必须赋值

{	
    // 和外面的变量互不影响
    const cars = ["Saab", "Volvo", "ABC"];
}

// 您可以更改元素：
cars[0] = "Toyota";

// 您可以添加元素：
cars.push("Audi");

20. JS日期

Date 对象由新的 Date() 构造函数创建

// 实例化一个日期对象，获得当前的日期和时间
// 默认情况下，将使用浏览器的时区并将日期显示为全文本字符串
// 如： Tue Apr 02 2019 09:01:19 GMT+0800 (中国标准时间)
var date = new Date();  

// 实例化时可以传递七个参数，分别指定年、月、日、小时、分钟、秒和毫秒
var date = new Date(2018, 11, 24, 10, 33, 30, 0);
// 如果只提供一个参数，则将其视为毫秒
var d = new Date(2000);  // 实例化2000毫秒的日期对象
// 根据字符串实例化日期对象
var d = new Date("2018-02-19");

getTime() 方法 获取日期对象的时间戳

var date = new Date();  // 实例化当前时间的日期对象
var time = date.getTime();  // 获得时间戳

getFullYear() 方法 方法以四位数字形式返回日期年份

var d = new Date();
var year = d.getFullYear();  // 获得年份 2024

getMonth() 方法 以数字**（0-11）返回日期的月份**

var d = new Date();
// d.getMonth()+1; 才是日期准确的月份
var month = d.getMonth()+1;  // 获得当前月份（0-11） 如果当前月份是2月则返回 1

getDate() 方法 方法以数字（1-31）返回日期的日
```
var d = new Date();
var day = d.getDate();
```
getHours() 方法 以数字（0-23）返回日期的小时数
```
var d = new Date();
var hours = d.getHours();
```
getMinutes() 方法 以数字（0-59）返回日期的分钟数
```
var d = new Date();
var minutes = d.getMinutes();
```

getSeconds() 方法 以数字（0-59）返回日期的秒数

var d = new Date();
var seconds = d.getSeconds();

getMilliseconds() 方法 以数字（0-999）返回日期的毫秒数

var d = new Date();
var milliseconds = d.getMilliseconds();

getDay() 方法 以数字（0-6）返回日期的星期

var d = new Date('2024/3/3');
var week = d.getDay();  // 周日为 0

21. JS日期设置的方法

方法	描述
setDate()	以数值（1-31）设置日
setFullYear()	设置年（可选月和日）
setHours()	设置小时（0-23）
setMilliseconds()	设置毫秒（0-999）
setMinutes()	设置分（0-59）
setMonth()	设置月（0-11）
setSeconds()	设置秒（0-59）
setTime()	设置时间（从 1970 年 1 月 1 日至今的毫秒数）

示例

var d = new Date();
d.setFullYear(2020);  // 将日期对象的年份设置为 2020 ， 其他时间不变
alert(d);

22. JS数学函数

获得圆周率 Math.PI; // 返回 3.141592653589793

Math.round() 对数值进行四舍五入

var num = Math.round(6.8);    // 返回 7
var num1 = Math.round(2.3);    // 返回 2

Math.pow(x, y) 获得 x 的 y 次方对应的值
```
Math.pow(8, 2);      // 返回 64
```
Math.sqrt() 对一个数字进行开方
```
Math.sqrt(64);      // 返回 8
```
Math.abs(x) 返回 x 的绝对值
```
Math.abs(-4.7);     // 返回 4.7
```
Math.ceil(x) 对数字进行向上取整
```
Math.ceil(6.4);     // 返回 7
```
Math.floor(x) 对数字进行向下取整
```
Math.floor(2.7);    // 返回 2
```

Math.min() 和 Math.max() 可用于查找参数列表中的最低或最高值

Math.min(0, 450, 35, 10, -8, -300, -78);  // 返回 -300
Math.max(0, 450, 35, 10, -8, -300, -78);  // 返回 450

Math.random() 返回介于 0（包括）与 1（不包括）之间的随机数

Math.random();     // 返回随机数 17位小数
// 随机数乘10再向下取整，返回 0 至 9 之间的数
Math.floor(Math.random() * 10);		// 返回 0 至 9 之间的数
// 随机数乘10再四舍五入，返回 0 至 10 之间的数
Math.round(Math.random() * 10);		// 返回 0 至 10 之间的数
// 随机数乘10再向上取整，返回 1 至 10 之间的数
Math.ceil(Math.random() * 10);	// 返回 1 至 10 之间的数

// 随机数乘100再向下取整，返回 0 至 99 之间的数
Math.floor(Math.random() * 100);	// 返回 0 至 99 之间的数
// 随机数乘100再四舍五入，返回 0 至 100 之间的数
Math.round(Math.random() * 100);

// 生成两数直接的随机数, 包括 min 和 max
function getRndInteger(min, max) {
    return Math.round(Math.random() * (max - min) ) + min;
}

23. 布尔值

JavaScript 布尔（逻辑）代表两个值之一：true 或 false

var x = 0;
Boolean(x);       // 返回 false

var x = "";
Boolean(x);       // 返回 false

var x;  // undefind
Boolean(x);       // 返回 false

var x = null;
Boolean(x);       // 返回 false

var x = 10 / "H";  // NaN
Boolean(x);       // 返回 false

24. if判断

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

if (条件 1) {
    条件 1 为 true 时执行的代码块
} else if (条件 2) {
    条件 1 为 false 而条件 2 为 true 时执行的代码块
 } else {
    条件 1 和条件 2 同时为 false 时执行的代码块
}

// 判断如果变量hour的值小于18则执行里面的语句
if (hour < 18) {
    greeting = "Good day";
}

25. Switch语句

Switch case 使用严格比较（===）

switch(num) {
     case 1:  // 如果num的值为 1 则会执行对应case里面的代码
        代码块
        break;  // 如果不加 break 则会继续执行下面case 语句
     case 2:
        代码块
        break;
     default:  // 关键词规定不存在 case 匹配时所运行的代码
        默认代码块
} 

// 示例
switch (new Date().getDay()) {
    case 4:
    case 5:
        text = "周末快到了：）";
        break; 
    case 0:
    case 6:
        text = "今天是周末~";
         break;
    default: 
        text = "期待周末！";
}

25. for循环

continue 语句 跳过本次循环执行下一次循环
break 语句结束循环体

语法

for (定义初始变量; 循环条件; 修改变量值) {
     要执行的代码块
}

for/in 语句遍历对象的属性

var person = {fname:"Bill", lname:"Gates", age:62}; 
for (key in person) {
    alert(person[key]); // 循环弹出对象的所有属性对应的值
}

for in 语句也可以遍历数组，获得每个数组元素

const numbers = [45, 4, 9, 16, 25];

// 遍历数组获得每个元素的下标，再根据下标获得每个数组元素
for (index in numbers) {
  alert(numbers[index]);
}

for of 语句循环遍历数组获得每个元素

const cars = ["BMW", "Volvo", "Mini"];

// 循环弹出每个元素的值
for (item of cars) {
  alert(item);
}

26. while循环

语法

while (条件) {
    要执行的代码块
}

// 示例
var i = 1
while (i < 10) {
    alert(i);
    i++;
}

// 示例二
var cars = ["BMW", "Volvo", "porsche", "Ford"];
while (cars[0]) {  // 下标0 没有元素返回 false
  // 删除并弹出数组中的第一个元素，直到下标 0 没有元素为止
  alert(cars.shift());
}

Do/While 循环

do {
    要执行的代码块
}
while (条件);

// 示例
var i = 1
do { // 如论如何先执行以便 do 里面的代码
    alert(i);
    i++;
 }
// 如果条件成立，继续执行一遍 do 里面的代码，直到不成立为止
while (i < 10);

27. JS的数据类型

在 JavaScript 中有 5 种不同的可以包含值的数据类型：

string
number
boolean
object
function

有 6 种类型的对象：

Object
Date
Array
String
Number
Boolean

以及 2 种不能包含值的数据类型：

null
undefined

28. JS正则表达式

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

表达式	描述
[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x\|y)	查找由 \| 分隔的任何选项。

元字符	描述
\d	查找数字。
\s	查找空白字符。
\b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。

test() 是一个正则表达式方法，用于判断字符串是否符合规则

var patt = /e/;
patt.test("The best things in life are free!");  // true

exec() 方法是一个正则表达式方法, 返回匹配正则的字符串
```
var str = /e/.exec("The best things in life are free!");
```

29. JS异常

try 语句使您能够测试代码块中的错误。
catch 语句允许您处理错误。
throw 语句允许您创建自定义错误。

finally 使您能够执行代码，在 try 和 catch 之后，无论结果如何。

try {
    // throw 手动抛出异常 
    if(x == "") throw "是空的";
    adddlert("欢迎访问！");
}
catch(err) {
    alert(err.message);
    alert(err.name);
}
finally {
     // 无论结果如何都执行的代码块
}

30. JS严格模式

// 在js顶部写一下代码使用严格模式，严格模式使我们更容易编写“安全的” JavaScript
"use strict";

31. 对象中的this关键字

在对象中使用this表示调用自身的属性

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

在单独使用时，拥有者是全局对象，因此 this 指的是全局对象。
在浏览器窗口中，全局对象是 [object Window]：
```
var win = this;
```

在 HTML 事件处理程序中，this 指的是接收此事件的 HTML 元素

<button onclick="this.style.display='none'">
  点击来删除我！
</button>

call() 显式函数绑定

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"Bill",
  lastName: "Gates",
}
// 使用call绑定函数的this指向为 person2
person1.fullName.call(person2);  // 会返回 "Bill Gates"

32. 箭头函数

语法

// 函数名 = （参数） =>  函数体(会自动将值作为返回值返回);
myFunction = (a, b) => a * b;

// 函数体也可以编写多行代码，但需要添加{}括号并手动指定返回值 return
hello = () => {
  return "Hello World!";
}

// 如果只有一个参数，也可以略过括号
// 函数名 = 参数 => 函数体(只有一行，会自动将值作为返回值返回);
hello = val => "Hello " + val;

33. JS类

示例

class Car {
  // 构造函数，实例化时可以传入参数
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

// 示例化类对象
var obj = new Car('Tom', 16);
alert(obj.name);
alert(obj.age);

JS类继承

使用关键字 extends 继承父类

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'I have a ' + this.carname;
  }
}

// 继承父类 Car
class Model extends Car {
  constructor(brand, mod) {
    // 将参数 brand 传给父类进行初始化
    super(brand);
    // 初始化自身的 model 属性
    this.model = mod;
  }
  show() {
    // 调用父类拥有的自身的方法 this.present() 和 自身独有的属性 this.model
    return this.present() + ', it is a ' + this.model;
  }
}

// 实例化对象
var model = new Model('BWM', '宝马');
// 执行子类的独有方法,弹出返回值
alert(model.show()); 
// 弹出父类的初始化属性， BWM
alert(model.carname);

get 、 set 和 static

class Car {
  constructor(brand) {
    this._carname = brand;
  }
  // 获得属性的值， 把方法当成属性使用
  get carname() {
    return this._carname;
  }
  // 设置属性的值， 把方法当成属性使用
  set carname(x) {
    this._carname = x;
  }
  // static 关键字 声明静态方法
  static hello(obj) {
    return "Hello!!"+ obj.carname;
  }
}

let myCar = new Car("Ford");
// 设置对象的属性的值 
myCar.carname = "Volvo";
// 弹出对象的属性的值 
alert(myCar.carname);

// 静态方法只能通过类调用，不能通过类对象调用
Car.hello()  // 正确
Car.hello(myCar)  // 正确，在这个方法内可以调用这个对象的属性
// myCar.hello()  // 报错

34. 模块

示例

<!-- 想要导入模块必须使用 type="module" -->
<script type="module">
// 导入js文件中的 message 方法
import message from "/demo/js/message.js";

// 弹出 message() 函数的返回值
alert(message());

</script>

命名导出，创建一个名为 person.js 的文件，并在其中填充我们要导出的内容，

只有编写导出语句其他文件引入模块时才能访问到导出的属性或方法

// 导出方式一
export const name = "Bill";
export const age = 19;

// 导出方式二
const name = "Bill";
const age = 19;

// 一次性导出
export {name, age};

// 定义函数
const message = () => {
    const name = "Bill";
    const age = 19;
    return name + ' is ' + age + 'years old.';
};

// 设置默认导出
export default message;

其他页面引入 person.js 并获得其中导出的属性或方法
```
import { name, age } from "./person.js";
```

35. JSON

概念

JSON 对象是在花括号内书写
JSON 数组在方括号中书写

示例

{
    "employees":[
        {"firstName":"Bill", "lastName":"Gates"}, 
        {"firstName":"Steve", "lastName":"Jobs"},
        {"firstName":"Alan", "lastName":"Turing"}
    ]
}

把 JSON 文本转换为 JavaScript 对象

var text = '{ "employees" : [' +
'{ "firstName":"Bill" , "lastName":"Gates" },' +
'{ "firstName":"Steve" , "lastName":"Jobs" },' +
'{ "firstName":"Alan" , "lastName":"Turing" } ]}';
// 将json字符串转为 js对象
var obj = JSON.parse(text);

36. JS调试

使用 console.log(); 可以在浏览器控制台打印数据

可以在Sources中找到js文件并且打上断点，刷新页面，也便查看程序的运行，F10执行下一条语句，F8 放开断点执行所有代码

debugger;  // 给js代码打上断点

37. JS编码规范

在 W3School，我们对标识符名称（变量和函数）使用了驼峰式大小写。
请始终在运算符（ = + - * / ）周围以及逗号之后添加空格
请始终使用对代码块缩进使用 4 个空格
请不要对缩进使用制表符。不同的编辑器对 tab 的解释也不尽相同
针对复杂语句的通用规则：
- 请在第一行的结尾处写开括号
- 请在开括号前使用一个空格
- 请在新行上写闭括号，不带前导空格
针对对象定义的通用规则：
- 把开括号与对象名放在同一行
- 在每个属性与其值之间使用冒号加一个空格
- 不要在最后一个属性值对后面写逗号
- 请在新行上写闭括号，不带前导空格
- 请始终以分号结束对象定义
请避免每行的长度超过 80 个字符
请避免全局变量、new、===、eval()
请不要声明数值、字符串或布尔对象，会拖慢执行速度
请勿使用 new Object()
- 请使用 {} 来代替 new Object()
- 请使用 “” 来代替 new String()
- 请使用 0 来代替 new Number()
- 请使用 false 来代替 new Boolean()
- 请使用 [] 来代替 new Array()
- 请使用 /()/ 来代替 new RegExp()
- 请使用 function (){}来代替 new Function()
如果调用函数时缺少一个参数，那么这个缺失参数的值会被设置为 undefined，为参数设置默认值是一个好习惯
请使用 default 来结束您的 switch 语句
避免使用 eval()，因为允许任意代码运行，它同时也意味着安全问题

38. JS性能

能够放在循环之外的语句或赋值会使循环运行得更快。

// 差
var i;
for (i = 0; i < arr.length; i++) {
    
// 优
var i;
var len = arr.length;
for (i = 0; i < len; i++) {

减少 DOM 访问

var obj;
// 保存元素节点对象，提升性能
obj = document.getElementById("demo");
obj.innerHTML = "Hello";

避免不必要的变量

// 差
var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName; 

// 优
document.getElementById("demo").innerHTML = firstName + " " + lastName

延迟 JavaScript 加载

<script>
// 把脚本放在页面底部，使浏览器首先加载页面,然后加载脚本
window.onload = function () {
    var element = document.createElement("script");
    element.src = "myScript.js";
    document.body.appendChild(element);
}
</script>

避免使用 with，它对速度有负面影响

39. JS对象

概念

以键值对书写的对象类似于：
- PHP 中的关联数组
- Python 中的字典
- C 中的哈希表
- Java 中的哈希映射
- Ruby 和 Perl 中的散列

定义对象变量

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

// 获得对象的属性值
var firstName = person.firstName;  // 方式一
var lastName = person['lastName'];  // 方式二

// 遍历对象获得所有属性对应的值
var person = {fname:"Bill", lname:"Gates", age:62}; 
for (x in person) {
    alert(person[x]);
}

// 给对象添加新属性
person.nationality = "English";

// 给对象添加一个属性，属性值为方法
var person = {
  firstName: "Bill",
  lastName : "Gates",
  id     : 678,
};
person.name = function() {
  return this.firstName + " " + this.lastName;
};
alert(person.name()); // 打印对象的方法的返回值

将对象的属性对应的值封装到一个数组中

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
// 将对象的属性对应的值封装到一个数组中
const myArray = Object.values(person);

JSON.stringify() 将对象转换为JSON字符串

JSON.stringify 不会对函数进行字符串化，会自动忽略属性值为函数的属性

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};
// 装对象转为JSON字符串
let jsonStr = JSON.stringify(person);

// 此外数组也可以转为JSON字符串
const arr = ["Bill", "Steve", "Elon", "David"];
// 装数组转为JSON字符串
let jsonStr2 = JSON.stringify(arr);

get 关键字声明属性把函数当成属性使用

// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "en",
  get lang() {
    return this.language;
  }
};

// 使用 get 来显示来自对象的数据：
alert(person.lang);  // 把函数当成属性调用

set 关键字设置属性的值把函数当成属性使用

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "",
  set lang(lang) {
    this.language = lang;
  }
};

// 使用 setter 来设置对象属性：
person.lang = "en";  // 给lang方法传递参数

// 显示来自对象的数据：
alert(person.language);

为什么使用 Getter 和 Setter，获取和设置属性的值？
- 它提供了更简洁的语法
- 它允许属性和方法的语法相同
- 它可以确保更好的数据质量
- 有利于后台工作

计算器实例

var obj = {
  counter : 0,
  get reset() {
    this.counter = 0;
  },
  get increment() {
    this.counter++;
  },
  get decrement() {
    this.counter--;
  },
  set add(value) {
    this.counter += value;
  },
  set subtract(value) {
    this.counter -= value;
  }
};

// 操作计数器：
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
Object.defineProperty()

Object.defineProperty() 方法也可用于添加 Getter 和 Setter

// 定义对象
var obj = {counter : 0};

// 给对象添加 get 和 set 方法
Object.defineProperty(obj, "reset", {
  get : function () {this.counter = 0;}
});
Object.defineProperty(obj, "increment", {
  get : function () {this.counter++;}
});
Object.defineProperty(obj, "decrement", {
  get : function () {this.counter--;}
});
Object.defineProperty(obj, "add", {
  set : function (value) {this.counter += value;}
});
Object.defineProperty(obj, "subtract", {
  set : function (value) {this.counter -= value;}
});

// 操作计数器：
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;

40. 对象构造器(可以把它当成一个类)

Person 对象的构造器函数（构造函数，省略了类的定义）

// Person 对象的构造器函数（构造函数，省略了类的定义）
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

// 实例化 Person 类对象
// 等同于 var myFriend = {firstName: 'Bill', lastName: 'Gates', age: 62, eyeColor: 'blue'}
var myFriend = new Person("Bill", "Gates", 62, "blue");

// 还可以实例化多个不同值的person对象

为已有的对象添加新的方法和属性

var myFriend = new Person("Bill", "Gates", 62, "blue");

myFriend.car = 'BWM';  // 为对象添加新属性，并赋值

// 为对象添加新的方法
myFriend.name = function () {
    return this.firstName + " " + this.lastName;
};

// 执行这个方法并获得返回值
var result = myFriend.name();

javaScript 提供原始数据类型字符串、数字和布尔的对象版本。但是并无理由创建复杂的对象。原始值快得多

var x1 = {};            // 新对象
var x2 = "";            // 新的原始字符串
var x3 = 0;             // 新的原始数值
var x4 = false;         // 新的原始逻辑值
var x5 = [];            // 新的数组对象
var x6 = /()/           // 新的正则表达式对象
var x7 = function(){};  // 新的函数对象

41. 对象原型

prototype 属性允许您为对象构造器添加新属性

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
// 为构造器函数 Person 添加属性和默认值
Person.prototype.nationality = "English";

// 为构造器函数 Person 添加方法
Person.prototype.name = function() {
    return this.firstName + " " + this.lastName;
};

// 实例化Person对象时就会拥有 prototype 添加的属性和方法
var person = new Person('a', 'b', 16, 'blue')
// 获得使用 prototype 添加的属性 nationality
alert(person.nationality);

迭代器
概念：在编程中，迭代是指重复执行一组操作直到满足特定条件为止的过程。通常用于遍历数据集合中的每个元素或执行某种操作直到达到特定条件为止。

迭代器（iterator）是一种用来遍历集合（如数组、对象等）并访问集合中每个元素的机制。通过迭代器，我们可以按顺序访问集合中的每个元素，而不需要关心集合的内部结构。

在很多编程语言中，如JavaScript、Python等，迭代是一种常见的编程技术，能够简化代码逻辑并提高代码的可读性和灵活性。
- 在下面的代码中，我们定义了一个Symbol.iterator方法，并在该方法的返回对象中包含了一个next方法。实际上，在JavaScript中，可迭代对象（iterable object）需要实现一个next方法，用于在迭代过程中获取下一个值。
  
  当我们调用myNumbers.next()时，实际上是在调用Symbol.iterator方法返回的迭代器对象中的next方法。在迭代器对象中，next方法会根据设定的逻辑生成下一个迭代值，并返回一个包含value和done属性的对象。
  
  因此，虽然next方法是在return语句中定义的，但它仍然可以通过myNumbers对象调用，因为它是作为迭代器对象的一部分存在的。这种设计是为了符合JavaScript中迭代器协议的规范。
- 这段代码循环迭代myNumbers对象中的值，并将其依次赋值给变量num。具体来说，它使用了for…of循环语句遍历了一个可迭代对象myNumbers。
  
  在每次循环迭代时，for…of语句会自动调用myNumbers对象的Symbol.iterator方法获取一个迭代器对象，并通过该迭代器对象依次获取myNumbers对象中的值，直到done属性为true为止。
  
  因为我们之前定义了myNumbers对象的Symbol.iterator方法，并在其中实现了一个next方法用于生成一系列数字，所以在这个for…of循环中，会依次输出10、20、30、…、90、100这些数字。
  
  总的来说，这段代码演示了如何使用自定义迭代器对象来创建一个可迭代对象，并通过for…of语句进行循环迭代。
```
// 创建对象
myNumbers = {};

// 使其可迭代
myNumbers[Symbol.iterator] = function() {
  let n = 0;
  done = false;
  return {
    next() {
      n += 10;
      if (n == 100) {done = true}
      return {value:n, done:done};
    }
  };
}

for (const num of myNumbers) {
  alert(num);
}
```
- Symbol.iterator 方法会被 for…of 自动调用, 但是我们也可以手动调用它
```
let iterator = myNumbers[Symbol.iterator]();

while (true) {
  const result = iterator.next();
  if (result.done) break;
  // 这里可写任何代码
}
```

42. Set集合

概念

Set集合里面的值是唯一的，无重复值
Set 可以容纳任何数据类型的值

实例化一个Set集合对象

var set = new Set(['a', 'b', 'c']);
// 向set集合中添加新的元素
set.add('d');

// 移除set集合中的指定元素
set.delete('c');

// 判断set集合中是否有值，返回true或false
var bol = set.has();  // true

// 移除set集合中的所有元素
set.clear(); 

// 集合中的每个元素调用回调函数
set.forEach(fun);

// 回调函数，用于处理每一个集合元素
fun = (value) => value + 'G';

// 返回包含 Set 中所有值的迭代器对象 [object Set Iterator]
var iter = set.values();
// 获得第一个值
var value = set.values().next().value;

// 循环这个迭代器对象获得set集合中的所有值
for (item of iter){
	alert(item);
}

// 获得集合的元素个数
var len = set.size;

43. Map集合

概念

Map 保存键值对，其中键可以是任何数据类型，并且是唯一的
Map 会记住键的原始插入顺序

创建map对象

// 创建一个 Map 对象
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

// 向map集合中添加键值对
fruits.set("bear", 500);

// 获得map中 键对应的值
var value = fruits.get("apples"); // 500

// 获得map中键值对的个数
var len = fruits.size;  // 4

// 根据键删除 map 中的键值对, 返回布尔值表示是否删除成功
var bol = fruits.delete("apples");

// 删除map中的所有元素
fruits.clear();

// 判断map中是否存在指定的键，返回一个布尔值，true表示存在
var bol = fruits.has("apples");

// Map 是对象
typeof fruits;  // object

// forEach() 方法为 Map 中的每个键/值对调用回调
fruits.forEach((value,key) => alert(value));

// fruits.entries() 返回迭代器对象，其中包含 Map 中的 [key, value] 键值对
// for...of fruits.entries()  获得map中的每个键值对数组 
for (const item of fruits.entries()) {
  alert(item[0]);  // 弹出key
  alert(item[1]);  // 弹出value
}

// keys() 返回迭代器对象，其中包含 Map 中的所有键
// 循环获得所有的key
for (key of fruits.keys()){
    alert(key);
}

// values() 返回迭代器对象，其中包含 Map 中的所有值
// 循环获得所有的value 
for (value of fruits.values()){
    alert(value);
}

JavaScript Object 对比 Map

JavaScript 对象与映射之间的差异

Object（对象）	Map（映射）
不可直接迭代	可直接迭代
无 size 属性	有 size 属性
键必须是字符串（或符号）	键可以是任何数据类型
键不排序	键按插入排序
有默认键	没有默认键

44. 对象引用

管理对象

// 添加或更改对象属性
Object.defineProperty(object, property, descriptor)

// 添加或更改对象属性
Object.defineProperties(object, descriptors)

// 访问属性
Object.getOwnPropertyDescriptor(object, property)

保护对象

// 防止向对象添加属性
Object.preventExtensions(object)

// 如果属性可以添加到对象，则返回 true
Object.isExtensible(object)

// 防止更改对象属性（不是值）
Object.seal(object)

// 如果对象被密封，则返回 true
Object.isSealed(object)

// 防止对对象进行任何更改
Object.freeze(object)

// 如果对象被冻结，则返回 true
Object.isFrozen(object)

更改元数据

writable : true      // 属性值可更改
enumerable : true    // 属性可枚举
configurable : true  // 属性可重新配置

writable : false     // 属性值不可更改
enumerable : false   // 属性不可枚举
configurable : false // 属性不可重新配置

45. JS函数

概念

被声明的函数不会直接执行，当它们被调用时才会执行
Hoisting 是 JavaScript 将声明移动到当前作用域顶端的默认行为
为创建新对象而设计的函数，被称为对象构造函数（对象构造器）
函数参数
- 函数参数（parameter）指的是在**函数定义中列出的名称**
- 函数参数（argument）指的是传递到函数或由函数**接收到的真实值**

函数的定义

function 函数名(参数) {
   要执行的代码
}

// 将匿名函数存储到变量中
var x = function (a, b) {return a * b};
// 调用函数变量
x(1,2);

自调用函数，会在脚本加载时执行

(function (a) {
    var x = a;      
})('hello');  // ()调用函数

arguments.length 会返回函数被调用时收到的参数

function myFunction(a, b) {
    return arguments.length; //将参数的个数返回
}

给参数设置默认值

function myFunction(x, y) {
    if (y === undefined) {
          y = 0;
    } 
}

arguments 获得传入指定位置的参数

x = sumAll(1, 123, 500, 115, 44, 88);

function sumAll() {
    var i, sum = 0;
    for (i = 0; i < arguments.length; i++) {
        sum += arguments[i]; // arguments[i] 根据下标获得每一个传入的参数值
    }
    return sum;
}

this 关键字：指的是“拥有”当前代码的对象

在 JavaScript 中，始终存在一种默认的全局对象 window

function myFunction(a, b) {
    this;  // window 对象 拥有该函数
    return a * b;
}
// 全局变量、方法或函数很容易在全局对象中产生命名冲突和漏洞,不推荐使用（只为了解）
window.myFunction(10, 2);    // 会返回 20

46.Call()函数

var person = {
    fullName: function(city, country) {
        return this.firstName + " " + this.lastName + "," + city + "," + country;
    }
}
var person1 = {
    firstName:"Bill",
    lastName: "Gates",
}
// 将函数 fullName 赋值给 person1 对象, 传参并调用该方法
// 相当于 person1.fullName("Seattle", "USA")  
person.fullName.call(person1, "Seattle", "USA");

47. Apply()函数

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"Bill",
  lastName: "Gates"
}
// 将函数 fullName 赋值给 person1 对象, 传参并调用该方法
// 相当于 person1.fullName("Oslo", "Norway")  
person.fullName.apply(person1, ["Oslo", "Norway"]);

call() 和 apply() 之间的区别
- call() 方法分别接受参数
- apply() 方法接受数组形式的参数
- 在 JavaScript 严格模式下，如果 apply() 方法的第一个参数不是对象，则它将成为被调用函数的所有者（对象）。
- 在**“非严格”模式下，它成为全局对象**。

48. Bind()函数

有时必须使用 bind() 方法来防止丢失 this

const person = {
  firstName:"Bill",
  lastName: "Gates",
  fullName: function () {
    return this.firstName + " " + this.lastName;
  }
}

const member = {
  firstName:"Hege",
  lastName: "Nilsen",
}
// 将函数 fullName 绑定给 person1 对象, 传参并调用该方法
// 相当于 person1.fullName("Oslo", "Norway") 
let fullName = person.fullName.bind(member,"Oslo", "Norway");

49. JS闭包

var add = (() => {
  var counter = 0;
  return () => {counter += 1; return counter;}
})(); // 自调用函数自会执行一次

function myFunction(){
  // add() 实际执行的是返回的函数 () => {counter += 1; return counter;}
  document.getElementById("demo").innerHTML = add();
}

50. 回调和异步

回调

function myDisplayer(some) {
  alert(some);
}

function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  // 当上面的代码执行完毕后执行回调函数（执行另一个函数）
  myCallback(sum);
}

// 传入参数和回调函数
myCalculator(5, 5, myDisplayer);

异步执行回调函数

在使用 JavaScript 函数 setTimeout() 时，可以指定超时时执行的回调函数

// 3秒后执行回调函数 （异步）
setTimeout(myFunction, 3000);

// 不会等待上面的代码执行完毕，会想下执行
alert(1);

// 期间代码会正常向下执行
function myFunction() {
  document.getElementById("demo").innerHTML = "I love You !!";
}

51. Promise

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

// 必须自定义函数的参数名称 resolve， reject
let myPromise = new Promise(function(resolve, reject) {
  let x = 1;

  if (x == 0) {
   	// Promise内置方法
    resolve("OK");
  } else {
    // Promise内置方法
    reject("Error");
  }
});

// 获得执行的结果
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

函数前的关键字 async 使函数返回 promise

// async 使函数返回 promise
async function myFunction() {
  return "Hello";
}

// await 关键字只能在 async 函数中使用
// 函数前的关键字 await 使函数等待 promise
let value = await myFunction;

// 以下是使用 Promise 的方法
myFunction().then(
  // 固定写法
  function(value) { /* 成功时的代码 */ },
  function(error) { /* 出错时的代码 */ }
);

52. HTML DOM

概念

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
通过这个对象模型，JavaScript 获得创建动态 HTML 的所有能力

根据标签的ID获得元素对象

<p id="demo"></p>

<script>
// document.getElementById() 根据ID获得元素节点
// 如果未找到元素节点返回 null
var pele = document.getElementById("demo")
// 向这个标签里面添加 HTML 文本，如果 html 会自动解析为html标签
pele.innerHTML = "Hello World!";
    
var x = document.getElementById("main");
// 获得 x 节点下的所有的 p 元素
var y = x.getElementsByTagName("p");
// 获得第一个p 元素节点
y[0];
</script>

获得元素节点对象，然后改变它的属性值
```
document.getElementById("myImage").class = "b";
```

查找 HTML 元素

方法	描述
document.getElementById(id)	通过元素 id 来查找单个元素
document.getElementsByTagName(name)	通过标签名来查找多个元素
document.getElementsByClassName(name)	通过类名来查找多个元素对象
document.querySelectorAll(标签名选择器名) 如 ‘p#sid’	通过标签名和类名来查找多个元素对象

改变 HTML 元素

方法	描述
element.innerHTML = new html content	改变元素的 inner HTML
element.attribute = new value	改变 HTML 元素的属性值
element.setAttribute(attribute, value)	改变 HTML 元素的属性值
element.style.property = new style	改变 HTML 元素的样式

添加和删除元素

方法	描述
document.createElement(element)	创建 HTML 元素
document.removeChild(element)	删除 HTML 元素
document.appendChild(element)	添加 HTML 元素
document.replaceChild(element)	替换 HTML 元素
document.write(text)	写入 HTML 输出流

添加事件处理程序

方法描述
document.getElementById(id).onclick = function(){code} 向 onclick 事件添加事件处理程序

方法	描述
document.getElementById(id).onclick = function(){code}	向 onclick 事件添加事件处理程序

表单提交时执行函数

<form name="myForm" action="/demo/html/action_page.php" onsubmit="validateForm()" method="post">
  Name: <input type="text" name="fname">
  <input type="submit" value="Submit">
</form>

<script>
// 表单提交时执行的函数，可用于验证数据完整性
function validateForm() {
  // document.forms["myForm"]["fname"]  根据表单name属性和输入框name属性获得对应输入框的值，从进行判断
  let x = document.forms["myForm"]["fname"].value;
}
</script>

约束验证 HTML input 属性

属性	描述
disabled	规定应禁用 input 元素。
max	规定 input 元素的最大值。
min	规定 input 元素的最小值。
pattern	规定 input 元素的值模式。
required	规定 input 字段必填。
type	规定 input 元素的类型。

改变 HTML 样式

// 修改元素节点的style 对象（属性）的 color 属性值
document.getElementById("p2").style.color = "blue";

53. DOM事件

标签的 onclick 属性（事件）单击元素使触发

<!-- this 为当前的元素节点对象 -->
<h1 onclick="changeText(this)">点击此文本！</h1>

<script>
function changeText(element) { 
    // 给当前的元素节点添加html文本
    element.innerHTML = "Hello:)";
}
</script>

标签的 onload 属性（事件）页面加载时触发

<p onload="checkCookies()"></p>

<script>
function checkCookies() {
  alert("页面加载完毕");
}
</script>

输入框的 onchange 属性（事件）光标离开输出框时触发

输入框的 onfocus 属性（事件）光标进入输出框时触发

<input type="text" id="fname" onchange="myFunction()">
<script>
// 当光标离开输出框时触发事件
function myFunction() {
  var x = document.getElementById("fname");
  // 将输入框中的值全部改为大写
  x.value = x.value.toUpperCase();
}
</script>

标签的 onmouseover 属性（事件）当鼠标悬浮在标签上时触发

<div onmouseover="mOver(this)" >
</div>

<script>
function mOver(obj) {
  // 向元素中添加html文本
  obj.innerHTML = "鼠标在元素上悬浮"
}
</script>

标签的 onmouseout 属性（事件）当鼠标从标签上离开时触发

<div onmouseout ="mOut(this)" >
</div>

<script>
function mOut(obj) {
  // 向元素中添加html文本
  obj.innerHTML = "鼠标从元素上离开了"
}
</script>

标签的 onmousedown 属性（事件）当鼠标从标签左键按下时触发

标签的 onmouseup 属性（事件）当鼠标从标签左键按下再松开时触发

<div onmousedown="mDown(this)" onmouseup="mUp(this)">
0
</div>

<script>
function mDown(obj) {
  obj.innerHTML = "鼠标左键按下了";
}

function mUp(obj) {
  obj.innerHTML="鼠标左键按下并松开了";
}
</script>

使用JS代码的方式为元素节点添加和移除事件

// 为指定的元素节点添加指定的类型的事件
document.getElementById("myBtn").addEventListener("click", 事件触发时执行的函数);

// 为指定的元素节点移除已添加的指定事件, 根据事件类型和添加事件触发时执行的函数名，找到要删除的指定事件
document.getElementById("myBtn").removeEventListener("click", 事件触发时执行的函数);

54. DOM导航（JS创建html元素）

元素节点对象的 firstChild 属性获得第一个元素节点对象
.firstChild.nodeValue 获得第一个节点对象的文本值
- 元素节点的 nodeValue 是 undefined
- 文本节点的 nodeValue 是文本文本
- 属性节点的 nodeValue 是属性值
元素节点对象.nodeName 获得标签的名称

JS创建html元素

<div id="div1">
    <p id="p1">使用节点对象的 remove() 方法删除该标签</p>
</div>

<script>
// 创建一个p标签节点对象
var para = document.createElement("p");
// 创建一个文本节点对象
var node = document.createTextNode("这是新文本。");
// 将文本对象添加到 p标签对象 里面
para.appendChild(node);

// 获得html元素节点对象
var element = document.getElementById("div1");
// 将JS创建的 p标签对象添加到 已有的节点对象中
element.appendChild(para);
    
// 先获取节点对象再删除它
document.getElementById("p1").remove();
</script>

删除元素节点的子节点

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>

替换节点中的子节点标签

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);

var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

遍历所有符合条件的节点对象

var myCollection = document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++) {
    myCollection[i].style.backgroundColor = "red";
}

// 也可使用
var myNodelist = document.querySelectorAll("p");
var i;
for (i = 0; i < myNodelist.length; i++) {
    myNodelist[i].style.backgroundColor = "red";
}

55. Window对象

window.location.href 属性返回当前页面的 URL
window.location.hostname 属性返回当前页面的域名
window.location.pathname 属性返回当前页面的路径名如 /login
window.location.protocol 属性返回页面的 web 协议如 http
window.location.port 属性返回当前页面的端口号 http为 80 https 为 443
window.history 对象可不带 window 书写
- history.back() - 浏览器返回上一页
- history.forward() - 浏览器返回转到下一页（不能转到未访问过的页面）
- go() 方法从历史列表中加载一个特定的 URL 负数向后正数向前
window.navigator 对象可以不带 window 前缀来写
- navigator.appName 属性返回浏览器名称
- navigator.cookieEnabled 判断Cookie是否启用，true表示已启用
- navigator.userAgent 返回由浏览器发送到服务器的用户代理报头
- navigator.onLine 假如浏览器在线，属性返回 true
window.alert() 方法可以不带 window 前缀来写弹出框。
window.prompt(“sometext”,“defaultText”) 提示框
window.setTimeout(function, milliseconds);
clearTimeout() 方法停止执行 setTimeout() 中规定的函数。

setInterval() 重复执行的计时器，使用方法和setTimeout() 一样

<p id="demo"></p>

<button onclick="clearInterval(myVar)">停止时间</button>

<script>
var myVar = setInterval(myTimer, 1000);
 function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

Cookie

概念

Cookie 是为了解决“如何记住用户信息”而发明的
当用户访问网页时，他的名字可以存储在 cookie 中
下次用户访问该页面时，cookie 会“记住”他的名字

// 设置Cookie ， expires 为日期 固定写法
document.cookie = 'username=XX; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';

// 获得cookie, 这是一个字符串，可以对它进行分割获得想要的数据
var cookie =  document.cookie;

56. 原生 AJAX

概念

不刷新页面更新网页
在页面加载后从服务器请求数据
在页面加载后从服务器接收数据
在后台向服务器发送数据

// 创建 XMLHttpRequest 对象
const xhttp = new XMLHttpRequest();

// 定义回调函数
xhttp.onload = function() {
  // 您可以在这里使用数据
}

// 发送请求
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

57. jQuery

根据id获取元素节点对象
```
var myElement = $("#id01");
```
根据标签名称获得所有标签节点对象
```
var myElements = $("p");
```
根据类名获得所有节点对象
```
var myElements = $(".intro");
```
根据标签名和类型获得所有符合条件的节点对象
```
var myElements = $("p.intro");
```

设置 HTML 元素的内部文本

var myElement = $("#id01");
myElement.text("Hello China!");

获取 HTML 元素的内部文本
```
var myText = myElement.text();
```
设置元素的 HTML 内容
```
myElement.html("<p>Hello World</p>");
```
获取元素的 HTML 内容
```
var content = myElement.html();
```
隐藏html元素
```
myElement.hide();
```
显示一个 HTML 元素
```
myElement.show();
```
给html节点对象添加css样式
```
myElement.css("font-size","35px");
```
根据id 删除 HTML 元素
```
$("#id").remove();
```
获取一个元素节点对象的父元素对象
```
var myParent = myElement.parent();
```

Vermouth-1

关注

15
点赞
踩
26

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript笔记

JavaScript笔记1. 根据标签 ID 改变标签的内容和属性根据标签的id修改标签的内容<!DOCTYPE html><html><body><p id="demo">JavaScript 可以更改 HTML 内容。</p><button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'"&g
复制链接

扫一扫