javascript基础02
学习目标
1.掌握js的ECMAScript6的新特性
2.掌握js的常用内置对象
3.掌握DOM编程
4.掌握BOM编程
5.掌握this关键字的含义
一、ES6新特性
1.1 反撇号表达式
es6推出新特性**``** 反撇号表达式,不仅可以描述字符串,还可以通过${对象.key}引入js中的对象内容。
示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>反撇号表达式</title>
<script>
let str = 'hello';
//反撇号可以像''一样描述字符串
let str2 = `hello`;
console.log(str);
console.log(str2);
let number = 3;
console.log(`hello${number}${str2}`)
let zhangSan= {
id:1,
name:'张三'
}
let arr = [1,2,3]
console.log(`hello${zhangSan.name}${arr[1]}`)
</script>
</head>
<body>
</body>
</html>
1.2 解构
解构赋值是一种快速为变量赋值的简洁语法,本质上仍然是为变量赋值;解构分为:
- 数组解构
- 对象解构
示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>解构</title>
<script>
//数组解构
let arr = [1,2,3];
//将数组内容赋值到a、b、c三个变量中
let [a,b,c] = arr;
console.log(a,b,c);
//对象解构
let obj = {
id:1,
name:'爱丽丝',
sex:'女'
}
//将对象的属性赋值到相同名字的变量中
let{id,name,sex} = obj;
console.log(id,name,sex);
</script>
</head>
<body>
</body>
</html>
1.3 对象字面量简化写法
对象字面量在es6中存在这简化写法,示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>对象字面量简写</title>
<script>
let id = 1;
let name = '张三';
let age = 18;
let obj = {
id:id,
name:name,
age:age
}
//es6可以简写
let obj2 = {
id,
name,
age,
eat(){
console.log('吃的香')
}
}
console.log(obj2)
obj2.eat();
</script>
</head>
<body>
</body>
</html>
1.4 箭头函数
箭头函数是对函数表达式的简写
js的箭头函数和java中的lambda表达式语法相似,java的lambda表达式借鉴的es6箭头函数语法;语法如下
当参数是一个的时候,存在如下简写
当方法体只有一句代码的时候,存在如下简写
函数的定义分为两种形式:
- 函数声明
- 函数表达式
而箭头函数是函数表达式的简写,所以箭头函数的使用场景是
- 存储在变量中的函数表达式
- 当作参数使用时
- 当作对象方法使用时
示例1:函数表达式简写为箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>剪头函数</title>
<script>
//函数表达式写法
let fun1 = function(a,b){
let res = a+b;
return res;
}
//箭头函数简写
let fun2 = (a,b)=>{
let res = a+b;
return res;
}
let res = fun2(1,2);
console.log(res);
//函数表达式写法
let fun3 = function(a){
console.log(a);
}
//箭头函数简写
let fun4 = a=>console.log(a);
fun4(3);
</script>
</head>
<body>
</body>
</html>
示例2:回调函数简写为箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>箭头函数应用场景</title>
<script>
//箭头函数在回调函数中应用
let arr = [1,2,3];
arr.forEach(value=>console.log(value));
let arr2 = arr.map(value=>value*10);
console.log(arr2);
</script>
</head>
<body>
</body>
</html>
示例3:箭头函数用在对象的方法上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>箭头函数3</title>
<script>
//正常写法
let user = {
id: 1,
name: '张三',
eat: function(food) {
console.log(`吃的${food}`);
}
}
//箭头函数
let user2 = {
id: 1,
name: '张三',
eat: food => console.log(`吃的${food}`)
}
user2.eat('鸡蛋西红柿');
</script>
</head>
<body>
</body>
</html>
1.5 小节
- 反撇号表达式
- 数组和对象的解构
- 对象字面量简写
- 箭头函数
二、内置对象
常见的内置对象有:
- Array(已讲)
- Date
- String
- Math
- JSON
2.1 Date
date的常用方法如下:
-
new Date() 创建对象,获得系统当前时间
-
toLocaleString() 将日期转为本地字符串 年月日 时分秒
-
toLocaleDateString() 将日期转为本地字符串 年月日
-
toLocaleTimeString()将日期转为本地字符串 时分秒
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>date的常用方法</title>
<script>
// 获得当前系统时间
let date = new Date();
console.log(date);
// 将日期转为本地字符串 年月日 时分秒
console.log(date.toLocaleString())
// 将日期转为本地字符串 年月日
console.log(date.toLocaleDateString())
// 将日期转为本地字符串 年月日 时分秒
console.log(date.toLocaleTimeString());
</script>
</head>
<body>
</body>
</html>
2.2 String
String的常用方法如下:
- length------>字符串的长度
- charAt(索引),返回值是指定索引位置的字符串,超出索引,结果是空字符串
- indexOf(要找的字符串,从某个位置开始的索引);返回的是这个字符串的索引值,没找到则返回-1
- lastIndexOf(要找的字符串);从后向前找,但是索引仍然是从左向右的方式,找不到则返回-1
- replace(“原来的字符串”,“新的字符串”);用来替换字符串的
- split(“要干掉的字符串”,切割后留下的个数);切割字符串
- substr(开始的位置,个数);返回的是截取后的新的字符串
- substring(开始的索引,结束的索引),返回截取后的字符串,不包含结束的索引的字符串
- toLocaleLowerCase();转小写
- toLowerCase();转小写
- toLocaleUpperCase()转大写
- toUpperCase();转大写
- trim();干掉字符串两端的空格
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String 常用方法</title>
<script>
let str = ' abcdefgc ';
// - length------>字符串的长度
console.log(str.length);
// - charAt(索引),返回值是指定索引位置的字符串,超出索引,结果是空字符串
console.log(str.charAt(2));
// - indexOf(要找的字符串,从某个位置开始的索引);返回的是这个字符串的索引值,没找到则返回-1
console.log(str.indexOf('c'))
// - lastIndexOf(要找的字符串);从后向前找,但是索引仍然是从左向右的方式,找不到则返回-1
console.log(str.lastIndexOf('c'));
// - replace("原来的字符串","新的字符串");用来替换字符串的
console.log(str.replace('d', 'D'));
// - split("要干掉的字符串",切割后留下的个数);切割字符串
console.log(str.split('e'));
// - substr(开始的位置,个数);返回的是截取后的新的字符串
console.log(str.substr(0, 3));
// - substring(开始的索引,结束的索引),返回截取后的字符串,不包含结束的索引的字符串
console.log(str.substring(0, 3));
// - toLowerCase();转小写
console.log(str.toLowerCase());
// - toUpperCase();转大写
console.log(str.toUpperCase());
// - trim();干掉字符串两端的空格
console.log(str.trim());
</script>
</head>
<body>
</body>
</html>
2.3 Math
Math的常用方法如下:
- random:生成0-1之间的随机数(包含0不包括1)
- ceil:向上取整
- floor:向下取整
- max:找最大数
- min:找最小数
- pow:幂运算
- abs:绝对值
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Math的常用方法</title>
<script>
// 生成0-1之间的随机数(包含0不包括1)
console.log(Math.random())
// ceil:向上取整
console.log(Math.ceil(7.1));
// floor:向下取整
console.log(Math.floor(7.9));
// max:找最大数
console.log(Math.max(1, 2, 9, 3));
// min:找最小数
console.log(Math.min(1, 2, 3, -5));
// pow:幂运算
console.log(Math.pow(2, 3));
// abs:绝对值
console.log(Math.abs(-10));
</script>
</head>
<body>
</body>
</html>
2.4 JSON
2.4.1 JSON 数据格式
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成。
实际开发网站中,经常由服务器响应json数据,然后由js将json数据渲染到页面。
json数据分为数组和对象两种格式,语法如下:
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>json数据格式</title>
<script>
//定义json对象属性名必须是String类型
let jsonObj = {
'id': 1,
'name': '张三',
'age': 18
}
//使用json数据
console.log(jsonObj.id);
console.log(jsonObj.name);
console.log(jsonObj.age);
//定义json数组
let jsonStr = [1, 2, 3, 4, 5];
//使用json
console.log(jsonStr[0]);
// 定义复杂json类型
let arrs = [{
'id': 1,
'name': '张三',
'age': 18
}, {
'id': 2,
'name': '李四',
'age': 29
}]
// 使用json
for (let i = 0; i < arrs.length; i++) {
console.log(arrs[i].id);
console.log(arrs[i].name);
console.log(arrs[i].age);
}
</script>
</head>
<body>
</body>
</html>
2.4.2 JSON 对象常用方法(易忘点)
JSON的常用方法如下:
- parse() 将json字符串转为js对象或数组
- stringif()将js对象或数组转为json字符串
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON</title>
<script>
//js对象
let user = {
id: 1,
name: '张三',
age: 21,
eat: function() {
}
}
//js对象转json对象,如果存在方法直接舍去
let data = JSON.stringify(user);
console.log(data);
console.log(typeof data);
// json数据转js对象
let obj = JSON.parse(data);
console.log(typeof obj);
console.log(obj.id);
console.log(obj.name);
console.log(obj.age);
</script>
</head>
<body>
</body>
</html>
2.5 小结(默写)
- Array常用方法
push()//添加元素到数组的尾部
unshift()//添加元素到数组的头部
pop()//从尾部弹出一个元素
shift()//从头部弹出一个元素
splice()//从某个位置开始删除指定个数的元素
forEach()//遍历数组
join()//数组转字符串
filter()//过滤 参数为回调函数
map()//对元素进行集体操作 参数为回调函数
- Date常用方法
toLocalString()//获取字符串形式的时间
toLocalDateString()//获取字符串形式的日期
toLocalTimeString()//获取字符串形式的时分秒
- String常用方法
length//注:length不是方法而是一个属性
charAt()//返回某个位置的字符
indexof()//从某个位置开始查询字符的位置
tolastIndexof()//从后向前获取需要查询字符的位置
split()//分割函数,返回字符串数组
replace()//替换函数,只会替换第一个
replaceAll()//替换函数,会替换全部
substr()//从某个位置截取一定长度的字符串
substring()//从某个位置开始再从某个位置结束,截取之间的字符串
toUppercase()//转大写
toLocalUpperCase()//转大写
tolowercase()//转小写
toLocallowercase()//转小写
trim()//删除字符串两端的空格
- Math常用方法
Math.ceil()//向上取整
Math.floor()//向下取整
Math.max()//求最大值
Math.min()//求最小值
Math.pow()//求幂
Math.abs()//求绝对值
- JSON常用方法
parse()//将json转为对象或数组
stringify()//将对象或数组转为json
三、 DOM
当网页被加载时,浏览器会创建页面的文档对象模型DOM(Document Object Model)。
通过 HTML DOM,JavaScript 能够访问和改变 HTML 文档的所有元素。
3.1 获取元素的方式
当网页被加载时,页面文档的所有标签元素都会被加载到document对象中,document对象代表的就是html文档。
通过document获得元素标签对象的方法如下:
-
document.getElementById(id); 根据id获取元素节点
-
document.getElementsByTagName(“标签名字”);
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获得标签元素的几种方式</title>
</head>
<body>
<div id="adv">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</div>
</body>
<script>
let adv = document.getElementById('adv');
console.log(adv);
let lis = adv.getElementsByTagName('li');
for (let i = 0; i < lis.length; i++) {
console.log(lis[i])
}
</script>
</html>
3.2 设置元素的内容
设置元素的内容有两种方式:
- 元素对象.innerHTML 设置/获取元素内的所有内容
- 元素对象.innerText 设置/获取元素内的所有文本
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设置/获取元素内容</title>
</head>
<body>
<div id="logo">
<h1>胖叔讲Java</h1>
</div>
</body>
<script>
let logo = document.getElementById('logo');
//获得logo内的所有内容包含h1标签
console.log(logo.innerHTML);
//获得logo内的文本,不包含标签名字
console.log(logo.innerText)
//设置logo内容
// logo.innerHTML = '<h1>胖叔讲js</h1';
// 设置logo内容 如果有标签元素会转义成文本
logo.innerText = '<h1>胖叔讲js</h1>'
</script>
</html>
3.3 设置元素的属性
设置元素的属性有以下几种方式:
- 元素对象.属性 ,只能操作标签内置的属性
- 元素对象.setAttribute(‘属性名字’,属性值) 能够操作自定义属性
- 元素对象.getAttribute(‘属性名字’) 能够操作自定义属性
- 元素对象.removeAttribute(‘属性名字’) 能够操作自定义属性
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设置元素属性</title>
</head>
<body>
<a id="mya">链接</a>
</body>
<script>
let a = document.getElementById('mya');
//设置属性,只能设置a标签有的属性
a.href = 'http://www.baidu.com';
//获取属性
console.log(a.href);
//设置自定义属性
a.setAttribute('active', true);
console.log(a);
//获得自定义属性
console.log(a.getAttribute('active'));
//也可以获得内置属性
console.log(a.getAttribute('href'));
//删除属性
a.removeAttribute('active')
console.log(a);
</script>
</html>
3.4 设置元素的样式
设置元素的样式的语法如下:
- 元素对象.style.css属性 (只能获取行内式样式,操作样式也是通过行内式操作)
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设置元素的样式</title>
</head>
<body>
<div id="adv"></div>
</body>
<script>
let adv = document.getElementById('adv');
adv.style.width = '100px';
adv.style.height = '100px';
// 注意多个单词用驼峰式书写
adv.style.backgroundColor = 'red';
</script>
</html>
3.5 JS 事件操作
js事件是指触发某个动作完成一些操作的过程;例如点击按钮弹出一个弹框就用到了点击事件。
js中有很多事件,这里面我们指讲几个常见的事件;常见事件如下:
- window.onload = function(){} 加载事件,会等浏览器加载完页面再去执行js代码
- 鼠标事件
- 点击事件 onclick
- 移出元素事件 onmousemove
- 移入元素事件 onmouseout
- 键盘事件
- 键盘按下事件
- 键盘弹起事件
示例1:页面加载事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面加载事件</title>
<script>
// 该函数的作用是,页面加载完再去运行js代码,这样即便js写在 div上面也能获取到div元素
window.onload = function() {
let adv = document.getElementById('adv');
console.log(adv);
}
</script>
</head>
<body>
<div id="adv">胖叔讲Java,一路相伴</div>
</body>
</html>
示例2:点击事件与事件的绑定方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击事件与事件的绑定方式</title>
</head>
<body>
<!-- 第一种方式:在标签上直接引入事件和js代码 -->
<button onclick="alert('点击1')">点击1</button>
<!-- 第二种方式:标签和js半分离 -->
<button onclick="fun2()">点击2</button>
<script>
function fun2() {
alert('点击2')
}
</script>
<!-- 第三种方式:标签和js代码彻底分离 推荐 -->
<button id="btn">点击3</button>
<script>
document.getElementById('btn').onclick = function() {
alert('点击3')
}
</script>
</body>
</html>
示例3:鼠标移入与移出事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标移入移出事件</title>
</head>
<body>
<div id="adv" style="width:100px;height:100px"></div>
<script>
//鼠标移入事件 this在这里表示事件源
document.getElementById('adv').onmousemove = function() {
this.style.backgroundColor = 'red';
}
//鼠标移出事件 this在这里表示事件源
document.getElementById('adv').onmouseout = function() {
this.style.backgroundColor = 'blue';
}
</script>
</body>
</html>
示例4:键盘按下与弹起事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘按下与弹起事件</title>
</head>
<body>
请输入<input id="name" type="text" />
<script>
//键盘按下 this代表事件源
document.getElementById('name').onkeydown = function() {
this.style.backgroundColor = 'red';
}
//键盘弹起
document.getElementById('name').onkeyup = function() {
this.style.backgroundColor = 'blue';
}
</script>
</body>
</html>
3.6 综合案例(练)
完成表单的多选框的全选/全不选 反选
参考答案:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>综合案例</title>
<script>
window.onload = function() {
document.getElementById("chooseAll").onclick = function() {
let arr = document.getElementsByName("hobby")
for (let i = 0; i < arr.length; i++) {
arr[i].checked = this.checked
}
}
document.getElementById("btn").onclick = function() {
let arr = document.getElementsByName("hobby")
for (let i = 0; i < arr.length; i++) {
arr[i].checked = !arr[i].checked
}
}
}
</script>
</head>
<body>
全选/全不选<input type="checkbox" id="chooseAll">
<button id="btn">反选</button> 爱好: 唱
<input type="checkbox" name="hobby"> 跳
<input type="checkbox" name="hobby"> rap
<input type="checkbox" name="hobby"> 篮球
<input type="checkbox" name="hobby">
</body>
</html>
3.7 小结
- 获取元素
- 设置元素的内容、属性、样式
- js事件处理
四、BOM
BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。
4.1 对话框
之前已经学习过了alert(),prompt()弹框,其实还有一个confirm()弹框,这三个弹框都所属window对象;
- alert 弹框
- prompt 输入弹框
- confrim 确认弹框
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹框</title>
<script>
// 普通提示弹框 window可以省略
window.alert('弹框');
// 提示用户输入弹框
let num = window.prompt('请输入一个整数');
console.log(num);
let tag = window.confirm('你确认删除吗?');
if (tag) {
console.log('删除');
}
</script>
</head>
<body>
</body>
</html>
4.2 定时器
定时器分为两种一种是循环执行定时器,一种是一次性定时器,如下所示:
- setInterval() 循环执行定时器
- setTimeout() 一次性定时器
示例1:动态显示时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<span id="time"></span>
<button id="btn">停止</button>
<script>
//初始化时间
let time = document.getElementById('time');
time.innerHTML = new Date().toLocaleString();
//编写定时器,每1s更新时间,返回定时器id
let timeId = window.setInterval(go, 1000);
//定时调用的方法
function go() {
time.innerHTML = new Date().toLocaleString();
}
// 通过id停止定时器运行
document.getElementById('btn').onclick = function() {
window.clearInterval(timeId);
}
</script>
</body>
</html>
示例2:一次性定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定时器2</title>
</head>
<body>
<h1 id="title">胖叔讲Java</h1>
<script>
let h1 = document.getElementById('title');
window.setTimeout(() => {
h1.innerHTML = "hello"
}, 1000)
window.setTimeout(() => {
h1.innerHTML = "胖叔讲Java"
}, 2000)
</script>
</body>
</html>
4.3 location
location对象是window对象下的一个属性,使用的时候可以省略window对象,location可以获取或者设置浏览器地址栏的URL
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>location对象</title>
</head>
<body>
<button id="btn">百度</button>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
//查看访问的ip以及端口号
console.log(location.host);
//1.重定向
//location.href="http://www.baidu.com";
//2.刷新
//location.reload();
}
</script>
</body>
</html>
4.4 history
history对象封装浏览的浏览记录,可以实现浏览器的返回功能。
示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>history对象</title>
</head>
<body>
<a href="test.html">跳转</a>
</body>
</html>
test.html如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<button id="btn">回退</button>
<script type="text/javascript">
document.getElementById("btn").onclick = function(){
history.back();
}
</script>
</body>
</html>
4.5 小结
-
对话框
-
定时器
-
location 对象
-
history 对象
五、this关键字指向(难点)
this关键在不同场景对应的功能也不同,具体指向如下所示:
调用方式 | 指向 |
---|---|
普通函数调用 | window |
构造函数调用 | 实例对象 |
对象方法调用 | 该方法所属对象 |
事件绑定方法 | 绑定事件对象 |
定时器函数 | window |
箭头函数 | this的值基于函数周围的上下文, 换句话说,this的值和函数外面的this的值是一样的. |
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>this的指向</title>
</head>
<body>
<button id="btn">点击</button>
<script>
//普通函数this指向window
function fun1(){
console.log(this);
}
fun1();
function Person(id,name,sex){
this.id=id;
this.name=name;
this.sex=sex;
this.eat=function(){
//构造函数this指向当前实例
console.log(this);
}
}
let xiaoHong = new Person(1,'小红','女');
xiaoHong.eat();
// document.getElementById("btn").onclick = function(){
// //点击事件指向事件源
// console.log(this);
// }
// window.setInterval(function(){
// //定时器this指向window
// console.log(this);
// },1000);
document.getElementById("btn").onclick = function(){
//箭头函数this指向上下文
window.setInterval(()=>{
console.log(this);
console.log('点击');
},1000);
}
</script>
</body>
</html>
六、总结
- es6新特性
- 内置对象
- DOM
- BOM
- this关键字指向