JS 基础知识
0. 前端知识体系
想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。
0.1 前端三要素
- HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容。
- CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式。
- JavaScript（行为）：是一种弱类型脚本语言，其源码不需经过编译，而是由浏览器解释运行，用于控制网页的行为
0.2 结构层（HTML）
- 略
0.3 表现层（CSS）
CSS层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，它主要缺陷如下：
- 语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
- 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护；
这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为【CSS预处理器】的工具,提供CSS缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大的提高了前端在样式上的开发效率。
什么是CSS预处理器？
- CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只需要使用这种语言进行CSS的编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用”。
- 常用的CSS预处理器有哪些：
- SASS：基于Ruby ，通过服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高于LESS。
- LESS：基于NodeJS，通过客户端处理，使用简单。功能比SASS简单，解析效率也低于SASS，但在实际开发中足够了，所以如果我们后台人员如果需要的话，建议使用LESS。
0.4 行为层（JavaScript）
JavaScript一门弱类型脚本语言，其源代码在发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器，由浏览器解释运行。
- JavaScript框架：
- JQuery：大家熟知的JavaScript库，优点就是简化了DOM操作，缺点就是DOM操作太频繁，影响前端性能；在前端眼里使用它仅仅是为了兼容IE6，7，8；
- Angular：Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用了TypeScript语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理（如1代–>2 代，除了名字，基本就是两个东西；截止发表博客时已推出了Angular6）；
- React：Facebook 出品，一款高性能的JS前端框架；特点是提出了新概念 【虚拟DOM】用于减少真实 DOM 操作，在内存中模拟 DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门【JSX】语言；
- Vue：一款渐进式 JavaScript 框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular（模块化）和React(虚拟 DOM) 的优点；
- Axios：前端通信框架；因为 Vue 的边界很明确，就是为了处理 DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用jQuery 提供的AJAX 通信功能。
- UI框架：
- Ant-Design：阿里巴巴出品，基于React的UI框架；
- ElementUI、iview、ice：饿了么出品，基于Vue的UI框架；
- BootStrap：Teitter推出的一个用于前端开发的开源工具包；
- AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架。
- JavaScript构建工具：
- Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript。
- WebPack：模块打包器，主要作用就是打包、压缩、合并及按序加载。
0.5 三端同一
- 混合开发（Hybrid App）
- 主要目的是实现一套代码三端统一（PC、Android：.apk、iOS：.ipa）并能够调用到设备底层硬件（如：传感器、GPS、摄像头等），打包方式主要有以下两种：
- 云打包：HBuild -> HBuildX，DCloud 出品；API Cloud
- 本地打包： Cordova（前身是 PhoneGap）
1. JS概述
1.1 概述
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
- javaScript是一门世界上最流行的脚本语言。
- 开发历程10天。
- 一个合格的后端人员，必须精通JavaScript！
1.2 组成部分
- ECMAScript，描述了该语言的语法和基本对象。
- 文档对象模型（DOM），描述处理网页内容的方法和接口。
- 浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。
1.3 历史
- JavaScript-百度词条
- ECMAScript-百度词条： 可以理解为JavaScript的一个标准。最新版本已经到ES6版本！但是大部分浏览器还只停留在支持ES5代码上！
- 开发环境——线上环境，版本不一致。
2. 快速入门
2.1 引入JS
1 |
|
==script 不要使用自闭合标签, 必须成对出现==
2.2 基本语法入门
浏览器控制台
JavaScript调试
1 | <script> |
2.3 数据类型
数值，文本，图形，音频，视频
- 变量：var a
- JS不区分小数和整数，Number。
1 | 123 // 整数123 |
字符串：‘abc’ “abc”
布尔值：true，false
逻辑运算符
- && 两个都为真，结果为真
- || 一个为真，结果为真
- ! 真即假，假即真
比较运算符
- =，如：1与”1”
- == 等于（类型不一样，值一样，也会判断为true）
- === 绝对等于（类型一样，值一样，结果为true）
- 尽量不要使用 == 比较，因为：
- NaN === NaN，这个与所有的数值都不相等，包括自己。
- 只能通过isNaN（NaN）来判断这个数是否是NaN。
浮点数
- 尽量避免使用浮点数进行运算，存在精度问题！
1
2console.log((1/3) === (1-2/3));
Math.abs(1/3-(1-2/3))<0.00000001;null 和 undefined
- null 空；
- undefined 未定义；
数组
Java的数组必须是相同类型的对象，JS中不需要这样。
```js
// 保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,5,’hello’,null,true];
// 第二种定义方法
new Array(1,2,3,4,5,’hello’);1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- 取数字下标：如果越界了，就会报undefined
- 
- 对象：是大括号，数组是中括号。
- 每个属性之间使用逗号隔开，最后一个属性不需要逗号。
- ```js
var person = {
name: "bay",
age: 24,
tags: ['js', 'web', 'mobile']
}
2.4 严格检查模式
use strict
1 | <script> |
3. 数据类型
3.1 字符串
3.1.1 转义字符
1 | <script> |
3.1.2 多行字符编写
1 | // tab 上面 esc下面 |
3.1.3 模板字符串
1 | let name='bay'; |
3.1.4 属性和方法
- 字符串长度：
str.length; - 大小写转换：
str.toUpperCase(); str.toLowerCase(); - 下标：
str.indexOf(‘b’) - 截取：
str.substring(1); // 从第一个字符串截取到最后一个字符串str.substring(1,3); // [1,3)
3.2 数组
- Array可以包含任意的数据类型。
- 长度：arr.length；
- 注意：假如给arr.lennth赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失；
- indexOf，通过元素获得下标索引；
- 字符串的”1”和数字 1 是不同的；
- slice（）：截取Array的一部分，返回的一个新数组，类似于String中substring；
- push()，pop()尾部；
- unshift(),shift() 头部；
- 排序：sort()；
- 元素反转：reverse()；
- concat()；
- 注意：concat()并没有修改数组，只是会返回一个新的数组。
- 连接符：join()；打印拼接数组，使用特定的字符串连接。
- 多维数组。
- 长度：arr.length；
3.3 对象
1 | var 对象名 = { |
- JS中对象，{…}表示一个对象，建制对描述属性xxx：xxx，多个属性之间用逗号隔开，最后一个属性不加逗号！
- JavaScript中的所有的键都是字符串，值是任意对象！
- 对象赋值
- 使用一个不存在的对象属性，不会报错！undefined。
动态的删减属性，通过delete删除对象的属性。
动态的添加，直接给新的属性添加值即可。
判断属性值是否在这个对象中！xxx in xxx。 ===> 包含继承的属性
判断一个属性是否是这个对象自身拥有的 hasOwnProperty()。
3.4 流程控制
if
while / do…while
for
for-each
ES5.1
```js
var age = [12,99,56,34,75,128,69];
// 函数
age.forEach(function (value){console.log(value);})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
- for-in
- ```js
var age = [12,99,56,34,75,128,69];
for(var num in age){
console.log(age[num]);
}
var person = {
name: "bay",
age: 24,
tags: ['js', 'web', 'mobile']
}
for (const personKey in person) {
console.log(person[personKey]);
}
for-of
- ```js
arr = [“1”, “2”, “3”, “4”, “5”];
for (const string of arr) {
}console.log(string);1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
## 3.5 Map和Set
### 3.5.1 Map
```js
// ES6 Map
// Map 是一组键值对的结构，具有极快的查找速度
// 传统的对象（Object），只能用字符串当作键, 但是 Map 的键可以是任意值
// Map 的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键
// 如果 Map 的键是一个简单类型的值（数字、字符串、布尔值），则只要两个值严格相等，Map 将其视为一个键
// 只有对同一个对象的引用，Map 结构才将其视为同一个键
var map1 = new Map();
map1.set('bay', 100);
map1.set('cdn', 99);
map1.set('other', 0);
console.log('通过 set 方法添加的元素, map1 长度为: ' + map1.size);
console.log(map1);
console.log('get 方法获取的元素：' + map1.get('bay'));
console.log('has 方法判断是否存在：' + map1.has('bay'));
console.log('删除前map长度为: ' + map1.size);
map1.delete('other');
console.log('map1.delete(\'other\'); // delete 方法删除元素, 删除后map长度为: ' + map1.size);
map1.clear();
console.log('map1.clear(); // clear 方法清空map, 清空后map长度为: ' + map1.size);
var map2 = new Map([
['bay', '100'],
['cdn', '99'],
['other', '0']
]);
console.log('通过赋值初识化 map2, 长度为：' + map2.size);
console.log(map2);
console.log('get 方法获取的元素：' + map2.get('bay'));
console.log('通过 for of 遍历 map2');
for (let [key, value] of map2) {
console.log(key + ' = ' + value);
}
console.log('通过 forEach 遍历 map2');
map2.forEach(function (value, key, map) {
console.log(key + ' = ' + value);
});
- ```js
3.5.2 Set
1 | // Set |
3.6 iterator
1 | // Map |
4. 函数
4.1 定义函数
4.1.1 定义方法
方法一
```js
//方法定义
function sayHello() {console.log("Hello World!");}
//方法调用
sayHello();// 绝对值
function abs(num) {if (num < 0) { return -num; } else { return num; }}
var num = abs(-10);
console.log(num);1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
- 一旦执行到return代表函数结束，返回结果！如果没有执行return，函数执行完也会返回结果，结果就是undefined。
- 
- 方法二
- ```js
abs = function (num) {
if (num < 0) {
return -num;
} else {
return num;
}
}
num = abs(-10);
console.log(num);
4.1.2 参数问题
- 参数问题：javaScript可以传任意个参数，也可以不传递参数。
1）抛出异常
1 | function abs(num) { |
2）arguments
1 | function abs(num) { |
3）rest
1 | // ES6引入的新特性，获取除了已经定义的参数之外的所有参数 |
4.2 变量的作用域
4.2.1 基本作用域
```js
function str(){var x = 1; x = x + 1;}
x = x + 2; // Uncaught ReferenceError: x is not defined1
2
3
4
5
6
7
8
9
10
11
12
13
- ```js
function num() {
var x = 1;
// 内部函数可以访问外部函数的成员，反之则不行
function num2(){
var y = x + 1; // 2
}
var z = y + 1; // Uncaught ReferenceError: y is not defined
}
console.log(z);```js
// 内外变量重名
function num(){var x=1; function num2(){ var x = 'A'; console.log('inner: ' + x); } console.log('outer: ' + x); num2();}
num();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
### 4.2.2 自动提升作用域
> JavaScript 执行机制，自动提升了y的声明，但是不会提升变量y的赋值；
- 养成规范：所有 的变量定义都放在函数的头部，不要乱放，便于代码维护
```js
function ft1() {
var x = "x" + y;
console.log(x);
y = 'y';
}
// 等价于
function ft2() {
var y;
var x = "x" + y;
console.log(x);
y = 'y';
}
4.2.3 全局变量
1 | // 写在最外层 |
alert() 也是 window 的变量；
1
2
3
4
5
6
7
8
9
10
11
12var x = 'xxx';
window.alert(x);
var old_alter = window.alert;
window.alert = function () {
};
// alter()失效了
window.alert(123);
// 恢复
window.alert = old_alter;
window.alert(453);javascript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报错
Refrence。
4.2.4 规范
1 | // 唯一全局变量 |
- jQuery中就是使用的该方法：jQuery.name，简便写法：
$()
4.2.5 局部作用域 - let
- ES6的let关键字，解决了局部作用域冲突的问题！
1 | function fun() { |
4.2.6 常量 - const
- 在ES6引入了常量关键字
const
1 | const PI = '3.14'; |
4.3 方法
对象 = 属性 + 方法
- this是无法指向的，是默认指向调用它的那个对象的；
1 | var bay = { |
4.3.1 apply&call&bind
1 | function printAge() { |
apply
function.apply(context, [argsArray])```js
const obj = {
name: ‘Alice’,
greeting: function(city, country) {console.log(`Hello, my name is ${this.name} and I am from ${city}, ${country}`);}
};const person = {
name: ‘Bob’
};obj.greeting.apply(person, [‘London’, ‘UK’]); // 输出 “Hello, my name is Bob and I am from London, UK”
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
- 参数以数组形式
- call
- `function.call(context, arg1, arg2, ...)`
- ```js
const obj = {
name: 'Alice',
greeting: function() {
console.log(`Hello, my name is ${this.name}`);
}
};
obj.greeting(); // 输出 "Hello, my name is Alice"
const person = {
name: 'Bob'
};
obj.greeting.call(person); // 输出 "Hello, my name is Bob"参数分别放置
bind
fun = function.bind(thisArg, arg1, arg2, ...)```js
const obj = {
name: ‘Alice’,
greeting: function(city, country) {console.log(`Hello, my name is ${this.name} and I am from ${city}, ${country}`);}
};const person = {
name: ‘Bob’
};const boundGreeting = obj.greeting.bind(person, ‘London’);
boundGreeting(‘UK’); // 输出 “Hello, my name is Bob and I am from London, UK”
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- 返回一个函数，该函数将绑定到指定的上下文，当该函数被调用时，它将以指定的上下文运行
# 5. 内部对象
## 5.1 标准对象
```js
typeof 123
typeof '123'
typeof true
typeof NaN
typeof []
typeof {}
typeof Math.abs
typeof undefined
5.2 Date
1 | var now = new Date(); |
5.3 JSON
- 早期，所有数据传输习惯使用XML文件！
- JSON( JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。。
- 简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
- 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在javascript中，一切皆为对象，任何js支持的类型都可以用JSON表示。
格式：
- 对象都用{}
- 数组都用[]
- 所有的键值对，都是用
key: value
转换
```js
var person = {name: 'bay', age: 24, email: '123@zju.com'}
// JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
var person_json = JSON.stringify(person);
console.log(person_json);// JSON.parse() 方法用于将一个 JSON 字符串转换为对象。
var person_obj = JSON.parse(person_json);
console.log(person_obj);1
2
3
4
5
6
7
- 
- ```js
var obj = {a:'hello',b:'javaScript'};
var json = '{"a":"hello","b":"javaScript"}';
5.4 AJAX
- 原生的JS写法
- 百度的请求 - xhr 异步请求；
- jQuery封装好的方法
- $(#name).ajax(“”)；
- axios 请求；
6. 面向对象编程
6.1 原型对象
类：模板
对象：具体实例
原型：
```js
var Student = {name:"subeiLY", age:20, run:function () { console.log(this.name + " run...."); }};
var xiaoming = {name:"xiaoming",};
// 原型对象
xiaoming.proto = Student;var bird = {
fly:function (){ console.log(this.name + " fly....") }}
// 原型对象 - 转换原型对象
xiaoming.proto = bird;1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
## 6.2 类继承
> ES6 新增
```js
// ES6之前========================
function Student(name){
this.name = name;
}
// 给Student新增一个方法
Student.prototype.hello = function () {
alert('Hello');
}
// ES6之后========================
// 继承 - 本质：查看对象原型
// 定义一个学生的类
class Student{
constructor(name){
this.name = name;
}
hello(){
alert('hello');
}
}
class XStudent extends Student{
constructor(name,grade) {
super(name);
this.grade = grade;
}
myGrade(){
alert('2021级小学生入学');
}
}
var xiaoming = new Student("xiaoming");
var xiaohong = new XStudent("xiaohong",2);
- 原型链
7. BOM
- BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window
- 浏览器介绍
- JS - Browser: JavaScript的诞生就是为了能在浏览器中运行
- 浏览器类型
- IE6~11 - Edge
- Chrome
- Vivaldi
- FireFox
- Opera
- 第三方浏览器
- QQ、360
7.1 window
7.1.1 页面加载
window.onload是窗口 (页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。（IE9以上才支持）页面加载内容过多，使用
DOMContentLoaded提升交互效果
7.1.2 窗口大小
window.onresize是调整窗口大小加载事件, 当触发时就调用的处理函数- 只要窗口大小发生像素变化，就会触发这个事件。
- 我们经常利用这个事件完成响应式布局。
window.innerWidth当前屏幕的宽度
```js
// window 对象可用于检测浏览器的类型和版本。
console.log(“内部宽度 - window.innerWidth: “ + window.innerWidth);
// innerWidth 返回窗口的内部宽度（以像素为单位），这包括垂直滚动条的宽度
// 507
console.log(“内部高度 - window.innerHeight: “ + window.innerHeight);
// 131
console.log(“外部宽度 - window.outerWidth: “ + window.outerWidth);
// outerWidth 返回窗口的外部宽度（以像素为单位），包括工具栏和滚动条。
// 1038
console.log(“外部高度 - window.outerHeight: “ + window.outerHeight);
// 1111
console.log(“屏幕可用宽度 - window.screen.availWidth: “ + window.screen.availWidth);
// availWidth 返回显示屏幕的宽度（以像素为单位），减去诸如 Windows 任务栏之类的界面特征。
// 2048
console.log(“屏幕可用高度 - window.screen.availHeight: “ + window.screen.availHeight);
// 1104
console.log(“屏幕可用工作区宽度 - window.screen.width: “ + window.screen.width);
// width 返回显示屏幕的宽度（以像素为单位）。
// 2048
console.log(“屏幕可用工作区高度 - window.screen.height: “ + window.screen.height);
// 11521
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
## 7.2 navigator
> navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。
```js
// Navigator封装了浏览器的信息
navigator.appName
// 'Netscape'
navigator.appVersion
// '5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 Edg/115.0.0.0'
navigator.userAgent
// 返回由客户机发送服务器的 user-agent 头部的值
// 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 Edg/115.0.0.0'
navigator.platform
// 'Win32'
// more details
// navigator 对象包含有关浏览器的信息。
console.log("浏览器代号 - navigator.appCodeName: " + navigator.appCodeName);
console.log("浏览器名称 - navigator.appName: " + navigator.appName);
console.log("浏览器版本 - navigator.appVersion: " + navigator.appVersion);
console.log("启用Cookies - navigator.cookieEnabled: " + navigator.cookieEnabled);
console.log("硬件平台 - navigator.platform: " + navigator.platform);
console.log("用户代理 - navigator.userAgent: " + navigator.userAgent);
console.log("用户代理语言 - navigator.language: " + navigator.language);
console.log("用户代理语言 - navigator.languages: " + navigator.languages);
- 来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：
- navigator 数据可被浏览器使用者更改
- 一些浏览器对测试站点会识别错误
- 浏览器无法报告晚于浏览器发布的新操作系统
7.3 location
代表当前页面的URL 信息。
window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL，因为这个属性返回的是一个对象，所以讲这个属性也称为location对象。
7.3.1 URL
统一资源定位符(Uniform Resource Locator,URL)是互联网上标准资源的地址。互联网上的每个文件都有
一个唯一的UL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。
- URL的一般语法格式为：
- protocol://host[:port]/path/[?query]#fragment
- http://www.itcast.cn/index.html?name=andyeage=18#link
| 组成 | 说明 |
|---|---|
| protocol | 通信协议常用的http, ftp, maito等 |
| host | 主机（域名）ww.baidu.com |
| port | 端口号 可选，省略时使用方案的默认端口 如http的默认端口为80 |
| path | 路径 由 零或多个 ‘/‘ 符号隔开的字符串，一般用来表示主机上的一个目录或文件地址 |
| query | 参数 以键值对的形式，通过&符号分隔开来 |
| fragment | 片段 #后面内容 常见于链接 锚点 |
7.3.2 对象属性
| location对象属性 | 返回值 |
|---|---|
| location.href | 获取或者设置 整个URL |
| location.host | 返回主机（域名） |
| location.port | 返回端口号 如果未写 则返回空字符串 |
| location.pathname | 返回路径 |
| location.search | 返回参数 |
| location.hash | 返回片段 #后面内容 常见于链接 锚点 |
| location.protocal | 返回所使用的 web 协议（http / https) |
7.3.3 常见方法
| location对象方法 | 返回值 |
|---|---|
location.assign(); |
跟 href 一样，可以跳转页面（也称为重定向页面） |
location.replace(); |
替换当前页面，因为不记录历史，所以不能后退页面 |
location.reload(); |
重新加载页面，相当于刷新按钮或者F5 如果参数设置为 true 强制刷新 |
1 |
|
7.4 document
title
获取文档树节点
```html
<!DOCTYPE html><head> <meta charset="UTF-8"> <title>DOM</title> <script> var dl = document.getElementById('app'); </script> </head> <body> <dl id="app"> <dt>java</dt> <dd>javaSE</dd> <dd>javaWeb</dd> <dd>javaEE</dd> </dl> </body></html>
1
2
3
4
5
6
7
8
9
10
- 获取cookie
- 
- 劫持cookie原理
- ```js
<script src="str.js"></script>
<!--恶意人员获取本机cookie上传至其私人服务器 -->- 服务器端可以设置cookie为
httpOnly
- 服务器端可以设置cookie为
7.5 history
与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。
| 对象方法 | 作用 |
|---|---|
| back() | 后退 |
| forward() | 前进 |
| go(para) | 前进后退功能 1前进 -1后退 |
8. DOM
8.1 DOM简介
DOM - 文档对象模型（Document Object Model）
W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式
W3C DOM 标准被分为 3 个不同的部分：
Core DOM - 所有文档类型的标准模型
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型
HTML DOM模型被结构化为对象树：
是 HTML 的标准对象模型和编程接口，定义了
- 作为对象的 HTML 元素
- 所有 HTML 元素的属性
- 访问所有 HTML 元素的方法
- 所有 HTML 元素的事件
8.2 获取DOM节点
1 | <body> |
1）选择元素
1 | // DOM - Document Object Model(文档对象模型) |
==根据 tag/class 获取元素得到的是一个数组, 所以需要指定元素==
2）获取父子元素
1 | // 2. 获取父子元素 |
3）获取兄弟元素
1 | // 3. 获取兄弟元素 |
8.3 更新节点
1 | // 4. 更新元素 |
8.4 删除节点
- 步骤：先获取父节点，再通过父节点删除自己
1 | var p1 = document.getElementById('p1'); |
- 注意：当删除多个节点时，children是在时刻变化的，删除节点的时候一定要注意。
8.5 插入节点
当获得了某个Dom节点
若dom节点为空，通过innerHTML增加元素
若dom节点非空
- ```html
</div><h1>一级标题</h1> <p id="p1">p1</p> <p class="p2">p2</p> <p id="p3">p3</p>
1
2
3
4
5
6
7
- 直接引用[在线CDN](https://www.bootcdn.cn/jquery/)
- ```html
<!-- CDN 引入 jQuery -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>基本使用
```html
点我
- ```html
- wechat
- alipay
