JavaScript基础知识

目录

1、概述

1.1 什么是JavaScript？

1.1.1 概念

1.1.2 作用

1.3 JavaScript的用法

1.3.1 HTML页面中的JavaScript

1.3.2 外部的JavaScript

1.3.3 标签属性中的JavaScript

1.4 JavaScript显示数据

1.4.1 使用window.alert()弹出框

1.4.2 使用document.write()将内容写入到html文档

1.4.3 使用innerHTML写入到html元素

1.4.4 使用console.log写入到浏览器控制台

2、JavaScript的注释

3、JavaScript基本语法

3.1 JavaScript变量

3.2 JavaScript的语句

3.3 JavaScript的数据类型

3.3.1 值类型(基本类型)

3.3.2 引用数据类型：

3.3.3 JavaScript拥有动态类型

3.4 JavaScript中的运算符

4、JavaScript对象

4.1 JavaScript的String对象

4.1.1 String对象属性--长度属性

4.1.2 String对象方法

4.2 JavaScript的Array对象

4.2.2 数组的长度 length属性

4.3 JavaScript的Date对象

4.3.1 创建日期对象

4.3.2 日期对象的常用方法

4.4 JavaScript的Math对象

4.4.1 Math常用属性

4.4.2 Math常用方法

5 JavaScript调试

6、JavaScript的函数

6.1.1 isNaN(param)

6.1.2 parseFloat(String)

6.1.3 parseInt(string,radix)

6.2 JavaScript的自定义函数

6.2.1 自定义函数语法

6.2.2 自定义函数实例

6.3 JavaScript的匿名函数

7、JavaScript变量的作用域

7.1 局部 JavaScript 变量

7.2 全局 JavaScript 变量

7.3 变量的生命周期

8 JavaScript自定义对象

8.1 定义对象

8.2 对象的属性

8.3 访问对象的属性

8.4 访问对象的方法

9 JavaScript Window--浏览器对象模型

9.1 window对象

9.2 window对象属性

9.2.1 history对象

9.2.2 location对象

9.2 window对象方法

9.2.1 打开和关闭浏览器案例

9.2.2 弹框案例

9.2.3 定时器案例

10 JavaScript之事件

10.1 HTML事件

10.2 常用的HTML事件

---

 

1、概述

1.1 什么是JavaScript？

1.1.1 概念

JavaScript 是脚本语言，是一种解释性脚本语言（代码不进行预编译）

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行

1.1.2 作用

1、为网页添加各式各样的动态功能,

2、为用户提供更流畅美观的浏览效果。

通常 JavaScript脚本是通过嵌入在HTML中来实现自身的功能 的

层叠样式表(英文全称：Cascading Style Sheets)

层叠：多个样式可以作用在同一个html的元素上，同时生效

1.3 JavaScript的用法

JavaScript 通常简称为 js, 或者 js 脚本。

 

1.3.1 HTML页面中的JavaScript

在 html 页面中的脚本必须位于 script 围堵标签之间， script 标签放在 head 中可以， body 中也可以， 放在最后也可以，对 位置要求不严格 。

 

我们可以在 HTML 文档中放入 不限数量 的 script 标签，通常的做法是把内容统一 放入head或者页

面底部 。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

 

PS: 有些案例中可能会 在 script 标签中出现type="text/javascript"。现在完全可以省略了 ， JavaScript 已

经 是所有现代浏览器以及 HTML5 中的 默认脚本语言 。

 

 

1.3.2 外部的JavaScript

可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件

扩展名是 .js。

 

当我们使用外部文件时，在 HTML 页面的 script 标签的 "src" 属性中设置该 .js 文件：

 

PS:外部脚本不能包含 script 标签 。

 

1.3.3 标签属性中的JavaScript

直接编写在 HTML 标签的一些属性中，用于简单的 JavaScript 代码的编写，用的偏少。

 

 

1.4 JavaScript显示数据

1.4.1 使用window.alert()弹出框

PS ：这里的 window 可以省略，等价于 alert("hello world");

1.4.2 使用document.write()将内容写入到html文档

1.4.3 使用innerHTML写入到html元素

1.4.4 使用console.log写入到浏览器控制台

2、JavaScript的注释

JavaScript 注释与 java 的单行和多行注释相同。

 

单行注释以 // 开头。

 

多行注释以 /* 开始，以 */ 结尾。

 

3、JavaScript基本语法

JavaScript 是一个脚本语言。它是一个轻量级，但功能强大的编程语言。

 

JavaScript 语法跟 Java 很相似，但是也有区别。 JavaScript是弱语言类型，即有些时候有些错误不影响运行 ，但是依然推荐大家按照规范去编写代码。

3.1 JavaScript变量

声明变量的关键字： var

 

语法：var 变量名称；

 

var myCompany ; // 声明变量

myCompany = ' 你好 ' ; // 赋值

var x = 5 ; // 声明的同时赋值

var y = 6 ;

var z = x + y ; // 变量也可以存储表达式

 

变量的命名规则：

 

变量必须以字母开头

变量也能以 $ 和 _ 符号开头

变量名称对大小写敏感（ y 和 Y 是不同的变量）

不能使用关键字保留字

 

变量的命名规范：

见名知意 。例如： breadPirce,userService 等，避免无意义的 a,b,c 等

 

推荐驼峰命名法，即第一个单词的首字母小写，以后每个单词的首字母大写。例如 lastName

 

3.2 JavaScript的语句

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

 

JavaScript 是脚本语言，浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执 行前对所有代码进行编译。

 

JavaScript 中也有分支结构和循环结构，语法与 java类似

 

PS ：一般一行只写一条语句，每句结尾编写分号结束。

 

3.3 JavaScript的数据类型

3.3.1 值类型(基本类型)

3.3.1.1 字符串 String

 

字符串是存储字符的变量。字符串可以是引号中的任意文本。必须使用单引号或双引号；

 

var gameName = " 斗罗大陆 " ;

var hairstylist = 'nacy' ;

//PS ：注意引号嵌套

var message1 = ' 我的发型师是 "tony" 老师 ' ;

var message2 = " 我的发型师是 'tony' 老师 " ;

 

3.3.1.2 数字 Number

 

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：

 

var breadPrice = 15.9 ;

var gameLevel = 66 ;

// 极大或极小的数字可以通过科学计数法来书写：

var myMoney1 = 666e5 ; //66600000

var myMoney2 =- 666e-5 ; //-0.00666

 

3.3.1.3 布尔 Boolean

 

只能有两个值： true 或 false 。

 

var isUnderstand = true ;

var isSingle = false ;

 

3.3.1.4 空 Null

 

var email = null ;

 

3.3.1.5 未定义 Undefined

 

表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。

共有 4 中情况会出现 undefifined 的值

 

1 、变量声明且没有赋值；

 

var obj ;

alert ( obj ); //obj 值为 undefined

 

2 、获取对象中不存在的属性时；

 

var obj ;

alert ( obj . name ); // 报错信息： "Uncaught TypeError: Cannot read property 'name' of

undefined"

 

3 、函数需要实参，但是调用时没有传值，形参是 undefifined ；

 

4 、函数调用没有返回值或者 return 后没有数据，接收函数返回的变量是 undefined 。

 

function printNum ( num ){

alert ( num );

}

var result = printNum (); // 调用函数未传递参数，执行函数的时候 num 的值是 undefined

alert ( result ); //result 的值也是 undefined ，因为 printNum() 没有返回值

 

3.3.1.6 Symbol

 

Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值

 

3.3.2 引用数据类型：

对象(Object)、数组(Array)、函数(Function)

3.3.3 JavaScript拥有动态类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型

 

var param ; // param 类型为 undefined

param = 5 ; // 现在 param 为数字

param = "John" ; // 现在 param 为字符串

 

PS : 虽然 JavaScript 支持这种写法，但是不推荐这种写法。尽量开始声明变量的时候就确定好将要 盛放什么类型的值，以后尽量不随意改变。

 

3.4 JavaScript中的运算符

算数运算符： + - * / % 、 ++ 、 --

赋值运算符： = 、 += 、 -= 、 *= 、 /= 、 %=

字符串的连接符： +

逻辑运算符： && || ！

条件运算符：？ :

比较运算符： == 、！ = 、 > 、 < 、 >= 、 <=

 

强调两个新的比较运算符：

var x = 5 ;

var res = ( x === 5 ); // true

res = ( x === '5' ); // false

res = ( x !== 5 ); // false

res = ( x !== '5' ); // true

 

4、JavaScript对象

4.1 JavaScript的String对象

4.1.1 String对象属性--长度属性

var str = " 我喜欢看 NBA, 最喜欢的球员是 \' 小学生 \' 库里 " ;

// 注意：字符串中出现的 \' 是一个字符，转义为一个单引号

console . log ( str );

// 获取字符串的长度：，切记：所有转移符号的长度都算一个，即 \' 长度为 1

console . log ( " 字符串的长度 =" + str . length ); //22

4.1.2 String对象方法

4.2 JavaScript的Array对象

4.2.1 声明数组

4.2.2 数组的长度 length属性

4.3 JavaScript的Date对象

4.3.1 创建日期对象

var date1 = new Date();

var date2 = new Date(milliseconds);

var date3 = new Date(dateString);

var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);

 

4.3.2 日期对象的常用方法

4.4 JavaScript的Math对象

4.4.1 Math常用属性

 

4.4.2 Math常用方法

5 JavaScript调试

6、JavaScript的函数

6.1 JavaScript的常用全局函数

JavaScript 中有个常用的 全局属性NaN,即非数值 （ Not a Number ）， NaN 属性用于引用特殊的非数字 值，该属性指定的并不是不合法的数字。

6.1.1 isNaN(param)

用于检查其参数是否是非数字值。

是数值的返回false，不是数值返回true。

console . log ( isNaN ( 666 )); //false

console . log ( isNaN ( 1 + 2 )); //false

console . log ( isNaN ( "hello" )); //true

6.1.2 parseFloat(String)

可解析一个字符串，并返回一个浮点数。该函数指定 字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字 ，而不是作为字符串。

 

 

字符串中只返回第一个数字。

 

开头和结尾的空格是允许的。

 

如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN 。

 

6.1.3 parseInt(string,radix)

根据radix进制，解析一个字符串，并返回一个整数

 

 

当参数 radix 的值为 0 ，或没有设置该参数时， parseInt() 会根据 string 来判断数字的基数

 

当忽略参数 radix , JavaScript 默认数字的基数如下 :

 

1.  string 以 "0x" 开头， parseInt() 会把 string 的其余部分 解析为十六进制的整数 。

 

2.  string 以 0 开头，  ECMAScript v3 允许 parseInt() 的一个实现把其后的字符 解析为八进 制或十六进制的数字 。

 

3. string 以 1 ~ 9 的数字开头， parseInt() 将把它 解析为十进制的整数 。

 

 

只有字符串中的第一个数字会被返回。

 

开头和结尾的空格是允许的。

 

如果字符串的第一个字符不能被转换为数字，那么 parseInt() 会返回 NaN 。

 

在字符串以 "0" 为开始时旧的浏览器默认使用八进制基数。 ECMAScript 5 ，默认的是十进制的基数。

 

6.2 JavaScript的自定义函数

6.2.1 自定义函数语法

使用 function关键字定义函数 。

 

function 自定义函数名称 ( 参数列表 ){

    // 函数体

}

 

6.2.2 自定义函数实例

1 、 函数的形参直接写参数名称 ，不需要声明类型，即不需要写 var.

 

2 、 函数的返回取决于函数体中是否有return关键字 。

 

 

6.3 JavaScript的匿名函数

使用function关键字定义函数，不给函数名，把定义的函数扔给一个变量。

 

使用匿名函数:直接调用变量，给个括号，传参数。

 

 

7、JavaScript变量的作用域

7.1 局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问 。

 

在不同的函数中可以声明名称相同变量，因为局部变量出该函数就失效了。

 

7.2 全局 JavaScript 变量

在函数外声明的变量是全局变量， 网页上的所有脚本和函数都能访问它

 

 

7.3 变量的生命周期

JavaScript 变量的生命期 从它们被声明的时间开始 。

 

局部变量会在 函数运行以后被删除 。全局变量会 在页面关闭后被删除 。

 

8 JavaScript自定义对象

对象也是一个变量，但对象可以包含多个值（多个变量）。

8.1 定义对象

对象中可以有属性，也可以有方法

8.2 对象的属性

可以说 "JavaScript 对象是变量的容器 " 。

 

但是，我们通常认为 "JavaScript 对象是键值对的容器 " 。

 

键值对通常写法为 name : value ( 键与值以冒号分割 ) 。

 

键值对在 JavaScript 对象通常称为 对象属性

8.3 访问对象的属性

8.4 访问对象的方法

9 JavaScript Window--浏览器对象模型BOM

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话" 。

 

BOM ： B rowser O bject M odel ，中文浏览器对象模型。

9.1 window对象

所有浏览器都支持 window 对象。它 表示浏览器窗口 。

 

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

 

全局变量是 window 对象的属性。全局函数是 window 对象的方法。

 

9.2 window对象属性

9.2.1 history对象

window.history 对象 包含浏览器的历史

 

window.history 对象在编写时可不使用 window 这个前缀。

 

常用方法：

 

history.back() - 与在浏览器点击后退按钮相同

 

history.forward() - 与在浏览器中点击向前按钮相同

 

history.go(1/-1)-- 参数为 1 ：等同于 history.forward() ，参数为 -1 ，等同于 history.back()

 

 

 

9.2.2 location对象

window.location 对象用于 获得当前页面的地址 (URL)，并把浏览器重定向到新的页面 。

 

常用属性和方法：

 

window.location 对象在编写时可不使用 window 这个前缀。

 

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

 

replace(url) 转向到url网页地 址

 

reload() 重新载入当前网址 ，如同按下刷新按钮

 

9.2 window对象方法

 

9.2.1 打开和关闭浏览器案例

9.2.2 弹框案例

 

9.2.3 定时器案例

var flag1=window.setInterval("showTime1()",1000);

定时器setInterval(定时调用的函数,时间间隔毫秒)

 

表示定时每隔1秒调用一次函数,定时器名字flag1

 

var flag2=window . setTimeout("showTime2()" , 1000 );

 

在指定的毫秒数后调用函数或计算表达式

 

表示定时1秒后执行该方法，且只执行一次。定时器名字flag2

 

setTimeout要想实现setInterval功能--递归调用方法

 

< a href = "javascript:window.clearInterval(flag1)" > 停止定时器 clearInterval < /a>

 

 

 

 

10 JavaScript之事件

事件是写在标签/元素中， 当触发元素的事件后，就需要使用javascript来完成这个事件需要做什么事情。

 

可以直接在标签中写javascript代码或者直接给事件扔一个方法进去

 

10.1 HTML事件

HTML 事件可以是浏览器行为，也可以是用户行为。

 

通过当事件发生时，我们希望可以做些事情，例如点击完毕按钮之后希望跳转页面、文本框输入完毕之后验证有效性等，那么这些要做的事情我们就可以通过JavaScript 实现。

 

10.2 常用的HTML事件

 

 

 

 

 

 

11 JavaScript之DOM模型

通过 HTML DOM ，可访问 JavaScript HTML 文档的所有元素。

 

DOM:Document Object Model, 文档对象模型。

 

当网页被加载时，浏览器会创建页面的文档对象模型即DOM树。

 

HTML DOM 模型被构造为 对象 的树：

 

 

通过可编程的对象模型， JavaScript 获得了足够的能力来创建动态的 HTML 。

 

JavaScript 能够改变页面中的 所有 HTML 元素

 

JavaScript 能够改变页面中的 所有 HTML 属性

 

JavaScript 能够改变页面中的 所有 CSS 样式

 

JavaScript 能够对页面中的 所有事件做出反应

 

11.1 document对象

当浏览器载入 HTML 文档 , 它就会成为 Document 对象 。

 

Document 对象是 HTML 文档的根节点。

 

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

 

提示： Document 对象是 Window 对象的一部分 ，可通过 window.document 属性对其进行访问。

 

 

11.2 document对象常用方法

11.2.1 获取  HTML 元素常用4种方法

 

 

11.2.2 修改 HTML 内容和属性

修改内容

 

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

 

修改 HTML 元素的内容的语法：

 

document.getElementById( id ).innerHTML= 新的 HTML 。

 

PS ： 绝对不要在文档 (DOM) 加载完成之后使用 document.write() 。这会覆盖该文档。

 

 

修改 HTML 属性2种方法

 

修改 HTML 元素属性的语法：

 

方式 1 ： document.getElementById( id ). attribute=新属性值

 

方式 2 ： document.getElementById( id ). setAttribute(属性名，属性值);

 

 

 

11.2.3 修改 HTML 元素的css

修改 HTML 元素 css 的语法：

 

document.getElementById(id).style.property=新样式

 

 

 

11.3 HTML DOM 元素 (节点)

11.3.1 动态创建新的 HTML 元素

要创建新的 HTML 元素 ( 节点 ) 需要先创建一个元素，然后在已存在的元素中添加它。

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button type="button" onclick="createNewP()">动态添加一个元素--appendChild</button>
		<button type="button" onclick="createNewP2()">动态添加一个元素-insertBefore</button>
		<div id="div1">
			<p id="p1">这是段落1</p>
			<p id="p2">这是段落2</p>
		</div>
		<script>
			function createNewP(){
				var newElementP=document.createElement("p");//创建一个新的段落元素
				var text=document.createTextNode("这是我新创建的段落");//新创建的文本节点
				//将文本的节点添加到新创建的元素中
				newElementP.appendChild(text);
				//获取一个页面已经存在的元素
				var div=document.getElementById("div1");
				//添加新创建的元素p到已经存在的元素div中
				div.appendChild(newElementP);
			}
			function createNewP2(){
				var newElementP=document.createElement("p");//创建一个新的段落元素
				var text=document.createTextNode("这是我新创建的段落p2");//新创建的文本节点
				//将文本的节点添加到新创建的元素中
				newElementP.appendChild(text);
				//获取一个页面已经存在的元素
				var div=document.getElementById("div1");
				var p1=document.getElementById("p1");
				//添加新创建的元素p到已经存在的元素div中,指定插入到段落P1前面
				div.insertBefore(newElementP,p1);
			}
		</script>
	</body>
</html>

11.3.2 替换 HTML 元素 -replaceChild

将div中的元素p1替换为新创建的元素

div.replaceChild(newElementP,p1);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="div1">
			<p id="p1">这是一个段落。</p>
			<p id="p2">这是另外一个段落。</p>
		</div>
		<button type="button" onclick="changeElemnt()">替换p1</button>
		<script>
			function changeElemnt(){
				var newElementP=document.createElement("p");//创建一个新的段落元素
				var text=document.createTextNode("这是我新创建的段落p");//新创建的文本节点
				//将文本的节点添加到新创建的元素中
				newElementP.appendChild(text);
				//获取要被替换的元素p1及其父元素div
				var div=document.getElementById("div1");
				var p1=document.getElementById("p1");
				//将div中的元素p1替换为新创建的元素
				div.replaceChild(newElementP,p1);
			}
		</script>
	</body>
</html>

 

11.3.3 删除元素 -removeChild()

方式一:

 

从父元素div中删除子元素p1

 

div.removeChild(p1);

 

方式二:

 

p1.parentNode：作用就是获取要删除元素p1的父元素div

 

p1.parentNode.removeChild(p1);

 

 

 

12 表单验证

12.1表单验证意义与场景

1.降低服务器压力

 

拦截不合格的数据 ，避免直接提交到服务器，可以显著降低服务器开销

 

2.提升用户体验

 

有了表单验证，反馈是实时的，而且脚本还能把你定位到填写错误的具体字段 。现在虽然无刷新技术早已普及，但是只依赖服务端验证，还是会有几百毫秒的延迟

 

12.2 表单验证常用事件与属性

表单经常需要做一些 非空验证、长度验证、合法性验证等 。

 

注意:

 

1.只有表单项才有value属性

 

2.要求用户名和密码有规定长度且非空验证，当鼠标光标移开后开始验证(鼠标事件)，若有问题则要给出提示红色的信息(即修改元素内容和属性)，若没问题则给出提示:用户名可用且颜色为绿色(同样是修改内容和属性)

 

3.所有的验证方法都没问题(都返回true)才允许提交

 

4.像下拉菜单这样不能像用户名那样给出提示，一般放在表单提交时候来验证，表单有一个提交事件onsubmit，当值为true时才提交，另外，为了避免用户没有填写表单就点击注册按钮，在提交表单时要保证所有的验证方法都返回true才可。

 

5.总之，能及时反馈的就要及时反馈，不能则放到表单提交时进行验证(所有的验证都要重新走一遍)

 

主要是获取元素的value值然后去判断验证。

 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>表单验证</title>
		<script>
			function validateName() {
				//所有的表单项元素都value属性
				var name = document.getElementById("userName").value;
				var msg = document.getElementById("nameMsg");
				if(name == null || name == "") {
					msg.innerHTML = "用户名不能为空！";
					msg.style.color = "red";
					return false;
				} else if(name.length < 6) {
					msg.innerHTML = "用户名长度必须为大于6的！";
					msg.style.color = "red";
					return false;
				}
				msg.innerHTML = "用户名可用";
				msg.style.color = "green";
				return true;
			}

			function validatePwd() {
				var password1 = document.getElementById("password1").value;
				var msg = document.getElementById("pwdMsg1");
				if(password1 == null || password1 == "") {
					msg.innerHTML = "密码不能为空！";
					msg.style.color = "red";
					return false;
				} else if(password1.length < 8) {
					msg.innerHTML = "密码的长度必须为大于8的！";
					msg.style.color = "red";
					return false;
				}
				msg.innerHTML = "密码合法";
				msg.style.color = "green";
				return true;
			}

  			function confirmPwd() {
				var pwd1 = document.getElementById("password1").value;
				var pwd2 = document.getElementById("password2").value;
				var msg = document.getElementById("pwdMsg2");
				if(pwd1 != pwd2) {
					msg.innerHTML = "两次输入的密码不一致！";
					msg.style.color = "red";
					return false;
				}
				msg.innerHTML = "两次输入的密码一致";
				msg.style.color = "green";
				return true;
			}

			function validateGender() {
				var gender = document.getElementById("gender").value;
				if(gender == -1) {
					alert("性别为必选项！");
					return false;
				}
				return true;
			}

			function register() {
				return
				validateName() && validatePwd() && confirmPwd() && validateGender();
			}
		</script>
	</head>

	<body>
		<h1>注册</h1>
		<form action="提交.html" method="get" onsubmit="return register()">
			用户名:<input type="text" id="userName" placeholder="请输入用户名" onblur="validateName()" />
			<span id="nameMsg">用户名长度至少6位</span><br /> 
			密码：<input type="password" id="password1" placeholder="请输入密码" onblur="validatePwd()" />
			<span id="pwdMsg1">密码长度至少8位</span><br /> 
			确认密码：<input type="password" id="password2" placeholder="请确认密码" onblur="confirmPwd()" />
			<span id="pwdMsg2">确认密码与密码一致</span><br /> 
			性别：<select id="gender">
					<option value="-1">请选择性别</option>
					<option value="0">女</option>
					<option value="1">男</option>
				</select><br /><br />
			<button type="submit">注册</button>
			<button type="reset">重置</button>
		</form>
	</body>
</html>

 

14 JavaScript的 RegExp 对象-正则表达式

14.1 概念

RegExp ：是正则表达式（ regular expression ）的简写。

 

正则表达式（英语： Regular Expression ，在代码中常简写为 regex、regexp或RE ）是用于描述一组字符串特征的模式，用来匹配特定的字符串。通过特殊字符+普通字符来进行模式描述，从而达到文本匹配目的工具

 

通常使用正则表达式进行字符串的校验，判断字符串是否匹配指定正则模式， 比如表单中验证身份证的合法性，邮箱的合法性或者网址url，通过字符串不大好验证，正则表达式就可以满足这个要求。

 

14.2 语法

语法：正则表达式两种声明

 

var reg = new RegExp ( / 正则表达式主体 / , 修饰符 ( 可选 ));

 

或更简单的方法

 

var reg = / 正则表达式主体 / 修饰符 ( 可选 );

 

案例：

 

var reg = new RegExp ( /nihao/i );

 

var reg = /nihao/i ; // 定义了一个正则表达式。

 

nihao 是一个正则表达式主体 ( 用于检索 ) 。

 

i 是一个修饰符 ( 搜索不区分大小写 ) 。

 

 

14.2.1 修饰符

可以在全局搜索中不区分大小写 :

 

 

14.2.2 正则表达式模式

方括号用于查找某个范围内的字符：

 

 

 

元字符是拥有特殊含义的字符

 

 

量词:

 

 

位置限定符

 

 

特殊符号

 

其他普通字符集及其替换

 

14.2.3 正则表达式的方法test(str)

test() 方法

 

用于 检测一个字符串是否匹配某个模式 ，

 

如果字符串中含有匹配的文本，则返回 true ，否则返回 false 。

 

检测字符串是否与给定的正则匹配

var reg = /nihaoa/i ;

var res = reg . test ( "assdadasd nihaoa " );

console . log ( res ); //true

 

要求str以字母开头，且至少一个字母: ^[a-zA-Z]+

紧跟着是0个或者多个汉字: [\u4e00-\u9fa5]*

结尾是一个数字: [0-9]$

var reg = /^[a-zA-Z]+[\u4e00-\u9fa5]*[0-9]$/ ;

var str = "a 公司拼音为 9" ;

var res = reg . test ( str );

console . log ( res ); //true

console . log ( reg . test ( "a 你好 239" )); //false

 

14.2.4.RegExp对象方法

14.2.5.支持正则表达式的String对象方法

14.2.6.RgeExp对象属性

 

14.3 常用的正则表达式校验案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			/*检查输入的身份证号是否正确*/
			function checkCard(str) {
				/*15位数身份证正则表达式:
			     * 编码规则顺序从左至右依次为6位数字地址码，6位数字出生年份后两位及日期，3位数字顺序码。
                   [1-9]\d{5} 前六位地区，非0打头
                   \d{2} 出生年份后两位00-99
                  ((0[1-9])|(10|11|12)) 月份，01-12月
                  (([0-2][1-9])|10|20|30|31) 日期，01-31天
                  \d{3} 顺序码三位，没有校验码
                */
                var arg1 = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$/;
                if (arg1.length == 15 && !arg1.test(arg1)) {
                   return false;
                }
				/*
				* 18位数身份证正则表达式:
			    * 编码规则顺序从左至右依次为6位数字地址码，8位数字出生年份日期码，3位数字顺序码，1位数字校验码（可为x）。
				 	 [1-9]\d{5} 前六位地区，非0打头
					(18|19|([23]\d))\d{2} 出身年份，覆盖范围为 1800-3999 年
					((0[1-9])|(10|11|12)) 月份，01-12月
					(([0-2][1-9])|10|20|30|31) 日期，01-31天
					\d{3}[0-9Xx]： 顺序码三位 + 一位校验码
				*/
				var arg2 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
				if (arg2.length == 18 && !arg2.test(sfzhmcode)){
					return false;
				}
				return true;
				/*或者
				 * if(str.match(arg1)==null&&str.match(arg2)==null){
				 * 	return false;
				 * }else{
				 * 	return true;
				 * }
				 * 
				 */
			}
			
			
			/*是否是小数*/
			function isDecimal(strValue) {
				var objRegExp = /^\d+\.\d+$/;
				return objRegExp.test(strValue);
			}
		
		
			/*校验是否中文名称组成 */
			function ischina(str) {
				var reg = /^[\u4E00-\u9FA5]{2,4}$/;
				return reg.test(str);
			}
		
		
			/*校验是否全由8位数字组成 */
			function isNum(str) {
				var reg = /^[0-9]{8}$/;
				return reg.test(str);
			}
		
		
			/*校验电话码格式 :座机和手机*/
			function isTelCode(str) {
				var reg = /^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/;
				return reg.test(str);
			}
		
		
		
			/*校验手机号*/
			function isPhoneNum(str) {
				//如果你要精确验证手机号码，那个你可以使用第一个正则。这是根据电信，移动，联通目前发行的号码来的。验证比较精确。
				var reg = /^1[3|4|5|7|8][0-9]{9}$/;
				 如果因为现有的号码不能满足市场需求，电信服务商会增大号码范围。所以一般情况下我们只要验证手机号码为11位，且以1开头。
				var reg = /^^1[0-9]{10}$$/;
				return reg.test(str);
			}
		
		
			/*校验邮件地址是否合法 */
			function IsEmail(str) {
				var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
				return reg.test(str);
			}
		
		
			/*检查输入的URL地址是否正确 */
			function checkURL(str) {
				if(str.match(/http(s)?:\/\/[\w.]+[\w\/]*[\w.]*\??[\w=&\+\%]*/i) == null){
					return false;
				} else {
					return true;
				}
			}
		</script>
	</body>
</html>