Web前端知识系统学习(简化版)

最新推荐文章于 2025-03-16 13:44:00 发布

迟到_啦

最新推荐文章于 2025-03-16 13:44:00 发布

阅读量1.6k

点赞数

分类专栏：前端学习版块文章标签：大前端 JavaScript html css

本文链接：https://blog.youkuaiyun.com/qq_19314763/article/details/110881712

版权

前端学习版块专栏收录该内容

7 篇文章

订阅专栏

思维导图预览

在这里插入图片描述

一、HTML

1、HTML介绍和规范

2、HTML使用

2.1 body三个属性

text：字体颜色
bgcolor：背景颜色
background：背景图片

2.2 换行标签

<br/>

/ 可有可无

2.3 段落标签

<p>

常用属性align，表示对齐方式，取值为：left、right、center

2.4 水平线标签

<hr>

常用属性：
1. align：水平线位置，取值为left、right、center
2. size：水平线粗细
3. width：水平线宽度
4. color：水平线颜色

2.5 分区标签-作为容器标签

<div>：不会自动换行，也叫块级元素，用于整体划分区块
<span>：会自动换行，也叫行内元素，用于局部划分区块

2.6 字体标签3个属性

face：设置字体，例如宋体、隶书、楷体
size：设置字体大小（大小默认是1-7，7为最大）

color：字体颜色

 百度搜索：字魂网，下载一个免费字体，安装到计算机

2.7 格式化标签

<b>：字体加粗
<i>：字体倾斜
<del>：删除线
<u>：下划线

2.8 列表标签

ol
- type = ‘A’ : 字母排序
- type = ‘1’ ：数字排序
- type = ‘I’　：罗马数字排序
- start = ‘3’ : 顺序从几开始
ul
- 默认：实心圆
- type = ‘circle’ : 空心圆
- type = ‘square’ : 方块

2.9 图像标签

<img>可以让我们在网页引入一张图片，常用属性：

src 代表的图片的路径
width 图片的宽度
height 图片的高度
border 用于设置图片的边框
alt 如果图片不可以显示时，默认显示的文本信息
title鼠标悬停图片上，默认显示的文本信息
align 图片附件文字的对齐方式，可取值有
left：把图像对齐到左边
right：把图像对齐到右边
middle：把图像与中央对齐
top：把图像与顶部对齐
bottom：把图像与底部对齐（默认）

2.10 超链接标签

功能性超链接（了解，几乎不用）

发送邮件

  <a href="mailto:sunguoan@163.com">联系站长\</a>

QQ聊天窗口

  <a href="tencent://message/?uin=19998539&Menu=yes">
  	<img border="0" src="http://wpa.qq.com/pa?p=1:615050000:7"/>
  </a>

2.11 表格标签

<table>：定义一个表格
border：边框，取值是像素为单位
width 代表的表格的宽度
align 代表表格的对齐方式；取值
left 左对齐表格
right 右对齐表格
center 居中对齐表格
cellspacing：单元格间距（通常设置0表示单线表格）
<tr>：表格中的行 （Table Row）
align 代表表格的对齐方式；取值
left 左对齐内容（默认值）
right 右对齐内容
center 居中对齐内容（th 元素的默认值）
<td>：表格中的数据单元格 （Table DataCell）
colspan 指示列的合并
<a href="mailto:sunguoan@163.com">联系站长</a>
<a href="tencent://message/?uin=19998539&Menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=1:615050000:7"/>
</a>
rowspan 指示行的合并

2.12 表单标签

form属性
- action：整个表单提交的目的地
- method：表单提交的方式
  - get：提交时，传输数据量少（传递普通文字信息，传递照片会失败），明文提交（在浏览器的url后面会显示提交的数据，不适合用于登录）
  - post：提交时，传输数据量大（传递文字和图片都行），密文提交（浏览器的url后面看不到提交的数据）
表单中的元素
- <input>元素的type属性
  - text：默认值，普通的文本输入框
    - placeholder属性：提示文本
    - maxlength属性：最多能输入字符数量
  - password：密码输入框
  - checkbox：多选框/复选框
    - checked：被选中
  - radio：单选按钮
  - file：上传文件
  - reset：重置按钮
  - submit：提交按钮
  - button：普通按钮
- <select>：下拉列表/下拉框
  - <option>：列表中的项
    - selected：被选中
- <textarea>：文本域（多行文本框）
  - 可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的height
    和 width 属性。
- <button>：按钮
  - 在form表单中，作用和submit一样
  - 不在form表单中，就是普通按钮（配合后期的javascript，可扩展性更高）

注意事项：

所有表单中的元素都要具有名称（否则提交到服务器之后，服务器无法识别多个元素之间的不
同）
单选框要想可以一次只选择一个，要具有相同的name值
所有的复选框以组为单位，组内的每个复选框都应该具有相同的name值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="baidu" method="GET">
        <p>帐号：<input name="a" type="text" placeholder="请输入帐号..." maxlength="5"></p>
        <p>密码：<input name="b" type="password"></p>
        <p>爱好：
            <input name="hobby" type="checkbox"> 抽烟
            <input name="hobby" type="checkbox" checked="checked"> 喝酒
            <input name="hobby" type="checkbox"> 烫头
            <input name="hobby" type="checkbox"> 泡澡
        </p>
        <p>性别：
            <input type="radio" name="sex"> 男
            <input type="radio" name="sex" checked="checked"> 女
        </p>
        <p>身份：
            <input type="radio" name="role"> ceo
            <input type="radio" name="role"> cto
            <input type="radio" name="role"> coo
            <input type="radio" name="role" checked="checked"> ufo
        </p>
        <p>头像：
            <input type="file">
        </p>
        <p>血型：
            <select>
                <option>A型</option>
                <option>B型</option>
                <option>C型</option>
                <option selected="selected">O型</option>
            </select>
        </p>
        <p>个人简介：
            <textarea cols="10" rows="5"></textarea>
        </p>
        <p>
            <input type="reset" value="清空">
            <input type="submit" value="提交">
            <input type="button" value="取消">
            <button>保存</button>
        </p>
    </form>
    <button>测试</button>
</body>

</html>

2.13 框架标签

通过<frameset>和<frame>框架标签可以定制HTML页面布局。可以理解为：用多个页面拼装成一个页面。
注意，框架标签和body标签不共存。“有你没我，有我没你”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<frameset rows="10%,*,13%">
    <frame src="top.html"></frame>
    <frameset cols="15%,*">
        <frame src="left.html"></frame>
        <frame src="right.html"></frame>
    </frameset>
    <frame src="foot.html"></frame>
</frameset>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>

<body>
    <h1>顶部导航区域</h1>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<body>
    <h1>底部区域</h1>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>

<body>
    <h1>左侧导航区域</h1>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>

<body>
    <h1>右侧内容区域</h1>
</body>

</html>

2.14 meta标签

	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">

当前页面的字符编码 gbk：中文简体
这里的名字是 viewport （显示窗口）
数据是文本内容 content=“width=device-width, initial-scale=1.0”
也就是显示窗口宽度是客户端的屏幕宽度（就是满屏！），显示的文字和图形的初始比例是1.0
每个电脑内置的IE版本是不一样的，为了兼容所有的版本以最高级模式渲染文档，也就是任何IE版本都以当前版本所支持的最高级标准模式渲染

通过meta标签来设置页面加载后在指定的时间后跳转到指定的页面
```
  <meta http-equiv="refresh" content="5; url=http://www.lagou.com">
```

注意：在html中如果跳转的互联网上的网站资源，那么我们在书写路径时，一定要带协议的路径。

2.15 link标签

后面我们会使用link标签来导入css
注意:link标签也必须写在<head>标签中

2.16 特殊字符

特殊字符参照表

3、HTML5新特性

3.1 HTML4与HTML5的区别

H5包含h4
在这里插入图片描述

大小写不敏感
- 标签
- 属性
- 属性值
```
  <inPUT tYPe="pasSWord"/> 
```

引号可省略

  <input type="password">
  <input type=password>

结尾标签可以省略
```
  <p>哈哈哈哈哈哈哈
```

3.2 新增语义化标签

html4中，所有的容器标签95%都会使用div，div过多的话，很难区分彼此
新增许多语义化标签，让div“见名知意”

section标签：表示页面中的内容区域，部分，页面的主体部分
article标签：文章
aside标签：文章内容之外的（标题）
header标签：头部，页眉，页面的顶部
hgroup标签：内容与标题的组合
nav标签：导航
figure标签：图文并茂
foot：页脚，页面的底部

3.3 媒体标签

想在网页上播放视频，就要使用，属性有：

src：媒体资源文件的位置
controls：控制面板
autoplay：自动播放（谷歌失效，360浏览器可以）

loop：循环播放

  <video src="img/html-css-js之间的关系.mp4" controls loop autoplay></video>

3.4 新增表单控件

表单的控件更加丰富了

<input>，修改type属性：
- color：调色板
- date：日历
- month：月历
- week：周历
- number：数值域
  - min：最小值（默认值是1）
  - max：最大值（默认值无上限）
  - step：递增量
- range：滑块
- search：搜索框（带×号，可一键删除框中内容）
进度条
高亮
联想输入框（模糊查询）
- 选项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>我喜欢<mark>你</mark></h1>
    <input list="cities">
    <datalist id='cities'>
        <option value="北京"></option>
        <option value="广东"></option>
        <option value="深圳"></option>
        <option value="上海"></option>
    </datalist>
    <input type="color"><br>
    <input type="date"><br>
    <input type="month"><br>
    <input type="week"><br>
    <input type="number" max="30" min="8" step="2"><br>
    <input type="range"><br>
    <input type="search"><br>
    <hr>
    <progress></progress>
</body>
</html>

二、CSS

1、CSS使用

1.1 CSS3种使用方式

内联 / 行内样式
内部样式

外部 / 外联样式

 <style>
 @import 'css/css01.css'
 </style>

关于外部导入css使用<link>与@import的区别?
1. 加载顺序不同
  @import方式导入会先加载html，然后才导入css样式，那么如果网络条件不好，就会先看到没有修饰的页面，然后才看到修饰后的页面。
  如果使用link方式，它会先加载样式表，也就是说，我们看到的直接就是修饰的页面；
2. @import方式导入css样式，它是不支持javascript的动态修改的。而link支持。
三种样式表的优先级：满足就近原则
内联 > 内部 > 外部

1.2 选择器组

/*,分割*/
.div1,#div2,.div3{
	...
}

1.3 派生选择器

子代选择器：父子关系（隔代不管）
- > 间隔
后代选择器：父子孙，曾孙，从孙…均包括
- 空格间隔

/*父子关系*/
div>p{
	...
}
/*后代关系*/
div p{
	...
}

1.4 CSS伪类

CSS伪类可对css的选择器添加一些特殊效果
伪类属性列表：
- :active 向被激活的元素添加样式。
- :hover 当鼠标悬浮在元素上方时，向元素添加样式。
- :link 向未被访问的链接添加样式。
- :visited 向已被访问的链接添加样式。
- :first-child 向元素的第一个子元素添加样式

超链接的伪类：要遵守使用顺序，爱恨原则 LoVeHAte，lvha

a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */

2、CSS基本属性

2.1 文本属性

指定字体：font-family : value;
字体大小：font-size : value;
px：像素
em：倍数
字体加粗：font-weight : normal/bold;
文本颜色：color : value;
文本排列：text-align : left/right/center;
文字修饰：text-decoration : none/underline;
行高：line-height : value;
首行文本缩进：text-indent : value （2em）;

2.2 背景属性

background-color 设置元素的背景颜色。
background-image 把图像设置为背景。

background-image: url('img/1.jpg');

background-repeat 设置背景图像的墙纸效果，是否及如何重复
- repeat：在垂直方向和水平方向重复，为重复值
- repeat-x：仅在水平方向重复
- repeat-y：仅在垂直方向重复
- no-repeat：仅显示一次
background-position 设置背景图像的起始位置
- 1：控制水平方向 x轴：正值，向右移动；负值，向左移动
- 2：控制垂直方向 y轴：正值，向下移动；负值，向上移动

/* 图片向左移动50px，向下移动100px （可以为负值） */
background-position:50px 100px;

background-attachment 背景图像是否固定或者随着页面的其余部分滚动
- 默认值是 scroll：默认情况下，背景会随文档滚动
- 可取值为 fixed：背景图像固定，并不会随着页面的其余部分滚动，常用于实现称为水印的图
  像

background-attachment: fixed;

2.3 列表属性

CSS列表属性作用如下：
- 设置不同的列表项标记为有序列表
- 设置不同的列表项标记为无序列表
- 设置列表项标记为图像
列表项标记样式
- none：无标记。（去除标记）
- disc：默认。标记是实心圆。
- circle：标记是空心圆。
- square：标记是实心方块。
- decimal：标记是数字。
- decimal-leading-zero：0开头的数字标记。(01, 02, 03, 等。)
- lower-roman：小写罗马数字(i, ii, iii, iv, v, 等。)
- upper-roman：大写罗马数字(I, II, III, IV, V, 等。)
- lower-alpha：小写英文字母The marker is lower-alpha (a, b, c, d, e,等。)
- upper-alpha：大写英文字母The marker is upper-alpha (A, B, C, D, E,等。)
- url(‘img/1.gif’)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .blogs>li{
           list-style-type: none;  /* 不展示选项标记 */
           width: 300px;   /* 宽度 */
           line-height: 40px;  /* 内容行高 */
           text-align: center; /* 文字水平居中 */
           border:1px solid white;  /* 边框宽度，线类型，颜色 */
           background-color: black; /* 背景色 */
           color:white; /* 字体颜色 */
           font-weight: bold; /* 字体粗细 */
           font-size: 1.1em; /* 字体大小为1.1倍 */
           float: left;  /* 纵向变水平 */
        }
        .blogs>li:hover{ /* 鼠标悬停伪类 */
            background-color:yellow;   /* 背景色变为黄色 */
            line-height: 50px; /* 行高变为50px */
            color:black; /* 字体颜色变为黑色 */
        }
    </style>
</head>
<body>
    <ol class='blogs'>
        <li>优快云博客</li>
        <li>ITPUB</li>
        <li>博客园</li>
    </ol>
</body>
</html>

在这里插入图片描述

2.4 边框属性

border-width: 20px;
border-color: green;
border-style取值：
- none：默认无边框
- dotted：点线边框
- dashed：虚线边框
- solid：实线边框
- double：俩个边框，俩个边框宽度与border-width相同
- groove：3D沟槽边框
- ridge：3D脊边框
- inset：3D嵌入边框
- outset：3D突出边框

2.5 默认定位

块级元素：h1~h6，p, div,display:block 等，自上而下，垂直排列（自动换行）；可以改变宽高
行内元素：a,b,span,等，从左向右，水平排列（不会换行）；不能改变宽高
行内块元素：input,img,display:inline-block等，从左向右，水平排列（自动换行）；可以改变宽高

2.6 浮动定位

让元素“飞”起来。不仅可以靠着左边或右边。还可以消除“块级”的霸道特性（独自占一行）。
float取值：
- none ：不浮动
- left：贴着左边浮动
- right：贴着右边浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width:300px;
            height: 300px;
            border:2px solid red;
        }
        .a,.b{
            width:100px;
            height:100px;    
        }
        .a{
            background: blue;
            float: left;
        }
        .b{
            background-color: green;
            float:right;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="a"></div>
        <div class="b"></div>
    </div>
</body>
</html>

在这里插入图片描述

2.7 相对定位

相对自己原来的位置比较，进行偏移
position:relative

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width:300px;
            height:150px;
            border:1px solid red;
        }
        .a,.b,.c{
            width:300px;
            height:50px;
        }
        .a{
            background: green;
        }
        .b{
            background: orange;
            position: relative; /* 相对于自己原来的位置进行偏移 */
            left:30px; /* 向右偏移30像素 */
            top:10px; /* 向下偏移10像素 */
        }
        .c{
            background: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
    </div>
</body>
</html>

2.8 绝对定位

本元素与已定位的最近的祖先元素的距离
- 如果父级元素定位了，就以父级为参照物；
- 如果父级没定位，找爷爷级，爷爷定位了，以爷爷为参照物。
- 如果爷爷没定位，继续向上找，都没定位的话，body是最终选择。

2.9 固定定位

将元素的内容固定在页面的某个位置，当用户向下滚动页面时元素框并不随着移动

2.10 z轴属性

如果有重叠元素，使用z轴属性，定义上下层次。
z轴属性，要配合相对定位 / 绝对定位来使用。
z值没有额定数值，整型就可以，数值大的在上层显示

2.11 圆角

order-radius：左上右上右下左下;
border-radius：四个角;
border-radius：50%; 圆形

2.12 盒子阴影

box-shadow：1 2 3 4 5;
1：水平偏移
2：垂直偏移
3：模糊半径
4：扩张半径
5：颜色

2.13 渐变

线性渐变
- background:linear-gradient([方向/角度]，颜色列表)；
径向渐变(以圆心向外发散)
- background: radial-gradient(颜色列表);

2.14 背景

背景位置
- background-origin：指定了背景图像的位置区域
  - border-box : 背景贴边框的边
  - padding-box : 背景贴内边框的边
  - content-box : 背景贴内容的边
背景裁切
- background-clip:
  - border-box 边框开切
  - padding-box 内边距开切
  - content-box 内容开切
背景大小
- background-size:
  - cover 缩放成完全覆盖背景区域最小大小
  - contain 缩放成完全适应背景区域最大大小(等比例缩放)

2.15 过渡动画

过渡
- 从一个状态到另一个状态，中间的“缓慢”过程；
- 缺点是，控制不了中间某个时间点。
- transition｛1 2 3 4｝
  1：过渡或动画模拟的css属性
  2：完成过渡所使用的时间（2s内完成）
  3：过渡函数
  4：过渡开始出现前的延迟时间
  - linear：匀速
  - ease：逐渐慢下来
  - ease-in：减速
  - ease-out：加速
  - ease-in-out：先加速后减速
- 目前，css3只开发出部分的过渡属性，下图所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:300px;
            height:300px;
            background-color: antiquewhite;
            transition: background 2s linear 1s;  /*延迟1s后，背景色在2s内匀速变化为红色*/
        }
        div:hover{ /*触发div变色*/
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

动画
- 从一个状态到另一个状态，过程中每个时间点都可以控制。
  - 关键帧：@keyframes 动画帧 { from{} to{} } 或者{ 0%{} 20%{}… }
  - 动画属性：animation{ 1 2 3 4 5 }
    1：动画帧
    2：执行时间
    3：过渡函数
    4：动画执行的延迟（可省略）
    5：动画执行的次数

示例1：
一个元素从左向右移动，3秒内执行2次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一个 元素从左向右移动，3秒内执行2次</title>
    <style>
        .wai{
            width:600px;
            height:100px;
            border:1px solid blue;
        }
        .nei{
            width:100px;
            height:100px;
            background-color: red;
            animation: test 2s linear 3;
        }
        @keyframes test{
            from{
                margin-left: 0px;
            }
            to{
                margin-left: 500pxs;
                background-color: gold;
            }
        }
    </style>
</head>
<body>
    <div class="wai">
        <div class="nei"></div>
    </div>
</body>
</html>

示例2：
一个元素从左向右移动，3秒内执行完成。无限次交替执行

infinite：无限次
alternate：来回执行（交替，一去一回）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一个 元素从左向右移动，3秒内执行完成。无限次交替执行</title>
    <style>
        .wai{
            width:100%;
            height:100px;
            border:2px solid palevioletred;
        }
        .nei{
            width:100px;
            height:100px;
            background-color: red;
            animation: test 3s linear infinite alternate;  /*无限 + 交替循环*/
        }
        @keyframes test{
            0%{
                margin-left:25%;
                background-color: yellow;
            }
            25%{
                margin-left:50%;
                background-color: blue;
            }
            50%{
                margin-left:75%;
                background-color: greenyellow;
            }
            100%{
                margin-left:100%;
                background-color: black;
            }
        }
    </style>
</head>
<body>
    <div class="wai">
        <div class="nei"></div>
    </div>
    
</body>
</html>

三、JavaScript

1、 js的组成

ECMAScript：定义核心语法，关键字，运算符，数据类型等系列标准
DOM：文档对象模型，将一个html页面的所有节点看成是一个一个的对象。更有层次感的管理每
一个节点。
BOM：浏览器对象模型，是对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 BOM 独树一帜且又常常令人怀疑的地方在于，它只是 JavaScript 的一个部分，没有任何相关的准。
- 弹出新的浏览器窗口
- 移动、关闭浏览器窗口以及调整窗口大小
- 提供 Web 浏览器详细信息的定位对象
- 提供用户屏幕分辨率详细信息的屏幕对象
- 对 cookie 的支持
- IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX对象，进而
  实现ajax局部刷新技术

2、 HTML与javaScript结合方式

2.1 行内

<button onclick="alert('弹框测试')">点我一下</button>

2.2 内部

标准是写在head和body之间（head后，body前），但其实只要写在html文件内部就可以

<body>
	<script>
		alert("弹框");
	</script>
</body>

2.3 外部

<script src="js/xx.js"></script>

3、JS的使用

3.1 变量

自动类型转换

数字 + 字符串：数字转换为字符串 10+’a’ -> 10a
数字 + 布尔值：true转换为1，false转换为0 true+5->6
字符串 + 布尔值：布尔值转换为字符串true或false true+’a’->truea
布尔值 + 布尔值：布尔值转换为数值1或0 true+true->2

数据类型转换函数

parseInt：强制转换成整数
如果不能转换，则返回 NaN （NaN 属性是代表非数字值的特殊值。该属性表示非数字）
例如：parseInt(“6.32”)=6
parseFloat：强制转换成浮点数
如果不能转换，则返回 NaN
例如：parseFloat(“6.32”)=6.32
typeof：查询数值当前类型，返回 string / number / boolean / object
例如：typeof(“test”+3)==“string”

null 与 undefined

null 在程序中代表“无值”或者“无对象”
可以通过给一个变量赋值 null 来清除变量的内容
undefined
声明了变量但从未赋值或者对象属性不存在

关系运算

严格相等 ===
数值和类型都相等为true
非严格相等 ==
数值相等为true

逻辑运算

逻辑非（!）、逻辑与（&&）、逻辑或（||）

控制语句

if else

if（关系表达式） {
// 语句块 1
}else {
// 语句块 2
}

if else if else

if (表达式1) {
// 语句1;
}else if (表达式2){
// 语句2;
}else if (表达式3){
// 语句3;
} else{
// 语句4;
}

switch case

switch (表达式) {
case 值1:
// 语句1;
break;
case 值2:
// 语句2;
break;
default:
// 语句4;
}

for (var i=1 ; i<=5 ; i++){
alert(i);
}

while

while (条件){
// 语句1;
...
}

3.2 常用字符串API

length:获取字符串的长度（字符串中字符的个数）属性，没有小括号

var str = "hello";
console.log( str.length );

toUpperCase/toLowerCase :转大小写

var name = "AngierSun";
console.log( "大写："+name.toUpperCase() );
console.log( "小写："+name.toLowerCase() );

charAt(下标) ：返回某个下标的字符

var str1 = "javascript网页教程";
var str2 = str1.charAt(12); // 下标12上的字符
console.log(str2); //教
var str3 = str1.charCodeAt(12);
console.log(str3); //25945:（汉字“教”在unicode编码中的编号）

indexof(字符)：查找字符串中字符出现的首次下标
lastIndexof(字符)：查找字符串中字符最后一次出现的下标

var str1 = "javascript网页教程";
var str2 = str1.indexOf("a");
console.log(str2); // 1 , a字符在str1中第一次出现的下标
var str3 = str1.lastIndexOf("a"); //3,a字符在str1中最后一次出现的下标
console.log(str3);

substring(开始,结束)：截取字符串中一部分（结束是不包含的）

var str1 = "abcdefgh";
var str2 = str1.substring(2,4);
console.log(str2); //cd，从2开始（包含），4结束（不包含）

replace(旧的,新的)：将字符串中的旧字符替换成新字符

var str1 = "abcde";
var str2 = str1.replace("cd","XXX");
console.log(str2); // abXXXe，将str1中的cd替换成XXX

split(分割的节点)：一个字符串切割成N个小字符串，所以返回的是数组类型

var str1 = "一,二,三,四,五";
var arr = str1.split(","); // 将str1 以逗号进行分割，分割成N份，所以返回的结果一定
是数组结构
console.log( "共分割成："+arr.length+"份" );
console.log( "第三份是：" + arr[2] ); // 三

3.3 数组

创建数组

var arr1 = new Array();

初始化数组的三种方式

// 第一种
var arr1 = new Array();
arr1[0] = 110;
arr1[1] = 119;
arr1[2] = 120;
// 第二种
var arr1 = new Array(10,"a",true);
// 第三种
var arr1 = [10,"a",true];

数组的常用方法

tostring()：将数组转换成字符串
join(连接符号)：将数组中的每个元素用连接符号连接成一个新的字符串。

var arr = [1,2,3,4];
var str = arr.join("-"); // 将数组中每个元素用-进行连接，并形成一个全新的字符串
console.log( str +",类型为：" + typeof( str ) );

concat(新元素)：将原来的数组连接新元素，原数组不变

var arr = [1,2,3,4];
var arrnew = arr.concat(5,6); // 在arr数组的后面添加新的元素，形成一个新数组，但是
原数组是不变的
console.log( arrnew +",类型为：" + typeof( arrnew ) );
console.log("原数组：" + arr);

slice(开始，结束)：在数组中提取一部分，形成新的数组。

var arr = ['a','b','c','d','e','f','g','h'];
var arrnew = arr.slice( 2,4 ); // 在arr数组中截取，从2开始（包含），4结束（不包
含）
console.log( arrnew ); // cd

reverse()：数组的反转（倒序）

var arr = [31,12,111,444];
console.log( arr.toString() );
arr.reverse(); // 将数组中的元素倒置
console.log( arr.toString() );

sort()：数组排序
- arr.sort() 字符排序

var arr = [31,12,111,444];
arr.sort(); // 字符排序（不会按照字面量的大小）
console.log( arr );

sort()：数组排序
- arr.sort(func) 数值排序

var arr = [31,12,111,444];
arr.sort( laosun ); // 数字排序（会按照字面量的大小）
console.log( arr );
// 定义排序函数
function laosun(a,b){
return a-b;
}

3.4 Math对象

Math 对象用于执行数学任务
没有构造函数 Math()
无需创建，直接把 Math 作为对象使用就可以调用其所有属性和方法

// 返回0-9之间任意一个随机数字
var i = Math.random() * 10;
var j = Math.floor(i);
console.log(j);

3.5 Number对象

Number.toFixed(2); 自带四舍五入技能

var n = new Number( 12.345 );
var n1 = n.toFixed(2); // 12.35，固定两位小数，第三位小数四舍五入
console.log( n1 );
var x = new Number( 12.3 );
var n2 = x.toFixed(2); // 12.30，固定两位小数，位数不够，0来补齐
console.log( n2 );

3.6 正则表达式

对字符串执行模式匹配的强大工具

// 方式1
var age = "18"; // 判断：1-3位纯数字
var reg = /^\d{1,3}$/; // 以/^开始，中间写正则内容，以$/结束
var b = reg.test(age); // 验证age变量的是否符合reg的匹配
if (b == true) {
console.log("验证通过！");
} else {
console.log("格式错误");
}
// 方式2
var name = "abc123"; // 大小写字母和数字的组合（特殊字符不能出现）, 5~8位
var reg = new RegExp("^[a-zA-Z0-9]{5,8}$"); // 以^开始，中间写正则内容，以$结束
if (reg.test(name)) {
console.log("验证通过！");
} else {
console.log("格式错误");
}

在这里插入图片描述

3.7 日期对象

var time = new Date();
console.log( time ); // Tue Jul 14 2020 11:09:46 GMT+0800 (中国标准时间)
var year = time.getFullYear(); // 年份
var month = time.getMonth() + 1; //月份从0开始，11结束，所以国内习惯要+1
var day = time.getDate(); // 几号
var hour = time.getHours(); // 几点
var mm = time.getMinutes(); // 分钟
var s = time.getSeconds(); //秒
var ms = time.getMilliseconds(); // 毫秒， 1000毫秒 = 1秒
var timestr = year+"年"+month+"月"+day+"号 "+hour+"点"+mm+"分"+s+"秒"+ms+"毫秒";
console.log( timestr );

3.8 函数

使用关键字 function 定义函数

function 函数名( 形参列表 ){
// 函数体
return 返回值;
}

函数声明后不会立即执行，会在我们需要的时候调用到。
注意：
- 形参：一定不要带数据类型
- 分号是用来分隔可执行JavaScript语句。由于函数声明不是一个可执行语句，所以不以分号
  结束。

参数对象

在函数内部，调用参数列表的属性

function func(a,b,c){
console.log( arguments.length ); // 获得参数的个数
console.log( arguments[1] ); // 获得下标为1的参数
}

构造函数(很少见)

函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义

var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);
console.log(x);

注：上述函数以分号结尾，因为它是一个执行语句。

匿名函数

var fn = function(a, b) {// 没有名字的函数，应该用一个变量来接收
return a * 10 + b;
};
console.log( fn(3, 4) );

全局函数（常用）

isNaN：检查其参数是否是非数字值

console.log( isNaN( 123 ) ); // 数字，false
console.log( isNaN( "hello" ) ); // 非数字，true
console.log( isNaN( 4-1 ) ); // 数字，false
console.log( isNaN( 123 ) ); // 数字，false
console.log( isNaN( -10 ) ); // 数字，false
console.log( isNaN( "123" ) ); // 数字，false
console.log( isNaN( "1a23" ) ); // 非数字，true

eval：用来转换字符串中的运算

var str = "1+3";
console.log( str ); // 1+3 , +会认定为一种字符符号而已，没有加法的作用
console.log( eval( str ) ); // 让字符串中的运算符号生效

encodeURI 与 decodeURI

var name = "拉勾网";
console.log( "转码前：" + name );
name = encodeURI(name);
console.log( "转码后：" + name );
name = decodeURI(name);
console.log( "解码后：" + name );

闭包

闭包的概念：指有权访问另一个函数作用域中的变量的函数，一般情况就是在一个函数中包含另一个函数。
闭包的作用：访问函数内部变量、保持函数在环境中一直存在，不会被垃圾回收机制处理；
简单地说：就是在函数的局部范围内声明一个封闭的环境，此环境不会被垃圾回收探测到。保证了数据的安全唯一性

想了解闭包，首先要了解什么是全局变量，什么是局部变量

a = 10; // 全局变量，声明的时候可以不使用var
function test1(){
b = 20; // 不适用var声明的变量，就是全局变量
var c = 30; // 用var声明，并且在函数的内部。这样的变量叫做局部变量，有效范围只能
在其声明的函数内部
console.log(c);
}
function test2(){
console.log(c); //c is not defined (c变量没有定义)
}
test1();
test2();

需求：统计方法执行了多少次

var count = 0; // 总次数
function test1(){
count++; // 自增+1
}
test1();
test1();
test1();
console.log( count );

谁都可以访问count，所以count变量并不安全，因为是全局变量。
如何才能安全呢？将count声明为局部变量

function test1(){
var count = 0; //局部变量
return count++; //外部无法访问count，只能通过return才能将count变量返回，并输
出
}
test1();
test1();
test1();
console.log( test1() ); // 每次调用方法，首先就是将变量还原为0

结果一直是0，因为每次调用test1()，方法体的第一句代码就是还原，无论曾经的值是多少。
突发奇想，如果在test1()函数里面，再嵌套一个函数，js是支持函数嵌套的

function test1(){
var count = 0; //局部变量
function jia(){
return count++;
}
jia();
return count;
}
test1();
test1();
test1();
console.log( test1() ); // 每次调用方法，首先就是将变量还原为0

如果每次只调用test1()里面的jia()就好了。ok，闭包帮你解决此问题!

function test1(){
var count = 0; //局部变量
function jia(){
return count+=1;
}
return jia;
}
var fn = test1(); // 获取到内部的函数
var times = fn(); //第一次调用函数
times = fn(); //第二次调用函数
console.log(times); // 2

闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。直观的说就是形成一个不销毁的栈环境。
闭包的优点：方便调用上下文中声明的局部变量逻辑紧密，可以在一个函数中再创建个函数，避
免了传参的问题
闭包的缺点：因为使用闭包，可以使函数在执行完后不被销毁，保留在内存中，如果大量使用闭
包就会造成内存泄露，内存消耗很大

3.9 弹框输出

普通弹框 alert(“hello，拉勾”);
控制台日志输出 console.log(“谷歌浏览器按F12进入控制台”);
页面输出 document.write(“
我爱你中国
”); 将
元素输出到中
确认框 confirm(“确定删除吗？”);
输入框 prompt(“请输入姓名：”);

4、DOM操作

在一个html页面中，会使用很多标签来规划制作页面。
每个标签都有它存在的意义，如果我们想要动态的修改某个标签的值。那我们就需要在页面中查找到这个标签元素
如何查找到这个元素是个难题，W3C组织的工程师们，突然看到了一棵大树。我要是想找到某一
片叶子，应该怎么做？
“顺藤摸瓜”，主树干有分支，每个分支还有许多小分支，只要把这个分支的结构整理清楚，任何一
片叶子都不是难事了
叶子和大树的一些启发，工程师们开会讨论就定了这个理论“文档对象模型”，
文档对象模型，就是将页面中所有的标签元素都看成是一个对象（一片叶子），主树干定义为根节点（根元素），所有的标签都是从根元素延伸出去的，摸清结构，找到某个标签就不再困难了
- 在节点树中，顶端节点就是根节点（root）
- 每个节点都有父节点（除了根节点）
- 任何一个节点都可以拥有任意数量的子节点
- 同胞是拥有相同父节点的节点

4.1 DOM访问

getElementById：通过id属性获得元素节点对象
- 案例：当帐号为空时，阻止表单提交

<body>
	<form action="xxx" onsubmit="return login()">
		<p>帐号：<input id="username"/></p>
		<p>电话：<input id="phone"/></p>
		<p><button>登录</button></p>
	</form>
<script>
function login() {
	var name = document.getElementById("username").value ;
	if(name == ""){
		alert("帐号不能为空！");
	return false; // 阻止表单的提交
	}
	return true; // 放行，让表单提交
}
</script>
</body>

getElementsByName：通过name属性获得元素节点对象集
- 案例：购物车全选效果

<body>
    <h2>我的购物车</h2>
    <table border="1" cellspacing="0">
        <tr>
            <td><input type="checkbox" onchange="quan(this)" /> 全选</td>
            <td>名称</td>
            <td>单价</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" />1</td>
            <td>功能性饮料-尖叫</td>
            <td>4.0</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" />2</td>
            <td>火腿肠</td>
            <td>2.0</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" />3</td>
            <td>包子</td>
            <td>1.5</td>
        </tr>
    </table>
    <p>
        <button>提交订单</button>
    </p>
    <script>
        function quan(all) {
            var arr = document.getElementsByName("one");
            for (var i = 0; i < arr.length; i++) {
                arr[i].checked = all.checked; // 将全选框的状态，赋值给每一个复选框
            }
        }
    </script>
</body>

getElementsByTagName：通过标签名称获得元素节点对象集
- 案例：表格隔行变色

<body>
    <table border="1" cellspacing="0">
        <tr>
            <td><input type="checkbox" onchange="quan(this)" /> 全选</td>
            <td>名称</td>
            <td>单价</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" />1</td>
            <td>功能性饮料-尖叫</td>
            <td>4.0</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" />2</td>
            <td>火腿肠</td>
            <td>2.0</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" />3</td>
            <td>包子</td>
            <td>1.5</td>
    </table>
    <script>
        var rows = document.getElementsByTagName("tr"); //通过标签名获得元素对象

        for (var i = 0; i < rows.length; i++) {
            if (i % 2 == 1) { // 奇数
                rows[i].style.backgroundColor = "pink";
            }
        }
    </script>
</body>

4.2 DOM修改

修改 HTML DOM 意味着许多不同的方面：
- 改变 HTML 内容
- 改变 CSS 样式
- 改变 HTML 属性
- 创建新的 HTML 元素
- 删除已有的 HTML 元素
- 改变事件（处理程序）

案例1. 改变一个 <h2> 元素的 HTML 内容

<body>
	<button onclick="test()">点我试试</button>
	<script>
		function test(){
		document.getElementById("hello").innerHTML = "走哇，喝点去~！";
		}
	</script>
	<h2 id="hello">你好！</h2>
</body>

案例2. . 改变一个<h2>的 HTML 样式

<body>
	<button onclick="chou()">你瞅啥</button>
	<script>
	function chou(){
		document.getElementById("hello").style.color = "red";
		document.getElementById("hello").style.fontFamily = "华文彩云";
	}
	</script>
	<h2 id="hello">你好！</h2>
</body>

添加节点

<body>
    <button onclick="add()">添加</button>
    <div></div>
    <script>
        function add() {
            var img = document.createElement("img"); // <img>
            img.setAttribute("src", "../lagou-html/img/cat.gif"); // <img
            src = "../lagou-html/img/cat.gif" >
                img.setAttribute("title", "小猫咪"); // <img src="../lagouhtml/img/cat.gif" title="小猫咪">
            img.setAttribute("id", "cat"); // <img src="../lagouhtml/img/cat.gif" title="小猫咪" id="cat">
            var divs = document.getElementsByTagName("div");
            divs[0].appendChild(img);
        }
    </script>
</body>

删除节点

点击按钮，把上面刚创建的图片从页面上删除

<body>
    <button onclick="add()">添加</button>
    <button onclick="del()">删除</button>
    <div>
    </div>
    <script>
        function add(){
            //...
        }
        function del(){
            var img = document.getElementById("cat");
            img.parentNode.removeChild(img); // 必须通过父节点，才能删除子节点
        }
    </script>
</body>

替换节点

点击按钮，把上面刚创建的图片替换成另一张

<body>
    <button onclick="add()">添加</button>
    <button onclick="del()">删除</button>
    <button onclick="rep()">替换</button>
    <div>
    </div>
    <script>
        function add() {
            
        }
        function del() {
            
        }
        function rep() {
            var imgold = document.getElementById("cat");
            // 通过修改元素的属性，做的替换
            // img.setAttribute("src","../lagou-html/img/2.jpg");
            var imgnew = document.createElement("img");
            imgnew.setAttribute("src", "../lagou-html/img/1.jpg");
            imgold.parentNode.replaceChild(imgnew, imgold);
        }
    </script>
</body>

4.3 事件

js捕获某个动作而做出的反馈

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时

窗口事件 (Window Events)

仅在 body 和 frameset 元素中有效。
onload 当文档被载入后执行脚本

<body onload="test()">
	<script>
		function test() {
		document.write("哈哈哈哈");
	}
	</script>
</body>

表单元素事件 (Form Element Events)

仅在表单元素中有效。
- onblur 当元素失去焦点时执行脚本
- onfocus 当元素获得焦点时执行脚本

<body>
    <script>
        function a() {
            console.log("获得焦点==被激活");
        }
        function b() {
            console.log("失去焦点");
        }
    </script>
    <form action="">
        <p>帐号：<input onfocus="a()" onblur="b()" /></p>
        <p>密码：<input /></p>
    </form>
</body>

鼠标事件 (Mouse Events)

onclick 当鼠标被单击时执行脚本
ondblclick 当鼠标被双击时执行脚本
onmouseout 当鼠标指针移出某元素时执行脚本
onmouseover 当鼠标指针悬停于某元素之上时执行脚本

<style>
    img {
        width: 30%;
        border: 5px solid white;
</style>

<body>
    <img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)" onclick="dan()">
    <img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)" ondblclick="shuang()">
    <img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)">
    <script>
        function dan() {
            alert("点了一下");
        }
        function shuang() {
            alert("连续快读点两下");
        }
        function shang(img) {
            img.style.border = "5px solid red";
        }
        function xia(img) {
            img.style.border = "5px solid white";
        }
    </script>
</body>

键盘事件

onkeydown 按下去
onkeyup 弹上来

<script>
    window.onkeydown = function () {
        // event：事件源（按键）
        // console.log( "按键编码："+event.keyCode );
        if (event.keyCode == "13") { // 回车键
            alert("登录成功！");
        }
    }
    window.onkeyup = function () {
        console.log(event.keyCode); // 按住按键不松手是不会触发的。当松手时，按键回弹则触发
    }
</script>

事件冒泡

创建两个div，一个大一些，一个小一些

<style>
    #father {
        width: 200px;
        height: 200px;
        background: black;
        padding: 10px;
    }

    #child {
        width: 100px;
        height: 100px;
        background: greenyellow;
    }
</style>

<body>
    <div id="father">
        <div id="child"></div>
    </div>
    <script>
        // 代码不重要，重要是知道这个事件发生，是正常现象
        document.getElementById("father").addEventListener("click", function () {
            alert("父级元素的事件被触发：" + this.id);
        });
        document.getElementById("child").addEventListener("click", function (e) {
            e.stopPropagation() //取消事件的冒泡机制
            alert("子级元素的事件被触发：" + this.id);
        });
    </script>
</body>

先子，后父。事件的触发顺序自内向外，这就是事件冒泡；

事件捕获

还是刚才创建两个div，一个大一些，一个小一些

<style>
    #father {
        width: 200px;
        height: 200px;
        background: black;
        padding: 10px;
    }

    #child {
        width: 100px;
        height: 100px;
        background: greenyellow;
    }
</style>

<body>
    <div id="father">
        <div id="child"></div>
    </div>
    <script>
        document.getElementById("father").addEventListener("click", function () {
            alert("父级：" + this.id);
        }, true);
        document.getElementById("child").addEventListener("click", function () {
            alert("子级：" + this.id);
        }, true);
    </script>
</body>

先父,后子。事件触发顺序变更为自外向内，这就是事件捕获；

4.4 面向对象OOP

使用Object创建通用对象

	<script>
        var user = new Object();
        user.name = "吕布";
        user.age = 21;
        user.say = function () {
            console.log("大家好，我叫：" + this.name + "，我今年" + this.age + "岁了！");
        }
        user.say();
        var dog = new Object();
        dog.nickname = "屎尿多";
        dog.wang = function () {
            console.log("我饿了，我要拆家了！");
        }
        dog.wang();
    </script>

使用构造函数创建对象

<script>
    function userinfo(name, age) {
        this.name = name;
        this.age = age;
        this.say = function () {
            console.log("大家好，我叫：" + this.name + "，我今年" + this.age + "岁了！");
        }
    }
    var user = new userinfo("詹姆斯", 35);
    user.say();
</script>

使用直接量创建对象

<script>
    var user = {
        username: "孙悟空",
        age: 527,
        say: function () {
            console.log("大家好，我叫：" + this.username + "，我今年" + this.age + "岁了！");
        }
    };
    user.say();
</script>

4.5 JSON（常用）

大家在互联网上来回传递数据，如果没有一个统一的格式，解析起来的难度很大（每个人的编码喜
好不一样）
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
易于人阅读和编写，同时也易于机器解析和生成
{
属性1：值1，
属性2：值2，
。。。。
}

<script>
    var json1 = { username: "吕布", age: 31 };
    console.log("姓名：" + json1.username + "，年龄：" + json1.age + "岁");
    // json数组
    var josnarr = [{ name: "貂蝉", age: 18 }, { name: "小乔", age: 17 }];
    console.log("貂蝉" + josnarr[0].age + "岁了");
    console.log("小乔" + josnarr[1].age + "岁了");
    // 复杂的json对象
    var long = {
        name: "赵云",
        sex: "男",
        hobby: ["玉兰白龙驹", "龙胆亮银枪", "青釭剑"]
    };
    console.log(long.name + "的主攻武器：" + long.hobby[1]);
</script>

5、BOM操作

就是javascript对浏览器的一些常规操作的方法

5.1 Windows对象

在这里插入图片描述

<body>
    <button onclick="kai()">极速入职</button>
    <script>
        function kai() {
            window.open("http://lagou.com", "拉勾网",
                "width=500,height=300,left=400");
            // window.open("http://lagou.com" , "拉勾网" , "fullscreen=yes"); // IE才生效
        }
    </script>
</body>

screen屏幕对象

我想知道我的电脑屏幕多大？实际上，得到的就是分辨率

<body>
    <button onclick="kai()">求大小</button>
</body>
<script>
    function kai() {
        alert(window.screen.width + "|" + window.screen.height);
    }
</script>

location定位

包含有关当前 URL 的信息，通常用来做页面跳转

<button onclick="test()">测试</button>
<script>
    function test() {
        console.log("当前页面的URL路径地址：" + location.href);
        location.reload(); // 重新加载当前页面（刷新）
        location.href = "http://lagou.com"; // 跳转页面
    }
</script>

history浏览器历史

history对象会记录浏览器的痕迹

a.html

<a href="b.html">去b页面</a>

b.html

<button onclick="hui()">返回</button>
<script>
    function hui() {
        //history.go(-1); //上一级页面
        history.back(); // 与go(-1)是等价的
    }
</script>

navigator 导航（了解）

window.navigator 对象包含有关访问者浏览器的信息

<script>
    var str = "";
    str += "<p>浏览器的代号：" + navigator.appCodeName + "</p>";
    str += "<p>浏览器的名称：" + navigator.appName + "</p>";
    str += "<p>浏览器的版本：" + navigator.appVersion + "</p>";
    str += "<p>硬件平台：" + navigator.platform + "</p>";
    str += "<p>用户代理：" + navigator.userAgent + "</p>";
    str += "<p>启用Cookies：" + navigator.cookieEnabled + "</p>";
    document.write(str);
</script>

存储对象

用起来和我们在java中map很相似，都是键值对的方式存数据

本地存储 localStorage
在关闭窗口或标签页之后将会删除这些数据
- 保存数据
  localStorage.setItem(“name”,“curry”);
- 提取数据
  localStorage.getItem(“name”)
- 删除数据
  localStorage.removeItem(“name”);

<script>
    // 三种方式保存数据
    localStorage["a"] = 1;
    localStorage.b = 2;
    localStorage.setItem("c", 3);
    // 查看数据类型
    console.log(typeof localStorage["a"])
    console.log(typeof localStorage["b"])
    console.log(typeof localStorage["c"])
    // 第一种方式读取
    var a = localStorage.a;
    console.log(a);
    // 第二种方式读取
    var b = localStorage["b"];
    console.log(b);
    // 第三种方式读取
    var c = localStorage.getItem("c");
    console.log(c);
</script>

会话存储 sessionStorage
- 会话，就是保持浏览器别关闭。
- 关闭浏览就等于结束了一次会话。
- 开启浏览器就意味着创建了一次会话。
  - 保存数据
    sessionStorage.setItem(“name”, “klay”);
  - 提取数据
    var lastname = sessionStorage.getItem(“name”);
  - 删除指定键的数据
    sessionStorage.removeItem(“name”);
  - 删除所有数据
    sessionStorage.clear();

案例：记录点击了几下按钮

<body>
    <button onclick="dian()">点我</button>
    <h3 id="result"></h3>
    <script>
        function dian() {
            if (sessionStorage.getItem("clickCount")) {
                sessionStorage.setItem("clickCount",
                    Number(sessionStorage.getItem("clickCount")) + 1);
            } else {
                sessionStorage.setItem("clickCount", 1);
            }
            document.getElementById("result").innerHTML = "已经点击了" +
                sessionStorage.getItem("clickCount") + "次！"
        }
    </script>
</body>

5.2 计时操作

周期性定时器 setInterval

setInterval(1,2)：周期性触发代码exp （常用）
1：执行语句
2：时间周期，单位为毫秒

案例：闪烁的字体（1秒1变色）

<body>
    <h1 id="title">拉勾网：极速入职</h1>
    <script>
        var colors = ["red", "blue", "yellow", "pink", "orange", "black"];
        var i = 0;
        function bian() {
            document.getElementById("title").style.color = colors[i++];
            if (i == colors.length) {
                i = 0; // 颜色重新开始
            }
        }
        setInterval(bian, 100); // 每隔0.1秒，执行一次bian函数
    </script>
</body>

案例：在闪烁字体的基础上扩展，闪烁的电子时钟


<body>
    <h1 id="title"></h1>
    <script>
        var colors = ["red", "blue", "yellow", "pink", "orange", "black"];
        var i = 0;
        function bian() {
            document.getElementById("title").style.color = colors[i++];
            if (i == colors.length) {
                i = 0; // 颜色重新开始
            }
        }
        function time() {
            var d = new Date();
            var str = d.getFullYear() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "号"+d.getHours()+"点"+d.getMinutes()+"分"+d.getSeconds()+"秒";
            document.getElementById("title").innerHTML = str;
        }
        setInterval(bian, 1000); // 每隔1秒，执行一次变色函数bian
        setInterval(time, 1000); // 每隔1秒，执行一次时间函数time
    </script>
</body>

停止定时器 clearInterval

案例：模拟年会抽奖


<body>
    <img id="tu" src="../lagou-html/img/1.jpg" width="50%" />
    <br />
    <button onclick="begin()">开始</button>
    <button onclick="stop()">停止</button>
    <script>
        var arr = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"];
        function begin() {
            timer = setInterval(bian, 100); // 没有使用var，所以timer是全局变量
        }
        function stop() {
            clearInterval(timer); // 停止定时器
        }
        function bian() {
            var i = Math.floor(Math.random() * arr.length); // 0-4
            document.getElementById("tu").src = "../lagou-html/img/" + arr[i];
        }
    </script>
</body>

一次性定时器 setTimeout

相当于延迟的效果，只执行一次

<body>
    <script>
        function bian() {
            document.body.style.backgroundColor = "red";
        }
        //3秒之后调用
        setTimeout(bian, 3000);
    </script>
</body>