前端HTML、CSS、JavaScript知识点总结

    <html> - --- 根标签

        <head>  ---头部分(指定编码以及窗口标题)

            <meta  /> ---- 执行编码格式

            <title>指定标题</title>

        </head>

        <body>

            主体部分,所有的常用的html标签都这里。
    
        </body>

    </html>

(7)html注释:

3.html中头部常用标签

(1)页面标题标签:<title></title>

(2)设置页面字符编码:

(3)网页描述:

(4)设置搜索关键字:

(5)设置当前页面几秒后跳转到另一个页面:

(6)导入外部css文件：<link>

(7)囊括书写的css内部样式：<style>...</style>

(8)囊括和导入js代码<script>...</script>

4.html中body常用标签

4.1.块级标签:标签要独占一行

(1)标题标签:设置标题

<h1>~<h6>字体由大到小。

(2)段落标签:<p></p>

(3)水平线标签:<hr/>

(4)无序列表:类型(实心圆，空心圆，方块)

    <ul type="square">

        <li>面条</li>

        <li>泡面</li>

        <li>燕窝</li>

    </ul>

(5)有序列表:类型(数字，字母，罗马数字)

    <ol type="I">

        <li>苹果</li>

        <li>梨</li>

        <li>橘子</li>  

    </ol>

(6)自定义列表：用于对概念的解释说明,或图文混排

    <dl>

        <!--dt中存放的要解释的概念或图片-->

        <dt>java</dt>

        <!--dd中存放的对dt的说明文字-->

        <dd>
            
            java是一种纯面向对象的语言</dd> <dd>java是一种跨平 台的语言

        </dd>

    </dl>

(7)容器标签:<div></div>

(8)表格标签：<table></table>

(9)表单标签：<form></form>

4.2.行级标签(内联标签):内容有多大占多大的位置

(1)换行标签:<br/>

(2)段落缩进标签:blockquote，段落首行缩进 <blockquote></blockquote>

(3)滚动标签:marquee，没有指定滚动方向，默认从右到左。

1)behavior:滚动方式

slide:滚动到某一边停止

alternate:来回滚动(两端)

scroll:穿梭滚动

2)direction:滚动方向，left(从右往左),right(从左往右)。

3)scrollamount:滚动速度。

4)举例：

    <marquee behavior="scroll" direction="right" scrollamount="20" bgcolor="pink">XXXXXXXXX</marquee>

(4)上标标签:sup,给某个文本设置上标。

举例：数学中的幂(平方、立方)：X<sup>2</sup>。

(5)下标标签sub，给某个文本设置下标。

举例：化学中的化学式：H2O H<sup>2</sup>O。

(6)原样输出标签:pre,被包裹的文本原样显示:<pre></pre>

(7)行内标签span:<span></span>

(8)加粗标签,加粗文本:strong,<strong></strong>

(9)斜体标签,是文本以斜体显示:em,<em></em>

(10)字体标签:font

(11)居中标签:center，使内容居中:<center></center>

5.表格：table

(1)属性：border:边框大小。

width:表格宽度。

height:表格的高度。

align:表格在浏览器的位置。

cellspacing:设置表格边框线和单元格之间的距离。

cellpadding:设置单元格和单元格的距离。

(2)子标签

caption:表格的标题标签。

tr:行标签。

td:单元格。

th:表头标签:自动居中并且适当加粗。

(3)单元格的合并:

合并行:rowspan:占了几个单元格。

合并列:colspan:占了几个单元格。

6.表单标签form

(1)表单:整个表单是块级标签,表单中每个元素是等级标签。

(2)属性：

action: url 本地地址/后台地址。

method:常用的提交方式get/post。

(3)应用场景：

1)注册

用户填写基本信息，前台校验，提交到后台的地址。

后台查询当前用户是否存在,如果不存在用户才能注册。

2)登录

输入用户名和密码,在后台查询数据库中是否存在这个用户名和密码存在,才可以登录;没有注册,先要注册。

(4)get方式和post方式的区别

get方式:

1)直接将数据提交到url地址上。

举例：后台地址?username=zhangsan&password=123

2)不适合提交隐私数据。

3)由于是提交在地址栏上,它提交的数据大小有限制。

post方式

1)不会将用户数据提交在地址栏上，存在于请求头下面。

实体内容：form data：username=xxx&password=123456

提交方式:get/post提交密码数据需要使用MD5加密或 springSecurity。

2)相对于get方式,post更安全。

3)它不是直接提交在地址栏上,提交的数据大小没有限制。

(5)表单中的标签

input标签

select标签 :下拉菜单

子标签:option:下拉选项

textarea:文本域，书写文字描述

7.input标签

(1)属性：

type:类型。

value:输入框的默认值。

placeholder:输入内容,自动获取焦点。

name属性:给系统后台写的内容，提交数据的名称(标记)。

(2)type属性的值：

text	文本输入框
password	密码输入框
hide	隐藏域: 没有效果,可以携带数据。
date	日期组件
radio	单项按钮
checkbox	复选框
file	文件上传
submit	提交按钮
reset	重置按钮
image	图片按纽
button	文本内容就是当前按钮的名称

(3)注意事项:radio和checkbox，同一组类型信息，指定相同的name属性值。

举例：checked="checked" 选中的状态。

8.图像标签:img

(1)属性：

src :连接到图片资源地址。

width:指定图片的宽度。

height:指定图片的高度。

单位:指定像素px。

指定百分比:占当前50%，宽度和高度占整个分辨率的百分比。

title:当鼠标悬浮图片上的提示文字

alt:替换文本图片资源失效的时候,起作用。

(2)注意：

1)如果一个html页面中有3个图片(网络图片),请求某个服务器,会发送4次请求。

2)请求页面http://域名:端口号/当前html资源文件地址。

3)每一个图片src加载都会发送一次请求。

9.超链接:a标签

(1)属性：

href属性:跳转到资源地址

target属性:不指定,默认当前窗口直接打开地址。

_blank:新建窗口打开资源文件。

_self(默认值):当前窗口直接打开。

(2)资源地址：本地资源地址、网络资源地址、指定的服务器地址。

(3)协议：

http://超文本传输协议

thunder://:迅雷协议

如果本地有客户端软件，直接打开迅雷软件，没有跳转下载。

mailto :邮件协议

(4)http协议的执行流程:

在C:\Windows\System32\drivers\etc\hosts文件

hosts文件记录了本地网站域名以及ip地址：localhost:127.0.0.1

(5)如果hosts文件有访问的域名,并且对应ip,直接本地打开文件。

如果找不到,调用网卡来联网操作----DNS服务器(网络运营商)。

(6)超链接的应用场景:

1)连接到：网络资源地址/本地资源地址。

2)锚链接来使用

在同一个html页面的使用

a)打锚点: 定义一个标记位置

b)创建一个跳转链接

不同html页面的使用

a)在另一个页面的某个位置打锚点: 定义一个标记位置。

b)在当前页面上创建跳转标记

10.frameset标签:框架集标签

(1)框架集:框架集与<body>标签不共存。页面要么不用框架集,要用框架集, 整个页面必须全用。

(2)作用:用于将页面划分几个模块来布局.

(3)优点:方便布局.

(4)缺点:加载速度慢;灵活性差.

(5)标签:

frameset:可以整合多个页面与一个页面中。如果一个xxx系统由很多 html页面组成，那么可以使用frameset框架集标签。

frame：一个frame中包含一个html页面。

(6)frameset属性:

rows:设置上下页面关系的权重(占整个框架集的百分比);

cols:设置左右页面关系的权重(占整个框架集的百分比);

11.内联框架

(1)作用:可以在页面上任意地方引入其他页面。

(2)优点:灵活性高.

(3)举例：

    <iframe src="6.表单.html" frameborder="0" width="100%"></iframe>

12.特殊符号

含义	符号
小于号	<
大于号	>
与字符	&
引号	"
己注册	®
版权	©
商标	™
空格

13.元素(标签)的分类

(1)分类：块状元素、行内元素、内联块状元素

(2)块状元素：独自占据一行的元素

1)html中的块状元素<div>、<p>、<h1>、<form>、<ul>、<li>等。

2)将行内元素显示设置为块状元素：display:block。

将行内元素a转换为块状元素，使a元素具有块状元素特点

a{display:block;}

3)块状元素特点：

①每个块状元素都独占一行。

②元素的高度、宽度、行高以及顶和底边距都可设置。

③元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

(3)行内元素(内联元素)

1)html中的行内元素（inline）元素：<span>、<a>、<label>、<input>、 <img>、<strong>、<em>等。

2)将块状元素设置为行内元素也可以通过代码display:inline,。

3)行内元素特点：

①和其他元素都在一行上；

②元素的高度、宽度、行高及顶部和底部边距不可设置；

③元素的宽度就是它包含的文字或图片的宽度，不可改变。

(4)内联块状元素(css2.1新增)

1)描述：内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点。

2)将元素设置为内联块状元素：display:inline-block

3)内联块状元素:<img>、<input>

4)inline-block元素特点：

①和其他元素都在一行上；

②元素的高度、宽度、行高以及顶和底边距都可设置。

二、CSS

1.CSS

(1)定义：层叠样式表（Cascading Style Sheet)。

(2)页面内容和样式分离：HTML专门用来展示内容,CSS专门用来排版写样式。

(3)CSS文件后缀名:.css

(4)页面引入CSS的方式:

1)行内样式:在标签中直接用style属性写样式。

优点:直接方便。

缺点:代码复用性差;内容和样式混在一起,违反W3C要求。

    eg:<h1 style="color:red;">写代码要细心</h1>

2)内部样式:在<head>标签中写

优点:可以实现页面内样式复用

缺点:不能实现页面间的样式.

    eg:<style type="text/css"> h2{color:red; }</style>

3)外部样式:先写一个外部css文件,那个页面要用这个文件,就在这个页面的<head>中用<link/>引入就可。

优点:可以实现页面间样式复用。

    eg:<link rel="stylesheet" href="css/1.css" />

4)(了解)导入样式:在<head>中<style>标签中用@import导入外部CSS 文件。

    举例：<style type="text/css"> @import url("css/1.css"); </style>

5)注意:导入样式 VS 外部样式

导入样式只有部分浏览器支持，外部样式所有浏览都支持。

加载时机不同:

导入样式,先加载完html页面,再加载导入css文件。

外部样式,执行时就将CSS文件中代码引用了。

(5)优先级(就近原则):内联样式> 嵌入样式> 外部样式。

(6)CSS注释:/*注释内容*/、//

2.CSS的语法

(1)选择器分类：标签选择器、类选择器、ID选择器、通用选择器、后代选择器、子类选择器、相邻兄弟选择器、群组选择器、属性选择器。

(2)标签选择器:选中页面上所有标签名相同的标签。

标签名称{样式代码;}

(3)优先级:id选择器>类选择器>标签选择器

(4)类选择器:先给标签取类名,然后以.类名开头。

举例:

    给标签取类名

    <h3 class="类名">热门新闻</h3>

    类选择器

    .class属性值{ 书写样式代码;}

(5)ID选择器:先给标签取id名,然后以#id名开头。

注意:在一个 HTML文档中，标签的id属性值不能重复，但可以有多个不同ID选择器。

举例:

    给标签取id名

    <h4 id="id值">最新新闻</h4>

    id选择器
    
    #id值{书写样式代码;}

(6)通用选择器(全局选择器):用*表示选中页面上所有标签。

    举例:*{color: orangered; }

(7)后代选择器:选择器之间以空格分隔。

    举例:body span{ color: red; }

(8)子选择器:选择器之间以>分隔

    举例:body>span{ color: red; }

(9)相邻兄弟选择器:选中当前标签紧跟着的同级标签,选择器之间以+分隔。

    举例:h2+h3{ color: red; }

(10)群组选择器:选择器之间以“,”分隔。

    举例:h1,h2,h3{ color: red; }

(11)属性选择器:标签名[属性1][属性名2=值]

    举例:标签名[属性1][属性名2=值]

        h3[class]{ color: red; }

(12)伪类选择器：描述标签状态

1)状态：

link:鼠标没有访问的状态。

hover:鼠标经过标签状态。

active:激活状态,鼠标点击但是没有松开的状态。

visited:已经访问过的,点击后松开的状态。

2)格式

选择器:状态{

css样式代码

}

3)注意：

在 CSS 定义中，a:hover必须被置于 a:link 和 a:visited 之后，才是有效的。

在 CSS 定义中，a:active 必须被置于a:hover 之后，才是有效的。

(13)权值：浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。

1)权值的规则：

标签选择器的权值为1，

类选择器的权值为10，

ID选择器的权值最高为100。

2)例如下面的代码：

        p{color:red;} /*权值为1*/

        p span{color:green;} /*权值为1+1=2*/

        .warning{color:white;} /*权值为10*/
    
        p span.warning{color:purple;} /*权值为1+1+10=12*/

        #footer .note p{color:yellow;} /*权值为100+10+1=111*/

3)!Important:为样式设置最高权值。

        p{color:red!important;}

2.CSS文本属性

(1)color:设置文本颜色

color: red;

(2)direction:设置文本方向:

默认值:ltr

direction: ltr;

(3)line-height:设置行高 :行间距

line-height: 5px;

(4)letter-spacing:字符间距

letter-spacing: 10px;

(5)设置的对齐方式 text-align

text-align: center;

(6)text-decoration:设置文本修饰

none:默认值

text-decoration:none;

(7)line-through:中划线

overline:上划线

underline:下划线

(8)word-spacing:单词间距

系统默认两个字组成一个单词。

3.CSS字体属性

(1)font-family :字体系列，是字体库中的所有字体。

font-family: "楷体";

(2)font-size:字体大小

font-size: 30px;

(3)font-style:字体风格

默认值:normal :正常的字体

font-style: italic;

font-style: oblique;

(4)font-weight:设置字体的粗细程度

bold 等价700px 适当加粗

font-weight: bold;

(5)font字体的简写属性:将所有的字体属性在声明中定义

        font:font-style font-weight font-size  font-family

        font:italic bold 40px "楷体";

4.CSS背景属性

(1)背景颜色:background-color

background-color: darkgray;

(2)background-image:设置图像为背景

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

(3)background-repeat:设置图像是否重复以及如何重复

repeat:水平方向/垂直方向重复

repeat-x:水平方向重复

repeat-y:垂直方向重复

no-repeat:不重复

(4)backgroun-position:top left

图像在浏览器中的垂直位置top/center/bottom

图像在浏览器中的水平位置left/center/right

如果设置图像不重复,默认的位置：background-position: top left;

(5)背景的简写属性:background

        格式：background:background-color background-position

                        background-repeat background-image

        举例：background: red top center no-repeat url(img/1.jpg);

5.CSS列表属性

(1)list-style-type :设置列表前面的标记图形

list-style-type: none;

(2)list-style-image:自定义图形

list-style-image: url(img/start.jpg);

(3)list-style-position:设置列表项标记的放置位置。

(4)list-style简写属性

        list-style:list-style-type list-style-image

        list-style: none url(img/start.jpg);

6.CSS边框属性

(1)边框属性:边框的宽度,颜色,样式

(2)边框有四个边:给四个边分别设置颜色、宽度、样式比较麻烦，所以使用简化格式。

(3)边框的简写属性:border:border-width border-style border-color

border:5px solid #000;

(4)其他作用

border-collapse :设边框和单元之间空隙。

指定为collapse没有空隙：border-collapse: collapse;

border-radius:像素;设置边框的角弧度。

(5)注意事项:

1)某个边框没有设置颜色,宽度或者样式,它会补齐对边的颜色,宽度以及样式。

2)默认的方向:边框的颜色/边框的宽度/边框的样式:上、右、下、左。

7.盒子模型

(1)盒子模型:万物皆盒子，将任意标签看成是一个盒子。

(2)盒子模型的组成:

标签内容,边框(border),内边距(padding),外边距(margin)

(3)内容大小：width*height(宽度*高度)

(4)厚度：边框的像素大小。

border:像素边框线型颜色;

(5)外边距：盒子与盒子之间的距离(像素)。

margin:上右下左;

(6)内边距：是盒子内容和边框之间的距离(像素)。

padding:上右下左;

(7)盒子模型的宽度=元素的宽度+左右内边距+左右边框线。

(8)盒子模型的高度=元素的高度+上下内边距+上下边框线。

(9)每个页面从里到外的结构: margin->背景颜色->背景图片->padding->content->border

(10)注意：能用外边距微调距离时,就不要用内边距。

8.css布局模型

(1)描述：布局模型与盒模型一样都是CSS最基本、最核心的概念。但布局模型是建立在盒模型基础之上，又不同于我们常说的CSS布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。

(2)CSS三种基本的布局模型：

流动模型（Flow）、浮动模型 (Float)、层模型（Layer）

9.流动模型

(1)流动（Flow）：自上而下。

(2)流动（Flow）是默认的网页布局模式。网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的。

(3)特征：

1)块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。

2)在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。

10.浮动模型

(1)浮动模型：就是设置元素浮动，可以让两个块状元素并排显示。任何元素在默认情况下是不能浮动的，但可以用CSS中的float属性定义为浮动。

(2)浮动属性:float

(3)值:left:左浮动

right:有浮动

(4)清除浮动属性

clear:

left:左边不浮动

right:右边不浮动

both:左右两边浮动

(5)注意：

1)设置浮动的同时一定要先设置块状元素的宽度，且需要浮动的几个元素宽度加起来一定要小于容器元素的宽度。

2)一旦元素设置了浮动属性,就会脱离文档流,后面的元素受到浮动影响, 如果后面的元素不想受浮动影响, 就要清除浮动。

11.层模型

(1)层布局模型:就像是图像软件PhotoShop中非常流行的图层编辑功能，每个图层能够精确定位操作。

(2)CSS中通过定位属性，可以让html元素在网页中精确定位。

(3)层模型有三种形式：绝对定位、相对定位、固定定位。

(4)定位属性：position

(5)值：absolute(绝对定位)、relative(相对定位)、fixed(固定定位)、 static(默认，静态定位)。

(6)搭配属性：left/right+top/bottom;

(7)绝对定位：相对当前设置了position的标签的父标签，或父父级标签，或视窗原点来发生偏移.脱离标签文档流,所以当前标签后面的标签会将当前标签位置占据。

(8)相对定位：相对标签原来位置发生偏移,不影响其他标签。没有脱离标准文档流。

(9)固定定位：相对于浏览器窗口进行定位。

z-index:数字; 设置标签所在页面层次,默认页面在0层

(10)相对于其它元素定位

1)相对于其它元素进行定位:position:absolute与position:relative

2)参照定位的元素必须是相对定位元素的前辈元素：

        <div id="box1"><!--参照定位的元素-->
    
            <div id="box2">相对定位元素</div><!--相对定位元素-->
    
        </div>

3)参照定位的元素必须加入position:relative;

        #box1{

            width:200px;

            height:200px;
    
            position:relative;
    
        }

4)定位元素加入position:absolute，再使用top、bottom、left、right 来进行偏移定位。

        #box2{
    
            position:absolute;

            top:20px;

            left:30px;

        }

(11)作用：定位一般用来微整标签的位置,能用相对定位,就不要用绝对定位。

12.CSS布局

(1)div+css:整体布局.

(2)div+ul-li:做导航条/左右侧菜单

(3)div+dl-dt-dd:做图文混排功能

(4)form+table:做规整的表单

(5)margin:0px auto; 页面整体居中

(6)text-align:center;文字水平居中

(7)line-height:高度; 文字在这一行垂直居中

(8)vertical-align: middle;当前这一行如果有文字和图片时,想让图片垂直居中, 用这个属性。

三、JavaScript之ECMAScript

1.JavaScript

(1)描述:一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型。它的解释器被称为JavaScript引擎，作为浏览器的一部分，广泛用于客户端的脚本语言，用来给HTML网页增加动态功能。

(2)组成部分

ECMAScript语法

作用：描述了Javascript的核心语法和基本对象。

DOM:（Document Object Model）文档对象模型

作用：DOM 描述了处理网页内容的方法和接口。

BOM(Browser Object Model)浏览器对象模型

作用：BOM 描述了与浏览器进行交互的方法和接口。

(3)JS文件以.js为后缀名

(4)JavaScript的基本结构

1)基本结构：

    <script [type=”text/javascript”|language="javascript"]>

        <!—脚本语句-->

    </script>

2)script默认类型是Javascript类型，也可以选中指定脚本类型。

3)type=”text/javascript”|language="javascript"两个选任意一个都可以。

4)注意：javascript可以出现在html代码段的任何位置，一般把他放在head标签内。在一个html文件中可以出现多个javascript脚本段按从上到下的顺序开始执行。

(5)js的引用方式:

1)内部方式:在script标签中,书写js代码。

    <script>js代码</script>

2)外部方式:在js文件夹下去创建xx.js文件,文件中使用js代码，

在当前页码中使用script标签引入js文件(src属性引入js文件)。

    <script src=”js/index.js”></script>

3)行内样式：

    <input type="button" value="弹出消息框" onclick="javascript:alert('欢迎你');"/>

4)注意：

一般把写好的脚本代码单独放在一个js文件内，通过外部样式引用进来。外部文件引用在<script src=”路径”> 中，script标签之间不能包含脚本代码段。

(6)注释：

单行注释://

多行注释:/***/

2.js语法(ECMAScript)

(1)语法约定：Js严格区分大小写,变量名必须以字母或下划线开始,两个语句之间用”;”结束。

(2) 数据类型：

undefined：变量被声明后，但未被赋值。

string：用单引号或双引号来声明的字符串。

boolean：true或false

number：整数或浮点数

object：javascript中的对象、数组和null

如果想测试一个变量的数据类型可以使用运算符typeof来测试。

(3)变量：

1)变量的定义：js是一个弱数据类型的脚本语言,所有类型的变量都用 var关键字来定义。

2)定义：var age = 24; number型

3)定义方式：可以先声明再赋值，同时声明和赋值，不声明直接赋值。

4)可以重新声明变量，且不二次赋值的话，原始的值保持不变。

    例如：var a = 3; var a;  输出a的值仍然是3。

    如果  var a = 3;  var a = 4 ;  则输出的a的值将会为4。

(4)运算符:与java中的使用相同

1)算术运算符+,-,*,/,%。

在与Number类型进行运算时，true表示1，flase表示 0。

2)赋值运算符:=,+=,-=,*=,/=,%=

3)比较运算符:<,>,<=,>=,==,!=,===。

4)逻辑运算符:逻辑单与(&),逻辑单或(|),逻辑双或(||),逻辑双与(&&) 逻辑非(!)。

开发中常用:&& ||

5)单目运算符：++，--

6)三元运算符:表达式成立,执行true的结果;否则执行false的结果。

比较表达式? 执行true的结果:执行false的结果;

3.Js语句

(1)顺序结构语句:在script中代码由上而下依次进行加载的语句。

(2)选择结构语句

1)if语句

        if(){}

        if(){...}else{...}

        if(){...}else if(xx){...}else{}

2)switch语句

        switch(表达式){

            case值1:可以是常量,也可以是变量。

                语句1;

                break ;

                ...

            default:

                语句...

                break ;

        }

(3)循环结构语句

    for:for(变量初始化;条件表达式;步进语句)

    while:while(条件表达式){循环体语句;步长语句;}
    
    do-while:do(循环体语句;步进语句;)while(条件表达式);

    for-in语句:遍历自定义对象的属性或者数组,类似foreach。

    for(var 变量名 in  对象名称/数组名称){

        输出/弹框 对象名称[变量名]

    }

(4)if语句注意事项:

如果表达式是非0整数number,条件成立;否则的不成立。

如果表达式是非空字符串/字符string,条件成立;否则不成立。

如果表达式是非null 的对象,条件成立;否则不成立。

(5)swicth语句注意事项:

在js中,case后面不仅仅可以是常量,也可以是变量。

对比Java中switch它 case语句只能是常量。

(6)with(抽取的对象){...}

    with(document){

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

            for(var j =1 ; j <=5 ; j ++){

                write("* ") ;

            }

            write("<br/>") ;

        }

    }

4.js函数

(1)js中常用的系统函数：

isNaN()：判断一个常量或变量不是一个数值。

Number()：把一个对象(object类型的数据)转换成数字，如果转换的是非数值型数据，则会返回一个NaN(Not a Number非数字)。

parseInt(string)：把一个字符串转换成一个整数并返回解析的整数。

注意：如果被解析的字符串不是以数字开头，则会返回值为NaN(空格除外)，且解析出来的数字只是开头连续的数字。

String()：函数把对象的值转换为字符串。

(2)自定义函数：在js中,使用function定义函数。

    自定义函数格式

        function 函数名称(形式参数列表){

            ...

        }

(3)调用函数:

单独调用:函数名称(实际参数列表)。

赋值调用:函数有返回结果，可以使用return语句。

(4)注意事项:

1)函数名称后面的形式参数列表,不能带var(不能带数据类型)。

2)定义函数的时候,不需要返回值类型,直接书写函数名称，而且方法体中可以有return语句。

3)js中不存在方法重载的概念,如果函数名称相同,后面的函数直接就将前面的函数覆盖。

4)当下面的函数将上面的覆盖掉之后

当实际参数个数 < 形式参数个数，函数依然被调用,值是NaN。

当实际参数个数>形式参数个数:将最后一个实际参数舍弃掉,前面的参数进行运算。

5)函数中存在默认的数组:arguments

作用就是将实际参数和形式参数进行绑定赋值。

5.自定义对象

(1)定义一个函数

    function  函数名称(属性){

        给属性进行赋值;

    }

(2)创建对象

    var 对象名 = new 函数名称(实际参数列表) ;

(3)四种自定义对象方式

方式1:类似于Java中的有参构造

    function Person(name,age){

        //追加属性

        this.name = name ;

        this.age = age ;

        //追加方法

        this.speak = function(){

            alert("调用了说英语的功能") ;

        }

    }

    //创建对象

    var p  = new Person("张三",30) ;

方式2:类似于Java无参构造

    function Person(){

    }

    //创建对象:

    var p = new Person() ;

    //给对象追加属性

    p.name = "李四" ;

    p.age = 40 ;

    //给对象追加方法

    p.speak =function(){

        alert("调用了说英语的功能") ;

    }

方式3:利用Object(js中称为模板对象)

    var p = new Object() ;

    p.name = "王五" ;

    p.age = 25 ;

    //给对象追加方法

    p.speak =function(){

        alert("调用了说英语的功能") ;

    }

方式4:字面量值的方式(json串)

    //json串
    {

        key1:value1,

        key2:value2,

        key3:value3,

        .....

    }

    var p = {

        "name":"王五",

        "age":26,

        "speak":function(){

        alert("会说英语") ;

    }

6.String内置对象

(1)js中创建字符串对象:

    var对象名=new String("字符串值");

(2)String对象的比较

1)两个通过”new”得到的字符串对象，使用”==”进行比较，结果为 false。

2)两个赋值同一字符串常量得到的字符串对象，使用”==”进行比较，结果为true。

3)两个字符串调用valueOf()获取值，进行比较，结果为true。

(3)String常用的方法

charAt(index):返回指定索引处的字符。

concat(otherstring):字符串拼接功能。

fontcolor(颜色单词/rgb的写法):设置文本颜色。

indexOf(num):当前某个字符第一次在字符串中出现的位置。

substr(start,length):从指定位置开始,截取指定长度。

substring(start,end):从指定位置开始截取到指定位置结束。

toUpperCase():将字符串转换成大写。

toLowerCase():将字符串转换成小写。

split(字符串):将字符串分割成字符串数组。

7.Date对象:日期和时间

(1)创建Date对象的三种方式

    dateObj=newDate()

    dateObj=newDate(dateVal)

    dateObj=newDate(year,month,date[,hours[,minutes[,seconds[,ms]]] ])

(2)Java中:java.util.Date:日期(精确到毫秒)<---->String转换:文本

SimpleDateFormart

format(Datedate):格式化操作

parse(Stringstr)throwsParesException:解析操作

(3)方法：

获取年份：getFullYear();

方法过时,当前年份和1900之间的差值:getYear();

获取月份:getMonth()0-11；

月中的日期值:getDate()；

小时数:getHours()；

小时中的分钟值:getMinuts()；

分钟中的秒数:getSeconds()；

9.数组Array

(1)创建数组的三种方式

1)var数组名称=newArray();空参

2)var数组名称=newArray(指定数组长度);

3)简写方式：var数组名称=[元素1,元素2,...];

(2)属性：length属性,数组的长度。

(3)方法

join(""):将数组中的元素使用指定的分割符号拼接成字符串。

reverse():将数组的元素反转。

push()：向数组尾部添加新元素，并返回新的数组的长度值。

sort()：对数组进行排序，但是排序功能不够完善，所以很少使用(首位不能为最大数)

toString()：将数组转换成字符串并返回结果。

(4)遍历方式：普通for循环、for-in。

(5)注意:

Js数组对象中:不断的添加元素,没有角标越界异常。

数组中可以存储任意类型元素。

10.原型属性

(1)不通过自定义对象的方式追加功能,而是直接将需要的功能追加到Array 内置对象中。

(2)额外方法不能直接在内置对象的函数中追加。

(3)Js中的每一个内置对象都存在原型属性:prototype。

(4)原型的作用

1)就是为了给内置对象追加额外的功能。

2)原型属性的操作:相当于在内置对象中创建了一个原型对象。

3)通过原型对象追加额外方法,这个方法会自动追加到内置对象中。

(5)原理

    //JS内置对象

    functionArray(){

        //内置方法

        this.join=function(){

            ...

        }

        //原型属性----newPrototype()

        this.prototype=newPrototype();
        
        //自动追加

        this.search=function(){

            ...

        }

    }

    functionPrototype(){

        //追加额外的方法

        this.search=function(){

            .....

        }

    }

12.特殊符号

特殊符号	含义
\'	单引号
\"	双引号
\&	和号
\\	反斜杠
\n	换行符
\r	回车符
\t	制表符
\b	退格符
\f	换页符

四、JS之BOM对象和DOM对象

1.window对象

(1)Window对象：表示在浏览器中打开的窗口。

(2)属性：(这三个属性有分别是三个对象)

History:该对象包含用户（在浏览器窗口中）访问过的 URL。

Location:该对象包含有关当前 URL 的信息。

Document :每个载入浏览器的 HTML 文档都会成为 Document 对象。

(3)方法

1)窗口方法：

打开指定窗口：

open(url,"打开这个窗口的方式_blank/_self","宽度和高度参数")

关闭浏览器窗口：close()

2)弹框方法：

alert("提示框")

confirm("消息字符串"):确认对话框。

prompt("消息字符串","默认值"):消息框+输入框。

3)定时器方法：返回值都是任务ID，用于关闭定时器。

setInterval("任务函数()",毫秒值):每经过毫秒数重复执行任务。

setTimeout("任务函数",毫秒值):经过毫秒数后执行一次。

clearInterval(intervalId);清除间隔定时器。

clearTimeout(taskId);清除单次定时器。

2、window的消息框

(1)提示框：只是用于显示一些提示信息。

alert(“弹出一个提示”);

(2)选择框：根据提示的信息，做出确定或取消的选择

confirm(“提示信息，确定退出吗？”);

confirm返回一个boolean类型的结果。选择确定则返回一个true，选择取消，或者点击”X”关闭，返回一个false。

(3)输入框：

prompt(“请输入你的姓名”);

第一个参数是提示信息，第二个参数是用户输入的内容,String类型。

点击确定的时候，返回用户输入的内容。点击取消或者关闭的时候，返回null。

var name = prompt(“请你输入你的姓名”);

3.网页时钟(定时器方法使用)

(1)定义一个函数

(2)首先要创建Date对象,拼接日期字符串。

(3)定义日期字符串。

(4)获取span标签对象,设置它的innerHTML/innerText属性。

(5)调用网页定时器

window(可以省略不写)

window.setInterval("任务函数()",时间毫秒);每经过毫秒重复执行这个任务。

window.setTimeout("任务函数()",时间毫秒);经过毫秒数后执行一次这个任务。

4.locaion对象

方法与属性:

location.hostname 返回 web 主机的域名

location.pathname 返回当前页面的路径和文件名

location.port 返回 web 主机的端口（80 或 443）

location.protocol 返回所使用的 web 协议（http:// 或 https://）

location.href 属性返回当前页面的 URL

reload():重新载入当前url(刷新)。

replace():用新的文档替换当前文档。

assign():加载新的文档。

5.history对象

(1)window.history 对象包含浏览器的历史。

(2)方法：

back():返回 history 列表中的上一个url信息。

forward():进入history 列表中的下一个url的信息。

go():加载 history 列表中的某个具体页面。

正整数:go(2),前进两页

负整数:go(-2),后退两页

0:go(0),刷新。

(3)注意：

当go(1)时功能与history.forward()相同，加载下一个url。

当go(-1)时功能与history.back()相同，加载上一个url。

如果history列表内没有访问记录。则此功能无效。

6.screen:屏幕对象

属性

width/height:获取跟当前屏幕相关的分辨率。

availWidth/availHeight:获取除过任务栏的宽度和高度。

7.DOM

(1)DOM(Document Object Model)编程：基于文档对象模型编程。

(2)在运行html页面的时候，js引擎将HTML页面中的每一个标签都封装成对象，形成一种树状结构。

(3)页面结构:

一个页面中html标签为根节点，

head标签为左子节点，body标签为右子节点。

head和body中包含的标签均为其子节点。

同一层级的节点互为兄弟节点，

按照在源码中的上下关系可分为上下两种兄弟节点。

(4)DOM操作：就是获取标签对象，从而可以操作这个标签的属性、内容、样式、事件。

(5)方法与属性：

改变HTML输出流：document.write()，可用于直接向 HTML输出流写内容。

改变HTML标签内容：

innerText:设置当前标签体的普通文本内容。

innerHTML:既可以给标签体普通文本内容，也可以设置带标签的文本。

改变HTML属性：标签对象.属性=新属性值。

改变Css样式：对象.style.样式属性=新样式。

创建元素：document.createElement()

追加元素：appendChild()

删除已有的 HTML元素：removeChild()

8.获取标签的三种方式

(1)通过document集合属性获取标签对象。

1)all:获取当前页面所有的html标签对象,返回的是标签对象数组。

    var nodeList = document.all ;

2)forms:获取当前页面中所有的form标签对象,返回的是标签对象数组。

    var nodeList = document.forms ;

3)links:获取所有a对象和所有area 对象(area标签:热点域), 如果页面中只有a标签,获取所有a标签对象，返回对象数组。

    var nodeList = document.links ;

4)images:获取当前页面中所有的img标签对象,返回数组。

    var nodeList = document.images ;

(2)通过节点关系来获取。

通过查询节点关系获取标签对象

parentNode:父节点

childNodes:子节点

firstChild:第一个子节点

lastChild:最后一个子节点

nextSibling:下一个兄弟节点

previousSibling:上一个兄弟节点

所有的子节点:空格和换行，是能够被解析出来的。

节点的属性：

节点类型:nodeType

节点(标签对象)的名称:nodeName

(3)通过document对象的方法获取。

方式一：getElementById("id属性值"):通过id获取标签对象。

注意:id属性值在页面中唯一的。

      var username = document.getElementById("username") ;

方式二：getElementsByClassName("class属性值"):通过class属性值获取标签对象列表，通过数组下标获取对象。

      var username = document.getElementsByClassName("classInp")[0] ;

方式三：getElementsByTagName("标签名称"):通过标签名称获取标签对象列表，通过数组下标获取对象。

      var username = document.getElementsByTagName("input")[0] ;

方式四：getElementsByName("name属性值"):通过name属性值获取标签对象列表，通过数组下标获取对象。

      var username = document.getElementsByName("user")[0] ;

9.事件

(1)方法：

addEventListener()：法用于向指定元素添加事件句柄(事件监听器)。

addEventListener(event, function, useCapture)

event:事件的类型 (如 "click" 或 "mousedown")。

function:事件触发后调用的函数。

useCapture:用于描述事件是冒泡还是捕获，默认为false(冒泡)。

removeEventListener():方法来移除事件的监听。

(2)addEventListener()方法特点：

1)添加的事件句柄不会覆盖已存在的事件句柄。

2)可以向一个元素添加多个事件句柄。

3)可以向同个元素添加多个同类型的事件句柄。

4)可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。

5)addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。

6)使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强，在没有控制HTML标记时也可以添加事件监听。

(3)事件传递有两种方式：冒泡与捕获。

前提：将一个元素插入到另一个元素中，用户点击内部元素。

冒泡方式：内部元素的事件会先被触发，然后再触发外部元素。

捕获方式：外部元素的事件会先被触发，然后才会触发内部元素的事件。

(4)常见事件

事件名	触发条件
onabort	图像加载被中断
onblur	元素失去焦点
onchange	用户改变域的内容
onclick	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onerror	当加载文档或图像时发生某个错误
onfocus	元素获得焦点
onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被按下或按住
onkeyup	某个键盘的键被松开
onload	某个页面或图像被完成加载
onmousedown	某个鼠标按键被按下
onmousemove	鼠标被移动
onmouseout	鼠标从某元素移开
onmouseover	鼠标被移到某元素之上
onmouseup	某个鼠标按键被松开
onreset	重置按钮被点击
onresize	窗口或框架被调整尺寸
onselect	文本被选定
onsubmit	提交按钮被点击
onunload	用户退出页面

10.js事件编程的三要素

(1)事件源: 作用在哪个标签上 html元素。

(2)编写事件监听器:编写一个函数。

(3)绑定事件监听器:一些属性绑定。

onclick

onfoucs

onblur....

11.正则表达式

(1)定义规则:

    var 变量名  = /^正则表达式$/ ;

    判断所需要匹配的字符串内容是否符合正则规则。

    if(正则表达式对象.test(字符串内容)){

        //匹配成功

    }else{

        //匹配失败

    }

(2)常用的符号

js正则表达式必须带^(以xxx开头) 和 $(以xxx结尾):边界匹配符号。

实例	描述
[Pp]ython	匹配 "Python" 或 "python"
rub[ye]	匹配 "ruby" 或 "rube"
[aeiou]	匹配中括号内的任意一个字母
[0-9]	匹配任何数字。类似于 [0123456789]
[a-z]	匹配任何小写字母
[A-Z]	匹配任何大写字母
[a-zA-Z0-9]	匹配任何字母及数字
[^aeiou]	除了aeiou字母以外的所有字符
[^0-9]	匹配除了数字外的字符

实例	描述
.	匹配除 "\n" 之外的任何单个字符。要匹配包括 '\n' 在内的任何字符，请使用象 '[.\n]' 的模式。
\d	匹配一个数字字符。等价于 [0-9]。
\D	匹配一个非数字字符。等价于 0-9。
\s	匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。
\S	匹配任何非空白字符。等价于 \f\n\r\t\v。
\w	匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。
\W	匹配任何非单词字符。等价于 'A-Za-z0-9_'。

符号	描述
\x{2}	表示x字符恰好出现n次
\x?	表示x字符串出现0次或者1次
\x*	表示x字符出现0次或多次
\x+	匹配x字符出现一次或者多次
\x{2,4}	x字符至少出现n次,但是不超过m次
\x{n}	x{n,}:x字符至少出现n次
\x	表示任意字符

12.表单验证：js正则表达式+DOM操作

(1)定义规则:

用户名:4-14为的数字或者字母组成(不区分大小写)。

密码:6-16为的数字或者字母组成。

确认密码：需要原始密码的数据保持一致。

邮箱:QQ邮箱、企业邮箱、163邮箱。

多个数字或者字母@多个数字或者字母(.com/.cn/com.cn/....)。

(2)onsubmit:表单是否能提交成功

    <form action="#" method="post" onsubmit="return  有返回值的函数">......</form>

    返回值true:表示能够提交表单。

    false:不能够提交表单。

10.正则表达式:

(1)定义规则:

var 变量名 = /正则表达式/ ;

判断所需要匹配的字符串内容是否符合正则规则。

if(正则表达式对象.test(字符串内容)){

//匹配成功

}else{

//匹配失败

}

常用的

js正则表达式必须带^(以xxx开头) 和 $(以xxx结尾):边界匹配符号。

实例	描述
[Pp]ython	匹配 "Python" 或 "python"
rub[ye]	匹配 "ruby" 或 "rube"
[aeiou]	匹配中括号内的任意一个字母
[0-9]	匹配任何数字。类似于 [0123456789]
[a-z]	匹配任何小写字母
[A-Z]	匹配任何大写字母
[a-zA-Z0-9]	匹配任何字母及数字
[^aeiou]	除了aeiou字母以外的所有字符
[^0-9]	匹配除了数字外的字符

实例	描述
.	匹配除 "\n" 之外的任何单个字符。要匹配包括 '\n' 在内的任何字符，请使用象 '[.\n]' 的模式。
\d	匹配一个数字字符。等价于 [0-9]。
\D	匹配一个非数字字符。等价于 0-9。
\s	匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。
\S	匹配任何非空白字符。等价于 \f\n\r\t\v。
\w	匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。
\W	匹配任何非单词字符。等价于 'A-Za-z0-9_'。

符号	描述
\x{2}	表示x字符恰好出现n次
\x?	表示x字符串出现0次或者1次
\x*	表示x字符出现0次或多次
\x+	匹配x字符出现一次或者多次
\x{2,4}	x字符至少出现n次,但是不超过m次
\x{n}	x{n,}:x字符至少出现n次
\x	表示任意字符