Javaweb知识（1）

1 HTML编程

1.1 HTML

xml作数据展示
html:超文本标记语言，用于描述网页中存在哪些网页元素，配合CSS样式表可以

1.1.1 Html规范的发展

事件	说明
1993年HTML1.0标准发布（由互联网工程小组IETF）
1995年—1997年：HTML2/3/4标准发布（由W3C组织进行标准定义），每一个标准都不断完善了html的语法规范	已经十分完善，适合pc端的网页开发
2014年HTML5标准发布（由W3C组织进行标准定义），增加了媒体播放、画图、定位等功能	html规范已经变成了网页内容的显示、绘图制作、媒体播放、本地数据库、大量api接口的集合

1.1.2 主流重点浏览器介绍

主流浏览器介绍	内核
谷歌（chrome）	Webkit
Safari	Webkit

1.1.3 锚点

超链接的一种，又叫命名锚记。在网页中的作用是快速定位器。

1.1.3.1本页面

//目标位置
<a href="helloworl.html" id="a1">helloworld</a>
//鼠标点击的锚点
<a href="#" target="#a1">top</a>

1.1.3.2 跨网页的锚点访问

<a href="test.html#jump">跨网页锚点</a> 

1.1.4 id与name声明锚点的区别

• 老版本/最初是使用name作为锚点位置的声明方式
• name的取值属性数值不唯一，容易造成锚点定位不准、
• H5已经声明不使用name这种声明方式

1.1.5 target目标窗口

target目标窗口	说明
_blank	新窗口打开
_self	当前（原来）窗口打开（默认）
framename	自定义的框架名字
_top	多层网页使用
_parent	框架相关

1.1.6 路径

https://XXXX:port/netpoint/XX/XX.html

类型	名字	描述
https	协议名
域名	XXXX	映射ip地址的字符，便于记忆
端口	port	web服务器的端口，浏览器默认端口80
站点	netpoint	网站站点简称，网页资源的根目录，在web服务器中可通过配置缺省此项
路径	XX
网页名称	XX.html

1.2 标记语言

1.2.1 文档类型声明（DOCTYPE声明）

不属于HTML标签，标记语言的文档类型声明，通知浏览器以以下哪种方式解析标记语言。

• 严格模式(标准模式)：浏览器以其当前版本支持的最高标准呈现页面。
• 混杂模式（怪异模式）：页面以向后兼容的方式显示,防止老站点无法工作。

注意：

模式触发	描述
DOCTYPE不存在或形式不正确	混杂模式
Doctype，不引用任何dtd文件或者包含DTD和URI的DOCTYPE	严格模式

1.2.2 标记（标签）语言的特点

• 嵌套性：标签存在层级关系
• 封闭式：

1. 容器类标签（div）要成对出现的
2. 非容器类标签（input）需要特殊声明

1.2.3 Html常用特殊字符

代码字符	显示结果	描述
&lt	<	小于
&gt	>	大于
&amp	&	显示其他特殊字符
&quot	"	引号
&reg		已注册
&copy		版权

1.3 编码格式

网页编码格式： 网页编码格式取决于html代码保存的编码格式以及浏览器打开网页的编码格式。

保证网页程序不会乱码要牢记：

• 浏览器支持meta设定的编码
• meta设定的编码与html文件保存的编码一致

1.4 标签

1.4.1 头标签head

包含当前网页的元数据描述，如搜索关键字、编码、引入外部文件等，头标签内的内容不会出现在网页显示区域

1.4.2 元数据标签meta

用来描述一个HTML网页文档的基本属性，例如作者、日期和时间、网页描述、关键词等

常用的元数据描述：

• keywords关键字： meta name=“Keywords” Content=“vacation,greece”>
• Description简介： meta wname=“Description” Content=“你网页的简述”>
• Author作者： meta name=“Author” Content=“张三，abc@sina.com”>
• 文档编码： html5设定编码方式 meta charset=“UTF-8”> 默认也是UTF-8

1.4.3 文本标签

内联类型文本标签	效果
u标签	下划线
strong标签	强调、加粗
em标签	一般强调、倾斜

1.4.4 框架标签

iframe该标签可以在当前网页上引入其他网页资源（支持引入非同源网页）

<!--target = iframe的name/id的值，可以在iframe中显示结果-->
<iframe src="" width="300px" height="200px" name="ifr"></iframe>
		<a href="#" target="ifr"></a>

属性	值
src	URL
frameBorder	1、0
scrolling	YES、NO、AUTO
width/height	Pixels/%

1.4.5 超链接a标签（访问非网页资源）

访问的前提是当前系统安装了相关的处理程序

链接类型	说明
邮件	邮件
电话	电话
短信	短信
视频	视频

1.4.6 图片以及图像映射

1.4.6.1 图片标签

属性值	描述
src	图片路径
width	宽度
height	高度
alt	图片无法正常显示的文字
usemap	把图像设置为客户端图像映射

<img src="coder.jpg" width="100px" height="100px" alt="图片"/>

1.4.7 列表

1.4.7.1 有序列表

type	效果
I	古罗马I II III IV
1	数字排列1、2、3、4
a	小写字母排列a、b、c、d
A	大写紫米排列A、B、C、D
i	小写罗马i、ii、iii、iv

		<ol type="I">
			<li>有序列表</li>
			<li>有序列表</li>
			<li>有序列表</li>
			<li>有序列表</li>
		</ol>

1.4.7.2 无序列表

type	效果
circle	空心圆○
square	棱形
disc	实心圆

		<ul type="circle">
			<li>无序列表</li>
			<li>无序列表</li>
			<li>无序列表</li>
			<li>无序列表</li>
		</ul>

1.4.7.3自定义列表

可以用来缩进文字

		<dl>
			<dt>自定义列表</dt>
			<dd>列表</dd>
			<dt>自定义列表</dt>
			<dd>列表</dd>
		</dl>

1.4.8 table表格标签

完整表格标签实例

<!--cellspacing间距，cellpadding填充,align对齐方式，width百分比/具体像素，height一般具体像素-->
		<table border="1" cellspacing="" cellpadding="" align="">
			<!--标题-->
			<caption>表格标题</caption>

			<!--标题、列明-->
			<!--thead、tbody、tfoot可以省略，浏览器将全部的行列都作为tbody的字元素-->
			<thead>
				<tr>
					<th>Header</th>
					<th>Header</th>
				</tr>
			</thead>

			<!--主要存放表数据-->
			<tbody>
				<tr>
					<td colspan="2">Data</td>
				</tr>
				<tr>
					<td>Data</td>
					<td rowspan="2">Data</td>
				</tr>
				<tr>
					<td>Data</td>
				</tr>
			</tbody>
			<!--总计之类的作用-->
			<tfoot>
				<td>tfoot</td>
				<td>tfoot</td>
			</tfoot>
		</table>

1.4.9 表单

单选按钮—— name相同即为一组
复选按钮—— name相同方便存取
文件域名——文件上传，file
隐藏域——hidden——偷偷传数据给服务器端

H5新
颜色选择器——color 选择颜色

下拉框——select——变多选选择multiple

				<input type="radio" name="sexGroup" id="sex1" value=""/><label for="sex1">男</label>
				<input type="radio" name="sexGroup" id="sex2" value=""/><label for="sex2">女</label>			

标签的私有属性：

私有属性	说明
disabled	禁用表单
readonly	只读
value	值

1.4.9.1 readonly和disabled区别

• readonly只针对input（text/password），希望框内内容只允许用户看，不能修改
• disabled对于所有表单都有效，限制用户使用

1.4 HTML语义化

html语义化：在使用html编程时，根据内容选择合适的标签（代码语义化），增加可读性与SEO、更好的被爬数据

1.4.1 为什么要语义化(优点)

• 为了在没有CSS的情况下也能呈现出很好地内容结构、代码结构；
• 提高用户体验；
• 有利于SEO；
• 方便其他设备渲染网页；
• 便于团队开发和维护。

1.4.2 HTML语义化注意事项---------

• Html编码时要保持父子标签之间一个Tab键的缩进；
• 每标签div和span；
• 在语义不明显时，既一个用于布局的div声明前后都有注释；
• 尽可能少的使用无语义的可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
• 不要使用纯样式标签，如：b、font、u等，改用css设置。
• 需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式），strong默认样式是加粗（不要用b），em是斜体（不用i）；
• 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
• 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在label标签中设置for=someld来让说明文本和相对应的input关联起来。

1.5 get和post区别

• post请求：声明本次请求的目的是从服务器获取数据——form Date 整个表单
• get请求：声明本次请求的目的是向服务器传送数据——Query String Parmeters字符串
• reset
• put

1.6 src与href的区别

• src（ source ）的值是外部资源的访问路径，在请求src资源时会将其指向的资源下载并应用到当前文档中，此时外部资源作为当前文档的一部分（引入），一般用作非文本引入方式。
• href 表示超文本引用（hypertext reference），在使用href请求外部资源时，会下载外部资源，同时当前网页读取外部资源的内容（引用）。一般用作文本引入方式

注意：Link、a标签使用href，其余使用src

2 CSS编程

Cascading Style Sheets层叠样式表，用来渲染标签的外观样式
Css是由万维网W3C定义的标准

2.1 选择器

标签(html)选择器——h1-h6、div
类选择器——用“.”和class
id选择器——用“#”和id
注：id虽然可以写多个， 不推荐！ 但是在Dom操作中，id表示编号，重复的id容易对结果产生其他影响

2.2 引入css文件方法

内嵌样式表

行内样式表

外部样式表文件

2.2.1 第一种link方法

<link rel="stylesheet" type="text/css" href=""/>

2.2.2 第二种import方法

<style type = "text/css">
	@import url("css/my.css");
</style>

2.2.3 链接式和导入式的区别

	link	import
区别	XHTML（html的过渡版本被所有浏览器兼容）	属于CSS2.1， IE4不兼容
	链接的css文件先加载到网页再编译显示	客户端先显示HTML结构，再加载到网页，有短时间无样式显示

注：推荐使用link引入外部css文件

2.3 css代码文件外置好处

• html代码和样式分离
• 方便团队开发

2.4 选择器分组

h1,h3,.p1

2.5 派生选择器（子和孙等后代的选择器）

.div  p

所有后代都有，包括子代、孙子、等等

2.6 后代选择器（子元素选择器/子选择器）

.div > p

又名子代选择器，直属子代才有

2.7 属性选择器

属性指的是标签的属性

a[href = 'http://www.baidu.com']{color:red;}
a[href][title] {color:red;}

2.8 伪类选择器

超链接的样式，称为伪类

a:link
a:hover
a:active
a:visited

状态	说明
linked	默认
hover	悬停
active	激活（长按）
visited	访问过的

2.9 常见属性

2.9.1 绝对长度：cm\mm\in(英寸)\pt(点1pt = 1/72in)\pc（派卡1pc=12pt）\px（像素）

常用单位px
width
height

2.9.2 相对长度：

%（百分比）
em（相对于当前标签内文本的字体（浏览器默认16px）尺寸）
rem（相对于htm标签内文本的字体尺寸）（css3标准单位，低版本无法兼容；常用语手机端开发，完成响应式布局）

2.10 布局属性

2.10.1 普通流

默认情况

2.10.2 浮动流

float：left;

2.10.3 定位流

直接定位元素在文档或在父元素中的位置，漂浮在指定元素上方

• 脱离文档流
• 元素可以重叠在一块区域内，按照显示的有限级别以覆盖的方式显示

2.10.4 控制类属性

显示类型（块级 <-> 行内）display：none（不可见，也不占空间）、inline、block、inline-block
是否可见visiable：visible、hidden（不可见，也占空间）

控制溢出类overflow（-x）（-y）：内容溢出时横向、纵向的显示方式
visible（不处理，但可能超出容器）、hidden（隐藏溢出容器的内容且不出现滚动条）、scroll（隐藏溢出容器的内容，溢出的内容以滚动条的方式呈现）、auto（内容溢出，按需出现滚动条）

text-overflow：（ellipsis）文字在层里面超出的话则显示省略号

2.10.5 位置定位属性

positon:absolute、relative、fixed、static、inherit

类型	说明
static	默认值。（普通文档流） 没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
absolute	（脱离普通流） 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定
relative	（遵循普通流） 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定 （网页的悬浮窗口，可用于打广告）
inherit	规定应该从父元素继承 position 属性的值

2.11 颜色类型

• HEX（最常用）：16进制
• RGBA：R红色、G绿色、B蓝色，支持透明
• RGB：R红色、G绿色、B蓝色
• 关键字：color：red，但只能表示少量颜色

2.12 颜色的区别

bgcolor——不属于css标签，属于html标签（写在body后），可以修改网页的背景颜色
color——前景色，字体颜色
background-color——标签的背景颜色

2.13 列表

list-style	none
list-style-type	disc、circle、square
list-style-image
list-style-postion

2.14 padding外边距

padding	说明
padding: 30px	上右下左都是30px
padding: 30px,40px	上下30px，左右40px
padding: 30px,40px,50px	上30px，左右40px，下50xp
padding: 30px,40px,50px,60px	上30px，右40px，下50px，左60px

2.15 背景属性

针对body的标签

属性	说明
background-image	背景图片
background-color	背景颜色
background-repeat	-x横向平铺、-y纵向平铺、不写是都有
background-attachment	fixed太大也可以滚动

2.16 文本属性

属性	说明
text-align	center（对齐方式设为水平居中）、left、right、justify（实现两端对齐文本效果）、inherit（规定应该从父元素继承 text-align 属性的值。）

2.17 字体属性

属性	说明
font-size	字体大小
font-family	字体系列
font-weight	字体加粗否 normal bold bolder lighter 100-900 inherit
font-style	规定字体样式（normal正常、italic斜体、oblique倾斜、inherit父元素继承）

用户界面属性

outline轮廓

2.20 一些特性

2.20.1 关于inline-block的空隙问题

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>

            *{
                margin: 0;
                padding: 0;
            }
			#box{
				position: relative;
                width: 100%;
                height: 500px;    
                float: left;  
			}

			#banner {
				width: 100%;
				height: 150px;
				background-color: aquamarine;
			}
			#container{
				position: relative;
				width: 100%;
				height: 400px;
			}
			#leftcontainer{
				background-color: chocolate;
                display: inline-block;
                width: 24%;
                height: 100%;
			}
            #middletcontainer{
                background-color: blueviolet;
                display: inline-block;
                width: 60%;
                height: 100%;
            }
            #rightcontainer{
                background-color: yellow;
                display: inline-block;
                width: 16%;
                height: 100%;
            }
            #foot{
            	position: relative;
                background-color: brown;
                /*清除浮动*/
                clear: both;
                width: 100%;
                height: 140px;
            }
		</style>
	</head>
	
	<body>
		<div id="box">
			<div id="banner">top</div>
			<div id="container">
				<div id="leftcontainer">leftcontainer</div>
				<div id="middletcontainer">middletcontainer</div>
				<div id="rightcontainer">rightcontainer</div>
			</div>
			<div id="foot">foot</div>
		</div>
	</body>
</html>

解决方法1：
去除设置inline-block的div的空格，回车，tab

			<div id="container">
				<div id="leftcontainer">leftcontainer</div><div id="middletcontainer">middletcontainer</div><div id="rightcontainer">rightcontainer</div>
			</div>

解决方法2：
在父元素，使用letter-spacing（该属性增加或减少字符间的空白（字符间距））

/*父标签*/
            #container {
            	letter-spacing: -5px;
            }

2.20.2 padding和margin

2.20.3 让一个层始终在浏览器中间

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.div1 {
				position: absolute;
				background-color: blue;
				height: 200px;
				width: 300px;
				left: 50%;
				top: 50%;
				margin-left: -150px;
				margin-top: -100px;
			}
		</style>
	</head>

	<body>
		<div class="div1"></div>
	</body>

</html>

2.20.4 文件项目建立规范

• 公用程序都放在common文件目录下
• 全局css文件为global.css，包含如下内容
  重置元素默认样式程序
  常用css样式类
  全局颜色样式类
  全局按钮‘图标样式类等
• img文件下放置全局图片，以及全局样式所引用的图标，图片命名以该图片的功能英文缩写，注意规避广告等关键字，使用下划线换字符，英文可以缩写
• 全局字体放在fonts文件下font.css

2.20.5 360软件管家logo实现

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		#box{
			width: 320px;
			height: 320px;
		}
		.smallbox{
			width: 150px;
			height: 150px;
		}
		#greenbox{
			background-color: greenyellow;
			float: left;
			border-radius: 0px 70px;
		}
		#bluenbox{
			background-color: cornflowerblue;
			float: left;
			border-radius: 70px 0px;
			margin-left: 20px;
		}
		#redbox{
			background-color: lightcoral;
			float: left;
			border-radius: 70px 0px;
			margin-top: 20px;
		}
		#orangebox{
			background-color: orange;
			float: left;
			border-radius: 0px 70px;
			margin-left: 20px;
			margin-top: 20px;
		}
		</style>
		
	</head>

	<body>
		<div id="box">
			<div class="smallbox" id="greenbox"></div>
			<div class="smallbox" id="bluenbox"></div>
			<div class="smallbox" id="redbox"></div>
			<div class="smallbox" id="orangebox"></div>
		</div>
	</body>

</html>

2.21 CSS3 新特性

div{
	-
}

position——fix与sticky

clip

flex弹性盒子

flex-direction：column 行 row 列 row-reverse 反转

opcity对象透明度

取值范围0到1，从1到0逐渐变透明

新属性模块

transition过渡：使目标元素以动画的效果完成样式变化

属性名称	说明	取值
transition-property	设置对象中的参与过渡的css属性	all、none
transition-duration	设置对象过渡的持续时间	s秒
transition-delay	设置延迟过渡的时间	s秒
transition-timing-function	设置对象中过渡的动画类型	linear:线性过渡 ease:平滑过渡 ease-in、out、in-out;由慢到快，快到慢，慢到快再慢

transform转化：设定目标区域的转换方式（大小、旋转、位移）
transform:scale(2,3)横轴2倍，纵轴3倍

rotate(45deg) 旋转45度
skew（89deg，12deg）X轴转动89度,Y轴转动12度

animation自定义动画

	/*自定义动画格式*/
	@keyframes kfc {
		25% {
			width:60px;
		}
		50% {
			width:100px;
		}
	}
	
	/*用在div2上*/
	.div2:hover{
		animation:kfc 10s;
	}

3 JS编程

基于对象和事件驱动的脚本语言，通过浏览器来解析的
ECMAScript:javascirpt，浏览器可以解析并执行的语言，可以控制网页上的元素，形成各种动态效果

3.1 历史进程

• 1995年由Netscape公司的Brendan Eich 在网景导航者浏览器上首次实现
• 是希望外观看起来像Java，所以取名javascipt，语法风格和Self和Scheme较为接近
• 2015前的版本，是叫javascirpt，2015.6.17，ECMA国际组织发布ECMAScript第六版，改名成ECMAScirpt2015，也叫ECMAScript6（ES6）

3.2 作用

3.3 JavaScript优点

3.4 浏览器执行基础组成

1. js核心语法（数据类型、函数封装、内置对象与本地对象）

3.5 js引入方式

引入方式：

• 内嵌JavaScript脚本
• 引入外部的JavaScript
• 模块化引入（vue）

		<!--第一种,内嵌JavaScript脚本-->
		<script type="text/javascript"></script>
		<!--第二种,引入外部的JavaScript-->
		<script src="" type="text/javascript" charset="utf-8"></script>

3.6 变量与数据类型

3.6.1 注释

单行注释&多行注释，注释写法大同小异

3.6.2 保留字与关键字

保留字是可能预计未来会使用的关键字，而关键字是已经在使用的词

3.6.3 基本数据类型和对象类型

类型	说明
Number	数字
null
boolean
String
undefined

注：null == undefined

基本数据类型是js引擎默认支持的数据类型，除了string类型外其余类型都占用固定内存空间，基本数据类型的数据存储在栈内存之中

**注意：**定义变量时：

• 使用var可以再次声明
• 弱类型，声明变量的时候根据变量的值来决定的
• 单引号引起来的也是String
• 没有声明变量则是undefined

3.6.4 判断对象类型方法

• typeof:获取目标变量的数据类型，以字符串形式返回（系统内置函数）
• Object.prototype.toString.call（最佳方式）

<!--第一种-->
Object.prototype.toString.call()
<!--第二种-->
typeof s1

typeof的局限性：只能区别5个基本类型和对象类型，无法识别对象类型的继承关系和对象类型赋值方式

3.6.5 遍历

3.6.5.1 for…in遍历对象属性

和foreach类似

			var arr = ["1","2","1"];
			
			for(let index in arr){
				document.write(arr[index]);
			}

3.6.5.2 for…of遍历对象属性

• 不用写参数

function fun01(){
	for(let s of arguments){
		console.log(s);
	}
}

3.6.5.3 forEach（了解）遍历对象属性

在这里插入代码片

3.6.5.4 map（了解）遍历对象属性

在这里插入代码片

3.6.5.5 可变参数遍历对象属性

function fun01(... args){
	for(let s of args){
		console.log(s);
	}
}

例如：冒泡排序

			function sort(... args){
				//冒泡
				for (let i =0;i<args.length-1;i++) {
					for (let j =0; j<args.length-i-1;j++) {
						if(args[i]>args[j]){
							let temp;
							temp = args[j];
							args[j] = args[j+1];
							args[j+1] = temp;
						}
					}
					
				}
				console.log(args);
			}

3.6.6 函数

函数定义-参数不需要类型定义

function functionname(param1,param2){
	
}

变量指向函数

<!-- 匿名函数 -->
var fun = function () {
	....
}

3.6.6.1 案例：简易计算器

<input type="text" name="num1" id="num1" value="" />
		<select name="operation" id="operation">
			<option value="+">+</option>
			<option value="-">-</option>
			<option value="*">*</option>
			<option value="/">/</option>
		</select>
		<input type="text" name="num2" id="num2" value="" />
		<input type="button" name="calcresult" id="calcresult" value="计算" />
		<input type="text" name="realresult" id="realresult" value="1" />

		<script type="text/javascript">
			//简易计算器
			function getCalc(num1, operation, num2) {
				num1 = parseInt(num1);
				num2 = parseInt(num2);
				var result;
				switch(operation) {
					case "+":
						return num1 + num2;
						break;
					case "-":
						return num1 - num2;
						break;
					case "/":
						return num1 / num2;
						break;
					case "*":
						return num1 * num2;
						break;
					default:
						break;
				}

			}
			var oj = document.getElementById("calcresult");
			oj.onclick = function() {
				var selectobj = document.getElementById("operation");
				var index = selectobj.selectedIndex;
				var operation = selectobj.options[index].value;
				
				num1 = parseInt(document.getElementById("num1").value);
				num2 = parseInt(document.getElementById("num2").value);
				
				var result = getCalc(num1, operation, num2);
				document.getElementById("realresult").value = result;
			}
		</script>

3.6.6.2 案例：递归调用1到n的值

<body>
		<input type="text" name="text1" id="text1" placeholder="输入正整数计算1到这个数的和" />
		
		<input type="button" name="button" id="button" value="计算" />

		<input type="text" name="result" id="result" value="1" />
		
		<script type="text/javascript">
			//递归调用
			function getSum(n) {
				if(n < 1) {
					return 0;
				}
				if(n == 1) {
					return 1;
				}
				if(n > 1) {
					return getSum(n - 1) + n;
				}
			}
			var obj = document.getElementById("button");
			obj.onclick = function() {
				var num = parseInt(document.getElementById("text1").value);
				var result = getSum(num);
				document.getElementById("result").value = result;
			}
		<script>

3.7 函数自调用

(function fun01(){
	console.log("函数自调用");
})();

3.8 页面加载onload

• 多个onload情况，只有最后一个有效
• 页面加载时就运行

window.onload = function(){
	console.log("页面加载就调用");
}

3.9 array数组

方法	描述
concat	连接数组
join

3.10 函数定义和使用

第一种

function function_name(参数){
}
fucntion_name(参数);

第二种

let 变量名 = function(){}

第三种

对象.事件 = function{}

3.11 内置对象

3.11.1 Array数组

常用方法
join(？)	用？连接数组的各个元素成字符串
concat	连接数组
reverse	翻转数组
tostring	数组转换成字符串
sort	对数组进行排序

例子：使用sort对数组进行排序
必须实现这个方法才能使用sort来排列

//排序需要的函数，作为sort的参数
function sortparam(a,b){
	return b-a;
}

注：a-b 小到大 b-a 大道小

//使用
let arr =[12,2,3];
arr.sort(sortparam);
console.log(arr);

案例：ES6新特性

arr = new Array(2,  5, 6);
   let  [a,b,c] = arr;
   console.log(a+","+b+","+c);
		//结果：2,5,6

3.11.2 字符串String

let str = new String("");
let str = String("string");
str = 'String';
str = `String`;

常用方法
charAt(a)	查找字符a的索引
indexOf(" a")	查找字符串 a的索引位置
lastindexOf（“a”）	从后面找，字符串 a的索引位置
match()	正则的
replace()	替换
split(a)	按a分割成片段，可以存成数组
toUpperCase	大写
toLowerCase	小写
substr(a,b)	从起始位置a开始取b个字符出来
substring(a,b)	取a到b之间的字符

3.11.3 Date

方法	说明
toLocaleDateString()	把 Date 对象的日期部分转换为字符串（1983/7/21）
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串（1983/7/21 上午1:15:00）
toLocaleTimeString)	根据本地时间格式，把 Date 对象的时间部分转换为字符串（上午1:15:00）

3.11.4 RegExp正则

3.11.4.1 实例化方式

<!--第一种方法，注意在表达式中需要转义字符-->
var patt = new RegExp('表达式',flag);
<!--第二种方法-->
var patt = /表达式/flag;

flag（字符类型）：

i	大小写
g	对全局字符进行匹配
m	多行数据进行匹配

例如：

//数字
var patt =/^[0-9]*$/;
//n位数字
var patt =/^[n]*$/;
//至少n位数字
var patt =/^[n,]*$/;
//m-n位数字
var patt =/^[m,n]*$/;

3.11.4.2 内置函数

函数名	返回值类型	说明
exec(str)	Array:匹配内容	检验str字符串，返回匹配正则的值
test(str)	Boolean	检验str字符串，返回是否满足正则的布尔值
compile(‘reg’)		重新编译正则表达式

3.11.4.3 案例：编写邮箱的正则验证&焦点事件验证

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#message1,
			#message2 {
				width: 200px;
				height: 20px;
			}
		</style>
	</head>

	<body>
		<form action="#" method="post">
			邮编：<input type="text" name="email" id="email" value="" onsubmit="return checkEmail()"/>
			<div id="message1"></div><br /> 
		</form>
		
		<script type="text/javascript">
			document.getElementById("email").onblur = function () {
				checkEmail();
			}

			function checkEmail() {
				let patt = new RegExp("^\\d{6}$");
				let postcode = document.getElementById("email").value;
				let flag = patt.test(postcode);

				if(flag) {
					document.getElementById("message1").innerHTML = "格式正确";
					document.getElementById("message1").style.color = "green";
				} else {
					document.getElementById("message1").innerHTML = "格式错误";
					document.getElementById("message1").style.color = "red";
				}
				return flag;
			}
		</script>
	</body>

</html>

3.11.4.4 表单完整验证

在这里插入代码片

3.11.5 Math

方法	描述
ceil(x)	四舍五入x
pow(x，y)	x的y次方
abs(x)	绝对值
sqrt()	平方根

3.11.6 Number

常用方法
join(？)	用？连接数组的各个元素成字符串
toFixed(a)	转换成字符串，保留a位小数，且四舍五入
toString	数字输出成字符
valueOf（）	返回number对象的基础值

3.11.7 对象创建的方式

3.11.7.1 直接属性名/值来创建

var book = {
	//keyvalue
	bookid:1,
	bookname:"我真的是一本书",
	showinfo:function (){
		console.log(this.bookid + " " + this.bookname);
	}
}
	book.showinfo();

3.11.7.2 通过Object构造 new Object()创建

//通过object创建
var student = new Object();
student.name = "我有名字的";

3.11.7.3 通过自定义"类型"创建

注：！！这边给值使用 = 号

			//自定义类型
			function Person(name, age) {
				this.name = name;
				this.age = age;
				this.showinfo = function() {
					console.log(this.name + this.age);
				}
			}
			//对象创建和输出
			let p = new Person("baicai","23");
			console.log(p.name + p.age);
			p.showinfo();

3.11.7.4 通过构造函数+原型模式创建（💗）

Prototype，原型——扩展属性
定义一个JavaScript类的时候，会把类的构造函数写在方法体内，类的属性和方法则通过prototype属性来添加

			//构造函数
			function Person(name, age) {
				this.name = name;
				this.age = age;
			}
			
			//+原型
			//类型定位为Person
			Person.prototype.type = "Person";
			Person.prototype.showinfo = function() {
				console.log(this.name + this.age + this.type);
			}
			let person = new Person("白菜",23);
			person.showinfo();

3.11.8 ES6的class类

在这里插入代码片

3.12 闭包（💗）

	let fun = (function(){
				let c = 0;
				
				return function(){
					return ++c;
				}
			})();//自调用
			
			console.log(fun());
			console.log(fun());
			console.log(fun());

3.13 BOM(Browser Object Model)

Bom > Dom包含

3.13.1 window

方法	说明
confirm()	主要使用在 "确认删除"按钮上
setInterval(“函数名”,毫秒值)	隔多长时间内调用一次函数
setTmieout(“函数名”,毫秒值)	隔多长时间内调用一次函数（只调一次）
clearInterval(interval对象)	停止计时器
prompt()	输入对话框
alert()	弹窗
open()	打开网页

3.13.1.1 案例：小型轮播图&时间

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#divimg {
				width: 640px;
				height: 340px;
				background-color: greenyellow;
			}
			
			#div {
				width: 100px;
				height: 30px;
			}
		</style>

	</head>

	<body>
		<div id="divtime"></div>
		<input type="button" name="" id="btn" value="暂停" />
		<div id="divimg">
			<img src="img/p1.jpg" id="img" />
		</div>
		<br/>
		<input type="button" name="" id="indeximg" value="上一张" />
		<input type="button" name="" id="lastimg" value="下一张" />
		<script type="text/javascript">
			//实时获取当前时间
			function funTime() {
				document.getElementById("divtime").innerHTML = new Date().toLocaleString();
			}
			//如果是setTimeout，可以使用函数的自用
			let inter = setInterval("funTime()", 1000);

			document.getElementById("btn").onclick = function() {
				clearInterval(inter);
			}

			//定义数组，储存的图片文件名
			let arrayImg = ["p1.jpg", "p2.jpg", "p3.jpg", "p4.jpg", "p5.jpg"];

			let i = 0;

			function changeImg() {
				if(i >= arrayImg.length) {
					i = 0;
				}

				document.getElementById("img").src = "img/" + arrayImg[i];

				i++;
			}

			setInterval("changeImg()", 2000);

			document.getElementById("indeximg").onclick = function() {
				if((i - 1) <= 0) {
					i = arrayImg.length;
				}
				document.getElementById("img").src = "img/" + arrayImg[i];
			}
			document.getElementById("lastimg").onclick = function() {
				if((i + 1) >= arrayImg.length) {
					i = 0;
				}
				document.getElementById("img").src = "img/" + arrayImg[i];
			}
		</script>
	</body>

</html>

3.13.2 location

3.13.2.1 属性

属性	说明
href	url地址
host	主机名+端口
hostname	主机名
port	端口
search	得到的get请求的参数和参数的值（？username = knownno&psw =knownno）

3.13.2.2 方法

方法	说明
assign()	加载新的文档
reload()	重新加载当前文档
replace()	用新的文档替换当前文档，不会保留历史记录

3.13.3 history

3.13.3.1 方法

方法	说明
back()	向后
forward()	向前
go()	刷新

3.13.4 案例：分页网页案例

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			console.log(location.href);
			console.log(location.host);
			console.log(location.port);
			console.log(location.hostname);
			console.log(location.search);
		</script>
	</head>

	<body>
		<div id="div" style="width: 100px;height: 30px;">
			<a href="1.html" target="ifr">1</a>
			<a href="2.html" target="ifr">2</a>
		</div>
		<input type="button" name="back" id="back" value="后退" />
		<input type="button" name="forward" id="forward" value="前进" />
		<input type="button" name="refresh" id="refresh" value="刷新" />
		
		<script type="text/javascript">
			document.getElementById("back").onclick = function(){
				history.back();
			}
			document.getElementById("forward").onclick = function(){
				history.forward();
			}
			document.getElementById("refresh").onclick = function(){
				history.go();
			}
		</script>
		
		<iframe src="1.html" width="100%" height="300px" name="ifr">1</iframe>
	</body>

3.13.5 案例：省市区的三级级联案例

注：三级级联，三级的菜单的id不能用this，要用dg去取

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		省：
		<select id="pro"></select>

		市：
		<select id="city"></select>

		区
		<select id="area"></select>

		<script>
			var pro = new Array("请选择", "福建", "四川", "贵州");

			pro["请选择"] = new Array("请选择");
			pro["福建"] = new Array("莆田", "漳州");
			pro["四川"] = new Array("成都");
			pro["贵州"] = new Array("攀枝花", "遵义", "六盘水");

			var city = new Array("莆田", "漳州", "成都", "攀枝花","遵义","六盘水");

			city["莆田"] = new Array("城厢区", "荔城区", "仙游县");
			city["漳州"] = new Array("芗城区", "龙文区");
			city["成都"] = new Array("青羊区", "金牛区");
			city["攀枝花"] = new Array("东区", "仁和区", "西区");
			city["遵义"] = new Array("红花岗区", "汇川区", "播州区");
			city["六盘水"] = new Array("钟山区", "六枝特区", "水城区");

			window.onload = function() {
				pro.forEach(function(v, k) {
					var opt = new Option(v, v);
					document.getElementById("pro").options.add(opt);
				})
			}

			document.getElementById("pro").onchange = function() {
				//清空原有选项
				document.getElementById("city").options.length = 0;
				document.getElementById("area").options.length = 0;

				pro[this.value].forEach(function(v, k) {
					var opt = new Option(v, v);
					document.getElementById("city").options.add(opt);
				})
				city[document.getElementById("city").value].forEach(function(v, k) {
					var optcity = new Option(v, v);
					document.getElementById("area").options.add(optcity);
				})
			}
			document.getElementById("city").onchange = function() {
				//清空原有选项
				document.getElementById("area").options.length = 0;

				city[this.value].forEach(function(v, k) {
					var optcity = new Option(v, v);
					document.getElementById("area").options.add(optcity);
				})
			}
		</script>
	</body>

</html>

3.14 DOM(Doucument Object Model)

3.14.1 Dom对象的加载过程

• 封装文档对象document
• 解析html元素，检测到开始标签后封装DOM元素，并将DOM元素挂在父节点
• 解析到结束标签时DOM元素和其子元素封装完毕
• 全部元素转换成DOM对象，只需要操作DOM对象就可以改变文档结构

注：

1. 回车、换行会被封装成文本类型的DOM对象
2. 使用DOM对象要保证DOM对象全部加载完成

3.14.3 访问的基本元素属性

获取网页的基本结构标签，都是获取对应标签的DOM对象，如body、head等

属性名	说明
document.documentElement	获取HTML标签的dom对象
docType	获取文档头字符
body	获取body的dom对象
head	获取head的dom对象
title	获取titile文字标题

3.14.4 访问的方法

方法	说明
getElementById(“id”)	只能得到一个id为id的元素
getElementsByTagName(“tagname”)	HtmlCollection，可以用for of遍历
getElementsByName(“name”)	取到的元素是多个元素（nodelist，可以看成数组） 可以用for of遍历
getElementsByClassName(“classname”)	得到Class为classname的元素， 可以用for of遍历

3.14.2 案例：购物车全选反选

<!DOCTYPE html>
<html>

	<h2>购物车</h2>
		<input type="checkbox" name="selectall" id="selectall" value="全选" />全选
		<input type="button" name="selectnotall" id="selectnotall" value="全不选" />
		<input type="button" name="btn" id="btn" value="反选" />
		<hr />
		<input type="checkbox" name="enjoy" id="enjoy" value="手机" />手机
		<input type="checkbox" name="enjoy" id="enjoy" value="电脑" />电脑
		<input type="checkbox" name="enjoy" id="enjoy" value="耳机" />耳机
		<input type="checkbox" name="enjoy" id="enjoy" value="键盘" />键盘

		<script>
			//全选
			document.getElementById("selectall").onclick = function() {
				let enjoy = document.getElementsByName("enjoy");
				for(let i = 0; i < enjoy.length; i++) {
					enjoy[i].checked = this.checked;
				}
			}

			//反选
			document.getElementById("btn").onclick = function() {
				var flag = 0;
				let enjoy = document.getElementsByName("enjoy");
				for(let i = 0; i < enjoy.length; i++) {
					enjoy[i].checked = !enjoy[i].checked;
				}
			}
			
			//全不选
			document.getElementById("selectnotall").onclick = function() {
				let enjoy = document.getElementsByName("enjoy");
				for(let i = 0; i < enjoy.length; i++) {
					enjoy[i].checked = false;
				}
			}
		</script>
	</body>

</html>

3.15 innerHtml和innerText的区别

innerHtml可以识别标签
innerText不能

3.16 事件

3.16.1 鼠标事件

属性	描述
onclick	点击
onmousemove	鼠标移动
onmousedown	按下
onmouseout	从元素移开
onmouseover	鼠标移到元素之上

3.16.2 案例：随鼠标的时间

<!DOCTYPE html>
<html>

	<style>
		#flytime {
			position: absolute;
		}
	</style>
	<body>
		<div id="flytime"></div>
		<script>
			document.onmousemove = function(){
				console.log(event.clientX + ","+event.clientY);
				//改变层的位置
				document.getElementById("flytime").style.top = event.clientY +"px";
				document.getElementById("flytime").style.left = event.clientX +"px";
			}

			//封装一个展示时间的函数
			function showInfo(){
				document.getElementById("flytime").style.color = "greenyellow";
				document.getElementById("flytime").innerHTML = new Date().toLocaleDateString;
			}
			// 一秒执行一次
			setInterval("showInfo()",1000);
		</script>
	</body>

</html>

普通onclick相同事件只触发最后一个
addEvenListener都触发

由内到外：冒泡 捕获：由外到内

3.16.3 键盘事件

3.16.4 事件监听器

3.16.5 事件的捕获和冒泡

4 H5新特性

h5的标签与全局属性

h5兼容性

• 废弃标签仍然可用，但不建议使用
• 只有高版本浏览器才能基本兼容html5的新增标签与属性（IE10以上）
• 部分低版本浏览器支持部分html5新内容
• 兼职性解决方案

废弃标签

Acronym、appplet、basefont、big、center、big、center、dir、font、frame、frameset、m、noframes、noscirpt、s
虽然仍然使用可以被现在的浏览器解析，但不建议使用
总结

• 取消了用于显示、布局类的标签例，big、m、font（css来实现就行）
• 取消了早期框架标签，frame、frameset（推荐iframe）
• 取消不常使用的标签，noframes、noscript等

h5和h4的区别

• 取消过时的H4标记，增加了一些标签改善文档结构的功能，增强html语义化
• 增加移动端的事件类型一些全新的表单输入对象全新的、更合理的Tag以及DOM接口
• 离线缓存以及本地数据库Canvas、SVG等图形处理
• 音频视频处理
• webworker、websocket等全局对象

浏览器的文档模式&触发

渲染文档的模式
严格模式（标准模式）：浏览器以其当前版本支持的最高标准呈现页面，W3C标准解析代码（声明DOCTYPE、不引用任何dtd（严格模式html5标准）/都有则（严格模式dtd文件对应版本呈现网页））
混杂模式（怪异模式）：页面以向后兼容的方式显示，防止老站点无法工作。浏览器指定的方式解析代码（DOCTYPE 不存在/形式不正确 会以 混杂呈现 网页）

获取模式的方式：document.compatMode（CSS1Compat:严格、BackCompat严格关闭（也就是混杂模式））

语义化标签

html5保留了html4的大多数语义化标签（也就是看到标签就知道是干嘛用的），但不起显示作用，只是增强可读性
mark（黄色背景）、detail、summary、section（文档的节、区段）、aside（网页的广告栏）、header（网页头部，包含nav）、footer（页脚）、nav（导航链接）、progress（进度条）、embed（）、article（显示独立的一个文章内容，包括section）

新增表单API（💗）

新增表单元素

datalist数据链表
正常不会像select一样显示，需要list=“list”关联，才能链接到数据

<input type="text" name="" id="" value="" list="list" autocomplete="off"/>
		
		<datalist id="list">
			<option value="spring">spring</option>
			<option value="summer">summer</option>
			<option value="autumn">autumn</option>
			<option value="winter">winter</option>
		</datalist>

元素	说明
output	计算脚本输出
placeholder	placeholder=“请输入你的名字”
autofocus	自动获取焦点，只能一个，超过一个则作废 autofocus=“autofocus”
autocomplete	是否将表单提交到内存cookie中，下次输入进行提示，autocomplete=“on/off”
valueAsNumber/valueAsDate	value值转换为数字，但是valueAsDate非H5标准，但都兼容
require	文本框必填（但有很大局限性），数据验证，require = “require”

input标签类型

默认是text

标签名	说明
email	类型为email
url	输入类型为url地址
number	数字
range	滑块选择
search	类型为查询
color	类型为颜色
日期选择器（date、month、week、time、datetime-local）

File类型

• multiple：设定当前元素可以选取多个文件
• accept：设定选择器可以选择的MIME类型或后缀名

		<input type="file" name="" id="" value="" multiple="multiple" accept="image/jpeg,image/jpg"/>

video视频播放（💗）

支持的格式Mp4、ogv、webm

<video autoplay = 'autoplay'></video>

属性	用法	描述
autoplay	autoplay = “autoplay”	自动播放
controls	controls = “controls”	播放的控件
loop		播放完后自动再播放

只读属性

只读dom属性	描述
duration	文件播放时间长度，以秒为单位
paused	是否暂停了
ended	是否结束了
startTime	返回最早的播放开始时间（一般是0）
error	返回错误状态
currentSrc	返回播放的或已经加载文件的路径
videoWidth、videoHeight	视频的长宽

控制属性

控制属性	描述
autoplay	自动播放
loop	自动循环
currentTme	获取当前播放的时间
controls	控制条
volume	当前音量（0-1）
muted	是否静音
autobuffer	是否在播放开始进行缓冲（autoplay设置后本属性作废）
width、height

audio 音频

<audio src="" controls="controls"></audio>

案例：播放器（💗）

本地播放

canvas&svg

游戏应用

5 ES6

• ECMScript 6.0,是javaScript的下一个版本标准，2015.06发版
• ES6是JS的标准，JS是ES6的实现
• 解决ES5的不足，比如引入类的概念

5.1 基本语法特性

5.1.1 let、const、var

let：局部变量，推荐使用，let命令所在的代码块内有效、只能在特定代码段有效、不能重复定义
var：全局变量
const：常量，值在运行期不会发生改变，通常大写，不能重复声明和修改

5.1.2 案例：let、var的直观区别（💗）

主要是 变量提升

• var情况下，i在循环结束后值为3，变量提升后，当再次点击时，值会保持循环结束的值，3，但是因为按钮就只有3个，索引最多为2，所以类似空指针
• let情况下，i在循环结束后值为3，没有变量提升，当点击时，值会重新计算，点击的值就是对应按钮的索引

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

	</head>

	<body>
		<input type="button" name="btn2" id="btn2" value="" />
		<input type="button" name="btn2" id="btn2" value="" />
		<input type="button" name="btn2" id="btn2" value="" />
		<hr/>
		<input type="button" name="btn1" id="btn1" value="" />
		<input type="button" name="btn1" id="btn1" value="" />
		<input type="button" name="btn1" id="btn1" value="" />

		<script>
			let btns2 = document.getElementsByName("btn2");

			for(var i = 0; i < btns2.length; i++) {
				btns2[i].onclick = function() {
					btns2[i].style.background = "red";
				}
			}

			let btns1 = document.getElementsByName("btn1");

			for(let i = 0; i < btns1.length; i++) {
				btns1[i].onclick = function() {
					btns1[i].style.background = "red";
				}
			}
		</script>
	</body>

</html>

5.1.3 数组、对象的解构赋值

//数组
var [a, b, c] = [1, 2, 3];
//对象
var {foo,bar} = {foo:"aaa",bar:"bbb"};

5.1.4 class类的基本语法

和java类似

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			class Star{
				constructor(name,sex,skill){
					this.name = name;
					this.sex = sex;
					this.skill = skill;
				}
			}
			
			class SuperStar extends Star{
				constructor(name,sex){
					super(name,sex,"动作武术电影主角");
				}
				
				action(){
					console.log(this.name + "电影开拍!");
				}
				toString(){
					return this.name +","+this.sex;
				}
				
				static show(){
					console.log("大家好！");
				}
			}
			
			let s = new SuperStar("成龙","男");
			
			s.action();
			console.log(s.toString());
			SuperStar.show();
		</script>
	</head>
	<body>
	</body>
</html>

5.1.5 箭头函数（💗）

			//ES6之前
			let fun01 = function(){
			}
			//无参
			let fun02 = () =>{
			}
			//有参
			let fun02 = (name) =>{
			}
			//单个参数可去括号
			let fun02 = name =>{
			console.log()
			}
			//单句可去大括号
			let fun02 = name =>console.log()

5.1.6 导入导出（💗）

不同模块的js放在不同的文件中，我们可以使用export和来导出，使用import来导入

//导出
export let name = "成龙";

//导入并使用 		./ 当前目录 ，用绝对路径会报错
import * as obj from './export.js'
console.log(obj.name);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="module" src="js/import.js"  charset="utf-8"></script>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="module" src="js/import.js"  charset="utf-8"></script>
	</head>
	<body>
	</body>
</html>

5.1.7 promise

AJAX
避免回调地域

5.1.8 模板字符串

倒引号
支持带回车的写代码而不会编译出错

`<ul><li>java</li>

</ul>`

${变量}固定可以在倒引号内被解析到变量的值

let t = "tom";
			let j = "jerry";
			let msg1 = t + "and" +j;
			
			let msg2 = `${t} and ${j}`;
			console.log(msg1);
			console.log(msg2);

5.1.9 对象简写（💗）

	let obj = {
				name:"tom";
				showinfo:function(){
					
				}
			}

可以简写

	let obj = {
				name:"tom";
				showinfo(){
					
				}
			}

5.1.10Rest参数

function showarray(... args){

}

X 错题：

1.a=b时候a的类型变成了101，number类型

let a = "101";
   let b = 101; 
   console.log(a=b);
   console.log(a==b);
   console.log(a===b);
   //101 true true

附录

一、校验数字的表达式

• 数字：¹*$
• n位的数字：^\d{n}$
• 至少n位的数字：^\d{n,}$
• m-n位的数字：^\d{m,n}$
• 零和非零开头的数字：^(0|[1-9][0-9]*)$
• 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$
• 带1-2位小数的正数或负数：^(-)?\d+(.\d{1,2})$
• 正数、负数、和小数：^(-|+)?\d+(.\d+)?$
• 有两位小数的正实数：²+(.[0-9]{2})?$
• 有1~3位小数的正实数：³+(.[0-9]{1,3})?$
• 非零的正整数：⁴\d*$ 或 ^([1-9][0-9]){1,3}$ 或 ^+?[1-9][0-9]$
• 非零的负整数：^-[1-9][]0-9"$ 或 ^-[1-9]\d$
• 非负整数：^\d+$ 或 ⁵\d*|0$
• 非正整数：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
• 非负浮点数：^\d+(.\d+)?$ 或 ⁶\d*.\d*|0.\d*[1-9]\d*|0?.0+|0$
• 非正浮点数：^((-\d+(.\d+)?)|(0+(.0+)?))$ 或 ^(-([1-9]\d*.\d*|0.\d*[1-9]\d*))|0?.0+|0$
• 正浮点数：⁷\d*.\d*|0.\d*[1-9]\d*$ 或 ^(([0-9]+.[0-9][1-9][0-9])|([0-9][1-9][0-9].[0-9]+)|([0-9][1-9][0-9]))$
• 负浮点数：^-([1-9]\d*.\d*|0.\d*[1-9]\d*)$ 或 ^(-(([0-9]+.[0-9][1-9][0-9])|([0-9][1-9][0-9].[0-9]+)|([0-9][1-9][0-9])))$
• 浮点数：^(-?\d+)(.\d+)?$ 或 ^-?([1-9]\d*.\d*|0.\d*[1-9]\d*|0?.0+|0)$

二、校验字符的表达式

• 汉字：⁸{0,}$
• 英文和数字：⁹+$ 或 ¹⁰{4,40}$
• 长度为3-20的所有字符：^.{3,20}$
• 由26个英文字母组成的字符串：¹¹+$
• 由26个大写英文字母组成的字符串：¹²+$
• 由26个小写英文字母组成的字符串：¹³+$
• 由数字和26个英文字母组成的字符串：¹⁴+$
• 由数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$
• 中文、英文、数字包括下划线：¹⁵+$
• 中文、英文、数字但不包括下划线等符号：¹⁶+$ 或 ¹⁷{2,20}$
• 可以输入含有^%&’,;=?KaTeX parse error: Can't use function '\"' in math mode at position 1: \̲"̲等字符：[^%&',;=?\x22]+
• 禁止输入含有_{的字符：[^}\x22]+

三、特殊需求表达式

• Email地址：^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$
• 域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
  InternetURL：[a-zA-z]+://[^\s]* 或 ^http://([\w-]+.)+[\w-]+(/[\w-./?%&=]*)?$
• 手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
• 电话号码(“XXX-XXXXXXX”、“XXXX-XXXXXXXX”、“XXX-XXXXXXX”、“XXX-XXXXXXXX”、"XXXXXXX"和"XXXXXXXX)：^((\d{3,4}-)|\d{3.4}-)?\d{7,8}$
• 国内电话号码(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}
• 电话号码正则表达式（支持手机号码，3-4位区号，7-8位直播号码，1－4位分机号）: ((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)
• 身份证号(15位、18位数字)，最后一位是校验位，可能为数字或字符X：(^{\d{15}$)|(^\d{18}$)|(}\d{17}(\d|X|x)$)
• 帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：¹⁸[a-zA-Z0-9_]{4,15}$
• 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：¹⁹\w{5,17}$
• 强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8-10 之间)：^(?=.\d)(?=.[a-z])(?=.*[A-Z]) [a-zA-Z0-9]{8,10}$
• 强密码(必须包含大小写字母和数字的组合，可以使用特殊字符，长度在8-10之间)：^(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,10}$
• 日期格式：^\d{4}-\d{1,2}-\d{1,2}
• 一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$
• 一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$
  钱的输入格式：
• 有四种钱的表示形式我们可以接受:“10000.00” 和 “10,000.00”, 和没有 “分” 的 “10000” 和 “10,000”：²⁰[0-9]*$
• 这表示任意一个不以0开头的数字,但是,这也意味着一个字符"0"不通过,所以我们采用下面的形式：^(0|[1-9][0-9]*)$
• 一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号：^(0|-?[1-9][0-9]*)$
• 这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把- - 负号的也去掉,因为钱总不能是负的吧。下面我们要加的是说明可能的小数部分：²¹+(.[0-9]+)?$
  必须说明的是,小数点后面至少应该有1位数,所以"10.“是不通过的,但是 “10” 和 “10.2” 是通过的：²²+(.[0-9]{2})?$
  这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样：²³+(.[0-9]{1,2})?$
  这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样：²⁴{1,3}(,[0-9]{3})(.[0-9]{1,2})?$
  1到3个数字,后面跟着任意个 逗号+3个数字,逗号成为可选,而不是必须：^([0-9]+|[0-9]{1,3}(,[0-9]{3}))(.[0-9]{1,2})?$
  备注：这就是最终结果了,别忘了”+“可以用”*"替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里
• xml文件：^([a-zA-Z]±?)+[a-zA-Z0-9]+\.[x|X][m|M][l|L]$
• 中文字符的正则表达式：[\u4e00-\u9fa5]
• 双字节字符：[^\x00-\xff] (包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1))
• 空白行的正则表达式：\n\s*\r (可以用来删除空白行)
• HTML标记的正则表达式：<(\S*?)[^>]>.?|<.? /> ( 首尾空白字符的正则表达式：^\s|\s*KaTeX parse error: Undefined control sequence: \s at position 4: 或(^\̲s̲*)|(\s*) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)
• 腾讯QQ号：[1-9][0-9]{4,} (腾讯QQ号从10000开始)
• 中国邮政编码：[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)
• IP地址：((?😦?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))

---

1. 0-9 ↩︎

2. 0-9 ↩︎

3. 0-9 ↩︎

4. 1-9 ↩︎

5. 1-9 ↩︎

6. 1-9 ↩︎

7. 1-9 ↩︎

8. \u4e00-\u9fa5 ↩︎

9. A-Za-z0-9 ↩︎

10. A-Za-z0-9 ↩︎

11. A-Za-z ↩︎

12. A-Z ↩︎

13. a-z ↩︎

14. A-Za-z0-9 ↩︎

15. \u4E00-\u9FA5A-Za-z0-9_ ↩︎

16. \u4E00-\u9FA5A-Za-z0-9 ↩︎

17. \u4E00-\u9FA5A-Za-z0-9 ↩︎

18. a-zA-Z ↩︎

19. a-zA-Z ↩︎

20. 1-9 ↩︎

21. 0-9 ↩︎

22. 0-9 ↩︎

23. 0-9 ↩︎

24. 0-9 ↩︎