JS笔记

来源：互联网发布：手机淘宝换货流程明细编辑：程序博客网时间：2024/05/22 19:11

JS笔记

Javascript的基本介绍

· JS是用于WEB开发的脚本语言：

· 脚本语言是什么：

· 脚本语言往往不能独立使用，它和HTML/JSP/PHP/ASP.NET配合使用

· 脚本语言也有自己的变量，函数，控制语句（顺序，分支，循环）

· 脚本语言实际上是解释性语言（即在执行时直接对源码进行执行），编译性语言效率会更高一些

· Java程序.java→.class→jvm ,js→浏览器（js引擎来解释执行）

· Js主要在客户端（浏览器）执行

· 因为js是由浏览器来执行的，因此这里有个问题，不同类型的浏览器可能对js的支持不一样。

· 开发工具的选择：记事本 myeclipse

<!DOCTYPE HTML PUBLIC"-//W3C//DTDHTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

function test(){

window.alert("helloworld!");

}

</script>

<title> New Document </title>

</head>

<body>

</body>

</html>

案例：1

需求：打开网页后，显示hello ！

<html>

<head>

<scriptlanguage="javascript">

window.alert("hello");

</script>

</head>

<body>

</body>

</html>

问题：

· js的位置可以随意放

· js必须使用 <scriptlanguage="javascript"> 代码</script>

· 在一个html文件中（JSP/PHP/ASP.NET）可以出现多对（script）片段，浏览器会按照先后顺序依次执行

案例2:

· 如何定义变量：

· 如何运算：

<html>

<head>

<title> New Document </title>

</head>

<body>

//js中变量的定义（js中变量用var表示，无论什么类型）

varnum1=1;

var num2=60;

var result=num1+num2;

window.alert("结果是"+result); //alert函数 window.alert表示弹出一个对话框

</script>

</body>

</html>

· Js的变量类型是怎样决定的

1) Js是弱数据类型语言，即：在定义变量时候，统一使用var表示，甚至可以去掉var这个关键字

2) Js中的变量的数据是由js引擎决定的

var name=”shunping”; //name是字符串

var kk=2 //kk是数字

name=234; //这时name自动变成数

· Js的命名规范（函数/变量）：

1) 使用大小写字母，数字，$可以命名

2) 不能以数字打头

3) 不能使用js保留字和关键字（即java里的关键字）

4) 区分

5) 单行注释大小写：//

6) 多行注释：/*…….*/

· Js的数据类型：

基本数据类型3种

1数值类型

特殊数值：1)NaN 不是数字

vara=”abc”

window.alert(parseInt(a));

2） Infinity 无穷大

window.alert(6/0);

3)isNaN() 如果是数字的话返回false

4)isFinite() 如果是无穷大返回false

2.字符串类型

可以用双引号也可以用单引号，单个字符也可以看成字符串，有特殊字符用\转义 window.alert("asada\"r"); 输出asada”r

3.布尔类型

true false

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

举例：

<html>

<head>

<scriptlanguage="javascript">

var num1=123;

var num2="abcd";

window.alert("num1是"+typeof num1);

window.alert("num2是"+typeof num2);

var num1=false; //体现js是动态语言：即数据类型可以任意变化

window.alert("num1是"+typeof num1); //体现js是动态语言

</script>

</head>

<body>

</body>

</html>

· 复合数据类型

· 数组

· 对象

· 特殊数据类型

· Null 即：var a=null

· Undefine

即：如下代码

window.alert(tt ); //直接报错：未定义

· var tt; //不报错未给值输出Undefine

</script>

· Js定义变量，初始化，赋值

1)定义变量：即vara

2)初始化：即在定义变量时就给值

3)赋值：即：比如你先定义一个变量 var tt ，然后再给值：tt=780；

· js数据类型转换：

1)自动转换

例子：var a=123; //a是数值 a=”hello” //a的类型是string

2)强制转换

例子：字符串转换成数字

var a="123” ;

a=parseInt(a); //使用系统函数强制转换

varb=90 ; //b是number

b=b+””, //b就是string

· 运算符

+ — * / %

%(取摸：即两个数相除的余数) 强调：取模主要用于整数之间取模

例子：编写一个程序，判断两个数是否能够整除

<scriptlanguage="javascript">

var a=90;

var b=8;

if(a%b==0){

window.alert("能整除");

}else{

window.alert("不能整除");

}

</script>

· ++，运算符

a++ --> a=a+1

b-- = b=b-1

++a 表示先把自己加1再赋值

--a 表示先把自己减1再赋值

例子：

var a=56;

var b=++a;

window.alert(b); b=57

window.alert(a); a=57

· --运算符

var a=56;

var b=--a;

window.alert(b); b=55

window.alert(a); a=55

window.prompt(); prompt() 方法用于显示可提示用户进行输入的对话框。

document.write() :向浏览器输出内容

varnum1=window.prompt("请输入一个数"); //输入1.1

varnum2=window.prompt("请再输入一个数"); //输入1.1

document.writeln("这两个数的和是"+(num1+num2));

//此时都当成字符串考虑，输出1.11.1

document.writeln("这两个数的和是"+(parseFloat(num1)+parseFloat(num2)));

//此时输出2.2

这个案例中不写parseFloat也是可以的

逻辑运算符：

（1）与&&

If（逻辑表达式1&&逻辑表达式2）{}

如果逻辑表达式1为true 则JS引擎会继续执行逻辑表达式2

如果逻辑表达式1为false则不会执行逻辑表达式2

（2）或 ||

在JS中，||究竟返回什么值，这是一个非常重要的知识点

结论：将返回第一个不为false的值（对象亦可），或者是返回最后一个值（如果全部都是false的话）,返回的结果不一定是布尔值

案例1：

var a=true;

var b=false;

window.alert(a||b);

输出true

案例2：

var a=4;

var b=90;

var c=a||b;

window.alert(c);

输出：4

案例3：

var a=0;

var b=90;

var c=a||b;

window.alert(c);

输出：90

案例4：

var a=0;

var b="";

var d=false;

var c=a||b||d;

window.alert(c);

输出：false 如果是var c=a||d||b;返回空串

案例5：

var a=0;

var b="";

var c=false;

var d=new Object();

var k=a||b||c||d;

window.alert(k);

输出类型是object

（3）非！

特别说明：在逻辑运算中：0，””，false，null，undefined，NaN均表示false

除了这些均表示真的。

var a=0;

if(!a){

window.alert(“OK”);

}

输出OK

JS的位运算和移位运算，规范和java一致

var a=4>>2; 结果是1

var a=-4>>2; 结果是-1

JS的控制语句：

1）顺序控制

对变成而言，不控制其流程就是顺序执行。

2）分支控制

2.1单分支

If(条件表达式){

语句；

}

2.2 双分支

If(条件表达式){

}else{

}

2.3多分支

If(条件表达式1){

}else if。。。（条件表达式2）{

}else{//else可有可无

}

案例：如果是男同志，上男厕所，女同志上女厕所，否则不上厕所

var sex=window.prompt("请输入性别");

if(sex=="男"){

window.alert("上男厕所");

}else if(sex=="女"){

window.alert("上女厕所");

}else{

window.alert("不上厕所");

}

注意：JS中字符串比较也要用==

一旦找到了一个满足条件的入口，执行完毕后，就直接结束整个多分支

switch语句：

基本语法：

switch(表达式){

//执行语句；

case 常量1：

break； //跳出整个switch

。。。。。

default:

语句；

break;

}

结论：1）JS的switch语句的常量数据类型可以是JS支持的任何类型（对象和数组除外）。

2） case后面的值数据类型可以是任意的。

3） break作用是跳出整个switch

4）如果没有匹配的则执行default

for循环

while循环

do while循环

案例：求1！+2！+3！+…….+n!

var n=window.prompt("请输入一个数");

sum=0;

temp=1;

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

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

temp=temp*j;

}

sum=sum+temp;

temp=1;

}

document.writeln(sum);

在ie8中，我们可以通过工具来对JS代码进行调试，尤其页面比较复杂的情况下非常有用。

在ie8中，通过开发人员工具，就可以进行JS的调试工作。

案例：打印出半个金字塔，整个金字塔，空心金字塔，菱形，空心菱形的代码见金字塔.html文件

函数的学习：

函数的基本概念：为完成某一个功能的代码（语句，指令）集合

基本语法：

function 函数名（参数列表）{

语句；//函数（方法）主体

return 返回值；

}

说明：

1.参数列表：表示函数的输入特别强调：参数名前不要带var

2.函数主体：表示为了实现某一功能代码块

3．函数可以有返回值也可以没有

入门案例：

<html>

<head>

<scriptlanguage="javascript" type="text/javascript">

<!--

//输入两个数，再输入一个运算符，得到结果

varnum1=window.prompt("请输入一个数");

varnum2=window.prompt("请再输入一个数");

num1=parseFloat(num1);

num2=parseFloat(num2);

varoperator=window.prompt("请输入一个运算符");

varres=jiSuan(num1,num2,operator);

document.write("结果是"+res);

//自定义函数

functionjiSuan(num1,num2,operator){

var res=0;

if(operator=="+"){

res=num1+num2;

}

elseif(operator=="-"){

res=num1-num2;

}

elseif(operator=="*"){

res=num1*num2;

}

else{

res=num1/num2;

}

return res;

}

-->

</script>

</head>

<body>

</body>

</html>

把上面的函数单独提出，然后在需要的地方引入

案例：

function.html文件

<html>

<head>

<scriptlanguage="javascript" src="function.js"></script>//引入函数的JS文件

<scriptlanguage="javascript" type="text/javascript">

<!--

//输入两个数，再输入一个运算符，得到结果

varnum1=window.prompt("请输入一个数");

varnum2=window.prompt("请再输入一个数");

num1=parseFloat(num1);

num2=parseFloat(num2);

varoperator=window.prompt("请输入一个运算符");

varres=jiSuan(num1,num2,operator);

document.write("结果是"+res);

-->

</script>

</head>

<body>

</body>

</html>

function.js文件

//自定义函数

functionjiSuan(num1,num2,operator){

var res=0;

if(operator=="+"){

res=num1+num2;

}

elseif(operator=="-"){

res=num1-num2;

}

elseif(operator=="*"){

res=num1*num2;

}

else{

res=num1/num2;

}

return res;

}

对中文进行编码escape 把编码再转换成中文unescape

window.moveTo(200,200);//指定窗口的位置

window.resizeTo(300,400);//重置窗口的大小

案例一：

Js文件：

function test(val){

window.alert("你得输入是"+val);

return 90;

}

html调用：

test("hello,world"); //传统的调用方式

//window.alert(test);//把函数全部打出来

var myvar=test;

window.alert(myvar);

myvar("中国北京");

输出：

函数的调用方式

1.普通调用

函数名（实际参数）；

2.通过指向函数的变量去调用

var myvar=函数名;

myvar（实际参数）

3.关于接收函数返回值得讨论

varmyvar=test("abc"); //输出abc

window.alert(myvar); //输出90，如果函数没有返回值则返回undefined，如果有返回值，则返回什么就是什么

递归：

Js文件：

调用：abc（5）；

输出：33 4

特别强调：JS的函数天然支持可变参数,函数不可以重名

案例：

//编写一个函数，可以接收任意多个数，并计算他们的和

function abc2(){

//在JS中有一个 arguments可以访问所有传入的值

//window.alert(arguments.length);//得到参数的个数

//遍历所有的参数

var sum=0;

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

sum=arguments[i]+sum;

}

window.alert(sum);

}

调用：abc2(12,12,12,12); 结果是48

abc2(); 结果是0

数组：

数组，这种数据类型（引用类型/复杂类型/复合类型），数组的基本概念：用于存放一组数据。

特别强调：JS中的数组，可以存放各种数据类型（数值/字符串…）

快速入门案例：

var weights=[3,5,1,3.4,2,50];

var allweights=0;

//数组的遍历

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

allweights+=weights[i];

}

document.writeln("总体重是"+allweights);

varavgweight=allweights/weights.length;

//如果你想知道数据类型是什么

//window.alert(avgweight.constructor);

//window.alert( typeofavgweight);

document.writeln("平均体重是"+avgweight.toFixed(2));//保留两位小数

数组的细节

基本语法：

var 数组名=[元素值，元素值…]

元素的值可以是任意类型

var an=[1.23,”hello”,true,2];

数组在内存中的存在形式：

内存数据调用案例：

输出：900

内存数据分析:

JS中的数组是引用传递

案例

输出：35 90 900

内存数据调用分析：

JS的数组可以动态增长

思考2，动态增长的输出56 数组的长度变为3

数组的引用

基本用法：

数组的名称[下标];

比如：var a=[23,”hello”,4.5]

我们访问a[2]则输出4.5

如果我们访问a[3]则输出undefined

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

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

对字符串进行分割，形成一个字符串数组用split函数

var str="abc 姜爽 hello world";

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

//拆分字符串，可以得到一个数组，取前两个元素，以空格进行分割，如果没有参数2，则全部输出

for(vari=0;i<str.length;i++){

document.writeln(str[i]+"");

}

输出：abc 姜爽

了解：

输出：

0=45

1=90

2=0

gg=9000

a[1][1] 4.5

二维数组的遍历：

输出：shunping 123 4.5

a b c

优化排序：

优化的好处：如果是有序的，无须再次排列

输出：找到下标为4

数组转置：

输出：

JS面向（基于）对象编程

1. 澄清概念

JS中基于对象等同于面向对象

JS中没有class，但是有新的名字叫做原型对象，因此类等同于原型对象

2. 为什么需要面向对象

入门案例：

/*张老太太养了两只猫猫：一只名字叫小白，今年3岁，白色。

还有一只叫小花，今年10岁，花色。请编写一个程序，当用户

输入小猫的名字时，就显示该猫的名字，年龄，颜色。如果用

户输入的小猫名字错误，则显示张老太太没有这只猫。

//这里就是一个Cat类

function Cat(){

}

var cat1=new Cat();//这时cat1就是一个对象

cat1.name="小白";

cat1.age=3;

cat1.color="白色";

//从上面的代码我们可以看出

//1.JS中的对象的属性可以动态的添加

//2.属性没有限制

window.alert(cat1.name);输出小白

类（原型对象）和对象的区别和联系

1）类是抽象的概念，代表一类事物

2）对象是具体的，代表一类实体

3）对象是以类（原型对象）为模板创建起来的

创建对象的方式有5种

1）工厂方法—使用new Object创建对象并添加相关属性

2）使用构造函数来定义类（原型对象）

3）使用prototype

4）构造函数及原型混合方式

5）动态原型方式

方法选择：使用构造函数来定义类（原型对象），然后再创建实例

基本语法：

function 类名/原型对象名(){

}

创建对象：var 对象名=new 类名();

在对象中我们特别说明：

1） JS中一切都是对象

function Person(){}

window.alert(Person.constructor);

var a=new Person();

window.alert(a.constructor);//对象实例的构造函数

window.alert(typeof a);//a的类型是什么

var b=123;

window.alert(b.constructor);

输出：

如何判断一个对象实例是不是某个类型

方法1：

if(a instanceof Person){

window.alert("a是Person");

}

方法2：

if(a.constructor==Person){

window.alert("a是Person");

}

补充说明：带var和不带var的区别

var abc=89;//全局变量

function test(){

abc=900;

}

test();

window.alert(abc); //输出900，var abc=900;则输出89

访问对象的属性的方法：2种

1）普通方式：对象名.属性名

2）动态访问：对象名[“属性名”]

案例：

1.function Person(){}

var p1=new Person();

p1.name="姜爽";

window.alert(p1.name);

varval="na"+"me";

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

window.alert(p1[val]);

对象的引用问题说明：

2.function Person(){}

var a=new Person();

a.age=10;

a.name="小明";

var b=a;

b.name="小白";

window.alert(b.age+"名字"+b.name+"名字"+a.name);

输出：10名字小白名字小白

对象回收的机制：

堆地址引用的次数

0x1234 2 b=null 1

a=null ->0

JS引擎（浏览器的部分）有一张表

JS提供一种方式主动释放内存

delete a.age;//用于删除属性指向同一个地方，一个删了b就访问不到了

这样就会立即释放对象的属性空间

this讲解：

问题的提出：

function Person(){};

var p1=newPerson();

p1.name ="老韩";

p1.age =30;

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

var p2 =new Person();

window.alert(p2.name);

这里我们可以看到window.alert(p2.name)会输出 undefined

在实际编程中,我们可能有这样的需求,当我们创建一个对象后,就希望该对象自动的拥有某些属性

[比如:当我们创建一个Person对象后,就希望该对象自动拥有name和age属性,这又怎么办?

使用this 来解决

function Person(){

this.name="abc";

this.age=30;

}

var p1 = new Person();

var p2 = new Person();

window.alert(p1.name+" "+p2.name);

◇可能有人会这样去思考问题

//***有些同学可能会这么想:

function Person(){

var name="abc";//如果这样去使用name这个属性是私有的

var age=30;

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

}

var p1=new Person();

window.alert(p1.name+" "+p1.age);//错误

这样使用会报 undefined，私有的外部访问不到

function Person(){

var name="abc";//私有的,只能在内部使用

var age=30;//私有的,只能在内部使用

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

this.show=function (){//函数这就是Person类里面的一个公开的方法

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

}

function show2(){//这就是Person类里面的一个私有的方法,只能在类内部使用,

//如要一定要使用,只能通过公开方法(特权方法)来调用私有方法来实现

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

}

var p1=new Person();

p1.show();

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

//window.alert(p1.name+" "+p1.age);//错误的

记住一句话:

哪个对象实例调用this所有的函数,那么this就代表哪个对象实例

function test1(){

alert(this.v);

}

var v=90;

window.test1();//等价于test1() window调用test1()，所以this就代表window

输出90

this注意事项:

this不能放在类的外部使用,否则调用就变成window调用了

对象---成员函数（方法）

比如我们希望对象不但有属性，还需要他有行为，行为在程序中要靠函数来体现。

function Person(name,age){

//使用传递的实际参数去初始化属性

this.name=name;

this.age=age;

//输出自己的名字,这里this.show就是一个公开的函数，函数名字是show

this.show=function(){

document.write("名字"+this.name);

}

//添加计算函数，可以计算从1+....+100的结果

this.jisuan=function(n){

var res=0;

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

res+=i;

}

return res;

}

var p1=new Person("宋江",90);

p1.show();

document.write("</br>"+p1.jisuan(100));

输出：名字宋江
5050

给一个对象添加(指定)函数的几种方式

1. 通用常用方式:上面的函数，知道这种通用的方式即可

2.方式二:

function Person(){

this.name="abc";

this.age=30;

}

function show1(){

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

}

var p2 = new Person();

p2.abc=show1;//记住不要加括号

p2.abc(); //输出helloabc window.alert（p2.abc）；会把函数打出来

3.方式三:

function Person(){

this.name="abc";

this.age=30;

}

var p3 = new Person();

p3.show=function show2(){

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

}

p3.show(); //输出helloabc

题1.

function Person(){

this.name="abc";

this.age=30;

}

function show1(){

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

//是window调用的name就是window的name

}

var p2 = new Person();

p2.show=show1;

show1();//注意思考会输出什么?提示谁调用它.this就代表谁

答案:name:空白(undefined)

题2.

function Person(){

this.name="abc";

this.age=30;

}

var name="abc2";

function show1(){

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

}

var p2 = new Person();

p2.show=show1;

show1();

答案:name:abc2

4.方式四:

前几种方法有一个问题，那就是以上对象独占函数代码，这样如果对象过多，则会影响效率，js设计者，给我们提供了别一个方法，原型法：这样多个对象可以共享函数代码，代码如下：

function Dog(){

}

//使用prototype去绑定一个函数给shout

Dog.prototype.shout=function(){

window.alert('小狗');

}

var dog1=new Dog();

dog1.shout();

var dog2 = new Dog();

dog2.shout();//ok

window.alert(dog1.shout==dog2.shout);//返回true，说明是共享的函数

//扩展

var dog3 = new Dog();

var dog4 = new Dog();

var dog5 = dog4;

window.alert(dog3==dog4);// false 不是同一个对象

window.alert(dog4==dog5);// true

对代码原理说明图：

补讲 == 号的作用

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

2. 如 == 的两边都是数字的时候，则数的大小是否相等。

3. 如 == 的两边是对象或对象中的函数属性，则比较地址是否相等。

加深对类和对象的认识

如何给类添加方法（如何给某类型的所有对象添加方法）

案例1：

//初步体验Object类,通过Object直接创建对象

var p1 = new Object();

p1.name ="abc";

window.alert(p1.name);

window.alert(p1.constructor);

案例2：

var i = new Number(10);

//我们可以给类添加方法.

Number.prototype.add=function(a){

returnthis+a;

}

window.alert(i.add(10).add(30));

var b= 90;

window.alert(b.add(40)); //输出50 130

请思考给js的Array对象扩展一个find(val)方法,当一个Array对象调用该方法时候,如果能找到val则返回其下标,否则返回-1;

案例：

//体验一下Array

var arr1=new Array();

arr1[0]="s1";

arr1[1]="s2";

arr1[2]="s3";

//遍历数组

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

document.write(arr1[i]+"&nbsp");

}

//使用Array提供的方法来颠倒数据

arr1.reverse();

document.write("</br>");

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

document.write(arr1[i]+"&nbsp");

}

输出：s1s2 s3
s3 s2 s1

//现在我们一起看看如何给所有Array对象添加一个方法find(val)

Array.prototype.find=function(val){

//开始遍历数组this

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

if(this[i]==val){

return i;

}

return -1;

}

document.write("下标是"+ arr1.find("s2")+"&nbsp");

输出：下标1

闭包

这个知识点，在讲到封装的时候再说！

成员函数的细节

1成员函数的参数可以是多个

function 函数名（参数......）{

}

2成员函数可以返回值,也可以没有,但是有的话,最多只有一个

function函数名(参数列表){

语句;//函数主体

return 返回值;

}

3.js中不支持函数的重载,具体案例

functiontest(a,b){

window.alert("hello");

}

functiontest(a){

window.alert(a);

}

functiontest(a,b){

window.alert(a+""+b);

}

test(23); //输出23 undefined

window.test(3,"hello");//输出3 hello

结论:1.js在调用一个函数的时候,是根据函数名来调用的,如果有多个函数名相同,则认最后那一个函数.

2.直接定义一个函数或者变量,实际上这些函数和变量就是全局函数和全局变量(本质上他们是属于window对象的)

◆ 面向对象综合案例

游戏的分析:

1. 看看如何通过按钮来控制mario的位置

2. 设计相关的对象(Mario x, y......)

基本代码给大家:

要求:1. mario碰到边界给一个提示

2. mario 可以去找另外一个物体

构造函数：

基本用法

function 类名（参数列表）{

属性=参数值；

}

案例：

function Person(name,age){

this.name=name;

this.age=age;

}

//创建Person对象的时候，就可以直接给名字,年龄

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

特别说明：在给一个对象初始化一个属性值的时候，也可以指定函数属性

案例：

functionjisuan(num1,num2,oper){

if(oper=="+"){

return num1+num2;

}

elseif(oper=="-"){

return num1-num2;

}

elseif(oper=="*"){

return num1*num2;

}

else{

return num1/num2;

}

function Person(name,age,fun){

this.name=name;

this.age=age;

this.myfun=fun;

}

var p1=newPerson("abc",9,jisuan);

window.alert(p1.myfun(89,90,"+")); //输出179

创建对象的另一种形式：

如果一个对象比较简单，我们可以直接创建。可以指定普通属性和函数属性。

var dog={name:"小狗",

age:8,

fun1:function(){window.alert("hello");},

fun2:function(){window.alert("world");}

};

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

window.alert(dog.constructor);

dog.fun1();

dog.fun2();

有时我们会看到这样一种调用方法：函数名.call（对象实例）这样调用,该函数的this就是这个对象实例。

小案例：

vardog={name:"hello"};

function test(){

window.alert(this.name);

}

test.call(dog);//==dog.test; 输出：hello

for ..in的用法

var dog={name:"小明",fun1:function(){window.alert("hello");}};

//循环列出 dog对象的所有属性和方法对象名["属性名"]

for(var key in dog){

window.alert(key+":"+dog[key]); // key属性 dog[key]属性值

}

//遍历window对象的所有属性

for(var key in window){

document.write(key+":"+window[key]+"</br>");

}

JS面向对象编程的三大特性

1封装

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

1)公开级别:对外公开

2)私有级别:类本身可以访问,不对外公开

案例：

functionPerson(name,age,sal){

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

var age=age;//私有的属性

var sal=sal;//私有的属性

//在类中如何定义公开方法（特权方法），私有方法（内部方法）

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

this.show=function(){

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

}

//私有方法,可以访问对象的属性

function show2(){

window.alert(age+sal);

}

var p1=newPerson("sp",30,4000);

p1.show();//这个可以成功//不能在类的外部去访问私有的方法

p1.show2();//不能在类的外部去访问私有的方法

特别强调：

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

function Person(){

this.name="sp";

var age=90;

this.abc=function(){

window.alert("abc");

}

function abc2(){

window.alert("abc");

}

Person.prototype.fun1=function(){

window.alert(this.name);//ok

//window.alert(age);//no ok

//abc2();//no ok

this.abc();//ok

}

var p1=new Person();

p1.fun1();

2.继承

1）为什么需要继承

//解决代码冗余问题-->继承

//抽象出一个学生类，即把中学生和小学生的共性拿出来

function Stu(name,age){

this.name=name;

this.age=age;

this.show=function(){

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

}

function MidStu(name,age){

this.stu=Stu;

this.stu(name,age);

//JS中实际上是通过对象冒充来实现继承，这句话不可少，因为JS是动态语言，如果不执行，则不能实现继承效果

}

function Pupil(name,age){

this.stu=Stu;

this.stu(name,age);

}

var midStu=newMidStu("顺平",32);

midStu.show();

特别说明：

通过对象冒充，JS可以实现多重继承的效果，用的少.

JS的函数重载和重写的问题

重载：JS中不支持重载，即不可以通过参数的个数或者是类型来决定调用哪个函数，但是因为JS天然的支持可变参数的，所以，它可以是看成天然支持重载。

function abc(){

if(arguments.length==…){

}else{

}

重写：子类可以重新写函数来覆盖父类的某个方法

父类：

function Stu(name,age){

this.name=name;

this.age=age;

this.show=function(){

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

}

子类：

function MidStu(name,age){

this.stu=Stu;

this.stu(name,age);//JS中实际上是通过对象冒充来实现继承，这句话不可少

//MidStu可以覆盖Stu父类的show方法

this.show=function(){

window.alert("hello");

}

var midStu=newMidStu("顺平",32);

midStu.show(); //这里调用的是子方法

多态的例子：

function Master(){

this.feed=function(animal,food){

window.alert("主人给"+animal.name+"喂"+food.name);

}

function Food(name){

this.name=name;

}

function Fish(name){

this.fish=Food;

this.fish(name);

}

function Bone(name){

this.bone=Food;

this.bone(name);

}

function Animal(name){

this.name=name;

}

function Cat(name){

this.cat=Animal;

this.cat(name);

}

function Dog(name){

this.dog=Animal;

this.dog(name);

}

var master = new Master();

var cat=new Cat("小猫");

var fish=new Fish("鱼");

master.feed(cat,fish);

输出：主人给小猫喂鱼

补讲闭包：

解释：

1）闭包和垃圾回收gc是相关联的

2）闭包实际上是在涉及到一个对象的成员属性何时被gc处理的问题

3）怎样才能对对象的属性形成一个闭包

案例：

//闭包closure

function A(){

var i=0;

function b(){

window.alert(i++);

}

return b;

}

//A();//此时内存中有i的空间就被回收了

var c=A();//这种用法gc不会把i当成垃圾处理

c();//0

c();//0从而证明i被闭包了

JS内部类

JS中本身提供了一些可以直接使用的类，这些类就是内部类。

主要有：

Object Array Border String Date Number Math RegExp Boolean

内部类的分类

从使用的方式看：分为静态类和动态类

静态类的使用：类名.属性/方法

比如：Math

动态类的使用：var 对象=new 动态类（）对象属性或方法

案例：

//Math(静态类)

window.alert(Math.abs(-12));

//显示当前的时间(动态类)

var date=new Date();

window.alert(date.toLocaleString());

Math

看看几个常用的方法

alert(Math.ceil(4.5));//5

alert(Math.floor(4.5));//4

alert(Math.round(4.77));//5

alert(Math.random());//0到1之间的随机小数

Date类

var date=new Date();

window.alert(date.toLocaleString());

//window.alert(date.getYear());

String类

String是一个动态类，常用案例举例

varstr="asjaeh12312";

alert(str.length);//11

var str2="ab cdef";

var arr=str2.split("");//如果("")就是一个一个的分

alert(arr);

varstr3="abcdef";

alert(str3.substr(1,3));//bcd

alert(str3.substring(1,3));//bc

varstr4="abcdef";

alert(str4.charAt(3));//d

var str5="ab 123 56ab";

alert(str5.indexOf("ab",1));

//返回某个指定的字符串值在字符串中首次出现的位置。1:从下标为1的开始找

Array类

是一个动态类

常用的方法

var myarr=new Array();

//动态的添加数据

myarr[0]="sp";

myarr[1]=90;

alert(myarr.length+""+myarr);// 2 sp 90

myarr.pop();//出栈

alert(myarr.length+""+myarr);//1 sp

myarr.push("js");

alert(myarr.length+""+myarr);//2 sp ,js

var myarr2=new Array(2);

alert(myarr2.length);//2

myarr2[0]="sp";

myarr2[1]=90;

myarr2[2]=90;

alert(myarr2+""+myarr2.length);//不报错，正常sp 90 90 3

//myarr2[81]=90;//不要跳过下标放值

myarr2["a"]="ok";

alert(myarr2["a"]+""+myarr2.length+" "+myarr2);//ok,3,sp,90,90

Boolean

是动态类

Number类

var a=890.678;

a=a.toFixed(2);

alert(a);//890.68 四舍五入保留两位小数

var b=10;

//把10 的二进制显示出来

alert(b.toString(2));//1010toString(8)8进制

JS事件驱动编程

JS中的事件主要分为4种：

1）鼠标事件

click dblclick mousedown mouseoutmouseover mouseup mousemove

2）键盘事件

keydown keypress keyup

3） HTML事件

window的onload unload error abort 文本框的select change

4）其他事件

页面中有些特殊对象运行过程中产生的事件

快速入门案例

案例1：

监听鼠标点击事件，并能够显示鼠标点击的位置x,y

function test1(e){

window.alert("x="+e.clientX+"y="+e.clientY);

}

</script>

</head>

<bodyonmousedown="test1(event)">

</body>

点击浏览器之后，显示坐标

案例2：点击按钮，图片变成红色，黑色

1）方法：JS访问内部css

//js如何访问css属性，来改变外观

function test3(e){

varpic=document.getElementById("pic");

if(e.value=="红色"){

pic.style.backgroundColor="red";

}

else if(e.value=="黑色"){

pic.style.backgroundColor="black";

}

</script>

</head>

<body >

<inputtype="button" onclick="test3(this)" value="红色">

<inputtype="button" onclick="test3(this)" value="黑色">

</body>

</html>

2）方法：JS访问外部css

event2.css文件：

.style{

border:1;

background-color:red;

width:300px;

height:300px;

}

event2.html文件：

function test3(e){

//取连接的第一个css文件的内容用0

varocssRules=document.styleSheets[0].rules;

//从ocssRules取出你希望的样式

var style=ocssRules[0];//这里面的0表示event2.css文件中第一个规则

if(e.value=="黑色"){

style.style.backgroundColor="black";

}

else if(e.value=="红色"){

style.style.backgroundColor="red";

}

</script>

</head>

<body>

<divclass="style"></div>

<inputtype="button" onclick="test3(this)" value="红色">

<inputtype="button" onclick="test3(this)" value="黑色">

</body>

</html>

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

function test(e){

window.alert("fss");

}

function test1(e){

window.alert("sfdsdf");

}

</script>

</head>

<body>

<divclass="style"></div>

<inputtype="button" onclick="test(this),test1(this)" value="红色">

</body>

</html>

window有3个事件

onload:页面打开

onbeforeunload:关闭页面之前

onunload关闭页面

<bodyonload="test1()" onbeforeunload="test2()"onunload="test3()">

<inputtype="text" onFocus="test4()">当鼠标点击文本框时触发这个事件

oncontextmenu="returnfalse" 防止别人点击右键拷贝页面的内容

onselectstart="returnfalse" 禁止选中网页内容

Dom编程

为什么要学习dom编程：

1）Dom编程重要的作用是可以让用户对网页元素进行交互操作。

2）Dom编程用来做一些网页游戏

3) Dom编程也是ajax的重要基础

从dom编程的角度就会把该html文档当成dom树

bom

bom(browser object model)浏览器对象模型

因为做浏览器的厂家很多W3C就定义一个做浏览器的规范

bom和dom关系密切

1.confirm()

<html>

<head>

<scriptlanguage="javascript">

function test(){

varres=window.confirm("你要删除");

if(res){

window.alert("删除成功");

}

else{

window.alert("删除失败");

}

</script>

</head>

<body>

<inputtype="button" value="delete" onclick="test()">

</body>

</html>

2.setInterval()

该函数可以根据指定的时间，循环的执行某个函数或者表达式

需求：请编写一个程序每隔一秒弹出一个hello,world

function sayHello(){

window.alert("hello,world");

}

setInterval("sayHello()",1000);

在网页上显示时间

function showTime(){

//在元素间的文本就是通过对象.innerText

document.getElementById("mytime").innerText=newDate();

}

setInterval("showTime()",1000);

</script>

</head>

<body>

<spanid="mytime"></span>

3.clearInterval()

需求：10秒时，时钟停止

var count=0;

function showTime(){

count++;

if(count==10){

clearInterval(time);

}

//在元素间的文本就是通过对象.innerText

document.getElementById("mytime").innerText=newDate();

}

vartime=setInterval("showTime()",1000);

</script>

</head>

<body>

<spanid="mytime"></span>

4.setTimeout() :

在指定的毫秒数后调用函数或计算表达式（但是只调用一次）

需求：在打开页面后，5秒钟后弹出hello，world

function sayHello(){

window.alert("hello,world");

}

setTimeout("sayHello()",5000);

5.clearTimeout()

function sayHello(){

window.alert("hello,world");

}

vartime=setTimeout("sayHello()",5000);

clearTimeout(time);//取消Timeout

不再显示hello,world

6.moveTo() moveBy()

案例：

window.moveTo(100,100); //这个是相对于屏幕左上角0，0坐标

window.moveBy(100,100);//这个是相对当前窗口的左上角0，0坐标

7.resizeBy() 和resizeTo()

案例：

window.resizeTo(100,100); //把窗口的大小调整到指定的宽度100和高度100。

window.resizeBy(100,100);//把窗口再增加100，100

8.open()开一个新窗口

window.open("event1.html","_blank");

9.opener

父窗口和子窗口通信

打开一个新窗口

[ hello ] 显示

父窗口：

代码如下：

<html>

<head>

<!--

var newWindow;

function test2(){

//newWindow其实就是指向新窗口的引用

newWindow=open("newWindow.html","_blank");

}

function test3(){

newWindow.$("myspan2").innerText=$("info2").value;

}

function $(id){

returndocument.getElementById(id);

}

//-->

</script>

</head>

<body>

我是父窗口

<inputtype="button" value="打开新窗口" onclick="test2()"/>

<inputtype="text" value="" id="info2"/>

<span>接收的信息是：</span>

<spanid="myspan">信息</span>

</body>

</html>

子窗口：

代码如下：

<html>

<head>

<!--

functiontest2(){

opener.$("myspan").innerText=$("info").value;

}

function$(id){

return document.getElementById(id);

}

//-->

</script>

</head>

<body>

我是新窗口

<span>接收的信息是：</span>

</body>

</html>

login.html文件

<html>

<head>

<scriptlanguage="javascript">

function checkuser(){

if($("username").value=="顺平"&&$("pwd").value=="123"){

return true;

}

else{

$("username").value="";

$("pwd").value="";

window.alert("用户名或密码错误");

return false;

}

function $(id){

returndocument.getElementById(id);

}

</script>

</head>

<body>

<formaction="ok.html">

用户名:<inputtype="text" id="username" value=""></br>

密  码:<input type="password"id="pwd" value=""></br>

<inputtype="submit" value="登陆" onclick="returncheckuser()"></br>

</form>

</body>

</html>

请注意：onclick得到假值之后就放弃提交，不会跳转到另一个页面，所以此处onclick="return checkuser()"

ok.html文件

<html>

<head>

<scriptlanguage="javascript">

function tiao(){

clearInterval(mytime);

window.open("manage.html","_self");

}

setTimeout("tiao()",5000);

function change(){

$("time").innerText=parseInt($("time").innerText)-1;

}

varmytime=setInterval("change()",1000);

function $(id){

returndocument.getElementById(id);

}

</script>

</head>

<body>

登陆成功</br>

<spanid="time">5</span>秒钟之后进入管理页面

</body>

</html>

manage.html文件

管理页面

History对象

作用：该对象包含了客户端访问过的URL信息

back() go(number) number=-1,表示返回上级 number=-2表示返回上级的上级

length属性 表示历史列表的url数量

案例：

a. html文件

b. html文件

function goback(){

//history.go(-1);

history.back();

}

</script>

<a href="#" onclick="goback()">返回上一级</a>

reload()方法：重新加载当前文档，相当于刷新

案例：

<scriptlanguage="javascript">

functiontest(){

//location.reload();

window.alert(location.href);//返回完整的 URL

}

</script>

<body>

<inputtype="button" value="刷新" onclick="test()">

aderwrqwrq

</body>

appName属性可返回浏览器的名称。

platform声明了运行浏览器的操作系统和（或）硬件平台。

document.write(navigator.appName+""+navigator.platform);

输出：Microsoft Internet Explorer Win32

window.alert(screen.width+""+screen.height);

if(screen.width!=1024||screen.height!=768){

window.alert("不是这像素");

}

关于绑定事件的细节

1.直接和某个html控件绑定

如：<input type="button" value="刷新页面" onclick="test()"/>

2.通过getElementById()获取到元素后，再绑定监听

如：

<html>

<head>

<scriptlanguage="javascript">

function test(){

document.write("hello,world");

}

</script>

</head>

<body>

<inputtype="button" value="点击" id="but1">

<scriptlanguage="javascript">

document.getElementById("but1").onclick=test;//这里绑定监听

</script>

</body>

</html>

3.如果我们有一个投票系统，但是每个人只能点一次票（使用attachEvent detachEvent一定要配对使用）

<html>

<head>

<scriptlanguage="javascript">

function test(){

window.alert("你投票一次");

//解除事件绑定

document.getElementById("but1").detachEvent("onclick",test);

}

</script>

</head>

<body>

<inputtype="button" value="投票" id="but1">

<scriptlanguage="javascript">

document.getElementById("but1").attachEvent("onclick",test);

</script>

</body>

</html>

<html>

<head>

<scriptlanguage="javascript">

function test(e){

//用户每按下一个键就判断是不是一个数

if(e.keyCode<48||e.keyCode>57){

window.alert("您输入的不是数");

return false;//如果不返回，则输入的字母也会显示在文本框中

}

</script>

</head>

<body>

请输入一个六位数：

<inputtype="text" onkeypress="return test(event)">

<inputtype="button" value="提交" id="but1" >

</body>

</html>

document对象

定义：document对象代表整个html文档，因此可以去访问到文档中的各个对象

1） write()

这个是向文档输出文本或js代码

2） writeln()

这个是向文档输出文本或js代码，与write不一样的地方是，writeln是换行输出

比如：document.writeln("hello");document.writeln("ok")

hello

但是对浏览器看，输出效果没有区别

3) getElementById()

A. 规定html中的id号要唯一，如果不唯一，则只取第一元素

B. id 最好不要用数字开头

4) getElementsByName()

通过元素的名字来获取对象集合

<html>

<head>

<scriptlanguage="javascript">

function test(){

//id不能唯一，但是name可以重复

varhobbies=document.getElementsByName("hobby");

window.alert(hobbies.length);

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

//如何判断是否选择

if(hobbies[i].checked){

window.alert("选择的爱好是"+hobbies[i].value);

}

</script>

</head>

<body>

请选择你的爱好

<inputtype="checkbox" name="hobby" value="足球">足球

<inputtype="checkbox" name="hobby" value="旅游" >旅游

<inputtype="checkbox" name="hobby" value="音乐">音乐

</body>

</html>

5) getElementsByTagName()

通过标签名来获取对象集合；

<html>

<head>

<scriptlanguage="javascript">

//通过标签名来获取元素

function test3(){

varinputs=document.getElementsByTagName("input");

for(vari=0;i<inputs.length;i++){

window.alert(inputs[i].value);

}

</script>

</head>

<body>

请选择你的爱好

<inputtype="checkbox" name="hobby" value="足球">足球

<inputtype="checkbox" name="hobby" value="旅游" >旅游

<inputtype="checkbox" name="hobby" value="音乐">音乐

<inputtype="button" value="testing"onclick="test2()"/>

<inputtype="button" value="获取所有input" onclick="test3()"/>

</body>

</html>

如何动态的创建html元素

举例说明：

1.动态的添加到document文档中

基本步骤：

1）创建元素

2）给新的元素添加必要的信息

3）将元素添加到指定的位置，比如div body

<html>

<head>

<scriptlanguage="javascript">

function test(){

//创建元素

//写希望创建的元素的标签名字

varmyElement=document.createElement("a");

varmyElement2=document.createElement("input");

//给新的元素添加必要的信息

myElement.href="http://www.baidu.com";

myElement.innerText="连接到百度";

myElement.id="id1";

myElement2.type="button";

myElement2.value="我是按钮";

//可以指定位置

/*myElement.style.left="200px";

myElement.style.top="300px";

myElement.style.position="absolute";

//将元素添加到document.body上去

document.body.appendChild(myElement);*/

//将元素添加到div上去

document.getElementById("div").appendChild(myElement);

document.getElementById("div").appendChild(myElement2);

}

</script>

</head>

<body>

<inputtype="button" onclick="test()" value="动态的创建一个超链接">

</body>

</html>

2.动态的删除document文档中的元素

function test2(){

//删除一个元素(删除一个元素的是有前提的：必须获得父元素)

//这是第一种方法(不灵活)

//document.getElementById("div").removeChild(document.getElementById("id1"));

//第二种方法比较灵活（推荐）这种方法不知道父元素id也能获得父元素

//window.alert(document.getElementById("id1").parentNode.id);//测试可以返回父元素id

document.getElementById("id1").parentNode.removeChild(document.getElementById("id1"));

}

<body>

<inputtype="button" value="动态的创建一个超链接" onclick="test()"/>

<inputtype="button" value="删除一个元素id为id1的" onclick="test2()"/>

</body>

对dom的加强：

在dom编程中，一个html文档会被当做dom 树对待，dom会把所有的html元素（包括注释），映射成Node节点。于是你就可以使用Node节点的属性和方法。

parentNode 返回父节点

→温馨提示：

html dom 和 xml dom都遵循相同dom 规范的，所以他们有很多相同的方法和属性，因此我们也可以去查看xml dom的Node节点提供的方法和属性。

document 属性：

案例：

document.fgColor="white";

document.bgColor="black";

★body对象说明：

需要特别注意

案例：

注意：

<html>

<head>

<scriptlanguage="javascript">

window.alert(document.body); //此时body访问不到输出null

</script>

</head>

<body>

window.alert(document.body); //等body创建之后才能访问到，此时就能访问到输出object

</script>

</body>

</html>

这里有很多的方法，我们用过了，所有这里我们强调 innerText 和innerHTML区别

<scriptlanguage="javascript" type="text/javascript">

<!--

function test(){

//innerText 浏览器会作为纯文本来解析

document.getElementById("myspan").innerText="<ahref='http://www.sina.com'>到新浪</a>";

//innerHTML 浏览器会作为html来解析

document.getElementById("myspan").innerHTML="<ahref='http://www.sina.com'>到新浪</a>";

}

//-->

</script>

<body>

<spanid="myspan"></span>

<inputtype="button" value="测试" onclick="test()"/>

</body>

body补讲

offsetWidth可以返回当前对象的实际宽度

offsetHeight可以返回当前对象的实际高度

body.clientWidth当前页面的宽度

body.clientHeight当前页面的高度

坦克大战游戏：

坦克转向：

重点讲解背景样式

(1)做四个图片

src ="???"

<img src=""/> 不断修改src视线转向

(2) 一次加载一个背景图片,通过显示该背景图的不同部分,实现转向效果.

<scriptlanguage="javascript">

function change(obj){

if(obj.value=="上"){

$("div").style.backgroundPositionY="0px";

}

else if(obj.value=="右"){

$("div").style.backgroundPositionY="120px";

}

else if(obj.value=="下"){

$("div").style.backgroundPositionY="80px";

}

else{

$("div").style.backgroundPositionY="40px";

}

function $(id){

returndocument.getElementById(id);

}

</script>

<body>

<inputtype="button" value="上" onclick="change(this)">

<inputtype="button" value="右" onclick="change(this)">

<inputtype="button" value="下" onclick="change(this)">

<inputtype="button" value="左" onclick="change(this)">

</body>

表单对象

forms对象集合/form对象

forms对象集合常用的函数和属性

length : 返回大小

item(index) : 指定取出foms对象集合的第几个form对象

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

（1）document . forms[第几个表单] . 元素的名字

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

//如何取得所有表单

var forms = document.forms; //window.alert(forms.length);

//可以通过forms访问指定表单

//window.alert(forms[0].username.value);两者等价

window.alert(forms.item(0).username.value);

form验证的综合案例：

需求：当用户提交表单的时候，给出相应的提示信息

<scripttype="text/javascript">

function checkInfo(){

var forms=document.forms;

//检查用户名

$("span1").innerText="";

if(forms[0].username.value.length<4||forms[0].username.value.length>6){

$("span1").innerText="用户名应在4到6位之间";

return false;

}

//检查密码

$("span2").innerText="";

if(forms[0].pwd1.value.length<4){

$("span2").innerText="密码应大于3位";

return false;

}

//检查密码的一致性

$("span3").innerText="";

if(forms[0].pwd1.value!=forms[0].pwd2.value){

$("span3").innerText="输入密码两次不一样";

return false;

}

function $(id){

returndocument.getElementById(id);

}

</script>

</head>

<body>

<table>

</table>

<inputtype="reset"value="重新填写">

</form>

</body>

</html>

→特别说明：

在验证表单的时候，可以在

也可

img对象

image 对象的事件句柄

onerror图片加载失败触发此事件

onload图片加载成功触发此事件

举例说明：

function test(){

span.innerText="加载失败";

}

function test1(){

span.innerText="加载成功";

}

</script>

</head>

<body>

all对象

function test2(){

var myalls=document.all;

//可以将所有的html元素都取出来

for(vari=0;i<myalls.length;i++){

window.alert(myalls[i].nodeType+" "+myalls[i].nodeName);

}

table对象

cells 集合返回表格中所有单元格的一个数组。

rows集合返回表格中所有行（TableRow 对象）的一个数组

小案例：

function test() {

//取出所有行

/*var myrows=myTable.rows;

window.alert(myrows.length);

window.alert(myrows[1].cells[0].innerText);*/

//myTable.rows表示所有行

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

//取出行

var myrows = myTable.rows[i];

//对行进行遍历

//myrows.cells该行所有的列

for ( var j = 0; j < myrows.cells.length; j++) {

window.alert(myrows.cells[j].innerText);

}

//删除一行

function test1(){

myTable.deleteRow(3);

}

//插入一行

function test2(){

var row=myTable.insertRow(3);

row.insertCell(0).innerText="3";

row.insertCell(1).innerText="吴用";

row.insertCell(2).innerText="智多星";

}

正则表达式

为什么需要正则表达式：

问题：

比如验证电子邮件，身份证，是不是数

解决方法：JS设计者给我们提供了新的技术，正则表达式(RegExp对象)

基本概念：

所谓正则表达式，就是某种模式去匹配一类字符串的一个公式，反应到我们的JS中就是一个RegExp对象。

快速入门案例：需求：操作一个字符串或者是一篇文章，请找出4个数字连在一起的子串

<scripttype="text/javascript">

function test() {

//得到用户输入的内容on = content.inner

var c Text;

var myReg = /(\d){4}/gi;//这是一个正则表达式，可以检索4个连续的数字

//varmyReg=new RegExp("(\\d){4}","gi");

while (res = myReg.exec(con)) {

//res是检索处理的结果，但是一个结果就对应一个数组，该数组的第一个元素就是找到的那个文本

window.alert("找到" + res[0]);

}

</script>

</head>

<body>

<textarearows="10"cols="10"id="content"></textarea>

</body>

</html>

小结：

创建一个RegExp对象有两种方式

1） 隐式创建：var reg = /正则表达式/gi

g：表示全局匹配 i:表示不区分大小写 m：表示给定的正则表达式是否以多行模式执行模式匹配。

var myReg = /(\d){4}/gi;

2） 显式创建：var reg = new RegExp(” 正则表达式”,”gi”)

var myReg=newRegExp("(\\d){4}","gi");

特别说明，我一般习惯使用隐式创建正则表达式对象

RegExp对象方法

1） exec() 检索字符串中指定的值,并返回值(找不到返null)。

2） test() 检索字符串中指定的值,返回 true 或 false

//test用法

var con = content.innerText;

var myReg=/abc/gi;

if(myReg.test(con)){

window.alert("有abc");

}

else{

window.alert("没有abc");

}

string对象与正则表达式有关的方法

1） match()

语法格式为：match(reExp)。与RegExp对象的exec方法类似，它使用正则表达式模式对字符串执行搜索，并返回一个包含搜索结果的数组。

案例：

//match()方法的用法

var con=content.innerText;

var reg=/abc/gi;

res=con.match(reg);

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

window.alert(i+" "+res[0]);

}

2） search()

语法格式为：search(reExp)，它返回使用正则表达式搜索时，第一个匹配的字符串在整个被搜索的字符串中的位置。

案例：

//search()方法的用法

var str="Visit W3School!";

document.write(str.search(/W3School/));

输出：6

3） replace()

语法格式为：replace(rgExp,replaceText)，使用正则表达式模式对字符串执行搜索，并对搜索到的内容用指定的字符替换，返回值为包含替换后的内容的字符串对象。

案例：

//replace()方法的用法

var con=content.innerText;

//把四个数换成这里原来有4个数

var reg=/(\d){4}/gi;

var res=con.replace(reg,"这里原来有4个数");

content.innerText=res;

4） split() 了解

把字符串分割为字符串数组。用法 split(“按什么字符分割”)，也可以用split(regExp).

RegExp对象的属性

//indexleftContext rightContext等属性的用法

var con = content.innerText;

var myReg = /(\d){4}/gi;

while (res = myReg.exec(con)) {

window.alert("index="+RegExp.index+"左边是"+

RegExp.leftContext+"右边是 "+RegExp.rightContext);

}

子表达式的捕获，反向引用的概念

JS引擎在匹配的时候会把各个子表达式的内容捕获到内存中暂存。

反向引用第一个子表达式的内容

反向引用第二个子表达式的内容

第二个子表达式

第一个子表达式

var myReg = /(\d) (\d) \2 \1 /gi;

请思考下面几个正则表达式的写法：

1)aabbccdd这样的数：

/(\d)\1(\d)\2(\d)\3(\d)\4/gi

//1221 找到四个连续的数字，满足第一个数跟第四位相同，第二位跟第三位相同

var myReg = /(\d)(\d)\2\1/gi;

//12332-111222333这样的号码，要求满足前面是一个五位数，然后一个-号，

//然后是连续的九位数，连续的三位要相同

//var myReg =/(\d){5}-(\d)\2\2(\d)\3\3(\d)\4\4/gi;

元字符详解:6种

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

{n}说明：

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

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

果呢?

111 111 最后的一个1被舍弃

{n,m}说明：

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

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

1111 111

+说明：

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

我们看看 /1+/gi 去匹配 1111111的话，会得到什么结果呢?

1111111 全部匹配

*说明：

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

我们看看 /a1*/gi 去匹配 a111的话，会得到什么结果呢?

a111 全部匹配

?说明：

? 表示出现0次到1次，比如 /a?/gi,/1?/gi,/(\d)?/gi

我们看看 /a1?/gi 去匹配 a2111的话，会得到什么结果呢?

a 去匹配a111的话结果是：a1

2)字符匹配符：

[a-z] 说明：

[a-z] 表示可以匹配a-z中任意一个字符，比如

/[a-z]/gi,/[a-z]{2}/gi我们看看/[A-Z]/gi 去匹配 a22c8

会得到什么结果? a c

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

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

[^a-z] 说明：

[^a-z] 表示可以匹配不是a-z中的任意一个字符，比如

用 /[^a-z]{2}/gi去匹配a22c8会得到什么结果呢? 22

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

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

[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 之外的所有字符,如果要匹配.本身则需要使用 \.

/\./gi 去匹配123.5 得到.

3）特殊字符匹配

\xn 的 x是固定的 , n是一个十六进制的数，比如\x21 就是去匹

配 ascii码表中十六进制是 21的字符，查表可知就是 !

实际上，我们也可以直接通过\ \gi 的方式来匹配某些不可见特殊字符

4）定位符

定位符用于规定要匹配的字符串出现的位置，比如在字符串的

开始还是在结束的位置，这个也是相当有用的，必须掌握。

^ 符号说明:

匹配目标字符串的开始位置。

比如 /^han/gi 去匹配 “hanshunping han han” ,我们看看会得

到什么结果? han

$ 符号说明:

匹配目标字符串的结束位置。

比如 /han$/gi 去匹配 “hanshunping han hanuu” ,我们看看会得

到什么结果? 匹配不到去匹配 “hanshunpinghan han” han

5）转义符号\

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

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

6）选择匹配符

用 \(han|韩|含)\gi 去匹配 “hanshunping 韩顺平 ”，会得到什么结

果? han 韩

综合案例：

<scripttype="text/javascript">

function test() {

var reg=/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;

if(reg.test(wode.value)){

window.alert("是邮件");

}else{

window.alert("不是邮件");

}

</script>

</head>

<body>

</body>

</html>

0 0