JavaScript高级

BOM

  1. 概念:Browser Object Model(浏览器对象模型),将浏览器的各个组成部分封装为对象
  2. 组成:
    • Window:窗口对象
    • Navigator:浏览器对象
    • Screen:显示器屏幕对象
    • History:历史记录对象
    • Location:地址栏对象

Window

特点

  1. Window对象不需要创建,可以直接使用。window.方法名();
  2. window引用可以省略。方法名();

与弹出框有关的方法

  1. alert(内容):显示一段消息和一个确认按钮的警告框
  2. confirm(内容):显示一段消息和确认按钮和取消按钮的对话框
    • 如果点击确定则方法返回true
    • 如果点击去下则方法返回*false
  3. prompt():显示可提示用户输入的对话框
    • 返回值:获取用户输入的值

与开发关闭有关的方法

  1. **close()**:关闭浏览器窗口,谁调用就关谁
  2. open(可以写新窗口的地址):打开一个新的浏览器窗口,返回新的window对象

与定时器有关的方法

  1. setTimeout(“函数()”,毫秒数):在指定毫秒数后执行函数,只执行一次,返回一个id,用于取消定时器
  2. **clearTimeout(定时器id):取消setTimeout()**方法设置的timeout
  3. setInterval(“函数()”,毫秒数):在指定毫秒数后执行函数,一直执行,返回一个id,用于取消定时器
  4. **clearInterval(定时器id):取消setInterval()**方法设置的timeout

属性

  1. 获取其他BOM对象
    • history
    • location
    • Navigator
    • Screen
  2. 获取DOM对象
    • document

Location

创建(获取)

  1. window.location
  2. location

方法

  1. **reload()**:重新加载当前文档(刷新)
  2. assign():加载一个新的页面,括号中写url路径

属性

  1. href:设置或返回完整的URL

    1
    2
    跳转到这个页面
    window.location.href = "./index.html";
  2. search:获取url后面的参数

History

创建(获取):

  1. window.history
  2. history

属性

length,返回当前窗口历史列表中的URL数量

方法

  1. back():加载前一个URL
  2. forward():加载下一个URL
  3. **go(参数)**:加载某一个具体页面
    • 参数如果是正数,表示前进几个历史记录,负数,表示后退几个历史记录

DOM:

  • 概念:Document Object Model(文档对象模型),将标记语言文档的各个组成部分封装为对象。可以使用这些对象,对标记语言文档进行CRUD操作

W3C DOM标准模型

  1. 核心DOM-针对任何结构化文档
    • Document:文档对象
    • Element:元素对象
    • Attribut:属性对象
    • Text:文本对象
    • Comment:注释对象
    • Node:节点对象,其他几个的父对象
  2. XML DOM-针对XML文档
  3. HTML DOM-针对HTML文档

Document文档对象

创建(获取)

  • 在html dom模型中使用window对象来获取
    • window.document
    • document

方法

  1. 获取Element对象
    • **getElementById()**:根据id获取元素对象
    • getElementsByTagName():根据元素名称获取所有元素对象,返回数组
    • getElementsByClassName():根据class获取所有元素对象,返回数组
    • getElementsByName():根据name属性值获取所有元素对象,返回数组
  2. 创建其他DOM对象
    • createAttribute(name):创建拥有指定名称的属性节点,并返回新的 Attr 对象
    • createComment():创建注释节点
    • **createElement()**:创建元素节点
    • **createTextNode()**:创建文本节点

Element

  1. 创建(获取):通document来创建获取
  2. 方法:
    1. **removeAttribute(“属性名”)**:删除属性
    2. **setAttribute(“属性名”,”属性值”)**:设置属性

Node节点对象

特点

所有dom对象都可以被认为是一个节点

方法

  • CRUD dom树
    • **appendChild(节点名)**:向节点的子节点列表的结尾添加新的子节点。
    • **removeChild(节点名)**:删除(并返回)当前节点的指定子节点。
    • replaceChild(原节点,替换的节点):用新节点替换一个子节点。

属性

  • parentNode:返回节点的父节点

HTML DOM

  • innerHTML:标签体的设置和获取
  • **insertBefore(新的元素,旧元素)**:添加新元素到元素前面
  • **appendChild(新元素)**:添加新元素到指定元素内
  • **removeChild(删除的元素)**:删除子元素
  • 控制样式
    1. 使用style属性设置
    2. 提前定义类选择器样式,使用className属性设置class属性值

事件

概念

某些组件被执行了某系操作后,触发某些代码的执行

  1. 事件:某些操作,如:单击,双击,键盘按下,鼠标移动
  2. 事件源:组件,如:按钮 文本输入框
  3. 监听器:代码
  4. 注册监听将事件,事件源,监听器结合在一起。当事件源发生了某个时间,则触发执行某个监听器代码

绑定事件

  1. 直接在html标签上,指定事件的属性(操作),属性值就是js代码
  2. 通过js获取元素对象,指定事件属性,设置一个函数

常见事件

点击事件

  • onclick:单击事件
  • ondblclick:双击事件

焦点事件

  • onblur:失去焦点,一般用于表单校验
  • onfocus:元素获得焦点

加载事件

  • onload:一张页面或图像加载完成后执行

鼠标事件

  • onmousedown:鼠标按钮被按下。
    • 定义方法时,定义一个形参接收event对象
    • event对象的button属性可以判断哪个鼠标键被点击了
  • onmousemove:鼠标被移动。
  • onmouseout:鼠标从某元素移开。
  • onmouseover:鼠标移到某元素之上。
  • onmouseup:鼠标按键被松开。

键盘事件

  • onkeydown:某个键盘按键被按下。
  • onkeyup:某个键盘按键被松开。
  • onkeypress:某个键盘按键被按下并松开。

选中和改变

  • onselect:文本被选中
  • onchange:域的内容被改变

表单事件

  • onsubmit:确认按钮被点击
    • 可以允许或者阻止表单提交:返回true或者false
  • onreset:重置按钮被点击

文件处理

  • HTML5的File API提供了File和FileReader两个主要对象,可以获得文件信息并读取文件
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
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
#test-image-preview {
width: 500px;
height: 300px;
border: 2px;
}
</style>
<body>
<div id="fileShow"></div>
<input type="file" id="inputFile" name="test">
<p id="fileInfo"></p>
</body>
<script type="text/javascript">
var
fileInput = document.getElementById('inputFile'),
info = document.getElementById('fileInfo'),
preview = document.getElementById('fileShow');
// 监听change事件:
fileInput.addEventListener('change', function () {
// 清除背景图片:
preview.style.backgroundImage = '';
// 检查文件是否选择:
if (!fileInput.value) {
info.innerHTML = '没有选择文件';
return;
}
// 获取File引用:
var file = fileInput.files[0];
// 获取File信息:
info.innerHTML = '文件: ' + file.name + '<br>' +
'大小: ' + file.size + '<br>' +
'修改: ' + file.lastModifiedDate;
if (file.type !== 'img/jpeg' && file.type !== 'img/png' && file.type !== 'img/gif') {
alert('不是有效的图片文件!');
return;
}
// 读取文件:
var reader = new FileReader();
reader.onload = function(e) {
var
data = e.target.result; // 'data:img/jpeg;base64,/9j/4AAQSk...(base64编码)...'
preview.style.backgroundImage = 'url(' + data + ')';
};
// 以DataURL的形式读取文件:
reader.readAsDataURL(file);
});
</script>
</html>

ES6新语法

关键字

  • let:变量只在循环体内部有效
1
2
3
4
for(let i; i < 3; i++){
console.log(i);
}
console.log(i); // 报错
  • const:声明为常量,值不能被修改
1
2
const str = "abc";
str = "111"; // 报错

字符串API

  • **includes()**:返回布尔值,表示是否找到了参数字符串
  • **startsWith()**:返回布尔值,表示参数字符串是否在原字符串的头部
  • **endsWith()**:返回布尔值,表示参数字符串是否在原字符串尾部
1
2
3
4
5
let str = "hello";

str.includes("he"); // true
str.startsWith("he"); // true
str.endsWith("he"); // false

字符串模板

  • 使用**`**来标记字符串模板
1
2
3
4
5
let str = `
abc
def
ghj
`

解构

数组解构

1
2
3
let arr = [1,2,3];
let [x,y,z] = arr;
// x=1,y=2,z=3

对象解构

1
2
3
4
5
6
7
const per = {
name: "jtxyh",
age: "18"
}
const {name,age} = per;
const {name:n,age:a} = per;
// name === n age === a

函数默认值

1
2
3
function( a, b = 1){
return a+b;
}

箭头函数

1
2
3
4
5
6
7
var t = x => x+10;

// 上面的相当于下面

function t(x){
return x+10;
}
  • 多个参数需要用()括起来
1
2
3
4
5
6
7
8
var fn = (x,y)=>{
if(x>y){
return 'x比y大';
}else{
return 'y比x大';
}
}
console.log(fn(10,11)); '输出y比x大'
  • 可变参数
1
var fn = (x,y,...rest)=>{}
  • 返回json对象
1
2
var fn =  (x,y) => ({ x: x ,y:y})
console.log(fn(10,11)); '输出{x:10,y:11}'

map和reduce

map方法

调用Array的map()方法,传入我们自己的函数,可以得到一个新的Array作为结果

1
2
3
4
5
6
var array = [1,2,3,4];
var result = array.map(x => { return x * 10});
// 输出[10, 20, 30, 40]

var result2 = array.map(String);
// 输出["1", "2", "3", "4"]

reduce方法

Array的reduce()把一个函数作用在这个Array的[x1, x2, x3…]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积

1
2
3
4
5
6
7
8
9
var arr = [1, 3, 5, 7, 9];
arr.reduce((x, y) => {
return x + y;
});
// 结果为25
arr.reduce((x, y) => {
return x + y;
},1);
// 结果为26

扩展运算符

使用**...**将一个数组转为以逗号分隔的参数列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var arr = [1, 2, 3];
// 打印为 1 2 3
console.log(...arr);
// 打印为 0 1 2 3 4 5
console.log(0,...arr,4,5);

let add = (x,y)=>{
return x + y;
}
var numbers = [1,2]
// 打印3
console.log(add(...numbers));

// 数组合并
let arr = [...[1,2],...[3,4]];
// 打印[1,2,3,4]

// 字符串转数组
console.log(...'hello');
// 打印['h','e','l','l','o']

Promise

Promise是一个对象,可以获取异步操作的信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const p = new Promise(function (resolve, reject) { 
// 这里我们用定时任务模拟异步
setTimeout(() => { const num = Math.random();
// 随机返回成功或失败
if (num < 0.5) {
resolve("成功!num:" + num)
}
else {
reject("出错了!num:" + num)
}
}, 300)
})

// 调用promise
p.then(function (msg) {
console.log(msg);
}).catch(function (msg) {
console.log(msg);
})

set和map

set

不能存储相同的元素

1
2
3
4
5
6
7
8
let set = new Set();
set.add(1); // 添加元素
set.add(2); // 添加元素
set.clear(); // 清空
set.delete(2); // 删除指定元素
set.has(2); // 判断元素是否存在
set.forEach(val=>{}); // 遍历元素
set.size; // 元素个数,属性,不是方法

map

本质上与Object类似的结构,但Object强制规定key只能是字符串,但map的key可以是任意对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const map = new Map([
['key1','value1'],
['key2','value2'],
]);

map.get('key1'); // 获取元素
map.set('key3','value3'); // 添加元素
map.clear(); // 清空
map.delete(key); // 删除指定元素
map.has(key); // 判断是否存在
map.forEach((key,value)=>{}); // 遍历
map.size; // 判断元素个数,属性
map.values(); // 获取值的迭代器
map.keys(); // 获取键的迭代器
map.entries(); // 获取entry的迭代器

for(let key of map.keys()){
console.log(key);
}

class的基本语法

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
class User {
// 构造函数
constructor(name, age = 20){
this.name = name;
this.age = age;
}

// 普通方法
say() {
return "你好 " + this.name;
}

// 静态方法
static judgeAge(age) {
if(age >= 18){
return '你已成年!';
}
return '你未成年!';
}
}

let user = new User("极客小祥",30);
// 调用普通方法
user.say();
// 调用静态方法
User.judgeAge(20);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 继承
class Boy extends User {
constructor(){
// 必须实现父类的构造
super("男孩",30);
}
eat() {
return this.name + " 在吃";
}
}

let boy = new Boy();
boy.eat();
// 调用父类普通方法
boy.say();
// 调用父类静态方法
Boy.judgeAge(20);

generator

  • generator生成器是ES6标准引入的新的数据类型。可以返回多次
  • 使用function*定义
  • 通过yield关键字可以实现返回
  • 取值时需要使用next()
  • done表示这个方法是否已经执行结束,false表示没有执行结束,true表示执行结束
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function* g(x){
yield x+10;
yield x+11;
return x+12;
}

var g = g(10);
console.log(g.next());
// 输出{value: 20, done: false}
console.log(g.next());
// 输出{value: 21, done: false}
console.log(g.next());
// 输出{value: 22, done: true}
console.log(g.next());
// 输出{value: undefined, done: true}

// 使用for ... of获取所有的值
for(let x of g){
console.log(x);
// 输出20,21
}

修饰器Decorator

修饰器是一个函数,用来修改类的行为,需要使用Babel转码器转码才能使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 修饰器
@T
class User {
// 构造函数
constructor(name, age = 20){
this.name = name;
this.age = age;
}
}
// target对象为修饰的目标对象,目前是User
function T(target){
// 给User类添加一个静态属性country
target.country = "China";
}
// 打印,报错说明需要转码
console.log(User.country);

模块化

模块化主要有两个命令export 和 import

  • export命令用于规定模块的对外接口
  • import命令用于导入其他模块提供的功能
1
2
3
4
5
6
7
class Util {
static num = (a,b) => {
return a + b;
}
}
// 导出
export default Util;
1
2
// 导入
import Util from './Util';

相关文章

JavaScript基础

Jquery基础

Jquery高级

Bootstrap

Ajax和Json

DataTables

Sweetalert2

zTree使用

Vue

前端模块化