[知了堂学习笔记]_JavaScript

最新推荐文章于 2021-09-17 07:54:43 发布

qq_38316503

最新推荐文章于 2021-09-17 07:54:43 发布

阅读量321

点赞数

分类专栏： Java Web

本文链接：https://blog.csdn.net/qq_38316503/article/details/78760703

版权

Java 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

Web

5 篇文章 0 订阅

订阅专栏

请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php
JavaScript
1. JavaScript了解
1.1JavaScript的概念
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
1.2 JavaScript的特点
JavaScript 是属于网络的脚本语言！
JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。
JavaScript 是因特网上最流行的脚本语言。
JavaScript 很容易使用！你一定会喜欢它的！
1.3 JavaScript适合水平
JavaScript web 开发人员必须学习的 3 门语言中的一门
 HTML 定义了网页的内容
 CSS 描述了网页的布局
 JavaScript 网页的行为
2. JavaScript入门
2.1 JavaScript编写位置

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
也可用<script src=”xxx.js”></script>进行外部引入JS文件。

2.2 第一个JavaScript程序

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
    alert("Hello World");
  </script>
 </head>
 <body>

 </body>
</html>

运行结果：
这里写图片描述

2.3 <script>标签
如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script> 之间的代码行包含了 JavaScript：
<script>
alert("My First JavaScript");
</script>
您无需理解上面的代码。只需明白，浏览器会解释并执行位于 <script> 和 </script> 之间的 JavaScript。
那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

2.4 JavaScript编程规范
2.4.1 命名规范

驼峰式命名法由小(大)写字母开始，后续每个单词首字母都大写
 大驼峰式命名法：首字母大写。StudentInfo、UserInfo、ProductInfo
 小驼峰式命名法：首字母小写。studentInfo、userInfo、productInfo
2.4.1.1大驼峰式命名法
这里写图片描述
2.4.1.2 小驼峰式命名法

2.4.1.3 其他命名方式

3. Java语法基础
3.1 JavaScript变量
变量是存储信息的容器，简单理解它可以帮助我们存储数字，字符，汉字等等
var 变量名 [= 值];
变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）
3.2 JavaScript数据类型
这里写图片描述
3.3 JavaScript运算符
3.3.1 算术运算符
给定 y=5，下面的表格解释了这些算术运算符：

3.3.2 赋值运算符
给定 y=5，下面的表格解释了这些赋值运算符：

3.3.3 比较运算符
比较运算符又称为关系运算符
比较运算符的计算结果只有两种值：true 或 false
这里写图片描述
3.3.4 逻辑运算符
逻辑运算符是对两个布尔值类型做运算，且计算后的结果也是一个布尔值

3.1.5 字符串+运算符
字符串 + 运算符用于把文本值或字符串变量加起来（连接起来）

3.3.6 条件运算符
这里写图片描述
3.3.7 typeof运算符
typeof 主要计算某个变量的数据类型是什么
语法：typeof 变量

3.4 控制语句
3.4.1 if条件控制语句
通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。
在 JavaScript 中，我们可使用以下条件语句：
• if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
• if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
• if…else if….else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行

If 语句
只有当指定条件为 true 时，该语句才会执行代码。语法
if (condition)
{
    当条件为 true 时执行的代码
}
请使用小写的 if。使用大写字母（IF）会生成 JavaScript 错误！
实例
当时间小于 20:00 时，生成问候 "Good day"：
if (time<20) { x="Good day"; }
x 的结果是：
Good day
If...else 语句
请使用 if....else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。
语法
if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}

3.4.2 switch条件控制语句

请使用 switch 语句来选择要执行的多个代码块之一。
语法
switch(n) { case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; default: 与 case 1 和 case 2 不同时执行的代码 }
工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

3.4.3 for循环
循环的意思大家应该都知道，它可以让程序自动对一段代码进行重复的执行
for 循环是用得比较多一种程序设计语句，下面是它的语法
for 循环是您在希望创建循环时常会用到的工具。
下面是 for 循环的语法：
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
语句 1 （代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行
3.4.4 while循环

while 循环会在指定条件为真时循环执行代码块。
语法
while (条件)
{
    需要执行的代码
}
实例
本例中的循环将继续运行，只要变量 i 小于 5：
实例
while (i<5) { x=x + "The number is " + i + "<br>"; i++; }

3.4.5 do…while循环
do/while 循环是 while 循环的变体。该循环会执行一次代码块，在检查条件是否为真之前，然
后如果条件为真的话，就会重复这个循环
这里写图片描述
3.4.6 break语句

break 语句，它用于跳出 switch() 语句。
break 语句可用于跳出循环。
continue 语句跳出循环后，会继续执行该循环之后的代码（如果有的话）：
实例
for (i=0;i<10;i++) { if (i==3) { break; } x=x + "The number is " + i + "<br>"; }
由于这个 if 语句只有一行代码，所以可以省略花括号：
for (i=0;i<10;i++) { if (i==3) break; x=x + "The number is " + i + "<br>"; }

3.4.7 continue语句

continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。 该例子跳过了值 3：
实例
for (i=0;i<=10;i++) { if (i==3) continue; x=x + "The number is " + i + "<br>"; }

4. JS DOM操作
4.1 DOM的概念
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。
4.2 DOM的学习路线
这里写图片描述
4.3 DOM的地位

4.4 DOM文档树

4.5 DOM节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
• 整个文档是一个文档节点
• 每个 HTML 元素是元素节点
• HTML 元素内的文本是文本节点
• 每个 HTML 属性是属性节点
• 注释是注释节点
4.6 查找HTML元素
大家想使用 JS 去操作 HTML 中的元素，首要必须找到该元素
 在 JS 中有三种方式来做到这件事
 通过 id 找到 HTML 元素
 通过标签名找到 HTML 元素
 通过类名找到 HTML 元素
 通过 id 找到 HTML 元素

 如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素
 如果未找到该元素，则 x 将包含 null。

通过标签名找到 HTML 元素
var x = document.getElementsByTagName(“p”);
 通过类名找元素节点
var x = document.getElementsByClassName(“p”);
4.7 改变HTML内容
 修改 HTML 内容的最简单的方法时使用 innerHTML 属性
 除了 innerHTML 属性，还有一个属性是 innerText 属性，此属性只能对改变 HTML 中的文本内容
 语法：
document.getElementById(id).innerHTML = 新的 HTML
document.getElementById(id).innerText = 新的文档内容
4.8 改变HTML属性
需要改变 HTML 属性可以使用下面的语法
document.getElementById(id).attribute=新属性值
4.9 改变HTML样式
需要改变 HTML 元素的样式，可以使用下面的语法
document.getElementById(id).style.property=新样式
4.10 创建HTML元素节点
在创建 HTML 元素节点，需要利用 document.createElement( 节点名称)
因为大家都知道 HTML 是一个文档树，所以每个 HTML 元素之间必然有子父关系。如果要将新
创建好的元素节点加入到文档中，需要利用 node.appendChild( 节点对象)
这里写图片描述
4.11 删除元素节点

5. JS内置对象
5.1 JS Array对象
利用单个变量中存储多个值
5.1.1 JS Array语法

5.1.2 JS Array方法

5.2 JS Math对象
Math 对象用于执行数学任务，提供大量数学中的计算公式
5.2.1 JS Math语法
Math 对象并不像 Array 那样是对象的类，没有构造函数 Math()，因此我们在使用 Math 时候，可以直接通过 Math 对象就可方法它提供的方法和属性
这里写图片描述
5.2.2 JS Math方法

5.3 JS String对象
String 对象用于处理文本（字符串）
5.3.1 JS String语法

5.3.2 JS String方法

5.4 JS Date对象
Date 对象用于处理日期和时间
5.4.1 JS Date语法

5.4.2 JS Date方法
这里写图片描述
5.5 JS RegExp对象
RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具
5.5.1 JS RegExp语法

5.5.2 JS RegExp方法

5.5.3 test()方法

test()方法是一个正则表达式方法，用于检测一个字符串是否匹配某个模式，如果字符串中含有
匹配的文本，则返回 true，否则返回 false

<script>
// test()方法的用法
// 判断是否是数字
var str = "123456789";
var pattern = /\D/; // D 代表非数字，如果是非数字返回 true
console.log("判断是否是数字 : " + pattern.test(str));
// 判断是否带有小数
str = "12.78";
pattern = /^\d+\.\d+$/;
console.log("判断是否带有小数 : " + pattern.test(str));
// 判断 26 个英文字母
str = "ZhiLiaoTang";
pattern = /^[a-zA-z]+$/;
console.log("判断 26 个英文字母 : " + pattern.test(str));
// 中文、英文、数字包括下划线
str = "ZhiLiaoTang_JavaScript";
pattern = /^[\u4E00-\u9FA5A-Za-z0-9_]+$/;
console.log("中文、英文、数字包括下划线 : " + pattern.test(str));
</script>

5.5.4 search()方法

search()：在字符串搜索符合正则的内容，搜索到就返回出现的位置（从 0 开始，如果匹配的不
只是一个字母，那只会返回第一个字母的位置）， 如果搜索失败就返回 -1

<script>
// 搜索字符串中包含字母 B
str = "ZhiLiaoTang";
pattern = /B/i;
console.log("搜索字符串中包含字母 B : " + str.search(pattern));
</script>

5.5.5 match()方法

match()在字符串中搜索符合规则的内容，搜索成功就返回内容，格式为数组，失败就返回 null。

<script>
// 搜索数字并返回找到的数字
str = "haj123sdk54hask33dkhalsd879";
pattern = /\d+/g;
console.log("搜索数字并返回找到的数字 : " + str.match(pattern));
</script>

5.5.6 常用正则表达式
一、校验数字的表达式
1 数字：^[0-9]* $2 n位的数字：^\d{n}$
3 至少n位的数字：^\d{n,} $4 m-n位的数字：^\d{m,n}$
5 零和非零开头的数字：^(0|[1-9][0-9]*) $6 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$
7 带1-2位小数的正数或负数：^(-)?\d+(.\d{1,2})? $8 正数、负数、和小数：^(-|+)?\d+(.\d+)?$
9 有两位小数的正实数：^[0-9]+(.[0-9]{2})? $10 有1~3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$
11 非零的正整数：^[1-9]\d* $或 ^([1-9][0-9]*){1,3}$ 或 ^+?[1-9][0-9]* $12 非零的负整数：^-[1-9][]0-9”*$ 或 ^-[1-9]\d* $13 非负整数：^\d+$ 或 ^[1-9]\d*|0 $14 非正整数：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+)) $15 非负浮点数：^\d+(.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0 $16 非正浮点数：^((-\d+(.\d+)?)|(0+(.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0 $17 正浮点数：^[1-9]\d*.\d*|0.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)) $18 负浮点数：^-([1-9]\d*.\d*|0.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))) $19 浮点数：^(-?\d+)(.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$
二、校验字符的表达式
1 汉字：^[\u4e00-\u9fa5]{0,} $2 英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40} $3 长度为3-20的所有字符：^.{3,20}$
4 由26个英文字母组成的字符串：^[A-Za-z]+ $5 由26个大写英文字母组成的字符串：^[A-Z]+$
6 由26个小写英文字母组成的字符串：^[a-z]+ $7 由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$
8 由数字、26个英文字母或者下划线组成的字符串：^\w+ $或 ^\w{3,20}$
9 中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+ $10 中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20} $11 可以输入含有^%&’,;=?$ \"等字符：[^%&',;=?$\x22]+
12 禁止输入含有~的字符：[^~\x22]+
三、特殊需求表达式
1 Email地址：^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$
2 域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
3 InternetURL：[a-zA-z]+://[^\s]* 或 ^http://([\w-]+.)+[\w-]+(/[\w-./?%&=]*)? $4 手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
5 电话号码(“XXX-XXXXXXX”、”XXXX-XXXXXXXX”、”XXX-XXXXXXX”、”XXX-XXXXXXXX”、”XXXXXXX”和”XXXXXXXX)：^((\d{3,4}-)|\d{3.4}-)?\d{7,8} $6 国内电话号码(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7} 7 身份证号(15位、18位数字)：^\d{15}|\d{18}$
8 短身份证号码(数字、字母x结尾)：^([0-9]){7,18}(x|X)? $或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$
9 帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15} $10 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$
11 强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,10} $12 日期格式：^\d{4}-\d{1,2}-\d{1,2} 13 一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$
14 一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31) $15 钱的输入格式： 16 1.有四种钱的表示形式我们可以接受:”10000.00” 和 “10,000.00”, 和没有 “分” 的 “10000” 和 “10,000”：^[1-9][0-9]*$
17 2.这表示任意一个不以0开头的数字,但是,这也意味着一个字符”0”不通过,所以我们采用下面的形式：^(0|[1-9][0-9]*) $18 3.一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号：^(0|-?[1-9][0-9]*)$
19 4.这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧.下面我们要加的是说明可能的小数部分：^[0-9]+(.[0-9]+)? $20 5.必须说明的是,小数点后面至少应该有1位数,所以”10.”是不通过的,但是 “10” 和 “10.2” 是通过的：^[0-9]+(.[0-9]{2})?$
21 6.这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样：^[0-9]+(.[0-9]{1,2})? $22 7.这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样：^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$
23 8.1到3个数字,后面跟着任意个逗号+3个数字,逗号成为可选,而不是必须：^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})? $24 备注：这就是最终结果了,别忘了”+”可以用”*”替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里 25 xml文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+\.[x|X][m|M][l|L]$
26 中文字符的正则表达式：[\u4e00-\u9fa5]
27 双字节字符：[^\x00-\xff] (包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1))
28 空白行的正则表达式：\n\s*\r (可以用来删除空白行)
29 HTML标记的正则表达式：<(\S*?)[^>]>.?

30 首尾空白字符的正则表达式：^\s*|\s*$或(^\s*)|(\s*$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)
31 腾讯QQ号：[1-9][0-9]{4,} (腾讯QQ号从10000开始)
32 中国邮政编码：[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)
33 IP地址：\d+\.\d+\.\d+\.\d+ (提取IP地址时有用)
34 IP地址：((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))

6. JS BOM对象
BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
6.1 Window对象
6.1.1 window对象描述
Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写 document，而不必写 window.document。
同样，可以把当前窗口对象的方法当作函数来使用，如只写 alert()，而不必写 Window.alert()。
除了上面列出的属性和方法，Window 对象还实现了核心 JavaScript 所定义的所有全局属性和方法。
Window 对象的 window 属性和 self 属性引用的都是它自己。当你想明确地引用当前窗口，而不仅仅是隐式地引用它时，可以使用这两个属性。除了这两个属性之外，parent 属性、top 属性以及 frame[] 数组都引用了与当前 Window 对象相关的其他 Window 对象。
要引用窗口中的一个框架，可以使用如下语法：
frame[i] //当前窗口的框架
self.frame[i] //当前窗口的框架
w.frame[i] //窗口 w 的框架
要引用一个框架的父窗口（或父框架），可以使用下面的语法：
parent //当前窗口的父窗口
self.parent //当前窗口的父窗口
w.parent //窗口 w 的父窗口
要从顶层窗口含有的任何一个框架中引用它，可以使用如下语法：
top //当前框架的顶层窗口
self.top //当前框架的顶层窗口
f.top //框架 f 的顶层窗口
新的顶层浏览器窗口由方法 Window.open() 创建。当调用该方法时，应把 open() 调用的返回值存储在一个变量中，然后使用那个变量来引用新窗口。新窗口的 opener 属性反过来引用了打开它的那个窗口。
一般来说，Window 对象的方法都是对浏览器窗口或框架进行某种操作。而 alert() 方法、confirm() 方法和 prompt 方法则不同，它们通过简单的对话框与用户进行交互。
6.1.2 window对象方法
这里写图片描述

6.2 Navigator对象
6.2.1 Navigator对象描述
Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。
虽然这个对象的名称显而易见的是 Netscape 的 Navigator 浏览器，但其他实现了 JavaScript 的浏览器也支持这个对象。
Navigator 对象的实例是唯一的，可以用 Window 对象的 navigator 属性来引用它。
6.2.2 Navigator对象方法
这里写图片描述
6.3 Screen对象
6.3.1 Screen对象描述
每个 Window 对象的 screen 属性都引用一个 Screen 对象。Screen 对象中存放着有关显示浏览器屏幕的信息。JavaScript 程序将利用这些信息来优化它们的输出，以达到用户的显示要求。例如，一个程序可以根据显示器的尺寸选择使用大图像还是使用小图像，它还可以根据显示器的颜色深度选择使用 16 位色还是使用 8 位色的图形。另外，JavaScript 程序还能根据有关屏幕尺寸的信息将新的浏览器窗口定位在屏幕中间。
6.4 History对象
6.4.1 History对象描述
History 对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因，History 对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。

例子
下面一行代码执行的操作与单击后退按钮执行的操作一样：
history.back()
下面一行代码执行的操作与单击两次后退按钮执行的操作一样：
history.go(-2)
6.4.2 History对象方法
这里写图片描述
6.5 Location对象
6.5.1 Location对象描述
Location 对象存储在 Window 对象的 Location 属性中，表示那个窗口中当前显示的文档的 Web 地址。它的 href 属性存放的是文档的完整 URL，其他属性则分别描述了 URL 的各个部分。这些属性与 Anchor 对象（或 Area 对象）的 URL 属性非常相似。当一个 Location 对象被转换成字符串，href 属性的值被返回。这意味着你可以使用表达式 location 来替代 location.href。
不过 Anchor 对象表示的是文档中的超链接，Location 对象表示的却是浏览器当前显示的文档的 URL（或位置）。但是 Location 对象所能做的远远不止这些，它还能控制浏览器显示的文档的位置。如果把一个含有 URL 的字符串赋予 Location 对象或它的 href 属性，浏览器就会把新的 URL 所指的文档装载进来，并显示出来。
除了设置 location 或 location.href 用完整的 URL 替换当前的 URL 之外，还可以修改部分 URL，只需要给 Location 对象的其他属性赋值即可。这样做就会创建新的 URL，其中的一部分与原来的 URL 不同，浏览器会将它装载并显示出来。例如，假设设置了Location对象的 hash 属性，那么浏览器就会转移到当前文档中的一个指定的位置。同样，如果设置了 search 属性，那么浏览器就会重新装载附加了新的查询字符串的 URL。
除了 URL 属性外，Location 对象的 reload() 方法可以重新装载当前文档，replace() 可以装载一个新文档而无须为它创建一个新的历史记录，也就是说，在浏览器的历史列表中，新文档将替换当前文档。
6.5.2 Location对象方法
这里写图片描述

qq_38316503

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[知了堂学习笔记]_JavaScript

请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php JavaScript 1. JavaScript了解 1.1JavaScript的概念 JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在H
复制链接

扫一扫