HTML

html基本结构

后缀：.html
html：制作网页的语言
浏览器：编译html语言
标记：由特定字符进行分割
语法：<特殊字符>，成对出现

基本语法

<!DOCTYPE html>
<html>
	<head>
        <title>标题</title>
        <meta/>

    </head>
    <body>
        网页的主体
    </body>
</html>

一对标签之间的内容是文本内容

属性

标签内部<标签名属性名=“值”>

注释

1	<!--注释内容-->

基本标签

标题标签

<h1>
    一级标签
</h1>
<h2>
    ...
</h2>
<h6>
    ...一直到
</h6>

属性	描述	值
align	对齐方式	left\|right\|center

font标签

设置字体大小，颜色，类型

属性	值	值
size	大小	1-7（默认为3）
color	颜色	rgb(100,100,100)\|单词 \|16进制
face	类型	“宋体”

1	<font size="" color="" face=""></font>

段落标签

1
2
3

<p>
    段落内容
</p>

块状标签

1
2
3

<div>
    
</div>

<div> 是一个块级元素,可定义文档中的分区或节,可以把文档分割为独立的、不同的部分。

换行符

<br/>

水平分割线

1	<hr size="" width="" color="" align=""/>

属性	值	值
size	厚度	1-7（默认为3）
width	宽度	值\|百分比
color	颜色	rgb(100,100,100) 或单词或16进制
align	对齐方式	left\|right\|center

格式化标签

加粗

1
2
3

<b>文字内容</b>

<strong>文字内容</strong>

下划线

1	<u>文字内容</u>

斜体

1	<i>文字内容</i>

下标

1	<sub>底</sub>下标

上标

1	<sup>底</sup>上标

特殊字符

空格

&nbsp;

大于

&gt;

小于

&lt;

引号

&quot;

版权号

&copy;

注册商标

&reg;

图片

1	<img src=""/>

属性	描述	值
src	图片路径	绝对路径\|相对路径
width	宽度
height	高度
title	无法加载时的提示性文字
alt	提示文字
align	图片中文字对齐方式	top\|middle\|left\|right

列表标签

有序列表

<ol>
    <li>列表项的内容</li>
    <li>列表项的内容</li>
    <li>列表项的内容</li>
</ol>

属性	描述	值
type	标签类型	i\|A\|a
start	标记的起始位置

无序列表

<ul>
    <li>列表项的内容</li>
    <li>列表项的内容</li>
    <li>列表项的内容</li>
</ul>

属性	描述	值
type	标头	circle\|disc\|square

描述标签

<dl>
    <dt></dt>
    <dd>描述1</dd>
    <dd>描述2</dd>
    
    <dt></dt>
    <dd>描述1</dd>
    <dd>描述2</dd>
</dl>

超链接

普通超链接

1	<a href=""></a>

假象链接

1	<a href="#"></a>

功能性链接

1	<a href="mailto: xxx@xx.com"></a>

锚记链接

1.命名锚记点

1	<a name="锚记名称"></a>

2.链接锚记点

1	<a href="[页面地址]#锚记名称"></a>

属性	描述	值
href	链接地址
target	打开页面的目标位置	_slef\|_blank\|_new\|_top\|_parent

跑马灯标签

1	<marquee direction="" >滚动内容</marquee>

属性	值	值
height	高度
width	宽度
bgcolor	背景颜色
direction	滚动方向	left(默认)\|right\|down\|up
behavior	滚动方式	scroll(默认)\|slide\|alternate
scrollamount	滚动速度	6(默认)
scrolldelay	延迟时间	90(ms)(默认)

表格

表格的基本语法

<table height="" width="" border="" align="">
    <caption>表格标题信息</caption>
    <tr>一行</tr>
    <tr>
        <th>标题行内容</th>
        <th>标题行内容</th>
    </tr>
    <tr align="">
        <td>单元格内容</td>
        <td>单元格内容</td>
        <td>单元格内容</td>
    </tr>
</table>

属性	描述	值
height	高度
width	宽度
border	边框
bordercolor	边框颜色
bgcolor	背景颜色
background	背景图片	图片地址(默认平铺)
style	样式
align	对齐方式	left\|right\|center

标题行

1	<th>标题行内容</th>

标题的标题

1	<caption>标题</caption>

表格的合并

横向合并

1	<td colspan="(跨行数)"></td>

纵向合并

1	<td rowspan="(跨列数)"></td>

表格的间距和边距

1
2
3

<table cellspacing="" cellpadding="">
    
</table>

属性	描述
cellspacing	间距：单元格和单元格之间的距离
cellpadding	边距：单元格内容和单元格边框之间的距离

表单

表单的基础语法

1
2
3

<form action="" method="">
    
</form>

属性	描述	值
action	发送地址
method	发送方式	get\|post

表单元素

1	<input type="">

属性	描述	适用范围
name	表单元素的名称
value	表单的初试值
size	表单元素的宽度	只适用于text、password
maxlength	最大字符数	只适用于text、password
checked	默认被选中	只适用于radio、checkbox
src	图片地址	只适用于image

文本框type="text"

1	<input type="text" size="" maxlength="">

密码框type="password"

1	<input type="password" size="" maxlength="">

单选按钮type="radio"及name="Sex"

1	<input type="radio" checked="checked" name="Sex"/>

复选框

1	<input type="checkbox">

文件域

1	<input type="file">

普通按钮

1	<input type="button" value="按钮名称">

重置按钮

1	<input type="reset" value="按钮名称">

提交按钮

1	<input type="submit" value="按钮名称">

提交按钮

1	<input type="image" src="图片地址">

下拉列表框

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</select>

select属性	描述
size	呈现多少项

option属性	描述	例如
selected	表示被预选中	selected=“selected”
value	表示option的真实值

文本域或多行文本框

1	<textarea cols="" rows=""></textarea>

高级属性

属性
禁用控件	disabled=“disabled”
只读文本	readonly=”readonly”

框架集和内嵌框架

框架集

删掉body

<!DOCTYPE html>
<html>
	<head>
		<title>标题</title>
		<meta />
	</head>
	<frameset>
		<frame src=”引用页面”></frame>
		<frame src=”页面地址”></frame>
	</frameset>
</html>

frameset属性	值
框架集中列的数目和尺寸：cols	pixels(像素)\|%(百分数) \|*
框架集中行的数目和尺寸：rows

frame属性	描述	值
frameborder	是否显示框架周围的边框	0\|1
longdesc	包含有关框架内容的长描述的页面	URL
marginheight	上方和下方的边距	pixels
marginwidth	左侧和右侧的边距	pixels
name	框架的名称	name
noresize	规定无法调整框架的大小	noresize
scrolling	显示滚动条	yes\|no\|auto
src	显示的文档的 URL	URL

内嵌框架

1	<iframe src=""/>

属性	描述	值
src	显示文档的URL
width	宽度
height	高度
align	对齐	left\|right\|top\|middle\|bottom
frameborder	规定是否显示周围边框
name	框架名称
scrolling	是否在 iframe 中显示滚动条

样式表

级联样式表CSS(Cascading Style Sheet)

基本语法

<head>
    <style type=”text/css”>

	</style>
</head>

Style标签写在head标签中

选择器

标签选择器

标签名{ 样式属性:值; }

<style type="text/css">
	p{
		color: skyblue;
		font-size: 30px;
	}
</style>

1	<p >文字</p>

类选择器

.类名{ 样式属性: 值; }

在需要同时进行描述的标签中添加属性class="类名"
在style表中用 .类名的方式来选中这些对象

<style>
	.c1{
		color: skyblue;
	}
	.c2{
		font-size: 30px;
	}
	p{
		color: red;
	}
</style>

1
2
3

<h3 class="c1">显示类c1</h3>
<p >文字</p>
<p class="c1 c2">显示类c1与c2</p>

ID选择器

#id名{ 样式属性: 值; }

在需要独立样式描述的标签中添加属性id="id名"
在style标签中添加#id名

<style>
	.c1{
		color: red;
	}
	#d1{
		color: skyblue;
	}
</style>

1
2
3

<h3 id="d1">文字</h3>
<p id="d1" class="c1">显示ID选择器d1属性</p>
<p class="c1">文字</p>

ID选择器>类选择器>标签选择器

后代选择器

上一级选择器 下一级选择器{ 样式属性: 值； }

<style>
	.div1 .h{
		color: skyblue;
	}
</style>

只包含在上一级选择器中的下一级选择器才能应用此样式上，下级选择器可以是标签，类，id

<div class="div1">
	<h1 class="h">下级选择器</h2>
	<p class="h">下级选择器</h2>
</div>

交集选择器

标签选择器 类选择器|ID选择器{

样式属性: 值；

}

<style>
	p.c1{
		color: skyblue;
	}
</style>

1
2
3

<p class="c1">满足交集条件，可以显示</p>
<p>不可以显示</p>
<h2 class="c1">不满足交集条件，不可以显示</h2>

并集选择器

选择器1``,``选择器2``,``选择器3…{

样式属性: 值；

}

<style>
	h2{
		font-size: 30px;
		color: red;
	}
	h2,.c1{
		color: skyblue;
	}
</style>

选择器可以是任意标签，class，ID

1 2	<p class="c1">显示类c1</p> <h2>显示标签选择器与类选择器中的颜色</h2>

子选择器

上级选择器``>``下级选择器{

样式属性: 值；

}

<style>
	#div2>p{
		color: skyblue;
	}
</style>

选择所有位于上级选择器下满足下级选择器的直接子元素

层次选择器(兄弟选择器)

选择器1``+``选择器2{

样式属性: 值；

}

<style>
	#div2+p{
		color: skyblue;
	}
</style>

选择位于选择器1后的第一个选择器2

<div id="div2">
	<p>显示id的属性</p>
	<p>显示id的属性</p>
	<div>
		<p>不显示id的属性</p>
	</div>
</div>
<p>显示id的属性</p>
<p>不显示id的属性</p>

属性选择器

有当前属性就满足：

标签名``[属性名]{

样式属性: 值；

}

有当前属性和值就满足：

标签名``[属性名=值]{

样式属性: 值；

}

有所有属性就满足：

标签名``[属性名1][属性名2]{

样式属性: 值；

}

<style>
	p[class=c1]{
		color: red;
	}
</style>

<body>
	<p class="c1">显示c1的属性</p>
	<p class="c2">不显示c1的属性</p>
</body>

伪选择器

标签的状态
link	没有被访问时的样式
hover	鼠标悬停时的样式
active	点击但并没有释放鼠标时
visited	访问过后的状态

<style>
	a:link{
		color: red;
	}
	a:visited{
		color: darkblue;
	}
	a:hover{
		color: pink;
		font-size: 30px;
	}
	a:active{
		color: green;
	}
	#div2:hover{
		background: orange;
	}
</style>

四种状态同时设置必须按顺序：a:link a:visited a:hover a:active

<a href="#">超链接</a>
<div id="div2">
	显示div2的属性
</div>

样式表类型

行内样式

1	<div style=”color:red;”></div>

优点：优先级高

缺点：没有个内容分离，不利于扩展和复用

内部样式

<head>
    <style>
        #div1{
			color: blue ;
		}
    </style>
</head>

优点：和内容分离

缺点：不能复用

外部样式

单独写一个.css文件，在页面引用(通用性高)

选择器{

样式属性: 值；

}

1
2
3

#div1{
		color: orange;
	}

<head>
	<link rel="stylesheet" href="css文件地址"/>
</head>

优点：分离和复用

行内样式>ID选择器>类选择器>标签选择器|伪类选择器

行内样式>内部样式|外部样式 近水楼台先得月

优先级计算规则

千位：如果声明在style属性中该列加1分，否则为0

百位：在整个选择器中每包含一个ID选择器就在该列中加1分

十位：在整个选择器中每包含一个类选择器，属性选择器，伪类选择器就在该列上加1分

个位：在整个选择器中每包含一个标签选择器或伪元素就在该列上加1分

选择器例子	千位	百位	十位	个位	合计值
h1	0	0	0	1	0001
#indentifier	0	1	0	0	0100
h1+p::first-letter	0	0	0	3	0003
li>a[href*=zh-cn]> .inliner-waring	0	0	2	2	0022
没有选择器，规则在一个元素的style属性里 1	1	0	0	0	1000

字体样式

属性名	描述	备注
font-family	设置字体类型	font-family:“隶书”;
font-size	设置字体大小	font-size:12px;
font-style	设置字体风格	font-style:italic;
font-weight	设置字体的粗细	font-weight:bold;

字体组合样式：

<style type="text/css">
    p{
		font:italic bold 36px "宋体";
    }
</style>

组合顺序：font-style font-weight font-size font-family

文本样式

属性名	描述	备注
color	设置文本颜色	color:#00C;
text-align	设置元素水平对齐方式	text-align:right;
text-indent	设置首行文本的缩进	text-indent:20px;
line-height	设置文本的行高	line-height:25px;
text-decoration	设置文本的装饰	text-decoration:underline;
letter-spacing	设置字体间距	letter-spacing: length;

背景样式

属性名	描述	备注
background-color	背景颜色	background-color: 颜色;
background-image	背景图片	background-image: url(图片地址);
background-repeat	背景是否重复	background-repeat: no-repeat\|repert-x\|repert-y;
background-position	背景图片的位置	background-position: px\|百分比\|关键字;

注意：background-position

第一个值表示水平方向移动，正数向右，负数向左

第二个值表示垂直方向移动，正数向下，负数向上

<style>
	#div1{
		width: 500px;
		height: 500px;
		background-color: red;
		background-image: url(img/1.jpg);
		background-repeat: no-repeat;
		/*background-position: right bottom;*/
		/*第一个值表示水平方向移动，正数向右，负数向左
		* 第二个值表示垂直方向移动，正数向下，负数向上
		*/
		background-position: 20px 20px;
	}
</style>

背景组合样式：

<style>
	#div1{
        Backgroud:color image repeat position
	}
</style>

组合顺序：background-color background-image background-repeat background-position

列表样式

list-style-type值	描述
none	无标记符号
disc	实心圆
circle	空心圆
square	实心正方形
decimal	数字

<style>
	ul{
		list-style: none;
		/*list-style-type: none;*/
		/*list-style-image: url(img/Female.gif);*/
		font-size: 13px;
	}
    
	li{
        /*横向表格*/
		float: left;
	}

</style>

盒子模型

HTML页面中的元素看做是一个矩形盒子

边框

属性	描述	备注
border-color	边框颜色	rgb\|#000\|red
border-width	边框宽度	px
border-style	边框样式	(默认)none\|solid\|dashed\|dotted
border	组合属性	顺序：width ``style ``color
border-top-color	上边框颜色	border-top-color: #369;
border-right-color	右边框颜色	border-right-color: #369;
border-bottom-color	下边框颜色	border-bottom-color: #fae45b;
border-left-color	左边框颜色	border-left-color: #efcd56;
border-left	左边框组合属性	顺序：width ``style ``color
border-right	右边框组合属性	顺序：width ``style ``color

<style>
    img{
        border: 10px solid blue;
    }
</style>

内边距

属性	描述	备注
Padding-left	左内边距	px
Padding-top	上内边距	px
Padding-right	右内边距	px
Padding-bottom	下内边距	px
Padding	四边同时设置	四边边距相同`px`\|上下左右`px px`\|上左右下`px px px`\|上右下左`px px px px`

外边距

设置盒子的外边距，在元素边框外创建“空白”，通常这块空白不能放置其他内容

属性	描述	备注
margin-top	上外边距	px
margin-left	左外边距	px
margin-bottom	下外边距	px
margin-right	右外边距	px
margin	四边同时设置	四边边距相同`px`\|上下左右`px px`\|上左右下`px px px`\|上右下左`px px px px`

在水平方向居中：margin: auto

实际占位：元素宽度+两边padding+border+margin

上下外边距取较大值(塌陷)，左右外边距取和

显示与隐藏

display属性	描述	备注
display: block	块级盒子	将元素转换为块级元素，可以设置高度和宽度
display: inline	行内盒子	将元素转换为行级元素，行内盒子不能设置高度和宽度
display: inline-block	行内块盒子	将元素以块级元素形式表现，支持设置宽度和高度
display: none	隐藏	不保留物理空间

隐藏：visibility: hidden;保留物理空间

浮动布局

属性名	描述	备注
float	元素的浮动	left\|right
clear	清除浮动的影响	left\|right\|both

如果父元素中所有的元素都浮动，那么父元素的高度会没有

保持父元素高度：

添加一个空元素，给空元素加clear
使用overflow属性，特征是只要加上该属性后会自动给div固定高度

overflow属性	描述	备注
hidden	隐藏溢出元素	overflow: hidden
scroll	使用滚动条	overflow: scroll
visible	全部显示	overflow: visible
auto	自适应	overflow: auto

加入伪元素

<head>
    <style>
    	.clearfix::after{
			content: '';
			display: block;
			clear: both;
		}
	</style>
</head>
<body>
	<div class="clearfix">
        
    </div>
</body>

页面布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#container{
				
			}
            
			#header{
				
			}
            
			#main{
				
			}
            
			#left{
				
			}
            
			#right{
				
			}
            
			#footer{
				
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="header">
				
			</div>
			<div id="main">
				<div id="left">

				</div>

				<div id="right">

				</div>
			</div>
			<div id="footer">
				
			</div>
		</div>
	</body>
</html>

定位属性

position允许我们将一个元素从它在页面的原始位置准确的移动到另一个位置

定位方式
静态定位(static)	每个元素的默认属性
相对定位(relative)	允许元素相对于它原来的位置进行偏移
绝对定位(absolute)	将元素完全从页面的标准布局中移出，默认按照网页边缘进行定位，也可以按照被定位过的祖先元素进行定位
固定定位(fixed)	和绝对定位非常相似，将元素完全从页面的标准布局中移出，始终按照浏览器边缘进行定位

属性名	描述	备注
position: relative	相对定位	相对于自身位置偏移
position: absolute	绝对定位	相对于定位的父级进行移动
position: fixed	固定定位	相对于浏览器窗口进行定位

相关属性	描述	备注
left	距离左边的距离	px
right	距离右边的距离
top	距离上面的距离
bottom	距离下面的距离
z-index	垂直方向的先后顺序，值越大越靠前	int

注意：

扩展居中用法：

<style>
    #div{
		width: 400px;
		height: 400px;
		background: pink;
        
		margin: auto;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}
</style>

如果四个值都设为0，margin: auto，元素在正中间，如果元素没有设置大小，就平铺。

CSS3相关属性

文本属性

属性名	描述	示例
text-shadow	文字阴影	text-shadow: 5px -5px 5px red
word-wrap	单词换行	word-wrap: break-word

背景样式

属性名	示例	描述
background-size	background-size: 100% 100%;	将背景图片按照尺寸进行设定大小，第一个值表示宽度，第二个值表示高度，如果只写一个值，代表宽度，高度自动

background-size: cover：等比例缩放，最小占满

background-size: contain：等比例缩放，最大占满

边框属性

属性名	描述	示例
border-radius	圆角弧度	border-radius: 50%;
box-shadow	边框阴影	box-shadow: 10px 10px 10px red inset;

图片属性

<style>
    #div{
		opacity: 0.3;
		filter: alpha(opacity=30);
	}
</style>

渐变色

属性	描述	示例
linear-gradient	可以固定此，或者角度45deg	background: linear-gradient(45deg,red,orange,white);
radial-gradient	默认从中心点出发	background: radial-gradient(red,orange,white);

2D转换

transform属性

属性值	描述	示例
transalte(x,y)	元素的平移	transform: translate(30px,50px);
rotate(deg)	元素的旋转，正数顺时针，负数逆时针	transform: rotate(-30deg);
scale(num)	元素的缩放	transform: scale(1.5);

过渡属性

transition属性

属性	描述	示例
trainsition	过渡属性：`width`速度曲线匀速：`linear`	trainsition: width 2s linear 1s
transform-origin	设置旋转基点	transform-origin: right bottom ;

Javascript

Javascript基本概念

在web开发中的脚本语言，是一种基于对象，基于事件驱动的解释型语言。能够被大多数的浏览器解释，来实现与客户的交互，动态页面效果等，减轻服务器端的压力。

功能

数据验证
动态页面效果
与服务器进行交互（Ajax）

JS的组成

ECMAScript（核心和基础）
DOM（文档对象模型）
BOM（浏览器对象模型）

JS的写法

行内

1	<div onclick=”js脚本”></div>

内嵌

1	<script language=”javascript”>js脚本</script>

外部

先创建后缀名为js的文件，在页面中采用标签引用

1	<script src=”js文件的地址” type=”text/javascript”></script>

核心语法

编写规范

区分大小写

每行要以分号结束

注释

1 2	//单行注释 /* 多行注释 */

标识符规则

不能以数字开头，可以有数字，字母，下划线,$
不能是关键字

变量

声明变量

var 变量名；

赋值

变量名=初始值;

确定了变量的数据类型

1	var 变量名=值;

注意点：

连续声明多个，逗号隔开
可以不初始化使用，默认为undefined
数据类型是可以更改的

使用

数据类型

基本类型：String,number,boolean
特殊类型：null,undefined
复杂类型：Array,Object

String类型

可以使用单引号或双引号组成

\n换行

\\,\’,\”

number类型

不区分整型和浮点型

boolean类型

true或false，也代表1或0，实际参与运算时会自动进行转换

类型转换

隐式转换

数字+字符串：自动转换为字符串

数字+布尔：布尔转换为1或0

字符串+布尔类型：布尔转换为字符串

布尔+布尔：转换为数字

强制转换

toString():所有数据类型转换为字符串类型

parseInt(“”):强制转换成整数

找到第一个非数值的地方截取前面的数字，如果第一个就是非数值返回NaN

parseFloat(“”):强制转换成浮点数

找到第一个非数值和非小数点的（小数点只保留一次）的地方截取，保留前面的部分。

typeof(数据):返回数据对应的数据类型

isNaN():判断数据是否是一个数值类型

控制语句

分支结构

单分支：

if(){
    
}
else{
    
}

多重分支

if(){
    
}elseif(){
    
}elseif(){
    
}else{
    
}

switch(){
    case 值1:
    case 值2:

	break;
}

循环结构

1
2
3

while(){
    
}

1
2
3

do{
    
}while();

1
2
3

for( ; ; ){
    
}

输入

1	prompt("提示信息","输入框的默认值");

函数

函数语法

function 函数名([参数列表]){

	函数体

	return 值;

}

注意点：不需要指定返回值类型，参数也不需要指定参数类型，形参可以有也可以没有，如果形参定义了，但是没有传实参，会变成undefined

arguments对象

在函数体中，代表了参数数组，可以通过该数组访问所有的参数

函数参数个数：arguments.length

第i个参数：arguments[i]

匿名函数

常用的对象

String

属性：length：获取字符长度

方法：

toLowerCase()/toUpCase()

转换成小写/大写

indexOf(findstr[,index])

返回findstr在原字符串中的首字母位置，如果找不到返回-1

substring(start[,end])

从start开始到end（或者到最后）进行截取子字符串

replace(findstr,tostr)

从字符串中找到findstr，将其替换为tostr

split(bystr[,howmany])

将字符串按照bystr进行分割，分割成n个元素的数组。

Array对象

创建对象的方式

1	var a = new Array([length]);

初始化数组

1
2
3

a[0]=1;

a[1]=2;

创建的同时直接赋值

1	var b = new Array(100,200,’abc’,true);

直接赋值

1	var c = [100,200,400];

二维数组

创建：

1
2
3

var a = new Array(7);

a[0] = new Array(2);

赋值：

1	a[行][列] = 值

遍历：

嵌套循环

常用方法

字符串连接

jion([bystr])：使用bystr将数组元素连接成字符串

toString():默认右逗号连接

向数组中添加元素

push(元素)

并不会返回拼接后的数组

拼接多个元素

concat(val1,val2,val3,...,valn)

返回连接后的数组

截取子数组

slice(start[,end])

从start开始截取到end的前一位

数组的反转

反向数组

reverse()

数组排序

sort([func])

Math

无需创建直接使用，可以使用Math对象直接调用属性和方法

Math.PI

方法:

Math.random()：获取0-1之间的随机小数

Math.ceil(num)：向上取整

Math.floor()：向下取整

Date对象

用来处理日期和时间

创建

1
2
3

var date = new Date(); //默认是当前日期和时间

var date = new Date(“2020/01/01 ”);

方法：

getDate()：返回一月中的某一天（1-31）

getDay()：返回一周中的某一天（0-6）

getMonth()：返回月份（0-11）

getFullYear()：返回年份

getHours()：小时

getMinutes()：分钟

getSeconds()：秒

getMilliseconds()：毫秒

getTime()：1970年1月1日至今的毫秒数

set方法同上

BOM

浏览器对象模型，访问和操作浏览器的窗口，使js有能力和浏览器进行会话。

window对象

代表了浏览器窗口，所有js全局对象，函数，以及变量均是window对象的成员。

常用属性

属性名	描述
name	窗体名称
innerWidth/innerHeight	窗体显示区域的宽度/高度
history	浏览过的URL信息
location	当前URL的信息，通常可以进行获取和修改当前路径

history属性：

length：访问过的URL的数量

forward()：前进

back()：后退

go(n)：n为正数表示前进n页，n为负数表示后退n页

location属性：

href：设置当前窗口正在浏览的网页地址

replace(url)：转向对应的url地址，不可以后退

reload()：重新载入地址，等价于刷新

常用方法

alert();
prompt();
confirm(“”)：确认对话框，确认和取消按钮
open([url],[name],[config])：打开一个新窗口
close()：关闭浏览器窗口
setInterval()/setTimeout()：定时器

setInterval(exp,time)：周期性定时器，以一定的时间间隔执行代码，循环往复

exp：执行语句

time：时间周期，单位毫秒
clearInterval(tid)：停止定时器

tid:定时器对象
setTimeout(exp，time)：一次性定时器，延迟time时间后执行对应的代码一次。
clearTimeout(tid)

DOM

文档对象模型，提供了一套方法（函数），通过这组函数可以操作网页中的元素，属性，样式，文本等，以及对页面中所有的事件作出反应。

DOM树

HTML页面–浏览器加载文档–DOM Tree–添加，删除，修改

DOM tree由节点组成的

document：根节点

document.documentElement：html根节点

element：元素节点

attribute：属性节点

text/innerText：文本节点

DOM操作Element节点

查找元素

直接查找

document.getElementById()：根据id查找唯一的元素，只返回第一个

document.getElementsByTagName()：标签名获取集合NodeList

document.getElementsByName()：根据name属性获取集合

document.getElementsByClassName()：根据类名获取集合

querySelector()：根据css选择器查询符合条件的第一个元素节点，如果找不到，返回null。

querySelectorAll()：根据css选择器查询符合条件的所有元素节点的集合，如果找不到，返回null。如果找不到，返回空数组。

间接查找

childNodes：返回所有的子节点

children：返回所有的子元素

firstChild：第一个字节点

firstElementChild：第一个子元素

lastChild：最后一个字节点

lastElementChild：最后一个字元素

nextSibling：下一个同级节点

nextElementSibling：下一个同级元素

previousSibling：：上一个同级节点

previousElementSibling：上一个同级元素

parentNode：父节点

注意：静态元素通过使用直接查找，动态元素通过间接查找

添加，删除，替换元素

creatElement(tag):新建节点

appendChild(newitem)：作为父节点的最后一个子节点追加

inesertBefore(newitem，refitem)：插入到父节点中refitem节点的前面

父节点.removeChild(删除对象)：删除

父节点.replaceChild(新节点，被替换节点)：替换

DOM操作Attribute

node.属性名：获取或设置属性值

DOM操作文本

node.innerText：用来设置成对标签内部的文本内容，不会解析标签和样式

node.innerHTML：用来设置成对标签内部的html内容，会解析标签和样式

DOM操作样式

行内

node.style.样式属性名

特点：优先级高，比较麻烦

绑定类样式名

node.className

classList

node.classList.add() 追加类样式

常见的事件

onclick,onmouseover,onmouseout,onmouseup,onmousedown

onkeydown,onkeyup

onload,onchange,onfocus,onblur,onresize,onsubmit

window.onscroll:滚动条的滚动事件

document.documentElement.scrollTop

document.body.scrolltop

样式属性

属性名	描述
div.style.left	左边距，带px单位，必须在html标签内部指定值
div.style.offsetleft	左边距，不带单位，不能用于设置左边距
innerWidth、innerHeight
div.clientWidth/div.clientHeight	实际宽度高度，不包含边框线