前端基础知识-CSDN博客

本文链接：https://blog.csdn.net/t166661888/article/details/126644415

此文章还阔以在我的个人博客浏览https://ruitao.pages.dev

第1章 HTML简介

1、前端技术简介

（1）从Web1.0到Web2.0，网页制作已经变成前端开发了。对于前端开发来说，你要学的并不是什么“网页三剑客”，而是“新三剑客”：HTML+CSS+JavaScript。

（2）前端最核心的技术是HTML、CSS和JavaScript，不过要想达到真正的前端开发工程师水平，我们还得学习更多前端技术，包括HTML5、CSS3、ES6、Vue.js等知识。

（3）使用前端技术只能开发静态页面。这里要注意一点，即使你使用了JavaScript，做出来的也是静态页面，因为你没有跟服务器进行数据交互。动态页面与静态页面最大的区别在于：是否与服务器进行数据交互。

（4）如果想要开发一个用户体验更好、功能更强大的网站，我们就需要用到后端技术。常见的后端技术有PHP、Java、ASP.NET、Node.js等。

（5）学习路线：HTML→CSS→JavaScript→jQuery→HTML5→CSS3→ES6→Vue.js→webpack→Node.js。

2、HTML简介

（1）学习HTML就是学习各种“标签”，然后针对你想显示什么内容来使用相应的标签；

（2）在HTML中，元素即标签，例如“p元素”指的就是“p标签”；

第3章基本标签

1、HTML结构

（1）HTML标签

在HTML中，一个网页是从<html>开始，然后到</html>结束的。

（2）head标签

在HTML中，head标签表示页面的“头部”，这里用于定义网页的“特殊内容”。这些内容都是“不可见”的，一般用于告诉搜索引擎这个页面是干什么的。

head标签的“内部标签”

标签	说明
title	定义网页的标题
meta	定义网页的信息（供搜索引擎查看）
style	定义CSS样式
script	定义JavaScript代码
base	直接忽略即可

head标签的“内部标签”也非常重要，不过在学习初期只需要感性认知即可，不需要深入。

（3）body标签

在HTML中，body标签表示页面的“身体”，这里用于网页的“展示内容”。这些内容都是“可见”的，一般用于给用户展示这个页面是干什么的。

一句话概括head标签和body标签的区别就是：head标签内定义的内容是给“搜索引擎”看的，body标签内定义的内容是给“用户”看的。

2、HTML注释

在HTML中，注释是为了代码更加容易阅读和理解。其中，注释的内容不会在浏览器中显示出来。

语法：

第4章文本

1、标签总结

文章标签

标签	语义	说明
h1~h6	header	标题
p	paragraph	段落
br	break	换行
hr	horizontal rule	水平线
div	division	区块（块元素）
span	span	区块（行内元素）

文本标签

标签	语义	说明
strong	strong	粗体
em	emphasized	斜体
sup	superscripted	上标
sub	subscripted	下标

2、自闭合标签

HTML标签分为2种：①一般标签；②自闭合标签，它们有以下的区别。

（1）一般标签有开始符号和结束符号，但自闭合标签只有开始符号。

（2）一般标签可以在内部插入文字或其他标签，而自闭合标签不可以。

3、块元素和行内元素

HTML根据元素在浏览器的效果，可以分为2类：①块元素；②行内元素。

常见块元素有h1~h6、p、div等，块元素具有以下2个特点。

（1）独占一行，排斥其他元素与其位于同一行（包括块元素和行内元素）。

（2）块元素内部可以容纳其他块元素或行内元素。

常见的行内元素有strong、em、span等，行内元素具有以下2个特点。

（1）可以与其他行内元素位于同一行。

（2）行内元素内部可以容纳其他行内元素，但不可容纳块元素，不然会出现无法预知的效果。

4、特殊符号

我们只需要记住“ ”（牛逼SP）这一个就可以了。

第5章列表

1、HTML列表

3种列表

标签	语义	说明
ol	ordered list	有序列表
ul	unordered list	无序列表
dl	definition list	定义列表

对于有序列表和无序列表，我们可以使用type属性来定义列表项符号。此外，定义列表用得较少，了解一下即可。

2、HTML语义化

学习HTML目的在于：在需要的地方，使用正确的标签。（语义化）

HTML语义化的作用有2个：① 提供可读性和可维护性；② 利于搜索引擎优化（SEO）。

第6章表格

1、HTML表格

表格标签

标签	说明
table	表格
caption	标题
thead	表头（语义划分）
tbody	表身（语义划分）
tfoot	表脚（语义划分）
tr	行
th	表头单元格
td	表行单元格

语法：

<table>

<thead>

<tr>

<th>表头单元格1</th>

<th>表头单元格2</th>

</tr>

</thead>

<tbody>

<tr>

<td>表行单元格1</td>

<td>表行单元格2</td>

</tr>

<tr>

<td>表行单元格3</td>

<td>表行单元格4</td>

</tr>

</tbody>

<tfoot>

<tr>

<td>表行单元格5</td>

<td>表行单元格6</td>

</tr>

</tfoot>

</table>

2、合并行与合并列

在HTML中，我们可以使用rowspan属性来合并行，也可以使用colspan属性来合并列。

第7章图片

1、图片标签

在HTML中，我们使用img标签来显示一张图片。

语法：

说明：

对于img标签，src和alt这两个是必选属性，一定要添加；而title是可选属性，可加可不加。

2、图片路径

图片路径分为2种，一种是“绝对路径”，另外一种是“相对路径”。其中我们需要注意一下2点。

（1）绝对路径是图片在你电脑中的位置，而相对路径是图片相对当前页面的位置。

（2）在实际开发中，使用的都是相对路径，极少会使用绝对路径（除非是站外路径或者后端路径）。

3、图片格式

在网页中，图片格式有2种：一种是“位图”，另外一种是“矢量图”。网页中的图片绝大多数是位图，而不是矢量图，因此我们只需要掌握位图即可。

在实际开发中，最常见的的位图格式有3种：jpg、png、gif，它们之间的区别如下。

（1）jpg可以很好地处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片、高清图片等。此外，jpg体积较大，并且不支持透明。

（2）png是一种无损格式，可以无损压缩以保证页面打开速度。此外，png体积较小，并且支持透明，但不适合存储颜色丰富的图片。

（3）gif图片效果最差，不过它适合制作动画。实际上，小伙伴们经常在QQ发的动图都是gif格式的。

第8章超链接

1、a标签

在HTML中，我们可以使用a标签来实现超链接。

语法：

<a href="链接地址" target="_blank">文字或图片</a>

说明：

对于target属性，我们只需要掌握“_blank”这一个就可以了。

2、链接类型

超链接可以分为2种，一种是“外部链接”，另外一种是“内部链接”。其中锚点链接是一种特殊的内部链接。

第9章表单

我们常说的表单，指的是文本框、按钮、单选框、复选框、下拉菜单等的统称。在HTML中，所有表单元素都必须放在form标签中。

表单标签共有4个：input、textarea、select和option。其中，select和option是配合一起使用的。

几乎所有的表单标签都有一个value属性，这个属性一般都是为了方便JavaScript或者服务器操作数据用的。

1、input标签

在HTML中，大部分表单都是使用input标签来实现的，其中input属性取值如下表所示：

type属性取值

属性值	浏览器效果	说明
text		单行文本框
password		密码文本框
radio		单选框
checkbox		多选框
button或submit或reset		按钮
file		文件上传

2、textarea标签

HTML有3种文本框：单行文本框、密码文本框、多行文本框。其中，单行文本框和密码文本框使用的都是input标签，多行文本框使用的是textarea标签。

语法：

3、select标签和option标签

在HTML中，下拉列表由select和option这2个标签一起配合使用来实现的。

语法：

……

</select>

第11章 CSS简介

1、HTML用于控制网页的结构，CSS用于控制网页的外观，JavaScript用于控制网页的行为。

2、CSS的出现就是为了改造HTML单调的默认外观。

3、CSS引入方式有3种：外部样式表、内部样式表、行内样式表。

4、在实际开发中，一般都是使用外部样式表

第12章 CSS选择器

1、id和class

（1）id就像你的身份证号，而class就像你的名字。同一个页面中，id只允许出现一次，而class允许出现多次。

（2）id和class都是用来选择元素，以便进行CSS操作或者JavaScript操作的。

2、CSS选择器

在CSS中，最常用的选择器有5种：元素选择器、id选择器、class选择器、后代选择器、群组选择器。

第13章字体样式

在CSS中，常用字体样式属性如下表所示。其中，font-style属性几乎用不上，我们可以直接忽略。

字体样式属性

属性	说明
font-family	字体类型
font-size	字体大小
font-weight	字体粗细
color	字体颜色

1、font-family

font-family如果不指定字体，则会采用浏览器默认字体（即宋体）来显示。如果指定多种字体，则多个字体将按从左到右的优先顺序生效；

在实际开发中，常用的中文字体有微软雅黑、宋体，常用的英文字体有"Times New Roman "、Arial、Verdana；

2、font-size

font-size属性取值一般是“像素值”，不会采用“关键字”。在实际开发中，常用字体大小为12px、14px等，比较少用13px、15px等。

3、font-weight

在实际开发中，我们只会用到“font-weight:bold;”这一个属性值，其他的几乎用不上。

4、color

color属性取值有2种，一种是关键字，如red、green、blue等；另外一种是“16进制RGB值”，如#EEEEEE、#FBF9D0等。

第14章文本样式

在CSS中，常用的文本样式如下表所示。

文本样式属性

属性	说明
text-indent	首行缩进
text-align	水平对齐
text-decoration	文本修饰
text-transform	大小写
line-height	行高
letter-spacing、word-spacing	字母间距、词间距

（1）一般来说，text-transform、letter-spacing、word-spacing这3个在实际开发几乎用不上，我们只需要重点掌握其他几个即可。

（2）除了上表这些，还有一个font-variant属性没有介绍。不过这个属性平常也用不上，因此我们也不需要去了解。

第15章边框样式

在CSS中，想要为元素定义边框，需要设置3个方面：边框宽度、边框外观、边框颜色。

边框样式属性

属性	说明
border-width	边框宽度
border-style	边框外观
border-color	边框颜色

其中，边框的简写形式如下：

border: 1px solid red;

如果想要定义局部边框样式，我们可以使用如下属性：

边框局部样式属性

属性	说明
border-top	上边框
border-bottom	下边框
border-left	左边框
border-right	右边框

第16章列表样式

对于列表来说，常见的CSS属性有2个，如下表所示：

列表样式属性

属性	说明
list-style-type	定义列表项符号
list-style-image	定义列表项图片

除了上面2个，可能我们还会看到list-style、list-style-position等属性，不过那些属性几乎用不上，可以直接忽略。

从实际开发角度来看，这一章我们只需要记住“list-style-type:none;”这一个就够了。

第17章表格样式

在CSS中，对于表格样式设置包括：标题位置、边框合并、边框间距。

表格样式属性

属性	说明
caption-side	表格标题位置
border-collapse	表格边框合并
border-spacing	表格边框间距

这3个属性都是表格所独有的，而且都是针对table元素来定义的。

第18章图片样式

图片样式属性

属性	说明
width	定义图片的宽度
height	定义图片的高度
border	定义图片的边框
text-align	定义图片水平对齐方式
vertical-align	定义文本相对于图片的垂直对齐方式
float	定义文字环绕效果

第19章背景样式

1、背景颜色

背景颜色属性

属性	说明
background-color	定义背景颜色

2、背景图片

背景图片属性

属性	说明
background-image	定义背景图片地址
background-repeat	定义背景图片重复
background-position	定义背景图片位置
background-attachment	定义背景图片固定

在实际开发中，background-attachment用得比较少，只需简单了解一下就行。

第20章超链接样式

1、超链接伪类

对于超链接伪类来说，我们只会用到2种状态：未访问时状态和鼠标经过状态。

语法：

a{…}

a:hover{…}

其中，“:hover伪类”可以定义任何一个元素在鼠标经过时的样式，这是一个经常使用的开发技巧。

2、鼠标样式

在CSS中，鼠标样式的定义有2种，一种是“浏览器鼠标样式”，另外一种是“自定义鼠标样式”。这2种方式都是使用cursor属性来定义。

第21章盒子模型

在CSS中，页面所有元素都可以看成是一个盒子。每一个盒子是由content（内容）、padding（内边距）、margin（外边距）和border（边框）这四个属性组成的。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。

CSS盒子模型

CSS盒子模型的组成部分

属性	说明
content	内容，可以是文本或图片
padding	内边距，用于定义内容与边框之间的距离
margin	外边距，用于定义当前元素与其他元素之间的距离
border	边框，用于定义元素的边框

第22章浮动布局

1、文档流

在正常文档流中，一个页面从上到下会被分为一行一行，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。

为了更好地进行布局，我们有时候需要使用浮动或者定位来使得元素脱离文档流。

2、浮动布局

如果你想要实现两个或者多个块元素横向排列，就应该使用浮动。浮动最常用于实现水平方向上的并排布局，例如两列布局、多列布局。

3、清除浮动

我们一般都是在浮动元素后面再增加一个空元素，然后为这个空元素定义“clear:both;”来清除浮动。

第23章定位布局

在CSS中，我们都是使用position属性来实现定位布局。定位布局有4种，如下表所示。

position属性取值

属性值	说明
fixed	固定定位
relative	相对定位
absolute	绝对定位
static	静态定位（默认值）

默认情况下，固定定位和绝对定位的位置是相对于浏览器而言，而相对定位的位置是相对原始位置而言。这里注意一个前提：默认情况下。

第24章 JavaScript简介

1、HTML用于控制网页的结构，CSS用于控制网页的外观，JavaScript用于控制网页的行为；

2、推荐2个前端开发工具：Hbuilder和vscode。建议初学者使用Hbuilder。

3、JavaScript常用引入方式有3种：①外部JavaScript；②内部JavaScript；③元素事件JavaScript；

第25章语法基础

对于这一章来说，我们需要清楚这5个概念：变量、数据类型、运算符、表达式、语句。可以根据下图来理解。

分析图

1、变量

（1）所有变量都是用var声明的

（2）对于变量命名，尽量取有意义的英文名字，以便一眼就可以看出来这是干嘛的

（3）变量的值是可以变的

2、数据类型

在JavaScript中，常见的数据类型有6种：

（1）数字

（2）字符串

（3）布尔值

（4）转义字符

（5）未定义值

（6）空值

3、运算符

在JavaScript中，常见的运算符有5种：

（1）算术运算符

（2）赋值运算符

（3）比较运算符

（4）逻辑运算符

（5）条件运算符

4、表达式与语句

1+2是一个表达式，而整一句代码“var a=1+2;”就是一个语句。

表达式与语句

5、注释

//单行注释

/*多行注释*/

第26章流程控制

这一章我们学习了3种流程控制的结构：顺序结构、选择结构、循环结构。为什么这一章叫做“流程控制”呢？大家好好琢磨“流程控制”这4个字，然后想一下这一章我们都学了什么就明白了。

1、选择结构

选择结构指的是根据“条件判断”来决定执行哪一段代码。选择结构有单向选择、双向选择以及多向选择3种。

在JavaScript中，选择结构共有2种方式，一种是if语句，另外一种是switch语句。其中if语句又包括：

（1）单向选择：if…

（2）双向选择：if…else…

（3）多向选择：if…else if…else…

（4）if语句的嵌套

2、循环结构

循环语句指的是在“满足某个条件下”循环反复地执行某些操作的语句。

在JavaScript中，循环语句共有以下3种：

（1）while语句

（2）do...while语句

（3）for语句

第27章初识函数

在JavaScript中，函数指的是一个用大括号“{}”括起来的、可重复使用的、具有特定功能的语句块。如果想要使用函数，一般需要2步：

① 定义函数；

② 调用函数；

1、函数的定义

在JavaScript中，函数可以分2种，一种是“没有返回值的函数”，另外一种就是“有返回值的函数”。

（1）没有返回值的函数

没有返回值的函数，指的是函数执行完就算了，不会返回任何值。

语法：

function 函数名(参数1 , 参数2 ,..., 参数n)

{

……

}

（2）有返回值的函数

有返回值的函数，指的是函数执行完了之后，会用return语句返回一个值，这个返回值可以供我们使用。

语法：

function 函数名(参数1 , 参数2 ,..., 参数n)

{

……

return 返回值;

}

2、函数的调用

如果一个函数仅仅是定义而没有被调用的话，则函数本身是不会执行的（认真琢磨这句话，非常重要）。

JavaScript函数调用方式很多，常见有4种：

① 直接调用

② 在表达式中调用

③ 在超链接中调用

④ 在事件中调用

此外，对于嵌套函数和内置函数，我们稍微看看就行，不需要深入了解。

【后话】：函数的内容是极其复杂的，我们在这一章学到的只是一点皮毛而已。高级部分如this、闭包、类、继承、递归函数、高阶函数等，都与函数有关。事实上，函数在JavaScript又被称为“第一等公民”，可见其重要程度。对于JavaScript进阶部分，可以关注本书配套网站：绿叶学习网（http://www.lvyestudy.com）。

第28章字符串对象

在JavaScript中，字符串对象常用的属性和方法如下所示。

字符串对象的属性

属性	说明
length	获取字符串的长度

字符串对象的方法

方法	说明
toLowerCase()、toUpperCase()	大小写转换
charAt()	获取某一个字符
substring()	截取字符串
replace()	替换字符串
split()	分割字符串
indexOf()、lastIndexOf()	检索字符串的位置

实际上，字符串对象的属性和方法还有很多，不过我们只需要掌握上面这些就够了，不需要浪费时间和精力去记忆其他没用的东西。对于初学者来说，可能很多人会问上表中的属性和方法都有什么用。其实字符串更多的是结合其他技术一起使用，等真正到了实战开发的时候就知道了。所以我们一定要认真掌握上面的每一种属性和方法，把基础打好。

第29章数组对象

在JavaScript中，我们可以使用“数组”来存储一组“相同数据类型”（一般情况下）的数据类型。

数组的创建一般用简写形式，如[1,2,3,4,5]。数组的获取和赋值，都是使用下标的方式，特别注意一点：数组的下标是从0开始，而不是从1开始的。

数组的属性

属性	说明
length	获取数组的长度

数组的方法

方法	说明
slice()	截取数组部分
unshift()	添加数组元素，在开头添加
push()	添加数组元素，在末尾添加
shift()	删除数组元素，在开头删除
pop()	删除数组元素，在末尾删除
sort()	数组大小比较
reverse()	数组颠倒顺序
join()	将数组元素连接成字符串

第30章时间对象

对于日期时间对象的方法来说，getXxx()用于获取时间，setXxx()用于设置时间。

用于获取时间的getXxx()

方法	说明
getFullYear()	获取年份，取值为4位数字
getMonth()	获取月份，取值为0（一月）到11（十二月）之间的整数
getDate()	获取日数，取值为1~31之间的整数
getHours()	获取小时数，取值为0~23之间的整数
getMinutes()	获取分钟数，取值为0~59之间的整数
getSeconds()	获取秒数，取值为0~59之间的整数

用于设置时间的setXxx()

方法	说明
setFullYear()	可以设置年、月、日
setMonth()	可以设置月、日
setDate()	可以设置日
setHours()	可以设置时、分、秒、毫秒
setMinutes()	可以设置分、秒、毫秒
setSeconds()	可以设置秒、毫秒

第31章数学对象

对于Math对象的属性来说，我们只需要掌握Math.PI就行。对于Math对象的方法来说，我们需要掌握下表中这些方法就行了。

Math对象常用方法

方法	说明
max(a,b,…,n)	返回一组数中的最大值
min(a,b,…,n)	返回一组数中的最小值
sin(x)	正弦
cos(x)	余弦
tan(x)	正切
asin(x)	反正弦
acos(x)	反余弦
atan(x)	反正切
atan2(y, x)	反正切（注意x、y的顺序）
floor(x)	向下取整
ceil(x)	向上取整
random()	生成随机数

第32章 DOM基础

1、DOM是什么？

对于DOM，我们总结出以下3点。

（1）DOM操作，可以简单理解成：元素操作。

（2）一个HTML文档就是一棵节点树，页面中的每一个元素就是一个树节点。

（3）每一个元素就是一个节点，而每一个节点就是一个对象。我们在操作元素时，就是把这个元素看成一个对象，然后用这个对象的属性和方法进行操作。

2、节点类型

DOM节点共有12种类型，不过常见的只有3种（其他不用管）：

（1）元素节点，nodeType值为1

（2）属性节点，nodeType值为2

（3）文本节点；nodeType值为3

3、获取元素

在JavaScript中，我们可以通过6种方式来获取指定元素：

（1）getElementById()

（2）getElementsByTagName()

（3）getElementsByClassName()

（4）querySelector()和querySelectorAll()

（5）getElementsByName()

（6）document.title和document.body

虽然这些方法名又长又臭，不过根据英文意思来记忆就很轻松啦。此外对于这些获取元素的方式，有几点需要我们注意的。

（1）只有getElementsByTagName()可以操作动态DOM，其他的都不行。

（2）querySelector()表示选取满足选择条件的第1个元素，querySeletorAll()表示选取满足条件的所有元素。

（3）当你选取的只有一个元素时，querySelector()和querySelectorAll()是等价的。

（4）getElementsByName只用于表单元素，准确来说一般用于单选按钮和复选框。

（5）getElementsByTagName()、getElementsByClassName()、getElementsByName()这3个方法返回的都是一个类数组（elements嘛），想要准确获取其中一个元素，可以使用数组下标来实现。

4、DOM操作

DOM操作的方法

方法	说明
createElement()	创建元素节点
createTextNode()	创建文本节点
appendChild	插入元素，在父元素最后一个子元素后面插入
insertBefore()	插入元素，在父元素任意一个子元素前面插入
removeChild()	删除元素
cloneNode()	复制元素
replaceChild()	替换元素

在HTML中直接添加元素，这是静态方法。而使用JavaScript添加元素，这是动态方法。这一章介绍的这些就是动态方法，也叫动态DOM操作。动态DOM操作在实际开发中用途是非常广的。

第33章 DOM进阶

1、HTML属性操作

在JavaScript中，有2种操作HTML元素属性的方式，一种是用“对象属性”，另外一种是用“对象方法”。不管是用哪种方式，都涉及2种操作：①获取HTML属性值；②设置HTML属性值。

（1）“对象属性”方式

obj.attr //获取值

obj.attr = "值" //设置值

（2）“对象方法”方式

obj.getAttribute("attr") //获取值

obj.setAttribute("attr","值") //设置值

对于操作HTML属性的2种方式，我们总结一下。

①“对象属性方式”和“对象方法方式”，这两种方式都不仅可以操作静态HTML的属性，也可以操作动态DOM的属性。

②只有“对象方法方式”才可以操作自定义属性。

2、CSS属性操作

（1）获取值

getComputedStyle(obj).attr

（2）设置值

obj.style.attr = "值"; //使用style对象

obj.style.cssText = "值" //使用cssText属性

3、DOM遍历

DOM遍历的属性

属性	说明
parentNode	查找父元素
childNodes、firstChild、lastChild	查找子元素，包含文本节点
children、firstElementChild、lastElementChild	查找子元素，不包含文本节点
previousSibling、nextSibling	查找兄弟元素，包含文本节点
previousElementSibling、nextElementSibling	查找兄弟原始，不包含文本节点

4、innerHTML和innerText

在JavaScript中，我们可以使用innerHTML属性很方便地获取和设置一个元素的“内部元素”，也可以使用innerText属性获取和设置一个元素的“内部文本”。

第34章事件基础

事件操作是JavaScript的核心，不懂事件操作，JavaScript等于白学。在JavaScript中，事件调用方式有2种：①在script标签中调用；②在元素中调用。

鼠标事件

事件	说明
onclick	鼠标单击
onmouseover	鼠标移入
onmouseout	鼠标移出
onmousedown	鼠标按下
onmouseup	鼠标松开
onmousemove	鼠标移动

键盘事件

事件	说明
onkeydown	键盘按下
onkeyup	键盘松开

表单事件

事件	说明
onfocus	获取焦点
onblur	失去焦点
onselect	选择文本
onchange	选择某一项触发（单选框、复选框、下拉菜单）

编辑事件

事件	说明
oncopy	用于防止文本被复制
onselectstart	用于防止文本被选取
oncontextmenu	用于禁止鼠标右键

页面事件

事件	说明
window.onload	页面加载完毕触发
window.onunload	离开页面触发

上面列出来的都是JavaScript中最常用的事件，对于不常用的，我们已经舍弃掉了。学完这些，我们可以自己尝试开发一下各种效果了，如图片轮播、Tab选项卡、回顶部等。

此外，这些事件大多数都是针对PC端的，像移动端还有一些特殊的事件如touchstart、touchend、touchemove等，感兴趣的小伙伴可以自行去了解一下。

第35章事件进阶

1、事件监听器

在JavaScript中，想要给元素添加一个事件，其实我们有2种方式：①事件处理器；②事件监听器。

obj.addEventListener("click", function () {……);}, false);

obj.onclick = function () {……};

如果想要为一个元素添加多个相同事件，必须要用事件监听器，而不能用事件处理器。

（1）绑定事件

obj.addEventListener(type , fn , false)

（2）解绑事件

obj.removeEventListener(type , fn , false);

removeEventListener()只能解除“事件监听器”添加的事件，如果要解除“事件处理器”添加的事件，需要用“obj.事件名=null;”方法来实现。

2、event对象

当一个事件发生的时候，这个事件有关的详细信息都会临时保存到一个指定的地方，这个地方就是event对象。

event对象的属性

属性	说明
type	事件类型
keyCode	键码值
shiftKey	是否按下shift键
ctrlKey	是否按下Ctrl键
altKey	是否按下Alt键

3、this

在事件操作中，可以这样理解：哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象。

第36章 window对象

一个窗口就是一个window对象，这个窗口里面的HTML文档就是一个document对象，document对象是window对象的子对象。

window对象下的重要子对象

子对象	说明
document	文档对象，用于操作页面元素
location	地址对象，用于操作URL地址
navigator	浏览器对象，用于获取浏览器版本信息

1、窗口操作

（1）打开窗口

window.open(url, target)

（2）关闭窗口

window.close()

2、对话框

3种对话框

方法	说明
alert()	仅提示文字，没有返回值
confirm()	具有提示文字，返回“布尔值”（true或false）
prompt()	具有提示文字，返回“字符串”

3、定时器

在JavaScript中，我们可以使用setTimeout()方法来“一次性”地调用函数，并且可以使用clearTimeout()来取消执行setTimeout()。

我们也可以使用setInterval()方法来“重复性”地调用函数，并且可以使用clearInterva()来取消执行setInterval()。

4、location对象

location对象的属性

属性	说明
href	当前页面地址
search	当前页面地址“？”后面的内容
hash	当前页面地址“#”后面的内容

5、navigator对象

在JavaScript中，我们可以使用window对象下的子对象navigator来获取浏览器的类型。

第37章 document对象

document对象其实是window对象下的一个子对象来的，它操作的是HTML文档里所有的内容。document对象常用的属性和方法如下。

document对象常用的属性

属性	说明
document.title	获取文档的title
document.body	获取文档的body
document.URL	当前文档的URL
document.referrer	返回使浏览者到达当前文档的URL

document对象常用的方法

方法	说明
document.getElementById()	通过id获取元素
document.getElementsByTagName()	通过标签名获取元素
document.getElementsByClassName()	通过class获取元素
document.getElementsByName()	通过name获取元素
document.querySelector()	通过选择器获取元素，只获取第1个
document.querySelectorAll()	通过选择器获取元素，获取所有
document.createElement()	创建元素节点
document.createTextNode()	创建文本节点
document.write()	输出内容
document.writeln()	输出内容并换行