深入浅出理解和学习javascript

最新推荐文章于 2024-08-02 13:15:05 发布

大灰狼爱技术

最新推荐文章于 2024-08-02 13:15:05 发布

阅读量683

点赞数

文章标签： js引擎正则表达式编程语言 w3c dom

很多人在学习Javascript的时候，很少去细分javascript里的类别，其实很多编程语言基本都分为两个部分，一个是自身的语法核心集(数据类型、变量处理、流程控制等等)，另一个就是为了语言的生命力而扩展的接口实现，常常就是根据一些组织规定的规范来具体进行实现。例如，很多语言为了操作数据库，都要实现数据库操作接口，有sqlconnection,mysqlconnection等都实现了dbconnection。那么在javascript中，它有自身的一套作为编程语言该有的核心语法集,另外它为了生存，就实现了w3c组织规范的对HTML文档元素进行操作的函数库，即我们常说的DOM,所以，javascript和js dom是有区别又有联系的，不能单单地把js dom等同于js,其中js dom根据文件的不同可以分为html dom 和xml dom，其中很大一部分方法都是相同的，有些稍微有点差别，毕竟xml和html还是有一点不一样的。那么本文就是从两个部分来深入展开对javascript的学习讲解。

一 Javascript

Js变量的定义

在js中变量用var表示，不论要定义的变量的实际类型

js的变量的类型究竟怎样决定

1、js是弱数据类型语言；即在定义变量的时候，统一使用var表示即可，甚至不写也可以。

2、js中的变量数据类型是由js引擎决定的

javascript基本数据类型--三大类型

基本数据类型

数值类型-->整型、实型

布尔类型

字符串类型

通过typeof可以看到变量的具体数据类型是什么

<html>
<head>
<title>js示例查看数据类型</title>
<scriptlanguage="javascript">
    var v1="abc";
    var v2=890;
    window.alert("v1是："+typeof v1+"v2是："+typeof v2);
</script>
</head>
<body>
</body>
</html>

js复合数据类型

复合数据类型：数组；对象。

Js特殊数据类型

null和undefine

null空值 var a=null;

undefine var v; window.alert(v);没有给v赋值，就会返回一个undefine;或者未定义就使用的变量或属性等都会返回undefined

js基本语法--数据类型转换

自动转换

案例：

vara=1.2; a=45; a="耶耶耶";window.alert(a);输出的结果是耶耶耶

强制转换

如何字符串转成数字？

vara=parseInt("123");

varb=parseFloat("12.3");

parseInt()，parseFloat()是系统函数，可以直接使用。

js基本语法--运算符

算术运算符

+加、-减、*乘、/除、%取模、++自加、--自减、+=左加、-=左减、/=左除、%=左取模

关系运算符

==等于、>大于、<小于、>=大于等于、<=小于等于、!=不等于

逻辑运算符

用于判断逻辑关系的运算符

&&与、||或、!非

在逻辑运算中，0、""、false、null、undefined、NaN均表示false

位运算和移位运算

var a=4>>2;

window.alert(a);结果1。

js基本语法--三大流程控制

顺序控制

分支控制

让程序有选择的执行，分支控制有三种：

1、单分支；2、双分支；3、多分支

单分支语法：if(条件表达式){执行语句;}

双分支语法：if(条件表达式){执行语句;}else{执行语句;}

多分支语法：if(条件表达式1){语句;}else if(条件表达式2){语句;}else{语句;}

多分支

switch(条件表达式){

case 常量1: 语句; break;

case 常量2: 语句; break;

...

default: 语句; break;

注意：表达式可以是js支持的所有数据类型

js基本语法--三大流程控制

循环控制有三种

1、for循环基本语法：

for(循环初始值;循环条件;步长){

语句;//循环体

}

2、while循环基本语法：

while(循环条件){

语句;//循环体

}

特别说明：while循环是先判断再执行语句。

3、do while循环基本语法

do{

语句;//循环体

}while(循环条件);

特别说明：do while循环是先执行，再判断。

u 函数

为完成某一功能的程序指令(语句)的集合，称为函数。

函数分为：自定义函数、系统函数(经常查看js帮助手册)

js自定义函数基本语法：

function 函数名(参数列表){

//代码语句

return值;//有无返回值是可以选择的。

}

js文件引入语法：

函数的几种调用方式

1、函数名(传递给函数的参数1，参数2，...)

2、变量=函数名;

此时变量就相当于函数的引用(指针)，可以这样调用函数：变量(实际参数..)

特别说明：

1、对于有返回值的函数调用，也可以在程序中直接使用返回的结果，

例如：alert("res="+sum(2,3));

2、没有返回值的函数，则返回underined。

使用function类创建函数

创建动态函数的基本语法格式：

var varName=newfunction(argument1,...,lastArgument);

说明：所有的参数都必需是字符串型的，最后的参数必需是这个动态函数的功能程序代码。

例子：

<scriptlanguage="javascript">

varsquare=new function("x","y","varsum;sum=x*x+y*y;return sum;");

alert(square(3,2));

varalsoDoSquare=doAdd;

alert(alsoDoSquare(3,2));

</script>

数组

数组的基本概念：用于存放一组数据。

特别说明：js的数组不区分数据类型，可以存放任意数据类型。

js中的数组是用于表示一组数据的集合，它由一对方括号[]包围，数组的每个元素用逗号分隔，数组元素可以是任意类型的数据。

一维数组基本语法：

var 数组名=[元素值1,元素值2,...];

1、创建数组

vara=["shunping",123,"1.1",4.5,true];

2、数组在内存中的存在形式

js中的数组是引用传递(地址传递)

数组的引用(使用)

数组名[下标]

比如：

var a=[23,"hello",4.5]

你要使用a数组的第三个元素 a[2] 则输出4.5

如果访问a[3] 访问越界输出undefine

结论：不能访问不存在的元素。

数组的下标是从0开始编号的。

js数组允许动态增长

a=[45,true]

a[2]=56;//动态增长

for(var i=0;i<a.length;i++){

window.alert(a[i]);

}

输出结果：45 true 56

js数组的特点

js数组是可以动态的增长的，这个和java的数组不一样，有点类似java中的ArrayList

js数组的几个重要应用

1、使用数组名.length可以得到数组大小；

2、拆分字符串字符串.split(拆分标准)可以得到一个数组。

3、其它..

例：split和length的使用

var str="hello world abc 顺平";

var arr=str.split(" ",2);

for(var i=0;i<arr.length;i++){

document.writeln(arr[i]+",");

}

输出结果：hello,world

遍历一维数组

遍历数组很多种方法，可以使用for循环，while循环遍历数组，其中for循环遍历除了常规用法外，还可以如下使用：[此方法知道就好，不推荐使用]

arr=[45,90,0]

arr["gg"]=9000;

for(var key in arr){

window.alert(key+"="+arr[key]);

}

js基本语法--多维数组

多维数组--二维数组

多维数组我们只介绍二维数组，一维数组的元素还可以是一个数组，就构成二维数组。

1、实例

vararr=[["shunping",123,4.5],["a","b","c"]];

2、分析

思考：如何访问到"b"，arr[0][2]又是多少？如何遍历二维数组？

arr[1][1]是b

arr[0][2]是4.5

遍历二维数组

<html>

<head>

<title>js示例二维数组遍历</title>

<!--

vararr=[["shunping",123,4.5],["a","b","c"]];

for(var i=0;i<arr.length;i++){

for(varj=0;j<arr[i].length;j++){

document.writeln(arr[i][j]);

}

document.writeln("<br>");

}

//-->

</script>

</head>

<body>

</body>

</html>

u js面向对象特征

明确概念：

1、javascript是一种基于对象(Object-based)的语言，你遇到的所有东西几乎都是对象。

特别说明：基于对象也好，面向对象也好实际上都是以对象的概念来编写程序，从本质上并无区别，所有这两个概念在我的课程中是一样的。

2、因为javascript中没有class(类)，所以有人把类也称为原型对象，因为这两个概念从在编程中发挥的作用看都是一个意思，为了统一叫法，我这里就统一叫类。

u 类(原型对象)--如何定义类(原型对象)

基本语法：

function 类名/原型对象(){

}

对象的属性

对象的属性，一般是基本数据类型(数，字符串)，也可是另外的对象。

创建对象基本语法：

var对象名=new 类名();

对象实例--如何访问(使用)对象实例的成员变量

1、对象实例名.属性名;

2、对象实例名["属性名"];

对象实例名["变量名"]的方式可以实现动态的访问变量，如：

function Person(){}

var p1=new Person();

p1.name="ss";

window.alert(p1["name"]+""+p1.name);

u Js还提供一种方式，主动释放对象内存

Delete.对象名.属性名//这样就会立即释放对象的这个属性空间

u this

This:哪个对象实例调用this所在的函数，那么this就代表哪个对象实例.

特别说明：

1、js中一般在类中不定义私有变量或私有方法。

2、类中的变量和方法定义为公开的都必需使用this来定义。

functionPerson(){

var name="abc";//由于name和age在类中通过var来定义，导致name和age为类中的私有变量，所以无法通过引用方式来访问类中私有的成员变量。

var age=900;

this.name2="abc2";//this.name2表示name2这个属性是公开的。

//这个就是Person类的一个公开方法,类中所有公开的方法都必需通过this来定义。

this.show=function(){

window.alert(name+" "+age);

}

//这时Person类中的私有方法,只能在Person类中使用。

function show2(){

window.alert("show2()"+name+""+age);

}

var p1=newPerson();

window.alert(p1.name+""+p1.age+" "+p1.name2);//出现无法访问的情况，提示undefine

p1.show();

p1.show2();//这里会报错

u 给对象添加方法的方式：

第一种：

Function类名(){
}

Var 对象名=new 类名();

Function函数名(){}

对象名.属性名=函数名；//这样就相当于把函数赋给对象名.属性名,此时这个属性名就表示一个函数

对象名.属性名();//调用

第二种

对象名.属性名=function(参数列表){}

对象名.属性名(实际参数);//调用

第三种

前面的几种方法有一个问题：那就是每个对象独占函数代码，这样如果对象很多，需要重复很多代码将函数重写很多遍，则会影响效率，js提供了另一种方法，原型法。代码如下：

functionPerson(){

}

Person.prototype.shout=function(){

window.alert('shout');

}

var p1=new Person();

p1.shout();

var p2=new Person();

p2.shout();

这样的话多个对象可以共享shout函数代码，而shout函数代码只需写一次.

补讲，js中==的作用：

①当==的两边都是字符串的时候，则比较内容是否相等

②如==两边是数字，则比较数的大小是否相等

③如==两边是对象或者对象函数，则比较地址是否相等。

u 创建对象的又一种形式

如果一个对象比较简单，我们可以直接创建。

Var dog={name:’小狗’,age:8};

调用函数的另外一种方式：函数名.call(对象实例)

test.call(dog);//dog就取代test函数里的this

我们前面学习过，通过prototype给所有对象添加共享的方法，但是这种方式不能访问类的私有变量和私有方法.

u js面向(基于)对象编程--三大特征

抽象

在讲解面向对象编程的三大特征前，我们先了解什么叫抽象，在定义一个类时候，实际上就是把一类事物的共有的属性和行为提取出来，形成一个物理模型(模板)。这种研究问题的方法称为抽象。

封装--什么是封装

封装就是把抽象出来的属性和对象属性的操作封装在一起，属性被保护在内部，程序的其它部分只有通过授权的操作(函数)，才能对属性进行操作。

封装--访问控制修饰符

电视机的开关，对音量，颜色，频道的控制是公开的，谁都可以操作，但是对机箱后盖，主机板的操作却不是公开的，一般由专业维修人员来玩。

那么在js中如何实现这种类似的控制呢？

[js24.html]封装示例

<html>

<head>

<title>js示例封装示例</title>

<!--

functionPerson(name,agei,sal){

this.name=name;//公开的属性

varage=agei;//私有属性

varsalary=sal;//私有属性

//在类中如何定义公开的方法(特权方法)，私有方法(内部方法)

//如果我们希望操作私有的属性，则可以通过公开的方法去实现

this.show=function(){

window.alert(age+""+salary);

}

//私有方法,可以访问类中的对象属性(不论公开的还是私有的)

functionshow(){

window.alert(age+""+salary);

}

varp1=new Person('sp',20,50000);

window.alert(p1.name);

p1.show();

//-->

</script>

</head>

<body>

</body>

</html>

封装

js提供有以下几种控制方法和属性的访问权限

1、公开级咖哩：对外公开

2、私有级别：类本身可以访问，不对外公开

function Person(pname,page){

this.name=pname;//公开属性(变量)

varage=page;//私有属性(变量)

//私有方法

functionfun1(){

window.alert("hello");

}

//公开函数(特权函数)

this.fun2=function(){

window.alert(this.name+""+age);

fun1();

}

通过prototype给所有对象添加方法，但是这种方法不能访问私有变量和私有方法。

function Person(pname,page){

this.name=pname;//公开属性(变量)

varage=page;//私有属性(变量)

//私有方法

functionfun1(){

window.alert("hello");

}

//公开函数(特权函数)

this.fun2=function(){

//可以访问所有成员

window.alert(this.name+""+age);

fun1();

}

var p1=new Person("顺平",90);

//给所有对象添加公共方法

//不能调用私有变量和方法

Person.prototype.fun3=function(){

return "fun3()hello";

}

//输出"fun3()hello"

window.alert(p1.fun3());

特别注意：类名.prototype.函数名=function(){}这个也称为后置绑定。

继承

Js中继承：实际上是通过对象冒充的方式，就是改变this的指代，如我在classA中调用classB的构造函数（因为构造函数同时也是函数，所以一样可以调用），调用后classB里的this就是指代ClassA对象，ClassB里的由this修饰的属性和方法就相当于在ClassA里写过一样。反正就是只有this指代这classA对象，不管代码是在哪里，js是动态解释执行语言，所以它会将ClassB里的this用ClassA的对象来代替，所以ClassB里的代码就可以供ClassA对象来使用。

代码如下：

function Stu(name,age){

this.name=name;

this.age=age;

this.show=function(){

window.alert(this.name+""+this.age);

}

this.payFee=function(money){

window.alert('应缴'+money*0.5);

}

function MidStu(name,age){

this.stu=Stu;//将Stu的指针地址给stu属性

this.stu(name,age);//相当于调用Stu构造方法，因为此时的this.stu是MidStu对象，所以根据this的知识点（谁调用它所在的函数，this就指向谁）。因此，所有Stu构造函数里面的this都用MidStu对象来代替，因此就相当于在Stu构造函数里面写了midstu.name=name,midstu.age=age…等等代码，从而貌似实现继承这样一种效果实现代码的复用，实际的关键之处还在于this的指代，所以此方法交冒用对象，因为Stu里的this本应该是指向Stu的对象，通过这两句话的使得this指向了MidStu的对象，从而实现冒用

}

var midstu=new MidStu('sp',40);

window.alert(midstu.name);

代码2：

讲解：

this.newMethod = ClassA;

this.newMethod(sColor); //这就相当与在对象自己身上调用ClassA函数，ClassA的this指向了ClassB

//相当与 ClassA.call(this);

delete this.newMethod; //用完就删除,如果是ClassA.call(this)就不用删除了

讲解2

理解这儿需要的知识是成员方法中this的指代this定义成员直接给对象添加成员

function ClassB(sColor)//把此函数看作构造函数

{

this.newMethod = ClassA; //字面意思，定义成员方法，把函数ClassA作为成员方法

this.newMethod(sColor); //执行成员方法，成员方法里面this指代类的实例，该方法给该实例添加了color，sayColor两个成员，不是你想的得到了ClassA的成员

delete this.newMethod; //此方法已经执行,删不删都一样，不影响属性的添加，区别只在构造出的对象中是否存在该方法，如果不删除，还可以在实例中调用该方法，修改那两个成员的值

}

下面的写法能有同样效果，可以帮助你理解：

function ClassB(sColor)//把此函数看作构造函数

{

this.newMethod = ClassA; //字面意思，定义成员方法，把函数ClassA作为成员方法

}

var objB=new ClassB();

objB.newMethod("red");//在对象中调用该方法，同样可以给对象添加那两个成员，原写法在构造函数中调用只是调用时间的区别，实质是相同的，能理解么？

alert(objB.color);

多态--概念

所谓多态，就是指一个引用(类型)在不同情况下的多种状态，在java中多态是指通过指向父类的引用，来调用在不同子类中实现的方法。

js实际上是无态的，是一种动态语言，一个变量的类型是在运行的过程中由js引擎来决定的，所以说js天生就支持多态。

多态的案例：

function Person(){

this.test1=function(){

window.alert("Persontest1");

}

function Cat(){

this.test1=function(){

window.alert("Cattest1()");

}

var v=new Person();

v.test1();

v=new Cat();

v.test1();

u js的内部类

把js内部类分为静态类和动态类，

1、动态类在引用其属性和方法的时候：

var 对象实例名=new 类名();

对象实例名.方法(或属性);

2、静态类

在引用其属性和方法的时候：静态类.方法(或属性);

静态类：Math

提供常用的数学函数和常数，如：abs()返回数的绝对值，max(x,y)求x,y中较大的数。

Date类：动态类

String类：动态类

Array类；动态类

二 dom编程

dom编程简介

DOM=DocumentObject Model(文档对象模型)，根据W3C DOM规范，DOM是HTML与XML的应用编程接口(API)，DOM将整个页面映射为一个由层次节点组成的文件。

js把浏览器，网页文档和网页文档中的html元素都用相应的内置对象来表示，这些对象与对象间的层次关系称为dom，针对网页(html,jsp,php,aspx,net)的dom就是html dom。

dom编程简介--html dom层次图

htmldom定义了访问和操作html文档的标准方法。

htmldom把html文档呈现为带有元素、属性和文本的树结构(节点树)

dom对象简介

js把浏览器，网页文档和网页文档中的html元素和相应的内置对象来表示，这些内置对象就是dom对象，编程人员通过访问dom对象，就可以实现对浏览器本身、网页文档、网页文档中元素的操作，从而控制浏览器和网页元素的行为和外观。

常用的dom对象一览图

u 事件驱动机制

事件（对象）分类：

1.鼠标事件：当用户在页面上用鼠标点击页面元素时，对应的dom节点会触发鼠标事件，主要有click、dblclick、mousedown、mouseover、mouseout、mouseup、mousemove等

2.键盘事件

当用户用键盘输入信息时，会触发键盘操作事件。主要包括keydown、keypress、keyup三个。

3.HTML事件

HTML节点加载变更等相关的事件，比如window的onload、unload、abort、error，文本框的select、change等等。

4.其它事件

页面中一些特殊对象运行过程中产生的事件，比如xmlhttprequest对象的相关事件.

一个事件可以被多个函数监听。

Oncontextmenu:通过返回false防止用户通过点击鼠标右键菜单拷贝网页内容

Onselectstart:防止用户选中文字

代码如下：

<bodyοnclick="test()" οncοntextmenu="return false;"onselectstart="return false;">

<divid="dv">

ddd <input type="button"id="btn" value="操作类样式"/>

</div>

</body>

DOM是HTML与XML的

从dom编程的角度，就会把html文档，当做dom树来看待，dom编程其实就是把网页看做是一颗树（HTML DOM TREE），然后用相应的dom对象去访问网页文档，从而达到控制浏览器和网页的行为和外观

u 再看事件驱动编程

事件驱动编程：简单地说就是你点什么按钮（即产生什么事件），电脑执行什么操作（用什么函数），当然事件不仅限于用户的操作，当对象处于某种状态时，可以发出一个消息通知，然后对这个消息感兴趣的程序就可以执行。

事件驱动编程中的几个核心概念：

事件源：谁发出事件通知，发出消息，也就是事件主体；

事件名称：发出什么样的通知的名称，比如鼠标到我头上了，我被别人点了一下；

事件响应函数：谁对这个事件感兴趣，当这个事件发生时要执行什么样的操作；

事件对象：一般来说，当事件发生时，会产生一个描述该事件的具体对象，包括具体的参数，一起发给响应函数，好让他们通过事件对象来了解事件更加详细的信息。

如何获得一个属性节点呢？如<a href="http://www.baidu.com">百度一下</a>，现在想获得href代表的DOM节点，如何实现呢？使用document.getElementsByTagName[0].getAttribute('href')返回的是一个字符串，如何获得节点的对象类型呢？

functionshowAttr(){

var btnShowAttr=document.getElementById("btnShowAttr");//演示按钮，有很多属性

var attrs=btnShowAttr.attributes;

for(var i=0;i<attrs.length ;i++){

var attr=attrs[i];

alert('nodeType:'+attr.nodeType);//attribute 的nodeType=2

alert('attr:'+attr);

alert('attr.name:'+attr.name+'='+attr.value);

}

offsetTop

offsetwidth

当访问某个表单的某个元素的时候，可以

(1)document.forms[第几个表单].元素的名字或元素的id

(2)document.forms.item(第几个表单).元素的名字或元素的id

代码：

<html>

<headlang="en">

<scripttype="text/javascript">

function test(){

var formsObj=document.forms;

window.alert(formsObj[0].user.value);

}

</script>

</head>

<body>

<form>

u<input type="text"id="user" />

</form>

<inputtype="button" value="test" οnclick="test()">

</body>

</html>

u 正则表达式的语法

元字符

如果要想灵活的运用正则表达式，必需了解其中各种元字符的功能，元字符从功能上大致分为：

1、限定符；2、选择匹配符；3、分组组后和反向引用符；4、特殊字符；5、字符匹配符；6、定位符

元字符--限定符

用于指定其前面的字符和组合项连续出现多少次

{n}说明：n表示出现的次数。比如a{3},1{4},(\d){2}

但是这里要注意一点，1{3}去匹配1111111的话，会是到什么结果呢？111 111

元字符--限定符

{n,m}说明：n表示至少出现的n次最多m次。比如a{3,4},1{4,5},(\d){2,5}

我们看看1{3,4}去匹配1111111的话，会得到什么结果呢？1111 111

js在默认匹配中使用的是贪婪匹配的原则，即尽可能匹配多的字符串。

元字符--限定符

+说明：+表示出现1次到任意多次。比如/a+/gi,/1+/gi,/(\d)+/gi

看看/1+/gi去匹配1111111的话会得到什么结果呢？1111111

元字符--限定符

*说明：*表示出现0次到任意多次。比如/a*/gi,/1*/gi,/(\d)*/gi

看看/a1*/gi去匹配a111的话会得到什么结果呢？a111

元字符--限定符

?说明：?表示出现0次到任意多次。比如/a?/gi,/1?/gi,/(\d)?/gi

看看/a1?/gi去匹配a111的话会得到什么结果呢？a1

元字符--字符匹配符

[a-z]说明：[a-z]表示可以匹配a-z中任意一个字符。比如：/[a-z]/gi,/[a-z]{2}/gi

看看/[A-Z]/gi去匹配allc8会得到什么结果？a l l c

元字符--字符匹配符

[A-Z]表示可以匹配A-Z中任意一个字符

[0-9]表示可以匹配0-9中任意一个字符

元字符--字符匹配符

[^a-z]说明：[^a-z]表示可以匹配不是a-z中的任意一个字符。

比如/[^a-z]/gi,/[^a-z]{2}/gi

看看/[a-z]/gi去匹配allc8会得到什么结果？a l l c

用/[^a-z]{2}/gi又会得到什么结果？得不到任何结果

用/[^a-z]/gi又会得到什么结果？ 8

元字符--字符匹配符

[^A-Z]表示可以匹配不是A-Z中任意一个字符

[^0-9]表示可以匹配不是0-9中任意一个字符

元字符--字符匹配符

[abcd]表示可以匹配abcd中的任意一个字符。

[^abcd]表示可以匹配不是abcd中的任意一个字符。

当然上面的abcd你可以根据实际情况修改，以适应你的需求。

元字符--字符匹配符

\d 表示可以匹配0-9的任意一个数字，相当于[0-9]

\D 表示可以匹配不是0-9中的任意一个数字，相当于[^0-9]

\w 匹配任意英文字符、数字和下划五，相当于[a-zA-Z0-9_]

\W 相当于[^a-zA-Z0-9_]是\w刚好相反

\s 匹配任何空白字符(空格，制表符等)

\S 匹配任何非空白字符，和\s刚好相反

. 匹配出\n之外的所有字符，如果要匹配本身则需要使用\.

思考题：写一个正则表达式可以匹配任意三个连续的字符 /([\d\D])\1{2}/gi

元字符--特殊字符匹配

在字符中，可能你会遇到比较特殊的字符，针对这种情况，正则表达式通过\xn的方式来匹配\xn的x是固定的，n是一个十六进制的数，比如\x21就是去匹配ascii码表中十六进制是21的字符

元字符--定位符

定位符用于规定要匹配的字符串出现的位置，比如在字符串的开始还是在结束的位置，这个也是相当有用的，必须掌握。

^符号说明：匹配目标字符串的开始位置

比如/^han/gi去匹配"hanshunping han han"，看看会得到什么结果？han

在开始处出现匹配的字符串才会得到值

$符号说明：匹配目标字符串的结束位置。

比如/han$/gi去匹配"hanshunping hanhan"，看看会得到什么结果？han

在结尾处出现匹配的字符串才会得到值

元字符--定位符

\b符号说明：匹配目标字符串的边界。

这个字符串的边界，有点不好理解，举例说明：

比如/han\b/gi去匹配"hanshunping sphan nnhan"，我们会匹配到"hanshunping sphan nnhan"，所以这里说的字符串的边界指的是子串间有空格，或者是目标字符串的结束位置，特别注意：没有目标字符串的开始位置

\B符号说明：匹配目标字符串的非边界。

这个和\b含义刚刚相反，不再赘述。看案例：

比如/han\B/gi去匹配"hanshunping sphan nnhan"，会匹配到"hanshunping sphan nnhan"

元字符--转义符号\

\符号说明：在我们使用正则表达式去检索某些特殊字符的时候，需要用到转义符号，否则检索不到结果，甚至会报错。

案例：

用/$/gi 去匹配"abc$("会怎样？返回空

用/(/gi 去匹配"abc$("会怎样？报错

元字符--转义符号\

需要用到转义符号的字符有以下：

. * + ( ) $ / \ ? [ ] ^ { }

元字符--选择匹配符

有时候，在匹配某个字符串的时候是选择性的，即：既可以匹配这个，又可以匹配那个，这时需要用到选择匹配符号|

选择匹配符号还是比较好理解的，案例说明：

用/(han|韩)/gi去匹配"hanshunping 韩顺平"，会得到什么结果？ han 韩

案例：给你一个字符串，请你验证该字符串是否是一个电子邮件？

[09.html]

<html>

<head>

<title>RegExp--验证邮件格式</title>

<scripttype="text/javascript" language="javascript">

<!--

function test(){

var con=content.value;

alert(con);

varmyReg=/^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+([a-zA-Z]){2,3}$/;

if(myReg.test(con)){

alert("格式正确!");

}else{

alert("格式错误!");

}

//-->

</script>

</head>

<body>

</body>

</html>

*******************************************************************************

案例：给你一个字符串，请你验证该字符串是否是一个身份证？

[10.html]二代身份证验证

<!DOCTYPEhtml>

<html>

<head>

<title>RegExp--二代身份证验证.html</title>

<!--

function idCard(){

area={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"}

varidInfo=idNumber.value;

varidReg=/^[1-9]\d{5}[1-2](9|0)\d\d[0-1]\d[0-3]\d{4}(\d|x)$/;

//判断输入的ID长度和格式是否正确

if(!idReg.test(idInfo)||idInfo==""){

alert("不能为空或输入有误!请核实后重新输入!");

}else{

//通过地区码判断ID号是否非法

varmyArea=idInfo.substring(0,2);//只判断了开始的2位地区码省份，有兴趣的朋友可以添加市及县的判断

if(area[parseInt(myArea)]==null){

alert("非法二代身份证!");

}

//取出性别