javascript

最新推荐文章于 2024-07-08 18:01:35 发布

qq_36106235

最新推荐文章于 2024-07-08 18:01:35 发布

阅读量4.6k

点赞数 2

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_36106235/article/details/53543008

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

javascript:客户端脚本语言。

#javaScript的书写位置

（内部）

在要书写JavaScript的网页中创建一个<script>js代码</script>标签。JavaScript在内容可以放到任何的一个位置，但这样的方式仅限于不对document元素修改的情况下。除非在函数中。

（行内）

（外部）

创建一个js文件，在这个文件中书写js代码。然后引入js文件<scriptsrc="JavaScript.js"></script>

注意：<scriptsrc="JavaScript.js"></script> 这个标签中不能再写js代码，只做链接。如果还想写js代码只需在创建一个<script></script>标签即可，一个文档中可以有若干个这样的标签。

#打印输出

1）document.write("Hello world");

document.write("<标签>内容</标签>"); 可以输出html标签

文档加载完后执行document.write而不给目标innerHTML那么就会覆盖页面

2）alert(); 弹窗提示

点击弹出对话框： οnclick="alert('内容')"

3）confirm("文本") 这是一个弹窗，具备确定和取消功能，函数有返回值：true || false

4） prompt("文本","默认值") //弹出的是输入提示和输入框，返回值: 输入的内容 || 空字符串

例子1： ================

例子2：==================

<a href="javascript:alert('sdsfsd')">弹出</a>
<a href="javascript:confirm('sfsdfsd')">确定和取消的弹出</a>
<a href="javascript:prompt('df','sdfsf')">有输入框的弹出</a>
<input type="button" value="鼠标响应" οnclick=alert("确定")>

#注释

单行：//

多行：/**/

#变量

创建变量： var s = 50;

1)直接赋值： var s ="张三";

2)覆盖赋值： var s ="张三";

s = "李四";

3)传递赋值： var s = 50;

var f = 30;

var a;

a = s;

s = f;

f = a;

alert(s);//30

alert(f);//50

4）引用赋值

   var n={name:"张三丰",age:24};
   var m=n;
   m.age=22;
   alert(n.age); //22

定义了变量，但没有对它进行初始化（也就是没有给变量赋值）。这时，系统会给它一个特殊的值 undefined（表示未定义）。

重复的使用var声明一个变量，只不过是一个赋值操作，并不会报错。但这样的操作是比较二的，没有任何必要。

var box= '李炎恢';

var box= 'Lee';

可以使用一条语句定义多个变量，只要把每个变量(初始化或者不初始化均可)用逗号分隔开即可，为了可读性，每个变量，最好另起一行，并且第二变量和第一变量对齐(PS：这些都不是必须的)。

var box= '李炎恢',

age =28,

height;

#变量名的书写规范：

1)变量名由数字、字母、下划线构成

2)不能使用数字开头。

3)变量名严格区分大小写，如：name和Name是两个完全不同的变量名。

4)变量名不能使用关键词：IF for else document ....

5)变量名中不能出现空格。

6)变量名尽量有意义

7)尽量使用驼峰式命名法：getElementById

#变量的作用域

全局变量：作用于整个文件创建在函数外部的是全局变量

局部变量：作用于整个函数创建在函数内部的是局部变量 (如果创建在函数内部的变量没有加关键var就是一个全局变量。)

#常量

1)常量名由数字、字母、下划线构成

2)不能使用数字开头。

3)常量名严格区分大小写，如：name和Name是两个完全不同的常量名。常量使用大写（约定不是固定）。

4)常量名不能使用关键词：IF for else document ....

5)常量名中不能出现空格。

6)常量名尽量有意义

7）只有一次赋值机会，创建常量的时候。一旦被赋值就不能被修改。

8）创建常量的语法：const 常量名

#数据类型

1，数字类型：number，数字

2，字符类型：string，字母，汉字，符号，两边都必须加上引号【””空字符串，字符类型】

3，布尔类型：boolean（bool）true，false。

4，空类型：null，表示空的什么都没有

5，未定义类型:undefined，表示没有定义

6，复合数据类型：array数组，object对象

#typeof操作符

检测变量的数据类型。对于值或变量使用 typeof 操作符会返回如下

字符串	描述
undefined	未定义
boolean	布尔值
string	字符串
number	数值
object	对象或null
function	函数

typeof"John"                //返回string
typeof 3.14                  //返回number
typeof false                 //返回boolean
typeof [1,2,3,4]             //返回object 数组是一种特殊的对象类型。
typeof {name:'John', age:34} // 返回 object

用 typeof 检测null返回是object null是一个只有一个值的特殊类型。表示一个空对象引用。

你可以设置为 null 来清空对象: 值为 null(空),但类型为对象

你可以设置为 undefined 来清空对象: 值为 undefined, 类型为undefined

null == undefined // true 数据相同数据类型不同

typeof"John"                // 返回string
typeof3.14                  // 返回number
typeof NaN                  // 返回number
typeoffalse                 // 返回boolean
typeof[1,2,3,4]              //返回object
typeof {name:'John', age:34} // 返回 object
typeof newDate()            // 返回object
typeof function () {}         // 返回function
typeofmyCar                 // 返回undefined (如果myCar没有声明)
typeofnull                  // 返回object

#Undefined类型

Undefined类型只有一个值，即特殊的undefined。声明变量后没有对其初始化时，这个变量的值就是undefined。返回的字符串undefined

未初始化的变量与根本不存在的变量 ( 未声明的变量 ) 也是不一样的。

var box;

alert(box); //未初始化返回undefind 未定义

var box;

alert(age); //返回age is not defined 不存在

#Null类型

Null类型是一个只有一个值的数据类型，即特殊的值null。它表示一个空对象引用(指针)，而typeof操作符检测null会返回object。

var box = null;

alert(typeof box); //返回的字符串是object

如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为null。这样，当检查null值就知道是否已经变量是否已经分配了对象引用了。

由于undefined和null两个值的比较是相等的，所以，未初始化的变量和赋值为null的变量会相等。这时，可以采用typeof变量的类型进行比较。但，建议还是养成编码的规范，不要忘记初始化变量。

var box;

var car = null;

alert(typeof box == typeof car)

var box = ''; //创建一个字符串变量，一开始不知道初始化什么字符串，所以，就给他一个空字符串初始化

var box = 0; //数值初始化，一般用0

varbox = false; //布尔值初始化，一般一开始用false或者true

#Boolean类型

Boolean类型有两个值：true和false。而true不一定等于1，false不一定等于0。JavaScript是区分大小写的，所以True和False或者其他都不是Boolean类型的值。

要将一个值转换为Boolean值，可以使用转型函数Boolean()。

var hello = 'Hello World!';

var hello2 = Boolean(hello);

alert(typeof hello); //true

上面是一种显示转换，属于强制性转换。而实际应用中，还有一种隐式转换。比如，在if条件语句里面的条件判断，就存在隐式转换。

var hello = 'Hello World!';

if (hello) {

alert('如果条件为true，就执行我这条！');

} else {

alert('如果条件为false，就执行我这条！');

}

如果布尔对象无初始值或者其值为:

0 -0 null "" false undefined NaN

那么对象的值为 false。否则，其值为 true（即使当自变量为字符串"false"时）！

其他类型转换成Boolean类型规则

数据类型	转换为true的值	转换为false的值
Boolean	true	false
String	任何非空字符串	空字符串
Number	任何非零数字值(包括无穷大)	0和NaN
Object	任何对象	null
Undefined		undefined

例子：---------------------------------------------------------

Boolean() 非空的字符串都可以转化为true

var b1 = Boolean(""); //false - 空字符串

var b2 = Boolean("hello"); //true - 非空字符串

var b1 = Boolean(50); //true - 非零数字

var b1 = Boolean(null); //false - null

var b1 = Boolean(0); //false - 零

var b1 = Boolean(new object()); //true - 对象

#Number类型

绝不要在数字前面写零，除非您需要进行八进制转换。

默认情况下，JavaScript数字为十进制显示。

但是你可以使用 toString() 方法输出16进制、8进制、2进制。

var myNumber=128;

myNumber.toString(16); // 返回 80

myNumber.toString(8); // 返回 200

myNumber.toString(2); // 返回 10000000

Number类型包含两种数值：整型和浮点型

整型:

var box = 250;

alert(typeof box); //box是Number类型，

浮点类型:就是该数值中必须包含一个小数点，并且小数点后面必须至少有一位数字。

var box = 3.8;

var box = 0.8;

var box = .8; //有效，但不推荐此写法

由于保存浮点数值需要的内存空间比整型数值大两倍，因此ECMAScript会自动将可以转换为整型的浮点数值转成为整型。

var box = 8.; //小数点后面没有值，转换为8

var box = 12.0; //小数点后面是0，转成为12

对于那些过大或过小的数值，可以用科学技术法来表示(e表示法)。用e表示该数值的前面10的指数次幂。

var box = 4.12e9; //即4.12*10的九次方

var box = 0.00000000412; //即4.12e-9 4.12除以10的9次方

虽然浮点数值的最高精度是17位小数，但算术运算中可能会不精确。由于这个因素，做判断的时候一定要考虑到这个问题(比如使用整型判断)。

alert(0.1+0.2); //0.30000000000000004

#Number.MIN_VALUE

#Number.MAX_VALUE

浮点数值的范围在：Number.MIN_VALUE ~ Number.MAX_VALUE之间。

alert(Number.MIN_VALUE); //最小值

alert(Number.MAX_VALUE); //最大值

如果超过了浮点数值范围的最大值或最小值，那么就先出现Infinity(正无穷)或者-Infinity(负无穷)。

var box = 100e1000; //超出范围，Infinity

var box = -100e1000; //超出范围，-Infinity

# Number.POSITIVE_INFINITY

#Number.NEGATIVE_INFINITY

也可能通过Number.POSITIVE_INFINITY和Number.NEGATIVE_INFINITY得到Infinity(正无穷)及-Infinity(负无穷)的值。

alert(Number.POSITIVE_INFINITY); //Infinity(正无穷)

alert(Number.NEGATIVE_INFINITY); //-Infinity(负无穷)

#isFinite

要想确定一个数值到底是否超过了规定范围，可以使用isFinite()函数。如果没有超过，返回true，超过了返回false。

var box = 100e1000;

alert(isFinite(box)); //返回false或者true

NaN 本来是数字但实际结果不是数字比如，在其他语言中，任何数值除以0都会导致错误而终止程序执行。但在ECMAScript中，会返回出特殊的值，因此不会影响程序执行。

var box = 0 / 0; //NaN

var box = 12 / 0; //Infinity

var box = 12 / 0 * 0; //NaN

可以通过Number.NaN得到NaN值，任何与NaN进行运算的结果均为NaN，NaN与自身不相等(NaN不与任何值相等)。

alert(Number.NaN); //NaN

alert(NaN+1); //NaN

alert(NaN == NaN) //false

#isNaN()

ECMAScript提供了isNaN()函数，用来判断这个值到底是不是NaN。isNaN()函数在接收到一个值之后，会尝试将这个值转换为数值。

alert(isNaN(NaN)); //true

alert(isNaN(25)); //false，25是一个数值

alert(isNaN('25')); //false，'25'是一个字符串数值，可以转成数值

alert(isNaN('Lee')); //true，'Lee'不能转换为数值

alert(isNaN(true)); //false true可以转成成1

NaN:not a number不是一个数字

isNaN:is not a number

1,如果判断的数据为数字：false

2，如果判断的数据为字符：true

isNaN()函数也适用于对象。在调用isNaN()函数过程中，首先会调用valueOf()方法，然后确定返回值是否能够转换成数值。如果不能，则基于这个返回值再调用toString()方法，再测试返回值。

var box = {

toString: function () {

return'123'; //可以改成return 'Lee'查看效果

}

};

alert(isNaN(box)); //false

有3个函数可以把非数值转换为数值：Number()、parseInt()和parseFloat()。Number()函数是转型函数，可以用于任何数据类型，而另外两个则专门用于把字符串转成数值。

#Number() 能转成数字就转数字不能转数字转NAN

alert(Number(true)); //1，Boolean类型的true和false分别转换成1和0

alert(Number(25)); //25，数值型直接返回

alert(Number(null)); //0，空对象返回0

alert(Number(undefined)); //NaN，undefined返回NaN

如果字符串是空，那么直接转成成0。

alert(Number('')); //0

如果不是以上三种字符串类型，则返回NaN。

alert('Lee123'); //NaN

.如果是对象，首先会调用valueOf()方法，然后确定返回值是否能够转换成数值。如果转换的结果是NaN，则基于这个返回值再调用toString()方法，再测试返回值。

var box = {

toString: function () {

return'123'; //可以改成return 'Lee'查看效果

}

};

alert(Number(box)); //123

+-------------------------------------------------------

Number()如果可以转化则为具体的数字，如果转化失败则返回NaN

Number(false) 0

Number(true) 1

Number(undefined) NaN

Number(null) 0

Number("1.2") 1.2

Number("12") 12

Number("1.2.3") NaN

Number(new object()) NaN

Number(50) 50

+----------------------------------------------

将字符串转换为数字

全局方法 Number()

Number("3.14")   // 返回3.14
Number(" ")       // 返回 0
Number("")        // 返回 0
Number("99 88")   // 返回 NaN

将布尔值转换为数字

全局方法 Number()可将布尔值转换为数字。

Number(false) // 返回 0
Number(true) // 返回 1

将日期转换为数字

全局方法 Number()

d = new Date();
Number(d) // 返回1404568027739

日期方法 getTime()

d = new Date();
d.getTime() // 返回 1404568027739

#parseInt()

由于Number()函数在转换字符串时比较复杂且不够合理，因此在处理整数的时候更常用的是parseInt()。

alert(parsetInt('456Lee')); //456，会返回整数部分

alert(parsetInt('Lee456Lee')); //NaN，如果第一个不是数值，就返回NaN

alert(parseInt('12Lee56Lee')); //12，从第一数值开始取，到最后一个连续数值结束

alert(parseInt('56.12')); //56，小数点不是数值，会被去掉

alert(parseInt('')); //NaN，空返回NaN

#parseFloat()

parseFloat()是用于浮点数值转换的，和parseInt()一样，从第一位解析到非浮点数值位置。

alert(parseFloat('123Lee')); //123，去掉不是别的部分

alert(parseFloat('0xA')); //0，不认十六进制

alert(parseFloat('123.4.5')); //123.4，只认一个小数点

alert(parseFloat('0123.400')); //123.4，去掉前后导

alert(parseFloat('1.234e7')); //12340000，把科学技术法转成普通数值

#Math

2.min()和max()方法

Math.min()用于确定一组数值中的最小值。Math.max()用于确定一组数值中的最大值。

alert(Math.min(2,4,3,6,3,8,0,1,3)); //最小值

alert(Math.min(k,a3))       //最小值

alert(Math.max(4,7,8,3,1,9,6,0,3,2)); //最大值

alert(Math.max(k,a3))        //最大值

3.舍入方法

Math.ceil()执行向上取整；

Math.floor()执行向下取整；

Math.round()执行标准四舍五入；

alert(Math.ceil(25.9)); //26

alert(Math.ceil(25.5)); //26

alert(Math.ceil(25.1)); //26

alert(Math.floor(25.9)); //25

alert(Math.floor(25.5)); //25

alert(Math.floor(25.1)); //25

alert(Math.round(25.9)); //26

alert(Math.round(25.5)); //26

alert(Math.round(25.1)); //25

alert(Math.round(a2));      //四舍五入a2变量值

ParseInt：取整（如果字符串开头第一个就是字母那么就会出现NaN）

parseInt(24.2);

parseInt(“24.2”);

parseInt(“24.24abcd”);
parseInt(“23.ab.24.24”);

parseInt(“24ab”);

parseInt(“ab24”);

parFloat：取浮点数

parseFloat(24.22);

parseFloat(“24.26”);

parseFloat(24.24ab“);

parseFloat(“ab24.24”);

4.random()方法

Math.random()方法返回介于0到1之间一个随机数，不包括0和1。如果想大于这个范围的话，可以套用一下公式：

Math.floor(Math.random() * 总数 +第一个值)

Math.floor(Math.random()*(大数-小数+1)+小数);

例1:

alert(Math.floor(Math.random()* 10 + 1)); //随机产生1-10之间的任意数

例2：

for (var i = 0; i<10;i ++) {

document.write(Math.floor(Math.random()* 10 + 5)); //5-14之间的任意数

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

}

例3：

 document.write(Math.random()); //获取随机数0-1
 document.write(Math.random()*100);  //0-100

为了更加方便的传递想要范围，可以写成函数：

function selectFrom(start,stop) { //upper 结束的数 //lower开始的数

var sum = stop -start + 1; //总数-第一个数+1

return Math.floor(Math.random() * sum +start);

}

var start = 5;

var stop = 10;

for (var i=0 ;i<stop;i++) {

document.write(selectFrom(start,stop)); //直接传递范围即可

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

}

例子======================

随机链接

<pid="demo"></p>

var r=Math.random();

varx=document.getElementById("demo")

if (r>0.5){

x.innerHTML="<ahref='http://www.runoob.com'>访问菜鸟教程</a>";

}

else{

x.innerHTML="<ahref='http://wwf.org'>Visit WWF</a>";

}

</script>

=================

5.其他方法

方法	说明
Math.abs(num)	返回num的绝对值
Math.exp(num)	返回Math.E的num次幂
Math.log(num)	返回num的自然对数
Math.pow(num,power)	返回num的power次幂
Math.sqrt(num)	返回num的平方根
Math.acos(x)	返回x的反余弦值
Math.asin(x)	返回x的反正弦值
Math.atan(x)	返回x的反正切值
Math.atan2(y,x)	返回y/x的反正切值
Math.cos(x)	返回x的余弦值
Math.sin(x)	返回x的正弦值
Math.tan(x)	返回x的正切值

Math.pow(n,m);求n的m次方

     document.write(Math.pow(3,2))  //平方值

Math.abs(n);求n绝对值

document.write(Math.abs(-3)+"<br/>"); //绝对值

=====================================

/在页面输出6个10到30之间的两位数

Number类型有一些静态属性(直接通过Number调用的属性，而无须new运算符)和方法。

Number静态属性

属性	描述
MAX_VALUE	表示最大数
MIN_VALUE	表示最小值
NaN	非数值
NEGATIVE_INFINITY	负无穷大，溢出返回该值
POSITIVE_INFINITY	无穷大，溢出返回该值
prototype	原型，用于增加新属性和方法

Number对象的方法

方法	描述
toString()	将数值转化为字符串，并且可以转换进制
toLocaleString()	根据本地数字格式转换为字符串
toFixed()	将数字保留小数点后指定位数并转化为字符串
toExponential()	将数字以指数形式表示，保留小数点后指定位数并转化为字符串
toPrecision()	指数形式或点形式表述数，保留小数点后面指定位数并转化为字符串

var box =1000.789;

alert(box.toString()); //转换为字符串，传参可以转换进制

alert(box.toLocaleString()); //本地形式，1,000.789

alert(box.toFixed(2)); //小数点保留，1000.78

alert(box.toExponential()); //指数形式，传参会保留小数点

alert(box.toPrecision(3)); //指数或点形式，传参保留小数点

==========================

#String类型

string类型用于表示由于零或多个16位Unicode字符组成的字符序列，即字符串。字符串可以由双引号(")或单引号(')表示。

var box = 'Lee';

var box = "Lee";

或者 Var str = new String(”abcdefgabcd”);

PS：在某些其他语言(PHP)中，单引号和双引号表示的字符串解析方式不同，而ECMAScript中，这两种表示方法没有任何区别。但要记住的是，必须成对出现，不能穿插使用，否则会出错。

String类型包含了一些特殊的字符字面量，也叫转义序列。

字面量	含义
\n	换行
\t	制表
\b	空格
\r	回车
\f	进纸
\\	斜杠
\'	单引号
\"	双引号
\xnn	以十六进制代码nn表示的一个字符(0~F)。例：\x41
\unnn	以十六进制代码nnn表示的一个Unicode字符(0~F)。例：\u03a3

例子===================

=========================

ECMAScript中的字符串是不可变的，也就是说，字符串一旦创建，它们的值就不能改变。要改变某个变量保存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值的字符串填充该变量。

var box = 'Mr.';

box = box + ' Lee';

#toString()

toString()方法可以把值转换成字符串。

var box = 11;

var box = true;

alert(typeof box.toString());

toString()方法一般是不需要传参的，但在数值转成字符串的时候，可以传递进制参数。

var box = 10;

alert(box.toString()); //10，默认输出

alert(box.toString(2)); //1010，二进制输出

alert(box.toString(8)); //12，八进制输出

alert(box.toString(10)); //10，十进制输出

alert(box.toString(16)); //a，十六进制输出

toString()方法不能转换null与undefined

如果在转型之前不知道变量是否是null或者undefined的情况下，我们还可以使用转型函数String()，这个函数能够将任何类型的值转换为字符串。

var box = null;

alert(String(box)); //null

PS：如果值有toString()方法，则调用该方法并返回相应的结果；如果是null或者undefined，则返回"null"或者"undeinfed"。

将数字转换为字符

全局方法 String()

String(x) //将变量 x转换为字符串并返回
String(123) // 将数字 123转换为字符串并返回
String(100 + 23) // 将数字表达式转换为字符串并返回

Number 方法toString()

x.toString()
(123).toString()
(100 + 23).toString()

将布尔值转换为字符串

全局方法 String()

String(false) // 返回 "false"
String(true) // 返回"true"

Boolean 方法toString()

false.toString() // 返回"false"
true.toString() // 返回"true"

将日期转换为字符串

全局方法 String()

String(Date())

Date 方法toString()

Date().toString()

#字面量

表达式是ECMAScript中的一个“短语”，解释器会通过计算把它转换成一个值。最简单的表达式是字面量或者变量名。例如：

5.96 //数值字面量

'Lee' //字符串字面量

true //布尔值字面量

null //空值字面量

/Java/ //正则表达式字面量
{x:1, y:2} //对象字面量、对象表达式

[1,2,3] //数组字面量、数组表达式

function(n) {return x+y;} //函数字面量、函数表达式

box //变量

当然，还可以通过合并简单的表达式来创建复杂的表达式。比如：

box + 5.96 //加法运算的表达式

typeof(box) //查看数据类型的表达式

box > 8 //逻辑运算表达式

通过上面的叙述，我们得知，单一的字面量和组合字面量的运算符都可称为表达式。

#string的属性和方法

document.write(s.length); //获取字符串长度

document.write(s.substr(0,2)); //从下标0 开始获取2个字符
document.write(s.substr(3)); //从下标3开始一直到结尾

document.write(s.indexOf('q')); //输出第一个检索到的下标如果没有找到就返回-1

document.write(s.substring(0,2)); //从下标0开始到下标2的前一个位置结束

document.write(s.substring(0)); //从下标0开始到结束

document.write(s.lastIndexOf("t")）; //输出最后一个检索位置的下标果没有找到就返回-1

document.write(s.charAt(4)） //返回指定索引位置的字符

          document.write(s.concat(k));               //合并变量返回新的字符串，不改变原来的字符串
          document.write(s.toLowerCase());    //把字符串转换为小写字母
          document.write(s.toUpperCase());   //把字符串转换为大写字母

charCodeAt(n)找到索引位置上的字符的编码值：a=97，A=65

split（”n”）以字符n分割字符串返回一个数组，以空字符串分割会把字符串每个字符都当做数组的一项内容，如果不存在n那么久会把整个字符串当做数组的内容

例子：==========================

检测用户上传的文件是否符合要求【jpg，png，gif】

强制转换为string类型

String()

+------------------------------------------------------

var s1 = String(null); //"null"

var oNull = null;

var s2 = oNull.toString(); //会引发错误

var box = 'Mr. Lee'; //定义一个字符串

var box2 = box.substring(2); //截掉字符串前两位

alert(box2); //输出新字符串

变量box是一个字符串类型，而box.substring(2)又说明它是一个对象(PS：只有对象才会调用方法)，最后把处理结果赋值给box2。'Mr. Lee'是一个字符串类型的值，按道理它不应该是对象，不应该会有自己的方法，比如：

alert('Mr.Lee'.substring(2)); //直接通过值来调用方法

1.字面量写法：

var box = 'Mr. Lee'; //字面量

box.name = 'Lee'; //无效属性

box.age = function () { //无效方法

return100;

};

alert(box); //Mr. Lee

alert(box.substring(2)); //. Lee

alert(typeof box); //string

alert(box.name); //undefined

alert(box.age()); //错误

2.new运算符写法：

var box = new String('Mr. Lee'); //new运算符 string的引用类型

box.name = 'Lee'; //有效属性

box.age = function () { //有效方法

return100;

};

alert(box); //Mr. Lee

alert(box.substring(2)); //. Lee

alert(typeof box); //object

alert(box.name); //Lee

alert(box.age()); //100

以上字面量声明和new运算符声明很好的展示了他们之间的区别。但有一定还是可以肯定的，那就是不管字面量形式还是new运算符形式，都可以使用它的内置方法。并且Boolean和Number特性与String相同，三种类型可以成为基本包装类型。

PS：在使用new运算符创建以上三种类型的对象时，可以给自己添加属性和方法，但我们建议不要这样使用，因为这样会导致根本分不清到底是基本类型值还是引用类型值。

String类型包含了三个属性和大量的可用内置方法。

String对象属性

属性	描述
length	返回字符串的字符长度
constructor	返回创建String对象的函数
prototype	通过添加属性和方法扩展字符串定义

String也包含对象的通用方法，比如valueOf()、toLocaleString()和toString()方法，但这些方法都返回字符串的基本值。

字符方法

方法	描述
charAt(n)	返回指定索引位置的字符
charCodeAt(n)	以Unicode编码形式返回指定索引位置的字符

var box = 'Mr.Lee';

alert(box.charAt(1)); //r

alert(box.charCodeAt(1)); //114

alert(box[1]); //r，通过数组方式截取

PS：box[1]在IE浏览器会显示undefined，所以使用时要慎重。

字符串操作方法

方法	描述
concat(str1...str2)	将字符串参数串联到调用该方法的字符串
slice(n,m)	返回字符串n到m之间位置的字符串
substring(n,m)	同上
substr(n,m)	返回字符串n开始的m个字符串

var box = 'Mr.Lee';

alert(box.concat(' is ', ' Teacher ', '!')); //Mr.Lee is Teacher !

alert(box.slice(3)); //Lee

alert(box.slice(3,5)); //Le

alert(box.substring(3)); //Lee

alert(box.substring(3,5)); //Le

alert(box.substr(3)); //Lee

alert(box.substr(3,5)); //Lee

var box = 'Mr.Lee';

alert(box.slice(-3)); //Lee，6+(-3)=3位开始

alert(box.substring(-3)); //Mr.Lee负数返回全部

alert(box.substr(-3)); //Lee，6+(-3)=3位开始

var box = 'Mr.Lee';

alert(box.slice(3,-1)); //Le 6+(-1)=5, (3,5)

alert(box.substring(3,-1)); //Mr.第二参为负，直接转0，

//并且方法会把较小的数字提前，(0,3)

alert(box.substr(3,-1)); //'' 第二参数为负，直接转0，(3,0)

PS：IE的JavaScript实现在处理向substr()方法传递负值的情况下存在问题，它会返回原始字符串，使用时要切记。

字符串位置方法

方法	描述
indexOf(str, n)	从n开始搜索的第一个str，并将搜索的索引值返回
lastIndexOf(str, n)	从n开始搜索的最后一个str，并将搜索的索引值返回

var box ='Mr.Lee is Lee';

alert(box.indexOf('L')); //3

alert(box.indexOf('L',5)); //10 从第五个位置开始搜索

alert(box.lastIndexOf('L')); //10

alert(box.lastIndexOf('L',5)); //3，从指定的位置向前搜索

PS：如果没有找到想要的字符串，则返回-1。

示例：找出全部的L

var box ='Mr.Lee is Lee'; //包含两个L的字符串

var boxarr =[]; //存放L位置的数组

var pos =box.indexOf('L'); //先获取第一个L的位置

while (pos> -1) { //如果位置大于-1，说明还存在L

boxarr.push(pos); //添加到数组

pos = box.indexOf('L', pos + 1); //从新赋值pos目前的位置

}

alert(boxarr); //输出

大小写转换方法

方法	描述
toLowerCase(str)	将字符串全部转换为小写
toUpperCase(str)	将字符串全部转换为大写
toLocaleLowerCase(str)	将字符串全部转换为小写，并且本地化
toLocaleupperCase(str)	将字符串全部转换为大写，并且本地化

var box = 'Mr.Lee is Lee';

alert(box.toLowerCase()); //全部小写

alert(box.toUpperCase()); //全部大写

alert(box.toLocaleLowerCase()); //

alert(box.toLocaleUpperCase()); //

PS：只有几种语言（如土耳其语）具有地方特有的大小写本地性，一般来说，是否本地化效果都是一致的。

字符串的模式匹配方法

方法	描述
match(pattern)	返回pattern 中的子串或null
replace(pattern, replacement)	用replacement 替换pattern
search(pattern)	返回字符串中pattern 开始位置
split(pattern)	返回字符串按指定pattern 拆分的数组

正则表达式在字符串中的应用，在前面的章节已经详细探讨过，这里就不再赘述了。

以上中match()、replace()、serach()、split()在普通字符串中也可以使用。

var box ='Mr.Lee is Lee';

alert(box.match('L')); //找到L，返回L否则返回null

alert(box.search('L')); //找到L的位置，和indexOf类型

alert(box.replace('L','Q')); //把L替换成Q

alert(box.split('')); //以空格分割成字符串

其他方法

方法	描述
fromCharCode(ascii)	静态方法，输出Ascii码对应值
localeCompare(str1,str2)	比较两个字符串，并返回相应的值

alert(String.fromCharCode(76)); //L，输出Ascii码对应值

localeCompare(str1,str2)方法详解：比较两个字符串并返回以下值中的一个；

1.如果字符串在字母表中应该排在字符串参数之前，则返回一个负数。(多数-1)

2.如果字符串等于字符串参数，则返回0。

3.如果字符串在自附表中应该排在字符串参数之后，则返回一个正数。(多数1)

var box = 'Lee';

alert(box.localeCompare('apple')); //1

alert(box.localeCompare('Lee')); //0

alert(box.localeCompare('zoo')); //-1

HTML方法

方法	描述
anchor(name)	<a name="name">str</a>
big()	<big>str</big>
blink()	<blink>str</blink>
bold()	<b>Str</b>
fixed()	<tt>Str</tt>
fontcolor(color)	<font color="color">str</font>
fontsize(size)	<font size="size">str</font>
link(URL)	<a href="URL">str</a>
small()	<small>str</small>
strike()	<strike>str</strike>
italics()	<i>italics</i>
sub()	<sub>str</sub>
sup()	<sup>str</sup>

以上是通过JS生成一个html标签，根据经验，没什么太大用处，做个了解。

var box = 'Lee'; //

alert(box.link('http://www.yc60.com')); //超链接

==================================

1.eval()方法

eval()方法主要担当一个字符串解析器的作用，他只接受一个参数，而这个参数就是要执行的JavaScript代码

的字符串。

eval('var box = 100');                                        //解析了字符串代码

alert(box);

eval('alert(100)');                                              //同上

eval('function box() {return 123}');                    //函数也可以

alert(box());

eval()方法的功能非常强大，但也非常危险。因此使用的时候必须极为谨慎。特别是在用户输入数据的情况下，

非常有可能导致程序的安全性，比如代码注入等等。

==================================

#Array对象数组

创建Array类型有两种方式：第一种是new运算符，第二种是字面量。

1.使用new关键字创建数组

var box = new Array(); //创建了一个数组box[0]="Saab";

var cars=new Array("Saab","Volvo","BMW") ; //有内容的关键字

var box = new Array(10); // 创建一个包含 10 个元素的数组 box[0]="Saab";

其中的数字表示这个数字有10个元素[数组的长度为10],但是不是上限。如果大于元素的个数大于10这个数字则以元素的个数为准，入元素的个数小于这个字则以这个数字为准。

var box = new Array('李炎恢',28,'教师','盐城'); //创建一个数组并分配好了元素 box[4]="Saab";

2.以上三种方法，可以省略new关键字。

var box = Array(); //省略了new关键字

var box = Array(5); //省略了new关键字

var box = Array("Saab","Volvo","BMW"); //省略了new关键字

使用字面量 [ ] 方式创建数组

var box = []; //创建一个空的数组

var box = ['李炎恢',28,'教师','盐城']; //创建包含元素的数组

var box = [1,2,]; //禁止这么做，IE会识别3个元素

var box = [,,,,,]; //同样，IE的会有识别问题

PS：和Object一样，字面量的写法不会调用Array()构造函数。(Firefox除外)。

4.使用索引下标来读取数组的值

alert(box[2]); //获取第三个元素

box[2] = '学生'; //修改第三个元素

box[4] = '计算机编程'; //增加第五个元素

5.使用length属性获取数组元素量

alert(box.length) //获取元素个数

box.length = 10; //强制元素个数

box[box.length]= 'JS技术'; //通过length给数组增加一个元素

6.复杂数组

var box = [

{ //第一个元素是一个对象

age: 28,

run: function () {

return'run了';

}

['马云','李彦宏',newObject()], //第二个元素是数组

'江苏', //第三个元素是字符串

25+25, //第四个元素是数值

new Array(1,2,3) //第五个元素是数组

];

alert(box);

PS：数组最多可包含4294967295个元素，超出即会发生异常。

数组的分类：

结构分类：一维数组 arr[0] | 二维数组arr[0][0] | 多维数组arr[0][1][3]....

下标分类：数字下标: 索引数组 | 字母下标：关联数组 | 既有数字又有字母为下标，维数不同：混合数组

数组遍历：

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

document.write(arr[i]);

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

}

②var arr = ['如来','观世音'];

arr["n"] ="钱多多";

arr["nnn"] = "孙悟空";

for(key in arr){

document.write(arr[key]);

}

③二维数组数组遍历

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

//列

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

document.write(arr[i][k]+"|");

}

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

}

<p id="demo">单击按钮创建一个数组,调用ucase（）方法,并显示结果。</p>

//一个新的数组的方法，将数组值转为大写：

Array.prototype.myUcase=function(){ //Array.prototype属性使您有能力向对象添加属性和方法。

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

this[i]=this[i].toUpperCase();

}

//创建一个数组，然后调用 myUcase 方法：

function myFunction(){

var fruits = ["Banana", "Orange", "Apple","Mango"];

fruits.myUcase();

varx=document.getElementById("demo");

x.innerHTML=fruits;

}

</script>

fruits 数组现在的值为：BANANA,ORANGE,APPLE,MANGO

==========================

#Object类型

①

1）ECMAScript中的对象其实就是一组数据和功能的集合。对象可以通过执行new操作符后跟要创建的对象类型的名称来创建。

var box = new Object(); //new方式

box.name = '李炎恢'; //创建属性字段

box.age = 28; //创建属性字段

new关键字可以省略

var box = Object(); //省略了new关键字

Object()是对象构造，如果对象初始化时不需要传递参数，可以不用写括号，但这种方式我们是不推荐的。

var box = new Object;

Object()里可以任意传参，可以传数值、字符串、布尔值等。而且，还可以进行相应的计算。

var box = new Object(2); //Object类型，值是2

var age = box +2; //可以和普通变量运算

alert(age); //输出结果，转型成Number类型了

既然可以使用new Object()来表示一个对象，那么我们也可以使用这种new操作符来创建其他类型的对象。

var box = new Number(5); //newString('Lee')、new Boolean(true)

alert(typeof box); //Object类型

2）使用字面量方式创建Object

var box = {

age: 28

};

属性也可以使用字符串

var box = {

'name': '李炎恢', //也可以用字符串形式

'age': 28

};

3）使用字面量方式创建空的Object

var box = {}; //字面量方式声明空的对象

box.name = '李炎恢'; //点符号方法给属性复制

box【['age'] = '20'; //中括号方法给属性复制

box.age = 28;

两种属性输出方式

alert(box.age); //点表示法输出

alert(box['age']); //中括号表示法输出，注意引号

PS：在使用字面量声明Object对象时，不会调用Object()构造函数(Firefox除外)。

②给对象创建方法

var box = {

run: function () { //对象中的方法

return'运行';

}

alert(box.run()); //调用对象中的方法

var person = {

firstName:"John",

lastName:"Doe",

age:50,

eyeColor:"blue"，

fullName :function() {

return this.firstName+ " " + this.lastName;

}

};

alert(person.fullName());

#对象构造器创建对象

function person(firstname,lastname,age,eyecolor){

this.firstname=firstname;

this.lastname=lastname; //当前对象的属性等于传进来的属性

this.age=age;

this.eyecolor=eyecolor;

}

var myFather = new person("John","Doe",50,"blue"); //实例化对象

document.write(myFather.firstname +" is " + myFather.age + " years old."); //访问对象

========================================

在构造器函数内部定义对象的方法：

function person(firstname,lastname,age,eyecolor){

this.firstname=firstname;

this.lastname=lastname; //对象构造器

this.age=age;

this.eyecolor=eyecolor;

this.changeName=changeName; //添加对象属性

function changeName(name){ //创建对象函数name接受传值

this.lastname=name; //创建构造器

}

myMother=new person("Sally","Rally",48,"green"); //创建对象实例

myMother.changeName("Doe"); //调用函数并传值

document.write(myMother.lastname); //用属性输出对象实例的值

③使用delete删除对象属性

delete.box.name; //删除属性

在实际开发过程中，一般我们更加喜欢字面量的声明方式。因为它清晰，语法代码少，而且还给人一种封装的感觉。字面量也是向函数传递大量可选参数的首选方式。

例子：=====================================

function box(obj) { //参数是一个对象

if (obj.name != undefined)alert(obj.name);//判断属性是否存在

if (obj.age != undefined) alert(obj.age);

}

box({ //调用函数传递一个对象

name : '李炎恢',

age : 28

});

==============================

创建对象

创建一个对象，然后给这个对象新建属性和方法。

var box = new Object(); //创建一个Object对象

box.name = 'Lee'; //创建一个name属性并赋值

box.age = 100; //创建一个age属性并赋值

box.run = function () { //创建一个run()方法并返回值

returnthis.name + this.age + '运行中...';

};

alert(box.run()); //输出属性和方法的值

上面创建了一个对象，并且创建属性和方法，在run()方法里的this，就是代表box对象本身。这种是JavaScript创建对象最基本的方法，但有个缺点，想创建一个类似的对象，就会产生大量的代码。

var box2 = box; //得到box的引用

box2.name = 'Jack'; //直接改变了name属性

alert(box2.run()); //用box.run()发现name也改变了

var box2 = new Object();

box2.name = 'Jack';

box2.age = 200;

box2.run = function () {

returnthis.name + this.age + '运行中...';

};

alert(box2.run()); //这样才避免和box混淆，从而保持独立

#创建对象工厂模式

function createObject(name, age) { //集中实例化的函数 createObject 函数工厂模式创建对象

var obj = new Object();

obj.name= name;

obj.age= age;

obj.run= function () {

returnthis.name + this.age + '运行中...';

};

return obj; //必须要返回对象

}

var box1 = createObject('Lee', 100); //第一个实例参数互不干扰

var box2 = createObject('Jack', 200); //第二个实例参数互不干扰

alert(box1.run());

alert(box2.run());

工厂模式解决了重复实例化的问题，但还有一个问题，那就是识别问题，因为根本无法搞清楚他们到底是哪个对象的实例。

alert(typeof box1); //Object

alert(box1 instanceof Object); //true instanceof 检测变量的数据类型

#构造函数创建对象用 this关键字 new关键字

function Box(name, age) { //构造函数模式

this.name= name;

this.age= age;

this.run= function () {

return this.name + this.age + '运行中...';

};

}

var box1 = new Box('Lee', 100); //实例化

var box2 = new Box('Jack', 200);

alert(box1.run());

alert(box1 instanceof Box); //检测box1对象是不是box模板创造的

使用构造函数的方法，即解决了重复实例化的问题，又解决了对象识别的问题，但问题是，这里并没有new Object()，为什么可以实例化Box()，这个是哪里来的呢？

使用了构造函数的方法，和使用工厂模式的方法他们不同之处如下：

1.构造函数方法没有显示的创建对象(new Object())；

2.直接将属性和方法赋值给this对象；

3.没有renturn语句。

构造函数的方法有一些规范：

1.函数名和实例化构造名相同且大写，(PS：非强制，但这么写有助于区分构造函数和普通函数)；

2.通过构造函数创建对象，必须使用new运算符。

既然通过构造函数可以创建对象，那么这个对象是哪里来的，new Object()在什么地方执行了？执行的过程如下：

1.当使用了构造函数，并且new构造函数()，那么就后台执行了new Object()；

2.将构造函数的作用域给新对象，(即new Object()创建出的对象)，而函数体内的this就代表newObject()出来的对象。

3.执行构造函数内的代码；

4.返回新对象(后台直接返回)。

关于this的使用，this其实就是代表当前作用域对象的引用。如果在全局范围this就代表window对象，如果在构造函数体内，就代表当前的构造函数所声明的对象。

var box = 2;

alert(this.box); //全局，代表window

构造函数和普通函数的唯一区别，就是他们调用的方式不同。只不过，构造函数也是函数，必须用new运算符来调用，否则就是普通函数。

var box = new Box('Lee', 100); //构造模式调用

alert(box.run()); //普通模式调用，无效

Box('Lee', 20); //普通模式调用，无效

var o = new Object();

Box.call(o, 'Jack', 200) //对象冒充调用

alert(o.run());

探讨构造函数内部的方法(或函数)的问题，首先看下两个实例化后的属性或方法是否相等。

var box1 = new Box('Lee', 100); //传递一致

var box2 = new Box('Lee', 100); //同上

alert(box1.name == box2.name); //true，属性的值相等

alert(box1.run == box2.run); //false，方法其实也是一种引用地址

alert(box1.run() == box2.run()); //true，方法的值相等，因为传参一致

可以把构造函数里的方法(或函数)用new Function()方法来代替，得到一样的效果，更加证明，他们最终判断的是引用地址，唯一性。

function Box(name, age) { //new Function()唯一性

this.name= name;

this.age= age;

this.run= new Function("return this.name + this.age + '运行中...'");

}

我们可以通过构造函数外面绑定同一个函数的方法来保证引用地址的一致性，但这种做法没什么必要，只是加深学习了解：

function Box(name, age) {

this.name= name;

this.age= age;

this.run= run;

}

function run() { //通过外面调用，保证引用地址一致

return this.name + this.age + '运行中...';

}

虽然使用了全局的函数run()来解决了保证引用地址一致的问题，但这种方式又带来了一个新的问题，全局中的this在对象调用的时候是Box本身，而当作普通函数调用的时候，this又代表window。

#原型模式创建对象

我们创建的每个函数都有一个prototype(原型)属性，这个属性是一个对象，它的用途是包含可以由特定类型的所有实例共享的属性和方法。逻辑上可以这么理解：prototype通过调用构造函数而创建的那个对象的原型对象。使用原型的好处可以让所有对象实例共享它所包含的属性和方法。也就是说，不必在构造函数中定义对象信息，而是可以直接将这些信息添加到原型中。

function Box() {} //声明一个构造函数

Box.prototype.name = 'Lee'; //在原型里添加属性

Box.prototype.age = 100;

Box.prototype.run = function () { //在原型里添加方法

returnthis.name + this.age + '运行中...';

};

比较一下原型内的方法地址是否一致：

var box1 = new Box();

var box2 = new Box();

alert(box1.run == box2.run); //true，方法的引用地址保持一致

为了更进一步了解构造函数的声明方式和原型模式的声明方式，我们通过图示来了解一下：

构造函数方式

原型模式方式

在原型模式声明中，多了两个属性，这两个属性都是创建对象时自动生成的。__proto__属性是实例指向原型对象的一个指针，它的作用就是指向构造函数的原型属性constructor。通过这两个属性，就可以访问到原型里的属性和方法了。

PS：IE浏览器在脚本访问__proto__会不能识别，火狐和谷歌浏览器及其他某些浏览器均能识别。虽然可以输出，但无法获取内部信息。

alert(box1.__proto__); //[objectObject]

判断一个对象是否指向了该构造函数的原型对象，可以使用isPrototypeOf()方法来测试。

alert(Box.prototype.isPrototypeOf(box)); //只要实例化对象，即都会指向

原型模式的执行流程：

1.先查找构造函数实例里的属性或方法，如果有，立刻返回；

2.如果构造函数实例里没有，则去它的原型对象里找，如果有，就返回；

虽然我们可以通过对象实例访问保存在原型中的值，但却不能访问通过对象实例重写原型中的值。

var box1 = new Box();

alert(box1.name); //Lee，原型里的值

box1.name = 'Jack';

alert(box.1name); //Jack，就近原则，

var box2 = new Box();

alert(box2.name); //Lee，原型里的值，没有被box1修改

如果想要box1也能在后面继续访问到原型里的值，可以把构造函数里的属性删除即可，具体如下：

delete box1.name; //删除属性

alert(box1.name);

如何判断属性是在构造函数的实例里，还是在原型里？可以使用hasOwnProperty()函数来验证：

alert(box.hasOwnProperty('name')); //实例里有返回true，否则返回false

构造函数实例属性和原型属性示意图

in操作符会在通过对象能够访问给定属性时返回true，无论该属性存在于实例中还是原型中。

alert('name' in box); //true，存在实例中或原型中

我们可以通过hasOwnProperty()方法检测属性是否存在实例中，也可以通过in来判断实例或原型中是否存在属性。那么结合这两种方法，可以判断原型中是否存在属性。

function isProperty(object, property) { //判断原型中是否存在属性

return!object.hasOwnProperty(property) && (property in object);

}

var box = new Box();

alert(isProperty(box, 'name')) //true，如果原型有

为了让属性和方法更好的体现封装的效果，并且减少不必要的输入，原型的创建可以使用字面量的方式：

function Box() {};

Box.prototype = { //使用字面量的方式

age: 100,

run: function () {

returnthis.name + this.age + '运行中...';

}

};

===============

#constructor属性返回所有JavaScript变量的构造函数

"John".constructor                // 返回函数String() { [native code] }
(3.14).constructor                // 返回函数Number() { [native code] }
false.constructor                 // 返回函数Boolean() { [native code] }
[1,2,3,4].constructor             // 返回函数Array()   { [native code] }
{name:'John', age:34}.constructor // 返回函数Object() { [native code] }
newDate().constructor            // 返回函数Date()    { [native code] }
function () {}.constructor         // 返回函数Function(){ [native code] }

判断对象是否为数组

    <div id="demo"></div>
    var fruits = Array('1A','2A');
    document.getElementById("demo").innerHTML = isArray(fruits);

可以使用constructor属性来查看对象是否为数组（包含字符串"Array"）

function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}

判断对象是否为日期
<div id="demo"></div>

var myDate = new Date();

document.getElementById("demo").innerHTML= isDate(myDate);

可以使用constructor属性来查看对象是否为日期（包含字符串“Date”）

function isDate(myDate) {
    return myDate.constructor.toString().indexOf("Date") > -1;
}

===========================

使用构造函数创建原型对象和使用字面量创建对象在使用上基本相同，但还是有一些区别，字面量创建的方式使用constructor属性不会指向实例，而会指向Object，构造函数创建的方式则相反。

var box = new Box();

alert(box instanceof Box);

alert(box instanceof Object);

alert(box.constructor == Box); //字面量方式，返回false，否则，true

alert(box.constructor == Object); //字面量方式，返回true，否则，false

=======================

如果想让字面量方式的constructor指向实例对象，那么可以这么做：

Box.prototype = {

constructor: Box, //直接强制指向即可

};

PS：字面量方式为什么constructor会指向Object？因为Box.prototype={};这种写法其实就是创建了一个新对象。而每创建一个函数，就会同时创建它prototype，这个对象也会自动获取constructor属性。所以，新对象的constructor重写了Box原来的constructor，因此会指向新对象，那个新对象没有指定构造函数，那么就默认为Object。

原型的声明是有先后顺序的，所以，重写的原型会切断之前的原型。

function Box() {};

Box.prototype = { //原型被重写了

constructor: Box,

age: 100,

run: function () {

returnthis.name + this.age + '运行中...';

}

};

Box.prototype = {

age= 200

};

var box = new Box(); //在这里声明

alert(box.run()); //box只是最初声明的原型

原型对象不仅仅可以在自定义对象的情况下使用，而ECMAScript内置的引用类型都可以使用这种方式，并且内置的引用类型本身也使用了原型。

alert(Array.prototype.sort); //sort就是Array类型的原型方法

alert(String.prototype.substring); //substring就是String类型的原型方法

String.prototype.addstring = function () { //给String类型添加一个方法

returnthis + '，被添加了！'; //this代表调用的字符串

};

alert('Lee'.addstring()); //使用这个方法

PS：尽管给原生的内置引用类型添加方法使用起来特别方便，但我们不推荐使用这种方法。因为它可能会导致命名冲突，不利于代码维护。

原型模式创建对象也有自己的缺点，它省略了构造函数传参初始化这一过程，带来的缺点就是初始化的值都是一致的。而原型最大的缺点就是它最大的优点，那就是共享。

原型中所有属性是被很多实例共享的，共享对于函数非常合适，对于包含基本值的属性也还可以。但如果属性包含引用类型，就存在一定的问题：

function Box() {};

Box.prototype = {

constructor: Box,

age: 100,

family: ['父亲', '母亲', '妹妹'], //添加了一个数组属性

run: function () {

returnthis.name + this.age + this.family;

}

};

var box1 = new Box();

box1.family.push('哥哥'); //在实例中添加'哥哥'

alert(box1.run());

var box2 = new Box();

alert(box2.run()); //共享带来的麻烦，也有'哥哥'了

PS：数据共享的缘故，导致很多开发者放弃使用原型，因为每次实例化出的数据需要保留自己的特性，而不能共享。

为了解决构造传参和共享问题，可以组合构造函数+原型模式：

function Box(name, age) { //不共享的使用构造函数

this.name= name;

this.age= age;

this.family = ['父亲', '母亲', '妹妹'];

};

Box.prototype = { //共享的使用原型模式

constructor: Box,

run: function () {

returnthis.name + this.age + this.family;

}

};

PS：这种混合模式很好的解决了传参和引用共享的大难题。是创建对象比较好的方法。

原型模式，不管你是否调用了原型中的共享方法，它都会初始化原型中的方法，并且在声明一个对象时，构造函数+原型部分让人感觉又很怪异，最好就是把构造函数和原型封装到一起。为了解决这个问题，我们可以使用动态原型模式。

function Box(name ,age) { //将所有信息封装到函数体内

this.name= name;

this.age= age;

if(typeof this.run != 'function') { //仅在第一次调用的初始化

Box.prototype.run= function () {

returnthis.name + this.age + '运行中...';

};

}

var box = new Box('Lee', 100);

alert(box.run());

当第一次调用构造函数时，run()方法发现不存在，然后初始化原型。当第二次调用，就不会初始化，并且第二次创建新对象，原型也不会再初始化了。这样及得到了封装，又实现了原型方法共享，并且属性都保持独立。

if (typeof this.run != 'function') {

alert('第一次初始化'); //测试用

Box.prototype.run= function () {

returnthis.name + this.age + '运行中...';

};

}

var box = new Box('Lee', 100); //第一次创建对象

alert(box.run()); //第一次调用

alert(box.run()); //第二次调用

var box2 = new Box('Jack', 200); //第二次创建对象

alert(box2.run());

PS：使用动态原型模式，要注意一点，不可以再使用字面量的方式重写原型，因为会切断实例和新原型之间的联系。

以上讲解了各种方式对象创建的方法，如果这几种方式都不能满足需求，可以使用一开始那种模式：寄生构造函数。

function Box(name, age) {

varobj = new Object();

obj.name= name;

obj.age= age;

obj.run= function () {

returnthis.name + this.age + '运行中...';

};

returnobj;

}

寄生构造函数，其实就是工厂模式+构造函数模式。这种模式比较通用，但不能确定对象关系，所以，在可以使用之前所说的模式时，不建议使用此模式。

在什么情况下使用寄生构造函数比较合适呢？假设要创建一个具有额外方法的引用类型。由于之前说明不建议直接String.prototype.addstring，可以通过寄生构造的方式添加。

function myString(string) {

varstr = new String(string);

str.addstring= function () {

returnthis + '，被添加了！';

};

returnstr;

}

var box = new myString('Lee'); //比直接在引用原型添加要繁琐好多

alert(box.addstring());

在一些安全的环境中，比如禁止使用this和new，这里的this是构造函数里不使用this，这里的new是在外部实例化构造函数时不使用new。这种创建方式叫做稳妥构造函数。

function Box(name , age) {

varobj = new Object();

obj.run= function () {

returnname + age + '运行中...'; //直接打印参数即可

};

returnobj;

}

var box = Box('Lee', 100); //直接调用函数

alert(box.run());

PS：稳妥构造函数和寄生类似。

四．继承

继承是面向对象中一个比较核心的概念。其他正统面向对象语言都会用两种方式实现继承：一个是接口实现，一个是继承。而ECMAScript只支持继承，不支持接口实现，而实现继承的方式依靠原型链完成。

function Box() { //Box构造

this.name= 'Lee';

}

function Desk() { //Desk构造

this.age= 100;

}

Desk.prototype = new Box(); //Desc继承了Box，通过原型，形成链条

var desk = new Desk();

alert(desk.age);

alert(desk.name); //得到被继承的属性

function Table() { //Table构造

this.level = 'AAAAA';

}

Table.prototype = new Desk(); //继续原型链继承

var table = new Table();

alert(table.name); //继承了Box和Desk

原型链继承流程图

如果要实例化table，那么Desk实例中有age=100，原型中增加相同的属性age=200，最后结果是多少呢？

Desk.prototype.age = 200; //实例和原型中均包含age

PS：以上原型链继承还缺少一环，那就是Obejct，所有的构造函数都继承自Obejct。而继承Object是自动完成的，并不需要程序员手动继承。

经过继承后的实例，他们的从属关系会怎样呢？

alert(table instanceof Object); //true

alert(desk instanceof Table); //false，desk是table的超类

alert(table instanceof Desk); //true

alert(table instanceof Box); //true

在JavaScript里，被继承的函数称为超类型(父类，基类也行，其他语言叫法)，继承的函数称为子类型(子类，派生类)。继承也有之前问题，比如字面量重写原型会中断关系，使用引用类型的原型，并且子类型还无法给超类型传递参数。

为了解决引用共享和超类型无法传参的问题，我们采用一种叫借用构造函数的技术，或者成为对象冒充(伪造对象、经典继承)的技术来解决这两种问题。

function Box(age) {

this.name= ['Lee', 'Jack', 'Hello']

this.age= age;

}

function Desk(age) {

Box.call(this,age); //对象冒充，给超类型传参

}

var desk = new Desk(200);

alert(desk.age);

alert(desk.name);

desk.name.push('AAA'); //添加的新数据，只给desk

alert(desk.name);

借用构造函数虽然解决了刚才两种问题，但没有原型，复用则无从谈起。所以，我们需要原型链+借用构造函数的模式，这种模式成为组合继承。

function Box(age) {

this.name= ['Lee', 'Jack', 'Hello']

this.age= age;

}

Box.prototype.run = function () {

returnthis.name + this.age;

};

function Desk(age) {

Box.call(this,age); //对象冒充

}

Desk.prototype = new Box(); //原型链继承

var desk = new Desk(100);

alert(desk.run());

还有一种继承模式叫做：原型式继承；这种继承借助原型并基于已有的对象创建新对象，同时还不必因此创建自定义类型。

function obj(o) { //传递一个字面量函数

functionF() {} //创建一个构造函数

F.prototype= o; //把字面量函数赋值给构造函数的原型

returnnew F(); //最终返回出实例化的构造函数

}

var box = { //字面量对象

arr: ['哥哥','妹妹','姐姐']

};

var box1 = obj(box); //传递

alert(box1.name);

box1.name = 'Jack';

alert(box1.name);

alert(box1.arr);

box1.arr.push('父母');

alert(box1.arr);

var box2 = obj(box); //传递

alert(box2.name);

alert(box2.arr); //引用类型共享了

寄生式继承把原型式+工厂模式结合而来，目的是为了封装创建对象的过程。

function create(o) { //封装创建过程

varf= obj(o);

f.run= function () {

returnthis.arr; //同样，会共享引用

};

returnf;

}

组合式继承是JavaScript最常用的继承模式；但，组合式继承也有一点小问题，就是超类型在使用过程中会被调用两次：一次是创建子类型的时候，另一次是在子类型构造函数的内部。

function Box(name) {

this.name= name;

this.arr= ['哥哥','妹妹','父母'];

}

Box.prototype.run = function () {

returnthis.name;

};

function Desk(name, age) {

Box.call(this,name); //第二次调用Box

this.age= age;

}

Desk.prototype = new Box(); //第一次调用Box

以上代码是之前的组合继承，那么寄生组合继承，解决了两次调用的问题。

function obj(o) {

functionF() {}

F.prototype= o;

returnnew F();

}

function create(box, desk) {

varf = obj(box.prototype);

f.constructor= desk;

desk.prototype= f;

}

function Box(name) {

this.name= name;

this.arr= ['哥哥','妹妹','父母'];

}

Box.prototype.run = function () {

returnthis.name;

};

function Desk(name, age) {

Box.call(this,name);

this.age= age;

}

inPrototype(Box, Desk); //通过这里实现继承

var desk = new Desk('Lee',100);

desk.arr.push('姐姐');

alert(desk.arr);

alert(desk.run()); //只共享了方法

var desk2 = new Desk('Jack', 200);

alert(desk2.arr); //引用问题解决

=====================================

#自动转换类型

当 JavaScript 尝试操作一个"错误"的数据类型时，会自动转换为"正确"的数据类型。

加号转后面减号转前面

5 + null    // 返回5         null转换为 0
"5" + null // 返回"5null"   null转换为"null"
"5" + 1     // 返回"51"      1转换为"1"
"5" - 1     // 返回4         "5"转换为 5

自动转换为字符串

当你尝试输出一个对象或一个变量时 JavaScript会自动调用变量的toString()方法：
// if myVar = {name:"Fjohn"} // toString 转换为"[object Object]"
// if myVar = [1,2,3,4] // toString 转换为"1,2,3,4"
// if myVar = new Date() // toString 转换为"Fri Jul 18 2014 09:08:55 GMT+0200"

数字和布尔值也经常相互转换：

// if myVar =123             //toString 转换为"123"
// if myVar = true           // toString 转换为"true"
// if myVar = false          // toString 转换为"false"

#运算符

2.一元运算符

3.算术运算符

4.关系运算符

5.逻辑运算符

6.*位运算符

7.赋值运算符

8.其他运算符

9.运算符优先级

一元运算符只能操作一个值的运算符叫做一元运算符

var box = 100;

++box; //把box累加一个1，相当于box= box+1

--box; //把box累减一个1，相当于box= box-1

box++; //同上

box--; //同上

在没有赋值操作，前置和后置是一样的。但在赋值操作时，如果递增或递减运算符前置，那么前置的运算符会先累加或累减再赋值，如果是后置运算符则先赋值再累加或累减。

var box = 100;

var age = ++box; //age值为101

var height = box++; //height值为100

1.其他类型应用一元运算符的规则

var box = '89'; box++; //90，数值字符串自动转换成数值

var box = 'ab'; box++; //NaN，字符串包含非数值转成NaN

var box = false; box++; //1，false转成数值是0，累加就是1

var box = 2.3; box++; //3.3，直接加1

var box = { //1，不设置toString或valueOf即为NaN

toString: function() {

return1;

}

};

加和减运算符 //正数，负数 +box正数，-box就是负数

加运算规则如下：

var box = 100; +box; //100，对于数值，不会产生任何影响

var box = '89'; +box; //89，数值字符串转换成数值

var box = 'ab'; +box; //NaN，字符串包含非数值转成NaN

var box = false; +box; //0，布尔值转换成相应数值

var box = 2.3; +box; //2.3，没有变化

var box = { //1，不设置toString或valueOf即为NaN

toString: function() {

return1;

}

}; +box;

减运算规则如下：

var box = 100; -box; //-100，对于数值，直接变负

var box = '89'; -box; //-89，数值字符串转换成数值

var box = 'ab'; -box; //NaN，字符串包含非数值转成NaN

var box = false; -box; //0，布尔值转换成相应数值

var box = 2.3; -box; //-2.3，没有变化

var box = { //-1，不设置toString或valueOf即为NaN

toString: function() {

return1;

}

}; -box;

加法和减法运算符一般用于算术运算，也可向上面进行类型转换。

算数运算符:

1.加法

var box = 1 + 2; //等于3

var box = 1 + NaN; //NaN，只要有一个NaN就为NaN

var box = Infinity + Infinity; //Infinity

var box = -Infinity + -Infinity; //-Infinity

var box = Infinity + -Infinity; //NaN，正无穷和负无穷相加等NaN

var box = 100 + '100'; //100100，字符串连接符，有字符串就不是加法

var box = '您的年龄是：' + 10 + 20; //您的年龄是：1020，被转换成字符串

var box = 10 + 20 + '是您的年龄'; //30是您的年龄，没有被转成字符串

var box = '您的年龄是：' + (10 + 20);//您的年龄是：30，没有被转成字符串

var box = 10 + 对象 //10[object Object]，如果有toString()或valueOf()

则返回10+返回数的值

var box = 10 + {

toString :function () {

return '20';

}

}; //如果对象toString返回的是数值，那么就按数值来

2.减法

var box = 100 - 70; //等于30

var box = -100 - 70 //等于-170

var box = -100 - -70 //-30，一般写成-100 - (-70)比较清晰

var box = 1 - NaN; //NaN，只要有一个NaN就为NaN

var box = Infinity - Infinity; //NaN

var box = -Infinity - -Infinity; //NaN

var box = Infinity - -Infinity; //Infinity

var box = -Infinity - Infinity; //-Infinity

var box = 100 - true; //99，true转成数值为1

var box = 100 - ''; //100，''转成了0

var box = 100 - '70'; //30，'70'转成了数值70

var box = 100 - null; //100，null转成了0

var box = 100 - 'Lee'; //NaN，Lee转成了NaN

var box = 100 - 对象 //NaN，如果有toString()或valueOf()

则返回10-返回数的值

3.乘法

var box = 100 * 70; //7000

var box = 100 * NaN; //NaN，只要有一个NaN即为NaN

var box = Infinity * Infinity; //Infinity

var box = -Infinity * Infinity ; //-Infinity

var box = -Infinity * -Infinity ; //Infinity

var box = 100 * true; //100，true转成数值为1

var box = 100 * ''; //0，''转成了0

var box = 100 * null; //0，null转成了0

var box = 100 * 'Lee'; //NaN，Lee转成了NaN

var box = 100 * 对象 //NaN，如果有toString()或valueOf()

则返回10 -返回数的值

4.除法

var box = 100 / 70; //1.42....

var box = 100 / NaN; //NaN

var box = Infinity / Infinity; //NaN

var box = -Infinity / Infinity ; //NaN

var box = -Infinity / -Infinity; //NaN

var box = 100 / true; //100，true转成1

var box = 100 / ''; //Infinity，

var box = 100 / null; //Infinity，

var box = 100 / 'Lee'; //NaN

var box = 100 / 对象; //NaN，如果有toString()或valueOf()

则返回10 /返回数的值

5.求模

var box = 10 % 3; //1，余数为1

var box = 100 % NaN; //NaN

var box = Infinity % Infinity; //NaN

var box = -Infinity % Infinity ; //NaN

var box = -Infinity % -Infinity; //NaN

var box = 100 % true; //0

var box = 100 % ''; //NaN

var box = 100 % null; //NaN

var box = 100 % 'Lee'; //NaN

var box = 100 % 对象; //NaN，如果有toString()或valueOf()

则返回10 %返回数的值

例1=============

【 s++ //s++的结果还是s 但s加1

++s //++s的结果加1 但s加1 】

【 s-- //s--的结果还是s 但s减1

--s //--s的结果减1 但s减1】

例2==========

y=5 x=++y ++y=6 x=6 y=6

x=y++ y++=5 x=5 y=6

y=5 x=--y --y=4 x=4 y=4

x=y-- y--=5 x=5 y=4

例3============

               y=10
               y++   ++y  --y   y--
        结果： 10    12    11    11   =44
         y:    11    12    11    10    =10*/

比较运算符

< > >=<=

==等于表示数据相同无论什么数据类型

===恒等于表示数据类型和数据都相同的情况

!= 不等于表示数据不相同无论什么数据类型

!==不恒等于 1数据相同数据类型不相同；2数据不相同数据类型相同；3数据及数据类型都不相同

var x=5;
var y='5';
document.getElementById("demo").innerHTML = x===y; //false

和其他运算符一样，当关系运算符操作非数值时要遵循一下规则：

1.两个操作数都是数值，则数值比较；

2.两个操作数都是字符串，则比较两个字符串对应的字符编码值；

3.两个操作数有一个是数值，则将另一个转换为数值，再进行数值比较；

4.两个操作数有一个是对象，则先调用valueOf()方法或toString()方法，再用结果比较；

var box = 3 > 2; //true

var box = 3 > 22; //false

var box = '3' > 22; //false

var box = '3' > '22'; //true

var box = 'a' > 'b'; //false a=97,b=98

var box = 'a' > 'B'; //true B=66

var box = 1 > 对象; //false，如果有toString()或valueOf()

则返回1 >返回数的值

在相等和不等的比较上，如果操作数是非数值，则遵循一下规则：

1.一个操作数是布尔值，则比较之前将其转换为数值，false转成0，true转成1；

2.一个操作数是字符串，则比较之前将其转成为数值再比较；

3.一个操作数是对象，则先调用valueOf()或toString()方法后再和返回值比较；

4.不需要任何转换的情况下，null和undefined是相等的；

5.一个操作数是NaN，则==返回false，!=返回true；并且NaN和自身不等；

6.两个操作数都是对象，则比较他们是否是同一个对象，如果都指向同一个对象，则返回true，否则返回false。

7.在全等和全不等的判断上，比如值和类型都相等，才返回true，否则返回false。

var box = 2 == 2; //true

var box = '2' == 2; //true，'2'会转成成数值2

var box = false == 0; //true，false转成数值就是0

var box = 'a' == 'A'; //false，转换后的编码不一样

var box = 2 == {}; //false，执行toString()或valueOf()会改变

var box = 2 == NaN; //false，只要有NaN，都是false

var box = {} == {}; //false，比较的是他们的地址，每个新创建对象的引用地址都不同

var age = {};

var height = age;

var box = age == height; //true，引用地址一样，所以相等

var box = '2' === 2 //false，值和类型都必须相等

var box = 2 !== 2 //false，值和类型都相等了

特殊值对比表

表达式	值
null == undefined	true
'NaN' == NaN	false
5 == NaN	false
NaN == NaN	false
false == 0	true
true == 1	true
true == 2	false
undefined == 0	false
null == 0	false
'100' == 100	true
'100' === 100	false

赋值运算符

赋值运算符用等于号(=)表示，就是把右边的值赋给左边的变量。

var box = 100; //把100赋值给box变量

复合赋值运算符通过x=的形式表示，x表示算术运算符及位运算符。

var box = 100;

box = box +100; //200，自己本身再加100

这种情况可以改写为：

var box = 100；

box += 100; //200，+=代替box+100

除了这种+=加/赋运算符，还有其他的几种如下：

1.乘/赋(*=)

2.除/赋(/=)

3.模/赋(%=)

4.加/赋(+=)

5.减/赋(-=)

6.左移/赋(<<=)

7.有符号右移/赋(>>=)

8.无符号有移/赋(>>>=)

字符串运算符

(php) .

字符串运算符只有一个，即："+"。它的作用是将两个字符串相加。

规则：至少一个操作数是字符串即可。

var box = '100' + '100'; //100100

var box = '100' + 100; //100100

var box = 100 + 100; //200

2.逗号运算符

逗号运算符可以在一条语句中执行多个操作。

var box = 100, age = 20, height = 178;//多个变量声明

var box = (1,2,3,4,5); //5，变量声明，将最后一个值赋给变量，不常用

var box = [1,2,3,4,5]; //[1,2,3,4,5]，数组的字面量声明

var box = { //[objectObject]，对象的字面量声明

1: 2,

3: 4,

5: 6

};

逻辑运算符

&& 并且

|| 或者

! 表示非

逻辑运算符通常用于布尔值的操作，一般和关系运算符配合使用，有三个逻辑运算符：逻辑与(AND)、逻辑或(OR)、逻辑非(NOT)。

1.逻辑与(AND)：&&

var box = (5 > 4) && (4 > 3) //true，两边都为true，返回true

第一个操作数	第二个操作数	结果
true	true	true
false	true	false
false	false	false

如果两边的操作数有一个操作数不是布尔值的情况下，与运算就不一定返回布尔值，此时，遵循已下规则：

1.第一个操作数是对象，则返回第二个操作数；

2.第二个操作数是对象，则第一个操作数返回true，才返回第二个操作数，否则返回false;

3.有一个操作数是null，则返回null；

4.有一个操作数是undefined，则返回undefined。

var box = 对象 && (5> 4); //true，返回第二个操作数

var box = (5 > 4) && 对象; //[object Object]

var box = (3 > 4) && 对象; //false

var box = (5 > 4) && null; //null

逻辑与运算符属于短路操作，顾名思义，如果第一个操作数返回是false，第二个数不管是true还是false都返回的false。

var box = true && age; //出错，age未定义

var box = false && age; //false，不执行age了

1.逻辑或(OR)：||

var box = (9 > 7) || (7 > 8); //true，两边只要有一边是true，返回true

第一个操作数	第二个操作数	结果
true	true	true
true	false	true
false	true	true
false	false	false

如果两边的操作数有一个操作数不是布尔值的情况下，逻辑与运算就不一定返回布尔值，此时，遵循已下规则：

1.第一个操作数是对象，则返回第一个操作数；

2.第一个操作数的求值结果为false，则返回第二个操作数；

3.两个操作数都是对象，则返回第一个操作数；

4.两个操作数都是null，则返回null；

5.两个操作数都是NaN，则返回NaN；

6.两个操作数都是undefined，则返回undefined；

var box = 对象 || (5 > 3); //[objectObject]

var box = (5 > 3) || 对象; //true

var box = 对象1 ||对象2; //[objectObject]

var box = null || null; //null

var box = NaN || NaN; //NaN
var box = undefined || undefined; //undefined

和逻辑与运算符相似，逻辑或运算符也是短路操作。当第一操作数的求值结果为true，就不会对第二个操作数求值了。

var box = true || age; //true

var box = false || age; //出错，age未定义

我们可以利用逻辑或运算符这一特性来避免为变量赋null或undefined值。

var box = oneObject || twoObject; //把其中一个有效变量值赋给box

2.逻辑非(NOT)：!

逻辑非运算符可以用于任何值。无论这个值是什么数据类型，这个运算符都会返回一个布尔值。它的流程是：先将这个值转换成布尔值，然后取反，规则如下：

1.操作数是一个对象，返回false；

2.操作数是一个空字符串，返回true；

3.操作数是一个非空字符串，返回false；

4.操作数是数值0，返回true；

5.操作数是任意非0数值(包括Infinity)，false；

6.操作数是null，返回true；

7.操作数是NaN，返回true；

8.操作数是undefined，返回true；

var box = !(5 > 4); //false

var box = !{}; //false

var box = !''; //true

var box = !'Lee'; //false

var box = !0; //true

var box = !8; //false

var box = !null; //true

var box = !NaN; //true

var box = !undefined; //true

使用一次逻辑非运算符，流程是将值转成布尔值然后取反。而使用两次逻辑非运算符就是将值转成成布尔值取反再取反，相当于对值进行Boolean()转型函数处理。

var box = !!0; //false

var box = !!NaN; //false

通常来说，使用一个逻辑非运算符和两个逻辑非运算符可以得到相应的布尔值，而使用三个以上的逻辑非运算符固然没有错误，但也没有意义。

位运算符

PS：在一般的应用中，我们基本上用不到位运算符。虽然，它比较基于底层，性能和速度会非常好，而就是因为比较底层，使用的难度也很大。所以，我们作为选学来对待。

位运算符有七种，分别是：位非NOT(~)、位与AND(&)、位或OR（|）、位异或XOR(^)、左移(<<)、有符号右移(>>)、无符号右移(>>>)。

var box = ~25; //-26

var box = 25 & 3; //1

var box = 25 | 3; //27

var box = 25 << 3; //200

var box = 25 >> 2; //6

var box = 25 >>> 2; //6

更多的详细： http://www.w3school.com.cn/js/pro_js_operators_bitwise.asp

三元运算符

2.三元条件运算符

三元条件运算符其实就是后面将要学到的if语句的简写形式。

例子1===============

var box = 5 > 4 ? '对': '错'; //对，5>4返回true则把'对'赋值给box，反之。

相当于：

var box = ''; //初始化变量

if (5 > 4) { //判断表达式返回值

box = '对'; //赋值

} else {

box = '错'; //赋值

}

例子2===============

voteable=(age<18)?"11111":"22222";

如果变量 age 中的值小于 18，则变量voteable的值为"11111"，否则值为"22222"。

运算符优先级

在一般的运算中，我们不必考虑到运算符的优先级，因为我们可以通过圆括号来解决这种问题。比如：

var box = 5 - 4 * 8; //-27

var box = (5 - 4) * 8; //8

但如果没有使用圆括号强制优先级，我们必须遵循以下顺序：

运算符	描述
. [] ()	对象成员存取、数组下标、函数调用等
++ -- ~ ! delete new typeof void	一元运算符
* / %	乘法、除法、去模
+ - +	加法、减法、字符串连接
<< >> >>>	移位
< <= > >= instanceof	关系比较、检测类实例
== != === !==	恒等(全等)
&	位与
^	位异或
\|	位或
&&	逻辑与
\|\|	逻辑或
?:	三元条件
= x=	赋值、运算赋值
,	多重赋值、数组元素

条件 ? 值1 : 值2; 要返回一个值

如果条件 == true 返回值1

如果条件 == false 返回值2

#流程控制语句

1.if语句

2.switch语句

3.do...while语句

4.while语句

5.for语句

6.for...in语句

7.break和continue语句

8.with语句

语句的种类

类型	子类型	语法
声明语句	变量声明语句	var box = 100;
声明语句	标签声明语句	label : box;
表达式语句	变量赋值语句	box = 100;
	函数调用语句	box();
	属性赋值语句	box.property = 100;
	方法调用语句	box.method();
分支语句	条件分支语句	if () {} else {}
分支语句	多重分支语句	switch () { case n : ...};

语句的种类(续)

类型	子类型	语法
循环语句	for	for (;;;) {}
	for ... in	for ( x in x) {}
	while	while () {};
	do ... while	do {} while ();
控制结构	继续执行子句	continue ;
	终端执行子句	break ;
	函数返回子句	return ;
	异常触发子句	throw ;
	异常捕获与处理	try {} catch () {} finally {}
其他	空语句	;
其他	with语句	with () {}

判断

单分支判断

if(条件){语句块1}

if(条件)单行语句块

双分支判断

if(条件){语句块1}else{语句块2}

多分支判断

if(条件){语句块1}else if()[.....else{}]

if语句

if 语句即条件判断语句，一共有三种格式：

1. if (条件表达式)语句;

var box = 100;

if (box > 50) alert('box大于50'); //一行的if语句，判断后执行一条语句

var box = 100;

if (box > 50)

alert('box大于50'); //两行的if语句，判断后也执行一条语句

alert('不管怎样，我都能被执行到！');

var box = 100;

if (box < 50) {

alert('box大于50');

alert('不管怎样，我都能被执行到！');//用复合语句包含，判断后执行一条复合语句

}

对于if语句括号里的表达式，ECMAScript会自动调用Boolean()转型函数将这个表达式的结果转换成一个布尔值。如果值为true，执行后面的一条语句，否则不执行。

PS：if语句括号里的表达式如果为true，只会执行后面一条语句，如果有多条语句，那么就必须使用复合语句把多条语句包含在内。

PS2：推荐使用第一种或者第三种格式，一行的if语句，或者多行的if复合语句。这样就不会因为多条语句而造成混乱。

PS3：复合语句我们一般喜欢称作为：代码块。

2. if (条件表达式) {语句;} else {语句;}

var box = 100;

if (box > 50) {

alert('box大于50'); //条件为true，执行这个代码块

} else {

alert('box小于50'); //条件为false，执行这个代码块

}

3.if (条件表达式) {语句;}else if (条件表达式) {语句;} ... else {语句;}

var box = 100;

if (box >= 100) { //如果满足条件，不会执行下面任何分支

alert('甲');

} else if (box >= 90) {

alert('乙');

} else if (box >= 80) {

alert('丙');

} else if (box >= 70) {

alert('丁');

} else if (box >= 60) {

alert('及格');

} else { //如果以上都不满足，则输出不及格

alert('不及格');

}

多分支判断

三．switch语句

switch(值){

case 匹配值 : 语句块;break;

case 匹配值：语句块;break;

.....

[default ：最终语句块;[break;]]

}

其中的break不能省略，除非最后一条判断。

循环：一遍又一遍的执行同一个语句块。break可以终止循环。

switch语句是多重条件判断，用于多个值相等的比较。

var box = 1;

switch (box) { //用于判断box相等的多个值

case1 :

alert('one');

break; //break;用于防止语句的穿透

case2 :

alert('two');

break;

case3 :

alert('three');

break;

default: //相当于if语句里的else，否则的意思

alert('error');

}

for循环

三．for语句

for语句也是一种先判断，后运行的循环语句。但它具有在执行循环之前初始变量和定义循环后要执行代码的能力。

for (var box = 1; box <= 5 ; box++) { //第一步，声明变量var box =1;

alert(box); //第二步，判断box <=5

} //第三步，alert(box)

//第四步，box++

//第五步，从第二步再来，直到判断为false

例子1=====================

例子2============================

例子3============================

例子4============================

例子5============================

例子6============================

求1到任意一个数n（n>=1）之间的所有的偶数的个数

for（var i=1;i<=6;i++）{

If(i%2==0){

Document.write(i+“ ”);

}

============================

for...in语句

for...in语句是一种精准的迭代语句，可以用来枚举对象的属性。

var box = { //创建一个对象

'name': '李炎恢', //键值对，左边是属性名，右边是值

'age': 28,

'height': 178

};

for (key in box) { //列举出对象的所有属性

alert(key);

}

====================================

#While循环

语法：

Vari=1；//循环变量的初始化

while(i<=100){ //循环条件的判断

Document.write(i); //循环体

I=i+5; //循环变量的改变

}

While(){}

执行：

循环变量初始化=》循环条件的判断（true）=》循环体=》循环变量的改变=》循环条件的判断(true)=》循环体=》循环变量的改变=》循环条件的判断（false）=》跳出循环

注意：如果循环条件判断为false那么久不会长执行

例子1============================

例子2============================

//输出1到100之间所有的数字 //输出1到100之间所有的偶数

例子3============================

//求1到100的和

例子4======================

//1到100的偶数 //求偶数的个数 //偶数和

=======================

#do while循环

语法：

Var i=1;

do{

//循环体

循环变量的改变

i++;

}while(i<=100)

执行：循环变量的初始化=》立刻执行一次循环体=》循环变量的改变=》循环条件的判断（true）=》循环体=》循环变量的改变=-》循环条件判断（false）=》跳出循环

注意：必定会执行

例子1===================

=======================

#with语句

with语句的作用是将代码的作用域设置到一个特定的对象中。

var box = { //创建一个对象

'name': '李炎恢', //键值对

'age': 28,

'height': 178

};

var n = box.name; //从对象里取值赋给变量

var a = box.age;

var h = box.height;

可以将上面的三段赋值操作改写成：

with (box) { //省略了box对象名

varn = name;

vara = age;

varh = height;

}

#break和continue语句

break和continue语句用于在循环中精确地控制代码的执行。其中，break语句会立即退出循环，强制继续执行循环体后面的语句。而continue语句退出当前循环，继续后面的循环。

for (var box = 1; box <= 10; box++) {

if (box== 5) break; //如果box是5，就退出循环

document.write(box);

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

}

for (var box = 1; box <= 10; box++) {

if(box == 5) continue; //如果box是5，就退出当前循环

document.write(box);

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

}

break 用于跳出当前整个循环。

continue跳出本次循环继续执行下一次循环

两者都不会执行后面的代码可以指定跳出几层循环

#交换算法:

交换算法

var i = 10;

var k = 5;

var s = i;

i=k;

k=s;

#冒泡算法

for(i=0;i<arr.length;i++){
   for(j=i+1;j<arr.length;j++){
     if(arr[i]>arr[j]){
        var s=arr[i];
        arr[i]=arr[j];
       arr[j]=s;

}

}
document.write(arr);

#函数

1.函数声明

2.return返回值

3.arguments对象

无参无返回值函数

无参有返回值函数

有参无返回值函数

有参有返回值函数

【参数：参数就是函数体中的一个变量，它可以使函数变得更加灵活。】

形参：是创建函数时的参数，在函数体中无论如何使用形参都不影响函数体的运行

实参：是使用函数是的参数，影响着函数的最终结果。

【函数可以创建对象】

#构造函数用 this关键字 new关键字

function obj(name,sex){

this.name= name;

this.sex= sex;

this.say = say;

}

function say(){

document.write("我是一个"+this.sex+"人,我的名字叫:"+this.name)

}

var zhangsan = new obj("张三",'好'); //实例化对象

var lisi = new obj("李四",'贱') //实例化对象

//访问张三的姓名

document.write(zhangsan.name); //调用对象属性

document.write(zhangsan.sex); //调用对象属性

document.write(typeof zhangsan); //调用对象属性

lisi.say(); //调用对象方法

#函数作用域：

对于函数来说，函数内部定义的变量叫局部变量

函数外部的变量叫做全局变量

只是针对函数来说的

局部变量：只能在函数内部使用

全局变量：可以放到任何位置去用

#return

① 跳出函数不在执行返回一个值给函数,相当于给函数赋值

② 终止函数

return flasse ①禁止向上冒泡（不触发上一层事件）

②禁止默认行为（例如a标签的链接行为）

注意：如果有返回值必须接收返回值

例子：======================

    function ab(){
           var a=2;
           return a;
       }
       var num = ab();              //num接受返回值
       document.write(num);//函数外

======================================

函数的位置：

可以先定义，后调用

也可以先调用，后定义

==============================

求任意一个数为圆的半径，球圆的面积，假设pai为3.14

    function qiumianji(n){
           //var r=6;
           var mianji=3.14*n*n;
           document.write("面积为"+mianji);
       }
       qiumianji(6);

==========================

求已知任意两个值为直角三角形的两条直角边，求斜边

==================

求1到任意一个数n（n>=1）之间的所有的偶数的个数

=======================

九九乘法表

=====================

#arguments对象

ECMAScript函数不介意传递进来多少参数，也不会因为参数不统一而错误。实际上，函数体内可以通过arguments对象来接收传递进来的参数。

function box() {

return arguments[0]+' | '+arguments[1]; //得到每次参数的值

}

alert(box(1,2,3,4,5,6)); //传递参数

arguments对象的length属性可以得到参数的数量。

function box() {

return arguments.length; //得到6

}

alert(box(1,2,3,4,5,6));

我们可以利用length这个属性，来智能的判断有多少参数，然后把参数进行合理的应用。比如，要实现一个加法运算，将所有传进来的数字累加，而数字的个数又不确定。

function box() {

var sum = 0;

if(arguments.length == 0) return sum; //如果没有参数，退出

for(var i = 0;i < arguments.length; i++) { //如果有，就累加

sum = sum + arguments[i];

}

return sum; //返回累加结果

}

alert(box(5,9,12));

ECMAScript中的函数，没有像其他高级语言那种函数重载功能。

function box(num) {

return num + 100;

}

function box (num) { //会执行这个函数

return num + 200;

}

alert(box(50)); //返回结果

===============================

#函数声明方式

#匿名函数(函数没有名称)。函数存储在变量中，不需要函数名称，通常通过变量名来调用。

#构造函数用this关键字 new关键字

1.普通的函数声明 普通的函数

function box(num1, num2) {

return num1+num2;

}

2.使用变量初始化函数 匿名函数

var box= function(num1, num2) {

return num1 +num2;

};

3.使用Function构造函数 构造函数

var box= new Function('num1','num2' ,'return num1 + num2');

PS：第三种方式我们不推荐，因为这种语法会导致解析两次代码（第一次解析常规ECMAScript代码，第二次是解析传入构造函数中的字符串），从而影响性能。但我们可以通过这种语法来理解"函数是对象，函数名是指针"的概念。

例子：=========================

function myFunction(a,b){

returna*b;

}

document.getElementById("demo").innerHTML=myFunction(4,3);

#在函数表达式存储在变量后，变量也可作为一个函数使用：

第一种：

var x = function (a, b) {return a *b};
var z = x(4, 3);

第二种：

var x = new x("a", "b", "return a * b");

var z = x(4, 3);

#实际上，你不必使用构造函数。而使用匿名函数：

var x = function (a, b) {returna * b}
var z = x(4, 3);

#自调用函数

(function () {

var x = "Hello!!"; // 我将调用自己

})();

#递归函数

function box(num) {

if (num <= 1) {

return 1;

} else {

return num * box(num-1); //一个简单的的递归num=num-1

}

#arguments.callee

对于阶乘函数一般要用到递归算法，所以函数内部一定会调用自身；如果函数名不改变是没有问题的，但一旦改变函数名，内部的自身调用需要逐一修改。为了解决这个问题，我们可以使用arguments.callee来代替。

function box(num) {

if(num <= 1) {

return1;

}else {

return num *arguments.callee(num-1); //使用arguments.callee来执行自身

}

#this

函数内部另一个特殊对象是this，其行为与Java和C#中的this大致相似。换句话说，this引用的是函数据以执行操作的对象，或者说函数调用语句所处的那个作用域。PS：当在全局作用域中调用函数时，this对象引用的就是window。

//便于理解的改写例子

window.color= '红色的'; //全局的，或者var color ='红色的';也行

alert(this.color); //打印全局的color

var box = {

color: '蓝色的', //局部的color

sayColor: function () {

alert(this.color); //此时的this只能box里的color

}

};

box.sayColor(); //打印局部的color

alert(this.color); //还是全局的

//引用教材的原版例子

window.color = '红色的'; //或者var color = '红色的';也行

function sayColor() {

alert(this.color); //这个this代表window

}

sayColor(); //现在打印的是红色的

var box = {

color: '蓝色的'

};

box.sayColor = sayColor; //把函数sayColor复制到box对象里，成为了方法

box.sayColor(); //现在打印的是蓝色的

#函数属性和方法

ECMAScript中的函数是对象，因此函数也有属性和方法。每个函数都包含两个属性：length和prototype。其中，length属性表示函数希望接收的命名参数的个数。

function box(name, age) {

alert(name+ age);

}

alert(box.length); //2

#apply()

PS：对于prototype属性，它是保存所有实例方法的真正所在，也就是原型。这个属性，我们将在面向对象一章详细介绍。而prototype下有两个方法：apply()和call()，每个函数都包含这两个非继承而来的方法。这两个方法的用途都在特定的作用域中调用函数，实际上等于设置函数体内this对象的值。

function box(num1, num2) {

returnn um1 + num2; //原函数

}

function sayBox(num1, num2) { //apply可以冒充另一个函数

return box.apply(this, [num1, num2]); //this表示作用域，这里是window

} //[]表示box所需要的参数

function sayBox2(num1, num2) {

return box.apply(this, arguments); //arguments对象表示box所需要的参数

}

alert(sayBox(10,10)); //20

alert(sayBox2(10,10)); //20

#call()

call()方法于apply()方法相同，他们的区别仅仅在于接收参数的方式不同。对于call()方法而言，第一个参数是作用域，没有变化，变化只是其余的参数都是直接传递给函数的。

function box(num1, num2) {

returnnum1 + num2;

}

function callBox(num1, num2) {

return box.call(this, num1, num2); //和apply区别在于后面的传参

}

alert(callBox(10,10));

事实上，传递参数并不是apply()和call()方法真正的用武之地；它们经常使用的地方是能够扩展函数赖以运行的作用域。

var color = '红色的'; //或者window.color = '红色的';也行

var box = {

color: '蓝色的' //对象里面的属性都是局部的这个蓝色的不加分号

};

function sayColor() {

alert(this.color);

}

sayColor(); //作用域在window

sayColor.call(this); //冒充this作用域在window

sayColor.call(window); //冒充window作用域在window

sayColor.call(box); //冒充box作用域在box，对象冒充

=====================================

#变量及作用域

1.基本类型和引用类型的值

ECMAScript变量可能包含两种不同的数据类型的值：基本类型值和引用类型值。基本类型值指的是那些保存在栈内存中的简单数据段，即这种值完全保存在内存中的一个位置。而引用类型值则是指那些保存在堆内存中的对象，意思是变量中保存的实际上只是一个指针，这个指针指向内存中的另一个位置，该位置保存对象。

将一个值赋给变量时，解析器必须确定这个值是基本类型值，还是引用类型值。基本类型值有以下几种：Undefined、Null、Boolean、Number和String。这些类型在内存中分别占有固定大小的空间，他们的值保存在栈空间，我们通过按值来访问的。

PS：在某些语言中，字符串以对象的形式来表示，因此被认为是引用类型。ECMAScript放弃这一传统。

如果赋值的是引用类型的值，则必须在堆内存中为这个值分配空间。由于这种值的大小不固定，因此不能把它们保存到栈内存中。但内存地址大小的固定的，因此可以将内存地址保存在栈内存中。这样，当查询引用类型的变量时，先从栈中读取内存地址，然后再通过地址找到堆中的值。对于这种，我们把它叫做按引用访问。

2.动态属性

定义基本类型值和引用类型值的方式是相似的：创建一个变量并为该变量赋值。但是，当这个值保存到变量中以后，对不同类型值可以执行的操作则大相径庭。

var box = new Object(); //创建引用类型

box.name = 'Lee'; //新增一个属性

alert(box.name); //输出

如果是基本类型的值添加属性的话，就会出现问题了。

var box = 'Lee'; //创建一个基本类型

box.age = 27; //给基本类型添加属性

alert(box.age); //undefined

3.复制变量值

在变量复制方面，基本类型和引用类型也有所不同。基本类型复制的是值本身，而引用类型复制的是地址。

var box = 'Lee'; //在栈内存生成一个box 'Lee'

var box2 = box; //在栈内存再生成一个box2 'Lee'

box2是虽然是box1的一个副本，但从图示可以看出，它是完全独立的。也就是说，两个变量分别操作时互不影响。

var box = new Object(); //创建一个引用类型

box.name = 'Lee'; //新增一个属性

var box2 = box; //把引用地址赋值给box2

在引用类型中，box2其实就是box，因为他们指向的是同一个对象。如果这个对象中的name属性被修改了，box2.name和box.name输出的值都会被相应修改掉了。

#函数参数基本类型

ECMAScript中所有函数的参数都是按值传递的，言下之意就是说，参数不会按引用传递，虽然变量有基本类型和引用类型之分。

function box(num) { //按值传递，传递的参数是基本类型

num+= 10; //这里的num是局部变量，全局无效

return num;

}

var num = 50;

var result = box(num);

alert(result); //60

alert(num); //50

PS：以上的代码中，传递的参数是一个基本类型的值。而函数里的num是一个局部变量，和外面的num没有任何联系。

#函数参数引用类型

下面给出一个参数作为引用类型的例子。

function box(obj) { //按值传递，传递的参数是引用类型

obj.name= 'Lee';

}

var p = new Object();

box(p);

alert(p.name); //Lee

PS：如果存在按引用传递的话，那么函数里的那个变量将会是全局变量，在外部也可以访问。比如PHP中，必须在参数前面加上&符号表示按引用传递。而ECMAScript没有这些，只能是局部变量。可以在PHP中了解一下。

PS：所以按引用传递和传递引用类型是两个不同的概念。

function box(obj) {

obj.name= 'Lee';

var obj = new Object(); //函数内部又创建了一个对象

obj.name= 'Mr.'; //并没有替换掉原来的obj

}

最后得出结论，ECMAScript函数的参数都将是局部变量，也就是说，没有按引用传递。

#instanceof

虽然typeof运算符在检查基本数据类型的时候非常好用，但检测引用类型的时候，它就不是那么好用了。通常，我们并不想知道它是不是对象，而是想知道它到底是什么类型的对象。因为数组也是object，null也是Object等等。

这时我们应该采用instanceof运算符来查看。

var box = [1,2,3];

alert(box instanceof Array); //是否是数组

var box2 = {};

alert(box2 instanceof Object); //是否是对象

var box3 = /g/;

alert(box3 instanceof RegExp); //是否是正则表达式

var box4 = new String('Lee');

alert(box4 instanceof String); //是否是字符串对象

PS：当使用instanceof检查基本类型的值时，它会返回false。要用typeof

#函数的作用域

执行环境是JavaScript中最为重要的一个概念。执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为。

全局执行环境是最外围的执行环境。在Web浏览器中，全局执行环境被认为是window对象。因此所有的全局变量和函数都是作为window对象的属性和方法创建的。

var box = 'blue'; //声明一个全局变量

function setBox() {

alert(box); //全局变量可以在函数里访问

}

setBox(); //执行函数

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

var box = 'blue';

function setBox() {

alert(window.box); //全局变量即window的属性

}

window.setBox(); //全局函数即window的方法

PS：当执行环境中的所有代码执行完毕后，该环境被销毁，保存在其中的所有变量和函数定义也随之销毁。如果是全局环境下，需要程序执行完毕，或者网页被关闭才会销毁。

PS：每个执行环境都有一个与之关联的变量对象，就好比全局的window可以调用变量和属性一样。局部的环境也有一个类似window的变量对象，环境中定义的所有变量和函数都保存在这个对象中。(我们无法访问这个变量对象，但解析器会处理数据时后台使用它)

函数里的局部作用域里的变量替换全局变量，但作用域仅限在函数体内这个局部环境。

var box = 'blue';

function setBox() {

var box = 'red'; //这里是局部变量，出来就不认识了

alert(box);

}

setBox();

alert(box);

通过传参，可以替换函数体内的局部变量，但作用域仅限在函数体内这个局部环境。

var box = 'blue';

function setBox(box) { //通过传参，替换了全局变量

alert(box);

}

setBox('red');

alert(box);

函数体内还包含着函数，只有这个函数才可以访问内一层的函数。

var box = 'blue';

function setBox() {

function setColor() {

var b = 'orange';

alert(box); //

alert(b);

}

return setColor(); //把setcolor赋值给setbox //setColor()的执行环境在setBox()内

}

setBox(); //现在可以调用setcolor里面的东西了

PS：每个函数被调用时都会创建自己的执行环境。当执行到这个函数时，函数的环境就会被推到环境栈中去执行，而执行后又在环境栈中弹出(退出)，把控制权交给上一级的执行环境。

PS：当代码在一个环境中执行时，就会形成一种叫做作用域链的东西。它的用途是保证对执行环境中有访问权限的变量和函数进行有序访问。作用域链的前端，就是执行环境的变量对象。

6.没有块级作用域

块级作用域表示诸如if语句等有花括号封闭的代码块，所以，支持条件判断来定义变量。

if (true) { //if语句代码块没有封闭作用域的功能

var box = 'Lee';

}

alert(box); //可以打印到花括号里面的变量

for循环语句也是如此

for (var i = 0; i < 10; i ++) { //for语句代码块没有封闭作用域的功能

var box = 'Lee';

}

alert(i); //可以打印到花括号里面的变量

alert(box); //可以打印到花括号里面的变量

var关键字在函数里的区别

function box(num1, num2) {

var sum = num1 + num2; //如果去掉var就是全局变量了

return sum;

}

alert(box(10,10));

alert(sum); //报错

PS：非常不建议不使用var就初始化变量，因为这种方法会导致各种意外发生。所以初始化变量的时候一定要加上var。

一般确定变量都是通过搜索来确定该标识符实际代表什么。

var box = 'blue';

function getBox() {

return box; //代表全局变量box

} //如果加上函数体内加上var box = 'red'

alert(getBox()); //那么最后返回值就是red

PS：变量查询中，访问局部变量要比全局变量更快，因为不需要向上搜索作用域链。

return用法

function myFunction(a, b) {
return a * b;
}
var x = myFunction(4, 3);

JavaScript函数可作为表达式使用：

function myFunction(a, b) {
return a * b;
}
var x = myFunction(4, 3) * 2;

arguments.length属性返回函数调用过程接收到的参数个数：

function myFunction(a, b) {
return arguments.length;
}

toString()方法将函数作为一个字符串返回:

function myFunction(a, b) {

return a * b;

}

document.getElementById("demo").innerHTML== myFunction.toString();

argument 对象包含了函数调用的参数数组。

function findMax() {
    var max = 0;
    var arr = Array();
    for ( var i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            arr[i] = arguments[i];
        }
    }
    return arr;
}
document.write(findMax(1, 123, 500, 115, 44, 88));

或者创建一个函数用来统计所有数值的和：

function sumAll() {

   var i, sum = 0;

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

        sum += arguments[i];

   }

   return sum;

}
document.write(sumAll(1, 123, 500, 115, 44, 88));

JavaScript函数调用

①作为一个函数调用

function myFunction(a, b) {

return a * b;

}

myFunction(10, 2); // myFunction(10, 2)返回20

以上函数不属于任何对象。但是在 JavaScript中它始终是默认的全局对象。

在 HTML 中默认的全局对象是 HTML页面本身，所以函数是属于HTML页面。

在浏览器中的页面对象是浏览器窗口(window对象)。以上函数会自动变为window对象的函数

所以 myFunction()和window.myFunction()是一样的

~~②全局对象：当函数没有被自身的对象调用时，this的值就会变成全局对象。this指向函数执行时的当前对象。~~

~~function myFunction() {~~

~~return this;~~

}

~~myFunction(); //返回 window对象~~

③作为对象的方法（函数）调用

var myObject = {

firstName:"John",

lastName: "Doe",

fullName: function () {

return this.firstName + " " +this.lastName; //this 指myObject对象本身。

}

调用对象的方法（函数）

myObject.fullName(); //返回 "JohnDoe"

④使用构造函数调用函数:如果函数调用前使用了 new关键字,则是调用了构造函数。

// 构造函数:

function myFunction(arg1, arg2) {

   this.firstName = arg1;   // firstName指myFunction对象的属性

   this.lastName = arg2;

}

var x = new myFunction("John","Doe");

alert(x.firstName);   // 返回 "John"

⑤作为函数方法调用函数:call()和apply()是预定义的函数方法。两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。

function myFunction(a, b) {

return a * b;

}

myFunction.call(myObject, 10,2); //返回20

或

function myFunction(a, b) {

return a * b;

}

myArray = [10,2];

myFunction.apply(myObject,myArray); //返回20

//两个方法都使用了对象本身作为第一个参数。两者的区别在于第二个参数：call则直接传参数。而apply传入的是一个参数数组

在 JavaScript 严格模式(strictmode)下,在调用函数时第一个参数会成为this的值，即使该参数不是一个对象。

在 JavaScript 非严格模式(non-strictmode)下,如果第一个参数的值是 null或 undefined, 它将使用全局对象替代。

通过 call() 或apply()方法你可以设置this的值,且作为已存在对象的新方法调用。

JavaScript闭包

JavaScript 变量可以是局部变量或全局变量。

闭包是可访问上一层函数作用域里变量的函数，即便上一层函数已经关闭。变量值累加。

要实现效果：变量是局部变量且变量累加

全局变量

var counter = 0; //此时的变量为全局变量函数内部可以调用第二次调用这个变量时它的值就不是0 了

function add() {

return counter += 1;

}

function myFunction(){

document.getElementById("demo").innerHTML = add();

}

myFunction()；myFunction()；myFunction()； //3 实现了调用几次累加几次但不是局部变量

局部变量

function add() {

var counter = 0; //此时的变量为局部变量第二次调用这个变量时它的值还是0

return counter += 1;

}

function myFunction(){

document.getElementById("demo").innerHTML = add();

}

myFunction(); myFunction() ; myFunction(); //1 不累加但是是局部变量

JavaScript内嵌函数：可以访问上一层函数的变量。

document.getElementById("demo").innerHTML= add(); //赋值

function add() { //父函数

var counter = 0;

function plus() {

counter += 1;

} //子函数调用父函数的变量

plus(); //调用

return counter; //把值返回给父函数

} //1 不累加但是是局部变量内嵌函数

闭包对象= 两个匿名函数 +函数自我调用

var add = (function () { //设置父函数自我调用

var counter = 0; //局部变量

return function () {

return counter += 1;

} //把结果返回给父函数

})();

function myFunction(){

document.getElementById("demo").innerHTML = add(); //调用父函数

}

myFunction(); myFunction(); myFunction(); //3 结果累加了也是局部变量

=============================================================================================

匿名函数和闭包

匿名函数就是没有名字的函数，闭包是可访问一个函数作用域里变量的函数。声明：本节内容需要有面向对象和少量设计模式基础，否则无法听懂.(所需基础15章的时候已经声明过了)。

一．匿名函数

//普通函数

function box() { //函数名是box

return'Lee';

}

//匿名函数

function () { //匿名函数，会报错

return'Lee';

}

//通过表达式自我执行

(function box() { //封装成表达式

alert('Lee');

})(); //()表示执行函数，并且传参

//把匿名函数赋值给变量

var box = function () { //将匿名函数赋给变量

return'Lee';

};

alert(box()); //调用方式和函数调用相似

//函数里的匿名函数

function box () {

returnfunction () { //函数里的匿名函数，产生闭包

return 'Lee';

}

alert(box()()); //调用匿名函数

二．闭包

闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的常见的方式，就是在一个函数内部创建另一个函数，通过另一个函数访问这个函数的局部变量。

//通过闭包可以返回局部变量

function box() {

varuser = 'Lee';

returnfunction () { //通过匿名函数返回box()局部变量

return user;

};

}

alert(box()()); //通过box()()来直接调用匿名函数返回值

var b = box();

alert(b()); //另一种调用匿名函数返回值

使用闭包有一个优点，也是它的缺点：就是可以把局部变量驻留在内存中，可以避免使用全局变量。(全局变量污染导致应用程序不可预测性，每个模块都可调用必将引来灾难，所以推荐使用私有的，封装的局部变量)。

//通过全局变量来累加

var age = 100; //全局变量

function box() {

age++; //模块级可以调用全局变量，进行累加

}

box(); //执行函数，累加了

alert(age); //输出全局变量

//通过局部变量无法实现累加

function box() {

varage = 100;

age++; //累加

returnage;

}

alert(box()); //101

alert(box()); //101，无法实现，因为又被初始化了

//通过闭包可以实现局部变量的累加

function box() {

varage = 100;

returnfunction () {

age ++;

return age;

}

var b = box(); //获得函数

alert(b()); //调用匿名函数

alert(b()); //第二次调用匿名函数，实现累加

PS：由于闭包里作用域返回的局部变量资源不会被立刻销毁回收，所以可能会占用更多的内存。过度使用闭包会导致性能下降，建议在非常有必要的时候才使用闭包。

作用域链的机制导致一个问题，在循环中里的匿名函数取得的任何变量都是最后一个值。

//循环里包含匿名函数

function box() {

vararr = [];

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

arr[i] = function () {

returni;

};

}

returnarr;

}

var b = box(); //得到函数数组

alert(b.length); //得到函数集合长度

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

alert(b[i]()); //输出每个函数的值，都是最后一个值

}

上面的例子输出的结果都是5，也就是循环后得到的最大的i值。因为b[i]调用的是匿名函数，匿名函数并没有自我执行，等到调用的时候，box()已执行完毕，i早已变成5，所以最终的结果就是5个5。

//循环里包含匿名函数-改1，自我执行匿名函数

function box() {

vararr = [];

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

arr[i] = (function (num) { //自我执行

returnnum;

})(i); //并且传参

}

returnarr;

}

var b = box();

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

alert(b[i]); //这里返回的是数组，直接打印即可

}

改1中，我们让匿名函数进行自我执行，导致最终返回给a[i]的是数组而不是函数了。最终导致b[0]-b[4]中保留了0,1,2,3,4的值。

//循环里包含匿名函数-改2，匿名函数下再做个匿名函数

function box() {

vararr = [];

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

arr[i] = (function (num) {

returnfunction () { //直接返回值，改2变成返回函数

return num; //原理和改1一样

}

})(i);

}

returnarr;

}

var b = box();

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

alert(b[i]()); //这里通过b[i]()函数调用即可

}

改1和改2中，我们通过匿名函数自我执行，立即把结果赋值给a[i]。每一个i，是调用方通过按值传递的，所以最终返回的都是指定的递增的i。而不是box()函数里的i。

关于this对象

在闭包中使用this对象也可能会导致一些问题，this对象是在运行时基于函数的执行环境绑定的，如果this在全局范围就是window，如果在对象内部就指向这个对象。而闭包却在运行时指向window的，因为闭包并不属于这个对象的属性或方法。

var user = 'The Window';

var obj = {

user: 'The Object',

getUserFunction: function () {

return function () { //闭包不属于obj，里面的this指向window

returnthis.user;

};

}

};

alert(obj.getUserFunction()()); //The window

//可以强制指向某个对象

alert(obj.getUserFunction().call(obj)); //TheObject

//也可以从上一个作用域中得到对象

getUserFunction: function () {

var that = this; //从对象的方法里得对象

return function () {

returnthat.user;

};

}

内存泄漏

由于IE的JScript对象和DOM对象使用不同的垃圾收集方式，因此闭包在IE中会导致一些问题。就是内存泄漏的问题，也就是无法销毁驻留在内存中的元素。以下代码有两个知识点还没有学习到，一个是DOM，一个是事件。

function box() {

varoDiv = document.getElementById('oDiv'); //oDiv用完之后一直驻留在内存

oDiv.οnclick= function () {

alert(oDiv.innerHTML); //这里用oDiv导致内存泄漏

};

}

box();

那么在最后应该将oDiv解除引用来避免内存泄漏。

function box() {

varoDiv = document.getElementById('oDiv');

var text =oDiv.innerHTML;

oDiv.οnclick= function () {

alert(text);

};

oDiv = null; //解除引用

}

PS：如果并没有使用解除引用，那么需要等到浏览器关闭才得以释放。

模仿块级作用域

JavaScript没有块级作用域的概念。

function box(count) {

for(var i=0; i<count; i++) {}

alert(i); //i不会因为离开了for块就失效

}

box(2);

function box(count) {

for(var i=0; i<count; i++) {}

vari; //就算重新声明，也不会前面的值

alert(i);

}

box(2);

以上两个例子，说明JavaScript没有块级语句的作用域，if () {} for () {}等没有作用域，如果有，出了这个范围i就应该被销毁了。就算重新声明同一个变量也不会改变它的值。

JavaScript不会提醒你是否多次声明了同一个变量；遇到这种情况，它只会对后续的声明视而不见(如果初始化了，当然还会执行的)。使用模仿块级作用域可避免这个问题。

//模仿块级作用域(私有作用域)

(function () {

//这里是块级作用域

})();

//使用块级作用域(私有作用域)改写

function box(count) {

(function() {

for (var i = 0; i<count; i++) {}

})();

alert(i); //报错，无法访问

}

box(2);

使用了块级作用域(私有作用域)后，匿名函数中定义的任何变量，都会在执行结束时被销毁。这种技术经常在全局作用域中被用在函数外部，从而限制向全局作用域中添加过多的变量和函数。一般来说，我们都应该尽可能少向全局作用域中添加变量和函数。在大型项目中，多人开发的时候，过多的全局变量和函数很容易导致命名冲突，引起灾难性的后果。如果采用块级作用域(私有作用域)，每个开发者既可以使用自己的变量，又不必担心搞乱全局作用域。

(function () {

varbox = [1,2,3,4];

alert(box); //box出来就不认识了

})();

在全局作用域中使用块级作用域可以减少闭包占用的内存问题，因为没有指向匿名函数的引用。只要函数执行完毕，就可以立即销毁其作用域链了。

私有变量

JavaScript没有私有属性的概念；所有的对象属性都是公有的。不过，却有一个私有变量的概念。任何在函数中定义的变量，都可以认为是私有变量，因为不能在函数的外部访问这些变量。

function box() {

varage = 100; //私有变量，外部无法访问

}

而通过函数内部创建一个闭包，那么闭包通过自己的作用域链也可以访问这些变量。而利用这一点，可以创建用于访问私有变量的公有方法。

function Box() {

varage = 100; //私有变量

functionrun() { //私有函数

return '运行中...';

}

this.get= function () { //对外公共的特权方法

return age + run();

};

}

var box = new Box();

alert(box.get());

可以通过构造方法传参来访问私有变量。

function Person(value) {

varuser = value; //这句其实可以省略

this.getUser= function () {

return user;

};

this.setUser= function (value) {

user = value;

};

}

但是对象的方法，在多次调用的时候，会多次创建。可以使用静态私有变量来避免这个问题。

静态私有变量

通过块级作用域(私有作用域)中定义私有变量或函数，同样可以创建对外公共的特权方法。

(function () {

varage = 100;

functionrun() {

return '运行中...';

}

Box= function () {}; //构造方法

Box.prototype.go= function () { //原型方法

return age + run();

};

})();

var box = new Box();

alert(box.go());

上面的对象声明，采用的是Box = function () {}而不是function Box(){}因为如果用后面这种，就变成私有函数了，无法在全局访问到了，所以使用了前面这种。

(function () {

varuser = '';

Person= function (value) {

user = value;

};

Person.prototype.getUser= function () {

return user;

};

Person.prototype.setUser= function (value) {

user = value;

}

})();

使用了prototype导致方法共享了，而user也就变成静态属性了。(所谓静态属性，即共享于不同对象中的属性)。

模块模式

之前采用的都是构造函数的方式来创建私有变量和特权方法。那么对象字面量方式就采用模块模式来创建。

var box = { //字面量对象，也是单例对象

age: 100, //这是公有属性，将要改成私有

run: function () { //这时公有函数，将要改成私有

return '运行中...';

};

私有化变量和函数：

var box = function () {

varage = 100;

functionrun() {

return '运行中...';

}

return{ //直接返回对象

go : function () {

returnage + run();

}

};

}();

上面的直接返回对象的例子，也可以这么写：

var box = function () {

varage = 100;

functionrun() {

return '运行中...';

}

varobj = { //创建字面量对象

go : function () {

returnage + run();

}

};

returnobj; //返回这个对象

}();

字面量的对象声明，其实在设计模式中可以看作是一种单例模式，所谓单例模式，就是永远保持对象的一个实例。

增强的模块模式，这种模式适合返回自定义对象，也就是构造函数。

function Desk() {};

var box = function () {

varage = 100;

functionrun() {

return '运行中...';

}

vardesk = new Desk(); //可以实例化特定的对象

desk.go= function () {

return age + run();

};

returndesk;

}();

alert(box.go());

=====================================

#垃圾回收机制

JavaScript具有自动垃圾收集机制，也就是说，执行环境会负责管理代码执行过程中使用的内存。其他语言比如C和C++，必须手工跟踪内存使用情况，适时的释放，否则会造成很多问题。而JavaScript则不需要这样，它会自行管理内存分配及无用内存的回收。

JavaScript最常用的垃圾收集方式是标记清除。垃圾收集器会在运行的时候给存储在内存中的变量加上标记。然后，它会去掉环境中正在使用变量的标记，而没有被去掉标记的变量将被视为准备删除的变量。最后，垃圾收集器完成内存清理工作，销毁那些带标记的值并回收他们所占用的内存空间。

垃圾收集器是周期性运行的，这样会导致整个程序的性能问题。比如IE7以前的版本，它的垃圾收集器是根据内存分配量运行的，比如256个变量就开始运行垃圾收集器，这样，就不得不频繁地运行，从而降低的性能。

一般来说，确保占用最少的内存可以让页面获得更好的性能。那么优化内存的最佳方案，就是一旦数据不再有用，那么将其设置为null来释放引用，这个做法叫做解除引用。这一做法适用于大多数全局变量和全局对象。

var a = {

name : 'Lee'

};

a = null; //解除对象引用，等待垃圾收集器回收

==================================

#location对象

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

location.hostname 返回 web 主机的域名

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

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

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

Location.href：返回当前页面的url信息:【可以获取url信息，也可以给其赋值，实现跳转页面】

例子： window.location.href ="http://www.baidu.com";

Location.assign（）加载新的文档【跳转页面】

Location.reload()重新加载当前的文档【刷新】

Location.replace():用新的文档替换当前的文档【跳转】

Location.assign和locaiton.reolace的区别：

Location.asssign：会产生历史记录

Location.replace：不会产生历史记录

<input type="button" id="btn1" value="跳转" οnclick="change()">
<input type="button" value="关闭" οnclick="stops()">
<script>
  function change(){
     a=window.open('http://www.baidu.com','_blank','width=400,height=200,top=100px left=0 menubar=yes toolbar=yes,status=no,scrollbars=yes');
  }
//—blank：窗口打开方式
//width:窗口宽度
//height：窗口高度
//top：窗口离顶端距离
//left：窗口离左边距离
//menubar：窗口有没有菜单栏
//toolbar：窗口有没有工具条
//status：窗口有没有状态栏
//scrollbars：窗口有没有滚动条

 function stops(){
    a.close();    //window.close：关闭窗口
}
</script>

==================

================

实现页面自动跳转

账号注册成功，页面会在<span id="d1">5</span>秒后自动跳转到首页

================

===================

#history 历史对象

History.length:获取浏览过的url数量

History.back（）返回历史记录的前一个页面与在浏览器点击后退按钮相同在页面上创建后退按钮：

History.Forward：加载历史记录中的下一个页面与在浏览器中点击按钮向前相同在页面上创建一个向前的按钮：

History.go（n）跳转到历史记录中指定的页面，如果是-1实际上就是history.back的功能

=================

=================

========================

#盒子模型

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。
对于Internet Explorer、Chrome、Firefox、Opera以及Safari：
  
  window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：
  
  document.documentElement.clientHeight
document.documentElement.clientWidth
或者
  
  document.body.clientHeight
document.body.clientWidth
实用的 JavaScript 方案（涵盖所有浏览器）：
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
JavaScript Window Screen包含有关用户屏幕的信息
screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。
   screen.availWidth - 可用的屏幕宽度
   screen.availHeight - 可用的屏幕高度

 <p id="p1" style="width:500px;margin:0 auto;height:30px;border:1px solid red;">fsdfsdfsdf</p>
    <script>
       /* alert(window.screen.width);  //获取屏幕分辨率的宽
        alert(window.screen.height);  //获取屏幕分辨率的高*/


        //  alert(window.screen.availWidth);//可工作区域的宽(等同于屏幕分辨率)
        // alert(window.screen.availHeight);//可工作区域的高(去掉浏览器上边的工具栏)



      /*  alert(document.body.clientWidth);  //网页可见区域的宽(页面body的宽，如果没有去掉外边距需要减去外边距8*2个)
        alert(document.body.clientHeight);  //网页可见区域的高(页面body的高，body的高是由内容填充的,1.没有给元素设置高度的情况下：高是元素内容自适应的高+border*2的值。
                                             2.给元素设置了高度的情况下：高是设置后的高度+border*2的值，去掉内外边距不影响高度的值)*/


       /* var p1=document.getElementById("p1");
        alert(p1.clientWidth); //元素的宽(1.没有给元素设置宽度的情况下：块级元素独占一行，行级元素有自己的宽，如果没有去掉外边距需要减去外边距8*2个。
                                          2.给元素设置了宽度的情况下：宽是设置后的宽度 border不影响宽度的值)
        alert(p1.clientHeight);//元素的高(1.没有给元素设置高度的情况下：高是元素内容自适应的高。
                                         2.给元素设置了高度的情况下：高是设置后的高度，去掉内外边距不影响高度的值)*/


    /*    alert(document.body.offsetWidth); //网页可见区域的宽(页面body的宽，，如果没有去掉外边距需要减去外边距8*2个。
                                              2.给元素设置了宽度的情况下：宽度任然是页面body的宽)
        alert(document.body.offsetHeight);//网页可见区域的高(页面body的高 1.没有给元素设置高度的情况下：body的高是元素内容自适应的高。
                                              2.给元素设置了高度的情况下：高是所有内容设置后的高度相加再加上border*2的值,去掉内外边距不影响高度的值)*/



      /*  var p1=document.getElementById("p1");
        alert(p1.offsetWidth); //元素的宽(1.没有给元素设置宽度的情况下：块级元素独占一行，行级元素有自己的宽，如果没有去掉外边距需要减去外边距8*2个。
                                          2.给元素设置了宽度的情况下：宽是设置后的宽度加上border*2的值)
        alert(p1.offsetHeight);//元素的高(1.没有给元素设置高度的情况下：高是元素内容自适应的高。
                                         2.给元素设置了高度的情况下：高是设置后的高度加上border*2的值，去掉内外边距不影响高度的值)*/

        offsetTop:对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。

       
         /*  var p1=document.getElementById("p1");
        alert(p1.offsetLeft);   //元素的左边 距离 屏幕左边的宽(元素居中后的算法：屏幕分辨率的宽1440-元素的宽-元素左右border的值再除以2)*/

        //网页被卷去的高：document.元素.scrollTop
        //网页被卷去的左：document.元素.scrollLeft

       
               scrollLeft:对象左边界与窗口最左端之间的距离

       scrollTop:对象最顶端与窗口最顶端之间的距离


 </script>


  #正则表达式
   
假设用户需要在HTML表单中填写姓名、地址、出生日期等。那么在将表单提交到服务器进一步处理前，JavaScript程序会检查表单以确认用户确实输入了信息并且这些信息是符合要求的。
正则表达式主要用来验证客户端的输入数据。用户填写完表单单击按钮之后，表单就会被发送到服务器，在服务器端通常会用PHP、ASP.NET等服务器脚本对其进行进一步处理。因为客户端验证，可以节约大量的服务器端的系统资源，并且提供更好的用户体验。
 
一．创建正则表达式
创建正则表达式和创建字符串类似，创建正则表达式提供了两种方法，一种是采用new运算符，另一个是采用字面量方式。
 
1.第一种创建方式
var box = new RegExp('box');                            //第一个参数字符串
var box = new RegExp('box', 'ig');                      //第二个参数可选模式修饰符
 
模式修饰符的可选参数

 
 

  
  
参  数

含  义

i

忽略大小写

g

全局匹配

m

多行匹配


 
 
 2.第二种创建方式
var box = /box/;                                               //直接用两个反斜杠
var box = /box/ig;                                            //在第二个斜杠后面加上模式修饰符
 
 
 
 
注意：当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠 \）。比如，以下是等价的：
var re = new RegExp("\\w+");
var re = /\w+/;
<script>
var str = 'runoob';
var patt1 = new RegExp('\\w', 'g');//有转义作为正则表达式处理
var patt2 = new RegExp('\w','g');  //无转义作为字符串处理
var patt3 =/\w+/g;  //与patt1效果相同
document.write(patt1.test(str)) //输出true
document.write("<br>")
document.write(patt2.test(str)) //输出false
document.write("<br>")
document.write(patt3.test(str))//输出true
</script>
二.测试正则表达式
RegExp对象包含两个方法：test()和exec()，功能基本相似，用于测试字符串匹配。test()方法在字符串中查找是否存在指定的正则表达式并返回布尔值，如果存在则返回true，不存在则返回false。exec()方法也用于在字符串中查找指定正则表达式，如果exec()方法执行成功，则返回包含该查找字符串的相关信息数组。如果执行失败，则返回null。
 
RegExp对象的方法

 
 

  
  
方  法

功  能

test

在字符串中测试模式匹配，返回true或false

exec

在字符串中执行匹配搜索，返回结果数组


 
 
 
/*第一种：使用new运算符的test方法示例*/
var pattern = new RegExp('box', 'i');                   //创建正则模式，不区分大小写 
var str = 'This is a Box!';                                         //创建要比对的字符串
alert(pattern.test(str));                         
              //通过test()方法验证是否匹配
 
/*第二种：使用字面量方式的test方法示例*/
var pattern = /box/i;                                                 //创建正则模式，不区分大小写
var str = 'This is a Box!';
alert(pattern.test(str));
 
/*第三种：使用一条语句实现正则匹配*/
alert(/box/i.test('This is a Box!'));                       //模式和字符串替换掉了两个变量
/*使用exec返回匹配数组*/
var pattern = /box/i;
var str = 'This is a Box!';
alert(pattern.exec(str));                                     //匹配了返回数组，否则返回null
 
PS：exec方法还有其他具体应用，我们在获取控制学完后再看。
 
三。使用字符串的正则表达式方法
除了test()和exec()方法，String对象也提供了4个使用正则表达式的方法。
 
String对象中的正则表达式方法

 
 

  
  
方  法

含  义

match(pattern)

返回pattern中的子串或null，返回一个数组

replace(pattern, replacement)

用replacement替换pattern

search(pattern)

返回字符串中pattern开始位置 ，查找到返回位置，否则返回-1

split(pattern)

返回按指定pattern拆分的数组


 
 
 
/*第一种：使用match方法获取获取匹配数组*/
var pattern = /box/ig;                                       //全局搜索
var str = 'This is a Box!，That is a Box too';
alert(str.match(pattern));                                         //匹配到两个Box,Box      
alert(str.match(pattern).length);                         //获取数组的长度
 
/*第二种：使用search来查找匹配数据*/
var pattern = /box/ig;
var str = 'This is a Box!，That is a Box too';
alert(str.search(pattern));                                         //查找到返回位置，否则返回-1
 
PS：因为search方法查找到即返回，也就是说无需g全局
 
/*使用replace替换匹配到的数据*/
var pattern = /box/ig;
var str = 'This is a Box!，That is a Box too';
alert(str.replace(pattern, 'Tom'));                        //将Box替换成了Tom
 
/*使用split拆分成字符串数组*/
var pattern = / /ig;
var str = 'This is a Box!，That is a Box too';
alert(str.split(pattern));                                     //将空格拆开分组成数组
 
RegExp对象的静态属性

 
 

  
  
属  性

短  名

含  义 

input

$_

当前被匹配的字符串

lastMatch

$&

最后一个匹配字符串

lastParen

$+

最后一对圆括号内的匹配子串

leftContext

$`

最后一次匹配前的子串

multiline

$*

用于指定是否所有的表达式都用于多行的布尔值

rightContext

$'

在上次匹配之后的子串


 
 
 
/*使用静态属性*/
var pattern = /(g)oogle/;
var str = 'This is google！';
pattern.test(str);                                               //执行一下
alert(RegExp.input);                                         //Thisis google！
alert(RegExp.leftContext);                                //Thisis
alert(RegExp.rightContext);                              //！
alert(RegExp.lastMatch);                                   //google
alert(RegExp.lastParen);                                          //g
alert(RegExp.multiline);                                          //false
 
PS：Opera不支持input、lastMatch、lastParen和multiline属性。IE不支持multiline属性。
所有的属性可以使用短名来操作
RegExp.input可以改写成RegExp['$_']，依次类推。但RegExp.input比较特殊，它还可以写成RegExp.$_。
RegExp对象的实例属性

 
 

  
  
属  性

含  义

global

Boolean值，表示g是否已设置

ignoreCase

Boolean值，表示i是否已设置

lastIndex

整数，代表下次匹配将从哪里字符位置开始

multiline

Boolean值，表示m是否已设置

Source

正则表达式的源字符串形式


 
 
 
/*使用实例属性*/
var pattern = /google/ig;
alert(pattern.global);                                         //true，是否全局了
alert(pattern.ignoreCase);                                  //true，是否忽略大小写
alert(pattern.multiline);                                     //false，是否支持换行
alert(pattern.lastIndex);                                     //0，下次的匹配位置
alert(pattern.source);                                         //google，正则表达式的源字符串
 
var pattern = /google/g;
var str = 'google google google';
pattern.test(str);                                              //google，匹配第一次
alert(pattern.lastIndex);                                     //6，第二次匹配的位
 
PS：以上基本没什么用。并且lastIndex在获取下次匹配位置上IE和其他浏览器有偏差，主要表现在非全局匹配上。lastIndex还支持手动设置，直接赋值操作。
 
四．获取控制
正则表达式元字符是包含特殊含义的字符。它们有一些特殊功能，可以控制匹配模式的方式。反斜杠后的元字符将失去其特殊含义。
字符类：单个字符和数字

 
 

  
  
元字符/元符号

匹配情况

.

匹配除换行符外的任意字符

[a-z0-9]

匹配括号中的字符集中的任意字符

[^a-z0-9]

匹配任意不在括号中的字符集中的字符

\d

匹配数字

\D

匹配非数字，同[^0-9]相同

\w

匹配字母和数字及_

\W

匹配非字母和数字及_


 
 
 
字符类：空白字符

 
 

  
  
元字符/元符号

匹配情况

\0

匹配null字符

\b

匹配空格字符 到达边界

\f

匹配进纸字符

\n

匹配换行符

\r

匹配回车字符

\t

匹配制表符

\s

匹配空白字符、空格、制表符和换行符

\S

匹配非空白字符


 
 
 
字符类：锚字符

 
 

  
  
元字符/元符号

匹配情况

^

行首匹配

$

行尾匹配

\A

只有匹配字符串开始处

\b

匹配单词边界，词在[]内时无效

\B

匹配非单词边界

\G

匹配当前搜索的开始位置

\Z

匹配字符串结束处或行尾

\z

只匹配字符串结束处


 
 
 
字符类：重复字符

 
 

  
  
元字符/元符号

匹配情况

x?

匹配0个或1个x

x*

匹配0个或任意多个x

x+

匹配至少一个x

(xyz)+

匹配至少一个(xyz)

x{m,n}

匹配最少m个、最多n个x


 
 
 
字符类：替代字符

 
 

  
  
元字符/元符号

匹配情况

this|where|logo

匹配this或where或logo中任意一个


 
 
 
 
字符类：记录字符

 
 

  
  
元字符/元符号

匹配情况

(string)

用于反向引用的分组

\1或$1

匹配第一个分组中的内容

\2或$2

匹配第二个分组中的内容

\3或$3

匹配第三个分组中的内容


 
 
 
/*使用点元字符*/
var pattern = /g..gle/;                                      //.匹配一个任意字符
var str = 'google';
alert(pattern.test(str));
 
/*重复匹配*/
var pattern = /g.*gle/;                                      //.匹配0个一个或多个
var str = 'google';                                             //*,?,+,{n,m}
alert(pattern.test(str));
 
/*使用字符类匹配*/
var pattern = /g[a-zA-Z_]*gle/;                         //[a-z]*表示任意个a-z中的字符
var str = 'google';
alert(pattern.test(str));
 
var pattern = /g[^0-9]*gle/;                              //[^0-9]*表示任意个非0-9的字符
var str = 'google';
alert(pattern.test(str));
 
var pattern = /[a-z][A-Z]+/;                              //[A-Z]+表示A-Z一次或多次
var str = 'gOOGLE';
alert(pattern.test(str));
 
/*使用元符号匹配*/
var pattern = /g\w*gle/;                                    //\w*匹配任意多个所有字母数字_
var str = 'google';
alert(pattern.test(str));
 
var pattern = /google\d*/;      
                            //\d*匹配任意多个数字                     
var str = 'google444';
alert(pattern.test(str));
 
       var pattern = /\D{7,}/;                                    //\D{7,}匹配至少7个非数字     
       var str = 'google8';
       alert(pattern.test(str));
 
/*使用锚元字符匹配*/
var pattern = /^google$/;                                        //^从开头匹配，$从结尾开始匹配
var str = 'google';
alert(pattern.test(str));
 
       var pattern =/goo\sgle/;                                   //\s可以匹配到空格            
       var str = 'google';
       alert(pattern.test(str));
 
       var pattern =/google\b/;                                   //\b可以匹配是否到了边界              
       var str ='google';
       alert(pattern.test(str));
 
/*使用或模式匹配*/
var pattern = /google|baidu|bing/;                      //匹配三种其中一种字符串
var str = 'google';
alert(pattern.test(str));
 
/*使用分组模式匹配*/
var pattern = /(google){4,8}/;       
                            //匹配分组里的字符串4-8次            
var str = 'googlegoogle';
alert(pattern.test(str));
 
var pattern= /8(.*)8/;                                     //获取8..8之间的任意字符
var str ='This is 8google8';
str.match(pattern);                                          //必须执行以下
alert(RegExp.$1);                                           //得到第一个分组里的字符串内容
 
var pattern= /8(.*)8/;   
var str ='This is 8google8';
var result =str.replace(pattern,'<strong>$1</strong>');             //得到替换的字符串输出
document.write(result);                                   
 
var pattern= /(.*)\s(.*)/;
var str ='google baidu';
var result =str.replace(pattern, '$2 $1');                    //将两个分组的值替换输出
document.write(result);                            
 

 
 

  
  
贪  婪

惰 性

+

+?

?

??

*

*?

{n}

{n}?

{n,}

{n,}?

{n,m}

{n,m}?


 
 
 
 
/*关于贪婪和惰性*/
var pattern = /[a-z]+?/;                                    //惰 性，只替换了第一个字符，如果再加全局g会全部替换
var str = 'abcdefjhijklmnopqrstuvwxyz';
var result = str.replace(pattern, 'xxx');
alert(result);
 
var pattern = /8(.+?)8/g;                                   //禁止了贪婪，开启的全局
var str = 'This is 
8google8, That is 8google8, There is 8google8';
var result =str.replace(pattern,'<strong>$1</strong>');
document.write(result);  
 
var pattern = /8([^8]*)8/g;                               //另一种禁止贪婪 不要前后的8
var str = 'This is 8google8, That is 8google8, There is 8google8';
var result = str.replace(pattern,'<strong>$1</strong>');
document.write(result);  
 
/*使用exec返回数组*/
var pattern = /^[a-z]+\s[0-9]{4}$/i;
var str = 'google 2012';
alert(pattern.exec(str));                                    //返回整个字符串
 
var pattern = /^[a-z]+/i;                                   //只匹配字母
var str = 'google 2012';
alert(pattern.exec(str));                                    //返回google
 
var pattern= /^([a-z]+)\s([0-9]{4})$/i;             //使用分组
var str ='google 2012';
alert(pattern.exec(str)[0]);                               //google2012
alert(pattern.exec(str)[1]);                               //google
alert(pattern.exec(str)[2]);                               //2012
 
/*捕获性分组和非捕获性分组*/
var pattern= /(\d+)([a-z])/;                             //捕获性分组
var str ='123abc';
alert(pattern.exec(str));
 
var pattern = /(\d+)(?:[a-z])/;                           //非捕获性分组在不需要捕获的分组上加上？：
var str = '123abc';
alert(pattern.exec(str));
 
/*使用分组嵌套*/
var pattern = /(A?(B?(C?)))/;                            //从外往内获取用（）嵌套
var str = 'ABC';
alert(pattern.exec(str));
 
/*使用前瞻捕获*/
var pattern = /(goo(?=gle))/;                             //goo后面必须跟着gle才能捕获
var str = 'google';
alert(pattern.exec(str));
 
 
/*使用特殊字符匹配*/
var pattern = /\.\[\/b\]/;                                      //特殊字符，用\符号转义即可
var str = '.[/b]';
alert(pattern.test(str));
 
/*使用换行模式*/
var pattern = /^\d+/mg;                                    //启用了换行模式
var str = '1.baidu\n2.google\n3.bing';
var result = str.replace(pattern, '#');
alert(result);
 
四．常用的正则
 
1.检查邮政编码
var pattern = /[1-9][0-9]{5}/;                                  //共6位数字，第一位不能为0
var str = '224000';
alert(pattern.test(str));
 
2.检查文件压缩包
var pattern = /^[\w]+\.(zip|rar|gz)/;                           //\w表示所有数字和字母加下划线
var str = '123.zip';                                           //\.表示匹配.，后面是一个选择
alert(pattern.test(str));
 
3.删除多余空格
var pattern = /\s/g;                                          //g必须全局，才能全部匹配
var str = '111 222 333';
var result = str.replace(pattern,'');                     //把空格替换成无空格
alert(result);
 
4.删除首尾空格
var pattern = /^\s+/;                                               //强制首
var str = '          goo gle   
         ';
var result = str.replace(pattern, '');
pattern = /\s+$/;                                             //强制尾
result = result.replace(pattern, '');
alert('|' + result + '|');
 
var pattern = /^\s*(.+?)\s*$/;                           //使用了非贪婪捕获
var str = '            google          ';
alert('|' + pattern.exec(str)[1] + '|');
 
var pattern = /^\s*(.+?)\s*$/; 

var str = '            google          ';
alert('|' + str.replace(pattern, '$1') + '|');               //使用了分组获取
 
5.简单的电子邮件验证
var pattern =/^([a-zA-Z0-9_\.\-]+)@([a-zA-Z0-9_\.\-]+)\.([a-zA-Z]{2,4})$/;
var str = 'yc60.com@gmail.com';
alert(pattern.test(str));
 
var pattern = /^([\w\.\-]+)@([\w\.\-]+)\.([\w]{2,4})$/;
var str = 'yc60.com@gmail.com';
alert(pattern.test(str));


  【正则表达式：是数据的一种结构】
       【创建正则表达式】
         ① var preg = /^[a-z]{10}$/ig;
         ② var preg = newRegExp(/^[a-zA-Z]{10}$/,'ig');
       【正则表达式模式】
         i 不区分大小写
         g 全局匹配
        
       【正则表达式的功能】
          ①test()测试字符串的某个模式。例如，可以对一个输入字符串进行测试，看在该字符串是否存在一个电话号码模式或一个信用卡号码模式。这称为数据有效性验证。
             【语法：】正则表达式.test(字符串) 如果存在则返回 true，否则就返回 false。
        ②replace()替换文本。可以在文档中使用一个正则表达式来标识特定文字，然后可以全部将其删除，或者替换为别的文字。
             【语法：】替换前的字符串.replace(正则表达式,'替换后的字符串')返回值是一个新的字符串，不会对原子符串修改
        ③match()根据模式匹配从字符串中提取一个子字符串。可以用来在文本或输入字段中查找特定文字。
             【语法：】原字符串.match(正则表达式); 返回一个数组对象。如果没有查找到返回一个null
             
         var all = ['枪支','fuckyou','ooxx','犯罪','暴力'];
            var str = all.join("|");
            var preg = new RegExp(str,'g');
            var result = preg.match(article);
            if(result.length > 0 &&result.length<=3){
              document.write("警告");
            }else if(result.length > 3 &&result.length<=10){
              document.write("黄色预警");
            }else if(result.length > 10){
              document.write("红色预警");
            }
 
     【正则表达式定位：】
       定界：/正则表达式/
       开始: ^ 表示正则表达式的开始 如：/^正则表达式/ /^abc/ 必须以a开头
       结束：$ 表示正则表达式的结束 如：/^a$/
 
     【正则表达式的限定符】
            最少    最多
       *      0     多
       +      1     多
       ?      0     1
      {4}   前面的字符或原子匹配4次
        {4,}  表示前面的字符或原子至少4次
        {4,11} 4      11 表示前面的字符或原子匹配至少4次，最多11次。
     【正则表达式的通配符：】
          . 表示任意字符
           
       【字符集合】
         [0-9] 数字集合
         [a-z] 小写字母集合
         [A-Z] 大写字母结合
         [^0-9] 非数字集合
         [^a-z] 非小写字母集合
         [^A-Z] 非大写字母结合
         [^a-zA-Z] 非字母集合
         \w 相当于 [a-zA-Z0-9_]
         \W 相当于 [^a-zA-Z0-9_]
         \d 相当于 [0-9]
         \D 相当于 [^0-9]
 
       【表示一个原子】
         () 在小括号中的内容是一个原子
     
       【转义】
         \
       【或者：】
         表达式1 | 表达式2 ：
         
         从这两个表达式中任意匹配一种情况
         
       【常用的正则表达式】
       //qq正则表达式：[a-zA-Z0-9_]{3,18}@(QQ|qq)\.(com|COM)
       //新浪正则表达式：[a-zA-Z0-9_]{4,16}@sina\.(com|cn|COM|CN)
       //163正则表达式：[a-zA-Z0-9_]{6,18}@163\.(com|COM)
       //电话号码 /^1[1-9][0-9]{9}$/
      【汉字】
          [\u4E00-\u9FA5 ]表示所有的汉字

如果正则表达式定义错误就会进入else判断
search()方法:检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
使用正则表达式搜索 "w3cschool"字符串:    
var str = "Visitw3cschool";
var n = str.search(/w3cschool/i);
    
search()方法使用字符串
var str = "Visitw3cschool!";
var n =str.search("w3cschool"); 
 
replace()方法使用正则表达式:用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
使用正则表达式且不区分大小写将字符串中的Microsoft替换为w3cschool :
var str= "Visit Microsoft!";
var res = str.replace(/microsoft/i,"w3cschool"); 

 
使用字符串
var str = "VisitMicrosoft!";     
var res =str.replace("Microsoft", "w3cschool");   
查找替换
 
test()方法：
第二种不用设置正则表达式的变量
/e/.test("The best things inlife are free!") 

 
exec()方法：用于检索字符串中的正则表达式的匹配。该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为null。
/e/.exec("The best things inlife are free!");
 new RegExp关键字方法
var patt1=new RegExp("e");
document.write(patt1.exec("Thebest things in life are free"));

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>正则表达式</title>
</head>
<body>
    用户名：<input type="text" name="uesr" id="user" οnblur="check()" >
     数字：<input type="text" name="password" id="pwd" οnblur="checkpwd()" >
    <script>
   /*     var user=document.getElementById("user");
        function check(){
            var reguser=/^a/;
            if(reguser.test(user.value)){
                alert("正确");  //以a开头正确
            }else{
                alert("错误");
            }
        }

              var reguser=/^ab/;
            if(reguser.test(user.value)){
                alert("正确");  //以ab开头正确！！！
            }else{
                alert("错误");
            }
        }

                var reguser=/a/;
            if(reguser.test(user.value)){
                alert("正确");  //内容里面只要有a就正确
            }else{
                alert("错误");
            }
        }

                var reguser=/ab$/;
            if(reguser.test(user.value)){
                alert("正确");  //以ab结尾正确 ！！
            }else{
                alert("错误");
            }
        }*/
        var pwd=document.getElementById("pwd");
        function checkpwd(){
          /*  var regpwd=/[0-9]/;  //[a-z] [A-Z]
            if(regpwd.test(pwd.value)){
                alert("正确");  //内容包含0-9就正确
            }else{
                alert("错误");
            }*/

         /*   var regpwd=/[a-z]/i;   //[a-z] [A-Z]
            if(regpwd.test(pwd.value)){
                alert("正确");  //加上i后不区分大小写
            }else{
                alert("错误");
            }*/

      /*         var regpwd=/[^0-9]/;
            if(regpwd.test(pwd.value)){
                alert("正确");  //前面加上^表示非 ，因为没有开始和结束 表示除了纯数字的 其他的都正确
            }else{
                alert("错误");
            }*/

        /*    var regpwd=/^[^0-9]/;   //[a-z] [A-Z]
            if(regpwd.test(pwd.value)){
                alert("正确");  //前面加上^表示非 ，不能以数字开头 其他的都正确
            }else{
                alert("错误");
            }*/

        /*       var regpwd=/[^a-z]/;
            if(regpwd.test(pwd.value)){
                alert("正确");  //前面加上^表示非 ，因为没有开始和结束 表示除了纯字母的 其他的都正确
            }else{
                alert("错误");
            }*/

        /*    var regpwd=/[\w]/;
            if(regpwd.test(pwd.value)){
                alert("正确");  //只要包含了数字字母和下划线的都正确
            }else{
                alert("错误");
            }*/

           /*     var regpwd=/\W/;  //相当于 [^a-zA-Z0-9_]
            if(regpwd.test(pwd.value)){
                alert("正确");  //除了数字字母下划线的其他的都正确
            }else{
                alert("错误");
            }*/
         /*      var regpwd=/\d/;  //相当于 [0-9]
            if(regpwd.test(pwd.value)){
                alert("正确");  //因为没有开始和结束 表示内容包含0-9就正确
            }else{
                alert("错误");
            }*/

         /*     var regpwd=/\D/;  //相当于 [^0-9]
            if(regpwd.test(pwd.value)){
                alert("正确");  //除了数字以外的其他的都可以
            }else{
                alert("错误");
            }*/
        }


    </script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>正则表达式2</title>
</head>
<body>
    用户名：<input type="text" name="user" id="user" οnblur="check()"/>
    数字：<input type="text" name="number" id="number" οnblur="checknum()"/>
     手机号：<input type="text" name="tel" id="tel" οnblur="checktel()"/>
     qq邮箱：<input type="text" name="qqemail" id="qqemail" οnblur="checkqq()"/>
    <script>
        /*
     var user=document.getElementById("user");
        function check(){
        /*    var reguser=/^ab{3}/; // 以a开始 因为没有结束 b出现3次以上 都正确
            if(reguser.test(user.value)){
                alert("正确");
            }else{
                alert("错误");
            }*/

        /*    var reguser=/^ab{3}$/; // 以a开始  b以3次结束 正确
            //如果b结束出现3次以上则不正确 中间有别的内容也不正确
            if(reguser.test(user.value)){
                alert("正确");
            }else{
                alert("错误");
            }*/

       /*     var reguser=/^ab{3,}$/; // 以a开始  b以3次或以上结束 正确
            //中间有别的内容不正确
            if(reguser.test(user.value)){
                alert("正确");
            }else{
                alert("错误");
            }*/

        /*        var reguser=/^ab{3,8}$/; // 以a开始  b以3次到8次结束 正确
            //中间有别的内容不正确
            if(reguser.test(user.value)){
                alert("正确");
            }else{
                alert("错误");
            }*/

       /*         var reguser=/^ab?$/; // 以a开始 b以0次到1次结束 正确
            //中间有别的内容不正确
            if(reguser.test(user.value)){
                alert("正确");
            }else{
                alert("错误");
            }*/

       /*     var reguser=/^a3?b$/; // 以a开始 b结束 中间的3 出现0次或1次 正确
            //中间有别的内容不正确
            if(reguser.test(user.value)){
                alert("正确");
            }else{
                alert("错误");
            }*/

       /*     var reguser=/^a3+b$/; // 以a开始 b结束 3出现1次到n次 正确
            //中间有别的内容不正确
            if(reguser.test(user.value)){
                alert("正确");
            }else{
                alert("错误");
            }*/

       /*     var reguser=/^a3*b$/; // 以a开始 b结束 3出不出现都没有影响  正确
            //中间有别的内容不正确
            if(reguser.test(user.value)){
                alert("正确");
            }else{
                alert("错误");
            }*/

          /*  var reguser=/^a.b$/; // 以a开始 b结束 中间必须只有一个任意字符 正确
            if(reguser.test(user.value)){
                alert("正确");
            }else{
                alert("错误");
            }*/

        /*    var reguser=/^(ab)$/; // 以ab开始 以ab结束 正确 ab只能出现于一次 现在ab是一个整体
            //中间有别的内容不正确
            if(reguser.test(user.value)){
                alert("正确");
            }else{
                alert("错误");
            }*/

       /*     var reguser=/^(a|b)$/; // 以a或者b开始 以a或者b结束 a b只能出现一次 正确
            //中间有别的内容不正确
            if(reguser.test(user.value)){
                alert("正确");
            }else{
                alert("错误");
            }*/

      /*      var reguser=/^a\.b$/; // 以a开始 b结束 中间是个点 正确
            //中间有别的内容不正确
            if(reguser.test(user.value)){
                alert("正确");
            }else{
                alert("错误");
         }   }*/
    /*     var tel=document.getElementById("tel");
         function checktel(){
              var regtel=/^1(1|3|5|7|8)[0-9]{9}$/;
            if(regtel.test(tel.value)){
                alert("正确");
            }else{
                alert("错误");
         }
         }*/
          var qqemail=document.getElementById("qqemail");
         function checktel(){
              var regqqemail=/^[1-9a-zA-Z]{5,11}[0-9a-zA-Z_]{5,11}@(qq|QQ)\.(com|COM)$/;
            if(regqqemail.test(qqemail.value)){
                alert("正确");
            }else{
                alert("错误");
         }
    </script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>正则表达式-综合验证</title>
</head>
<body>
    <table border="1" align="center" width="700" height="300">
        <tr>
            <td>用户名：</td>
            <td><input type="text" name="user" id="user"><span id="userMes">*</span></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" name="pwd" id="pwd"><span id="pwdMes">*</span></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" name="repwd" id="repwd"><span id="repwdMes"></span></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" >男
                <input type="radio" name="sex" >女
            </td>
        </tr>
        <tr>
            <td>出生年月日：</td>
            <td>
                <select>
                    <option value="">1991</option>
                    <option value="">1992</option>
                    <option value="">1993</option>
                    <option value="">1994</option>
                </select>年
                    <select>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                    <option value="">4</option>
                </select>月    <select>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                    <option value="">4</option>
                </select>日
            </td>
        </tr>
         <tr>
            <td>电话号码：</td>
            <td><input type="text" name="tel" id="tel"><span id="telMes"></span></td>
        </tr>
          <tr>
            <td>邮箱地址：</td>
            <td><input type="text" name="email" id="email"><span id="emailMes"></span></td>
        </tr>
          <tr>
            <td>家庭地址：</td>
            <td><input type="text" name="address" id="address"><span id="addressMes"></span></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="button" value="提交" οnclick="check()"><span></span></td>  <!-- 这里不能用submit提交 只能用普通按钮提交 提交时链接到提交的页面 -->
        </tr>
    </table>
    <script>

        function check(){
            var user=document.getElementById("user");
            var userMes=document.getElementById("userMes");
         if(user.value==null||user.value==""){
               userMes.innerHTML="请输入用户名";
            }else{
                var reguser=/^\w{3,18}$/;  //如果正则表达式定义错误就会直接进入else判断
                if(reguser.test(user.value)){
                    userMes.innerHTML="√";
                    var pwd=document.getElementById("pwd");
                    var pwdMes=document.getElementById("pwdMes");
                    if(pwd.value==null||pwd.value==""){
                        pwdMes.innerHTML="密码不能为空";
                    }else{
                        var regpwd=/^.{3,18}$/;
                        if(regpwd.test(pwd.value)){
                            pwdMes.innerHTML="√";
                            var repwd=document.getElementById("repwd");
                            var repwdMes=document.getElementById("repwdMes");
                            if(repwd.value==null||repwd.value==""){
                                repwdMes.innerHTML="请再次输入密码";
                            }else if(repwd.value==pwd.value){
                                repwdMes.innerHTML="√";
                                var tel=document.getElementById("tel");
                                var telMes=document.getElementById("telMes");
                                if(tel.value!=""){
                                    var regtel=/^1(3|5|7|8)[0-9]{9}$/;
                                    if(regtel.test(tel.value)){
                                        telMes.innerHTML="√";
                                        var email=document.getElementById("email");
                                        var emailMes=document.getElementById("emailMes");
                                         if(email.value!=""){
                                            var regemail=/^[1-9][0-9]{4,10}@(qq|QQ)\.(com|)$/;
                                            if(regemail.test(email.value)){
                                            emailMes.innerHTML="√";
                                            var address=document.getElementById("address");
                                            var addressMes=document.getElementById("addressMes");
                                            if(address.value!=""){
                                                  var regaddress=/^[\u4e00-\u9fa5]{5,20}[0-9]{3,8}$/;
                                                  if(regaddress.test(address.value)){
                                                    addressMes.innerHTML="√";
                                                }else{
                                                    addressMes.innerHTML="请输入有效的家庭地址";
                                                }
                                            }
                                    }else{
                                        emailMes.innerHTML="请输入有效的邮箱地址";
                                    }
                                }
                                    }else{
                                         telMes.innerHTML="请输入有效的电话号码";
                                    }
                                }
                            }else{
                                repwdMes.innerHTML="两次输入密码不一致";
                            }
                        }else{
                            pwdMes.innerHTML="请输入3-18位的任意字符";
                        }
                    }
                }else{
                    userMes.innerHTML="用户名是3到18位的数字、字母、下划线"
                }
            }
        }
    </script>
</body>
</html>





#事件
   
鼠标事件：
         onclick:点击
         onmouseover：鼠标放上
         onmouseout：鼠标离开
         ondblclick：双击事件
         onmousedown：鼠标按下
         onmouseup：鼠标抬起
         onmousemove：鼠标移动
表单事件：
         Onfocus：获得焦点
         Onblur：失去焦点：
         Onsubmit：提交事件
         Onchange：当发生改变的时候
         Onreset：重置事件
键盘事件：
         Onkeyup：键盘抬起
         Onkeydown：键盘按下
         Onkyepress：键盘按键一次
窗口事件：onload事件
         页面加载完成之后立刻执行的事件
         两种方式：
                   1，<script>window.οnlοad=init; </script>
                   2，<bodyοnlοad=”init()”></body>
=================
    <script type="text/javascript">

        window.οnlοad=init;

        function init(){

            window.open("http://www.baidu.com","abcd","width=600,height=300,left=200,top=100,scrollbars=yes,toolbar=yes,location=0");

        }

        function fn(){

            window.close();

        }

    </script>
<input type="button" value="点击关闭窗口" οnclick="fn()">


===================


Event：保存事件发生时的相关的信息
   
注意两种写法
Event对象：也就是事件对象，代表一个网页对象上的事件发生时的相关信息，比如：鼠标的位置，按键的键值和键名，事件发生在谁身上（事件源）
Event.clientX鼠标的X坐标
Event.clientY鼠标的Y坐标
Event.target:表示时间发生的源头，FF语法
移动瞄准cursor
         Event：在火狐中，必须通过实际参数的形式传递给函数才可以用
  ==============================
<script >

        //window.οnlοad=init;

        function init(){

            alert("这是窗口事件");

        }

    </script>


<body οnlοad="init()">

    abcd

</body>


========================
  <script>

        function fn2(e){

            var obj = e.target;     

            alert(obj.value);

        }

    </script>
  <input type="button" id="d1" value="点击1" οnclick="fn2(event)">


===========================
    <script >

        function fn(e){

            var obj = document.getElementById("d1");

            var x = e.clientX;//获取事件发生时候的x坐标

            var y = e.clientY;//获取事件发生时候的y坐标

            obj.innerHTML="坐标"+x+","+y;

        }

    </script>
    <div id="d1" οnmοusemοve="fn(event)">

        坐标0,0

    </div>


=====================
    <script >

        function fn(){

            alert("这是onchange事件");

        }

    </script>
    <textarea οnchange="fn()">

        abcd

    </textarea>

    <select οnchange="fn()">

        <option>a</option>

        <option>b</option>

        <option>c</option>

        <option>d</option>

    </select>


========================
onload 和 onunload事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload和 onunload事件可用于处理
 cookie。
 
onchange事件 
当用户改变输入字段的内容时，会调用 upperCase()函数。
<input type="text"id="fname" οnchange="myFunction()">
function myFunction(){
      var x=document.getElementById("fname");
      x.value=x.value.toUpperCase();
}
 
onmouseover和 onmouseout事件
<div  οnmοuseοver="mOver(this)" οnmοuseοut="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">MouseOver Me</div>
 
function mOver(obj){
obj.innerHTML="ThankYou"   //用this传值
}
function mOut(obj){
obj.innerHTML="Mouse OverMe"
}
 
onmousedown、onmouseup以及
 onclick事件
onmousedown 事件，当释放鼠标按钮时，会触发onmouseup事件，最后，当完成鼠标点击时，会触发onclick事件。
 
    <div id="div1" style="width:100px;height:100px;border:1px solid red"></div>
    <script>
        function change(){
            var div1=document.getElementById("div1");
           div1.style.width="200px";
        }
        div1.οnclick=change;  //注意 div1.οnclick=change()这叫页面已加载就调用函数 不在乎是什么事件  这里的div1虽然没有在外面获取也可以使用
    </script>



============================================

#事件对象
DOM中的事件对象
1.type 事件类型

2.target  事件目标

3. target.nodeName 节点名称

4.stopPropagetion()方法  阻止事件冒泡

5.preventDefault()方法   阻止默认行为





如果一个div里面有一个button，button和div都绑定了click事件，如果是事件冒泡，那么点击button的时候，首先触发button的处理函数，然后触发div的处理函数。（由内而外）
如果有时候不想冒泡，也就是不希望div的事件被触发，那么需要阻止事件冒泡。stopPropagation()方法

如果需要阻止a标签的默认属性跳转，可以使用阻止事件的默认行为preventDefault()方法



IE8以下事件对象（window.event）

1.事件类型：event.type<br>                                     获取事件类型


2.事件目标：event.srcElement                              
获取事件目标

3.阻止事件冒泡：event.cancelBubble= true        阻止事件冒泡  这是一个属性 设置true表示阻止冒泡  flase表示允许冒泡

4.阻止默认事件：event.returnValue= false          阻止事件默认行为   默认值 true  设置为flase为阻止事件默认行为





    <div id="box">
        <div id="txt">123</div>

        <input id="btn" type="submit">

    </div>

<!-- rnturn flase有两个作用，禁止向上冒泡和禁止默认行为。
禁止向上冒泡：event.stopPropagation();

在你点击了 txt 或者 btn 后，将会触发 onclick 事件。然后会触发 txt 或 btn 的上一层，box 的 onclick 也会被触发。当你在 txt 或 btn 的函数最后加入了 return false 后，那么就不会触发 box 的 onclick 事件了。

禁止默认行为：event. preventDefault();
在你单击了 btn 后，默认是会提交表单的。当你在 btn 单机触发的函数内，如果写入 return false 的话，那么就只执行函数，不会提交表单了。

使用一次 return false，将会同时达到 event.stopPropagation() 和 event.preventDefault() 的功效。 -->












#DOM 查找与改变





查找：


通过 id查找 HTML元素
例子1=========


var x=document.getElementById("intro");
document.write("<p>文本来自id为intro段落:"
 + x.innerHTML + "</p>");
例2=======



document.getElementById("demo").innerHTML=Date();
例子3===============



<button id="myBtn">点这里</button>  //给myBtn分配了一个点击事件
 和 一个函数


<p id="demo"></p>
document.getElementById("myBtn").οnclick=function(){displayDate()};
function displayDate(){
      document.getElementById("demo").innerHTML=Date();
}
例子4=====================

<button type="button"οnclick="document.getElementById('id1').style.color='red'">
例子5=================
较传统的方式：把一个函数赋值给一个事件处理程序的属性。
 优点：简单，跨浏览器的优势
 var btn2=document.getElementById("btn2");---先获取出元素，定义对象 //取得btn2按钮对象
 btn2.οnclick=function(){alert('这是通过DOM0级添加的事件！')}----让 事件以对象的属性 的形式出现。 //给btn2添加onclick属性
 btn2.οnclick=null;-----删除onclick属性。


例子===============
    <div id="b1" style="width: 100px; height: 200px; background: red;"></div>

    <input type="button" οnclick="javascript:document.getElementById



('b1').style.background='yellow',alert('放大')" value= "放大">

    <!-- 两个标签的的事件js -->





    <div id="div1" style="width:100px;height: 200px;border:1px solid green " 



οnclick="javascript:document.getElementById



('div1').style.width='200px';div1.style.height='200px';div1.style.border='1px solid red'



"></div>



    <!-- 一个标签的事件js -->


===========================


通过标签名查找 HTML元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p"); //查找id="main"元素下的所有
 <p> 元素  返回一个数组


document.write('id="main"元素中的第一个段落为：'+ y[0].innerHTML);
//输出第一个p元素的内容
 例子2=========

  document.getElementsByTagName(“标签名”)获取的是对象的集合//相当于一个数组
  对象.getElementsByTagName(“标签名”)


通过类名找到 HTML元素
varx=document.getElementsByClassName("intro"); 

document.write("<p>文本来自class为intro段落:"
 + x[0].innerHTML + "</p>");
注意：Internet Explorer 8及更早IE版本不支持getElementsByClassName()方法。
form集合



Name：document.getElementsByName(“name名”);//数组
获取img对象


document.images;//数组
获取a连接对象


document.links;//数组
获取表单对象


document.forms;//数组
body标签对象


document.body:
HTML对象


document.documentElement:
========
<script>

        function fn(){

            var obj = document.links;

            obj[0].style.background="red";

        }

    </script>
<a href="">a</a>

    <a href="">b</a>

    <a href="">c</a>

    <input type="button" value="点击" οnclick="fn()">


===========
    <script >

        function fn(){

            var obj = document.getElementsByTagName("div");

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

                obj[i].style.background="red";

            }

        }

    </script>


改变：
HTML：    对象.HTML属性=值；
CSS:        对象.style.CSS属性=”值”


JavaScriptHTML DOM - 改变 HTML
document.getElementById(id).innerHTML=新的HTML
JavaScriptHTML DOM改变 HTML属性
document.getElementById("image").src="landscape.jpg";
JavaScriptHTML DOM - 改变CSS
document.getElementById(id).style.property=新样式
例子1 ============================


修改div样式
<script type="text/javascript">

        function fn(){

            //获取div对象

            var obj = document.getElementById("d1");

            //修改对象的属性

            obj.style.background="red";

            obj.style.fontSize="60px";

            obj.style.color="yellow";

            obj.style.border="10px solid blue";

        }

    </script>


例子2 ============================
改变图片大小：
    <script type="text/javascript">

        function fn(){

            var obj = document.getElementById("img1");

            var w = obj.width;//获取img的宽度

            obj.width = w +20;

        }

    </script>
    <img width="100" src="images/022_avatar_big.jpg" id="img1">

    <input type="button" value="点击变大" οnclick="fn()">


例子3 ============================
开关灯
    <script type="text/javascript">

        function fn1(){

            var obj = document.getElementById("d1");

            obj.src="images/bulbon.gif";

        }

        function fn2(){

            var obj = document.getElementById("d1");

            obj.src="images/bulboff.gif";

        }

    </script>

</head>

<body>

    <img src="images/bulboff.gif" id="d1" οnmοuseοver="fn1()" οnmοuseοut="fn2()">



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

        /*

            点击变关再点击就开

        */

        function fn(){

            var obj = document.getElementById("d1");

            var zhi = obj.value;

            if(zhi == "开"){

                obj.value="关";

            }else{

                obj.value="开";

            }

        }

        var i=0;

        function fn1(){

            var obj = document.getElementById("d2");

            if(i%2==0){

                obj.value="关";

            }else{

                obj.value="开";

            }

            i++;

            alert(i);

        }

        //定义一个变量，保存true或者false

        var flag=true;

        function fn2(){    

            var obj = document.getElementById("d3");

            if(flag==true){

                obj.value="关";

                flag=false;

            }else{

                obj.value="开";

                flag=true;

            }

        }

        function fn3(obj){

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

                obj.value="关";

            }else{

                obj.value="开";

            }

        }

    </script>
    <input id="d1" type="button" value="开" οnclick="fn()">

    <input type="button" id="d2" value="开" οnclick="fn1()">

    <input type="button" id="d3" value="开" οnclick="fn2()">

    <input type="button" id="d4" value="开" οnclick="fn3(this)">


例子5============================


修改div中的内容
innerHTML:对象中所有的内容（文本内容和标签内容）,指的是双标签，容器标签
innerText：对象中所有的文本内容
<script type="text/javascript">

        function fn(){

            var obj = document.getElementById("d1");

            //obj.innerHTML="new div";

            alert(obj.innerText);

        }

    </script>
    <div id="d1">

        这是div

        <p>this is段落</p>

        <a href="#">zheshi链接</a>

    </div>

    <input type="button" value="点击修改样式" οnclick="fn()">
===========================


 #this
例子1===============


<h1  οnclick="this.innerHTML='Ooops!'">点击文本!</h1>//此时的this 指当前的对象


例子2============


<h1 οnclick="changetext(this.id)"  id="h1">点击文本!</h1>  //此时的this 指当前的对象
function changetext(i){
      i.innerHTML="Ooops!";
}
 
 



#事件监听 JavaScript  HTML DOM
 EventListener



 addEventListener() 
方法用于向指定元素添加事件句柄。
                                     添加的事件句柄不会覆盖已存在的事件句柄。
                                     你可以向一个元素添加多个事件句柄。
                                     你可以向同个元素添加多个同类型的事件句柄，如：两个"click"事件。
                                      你可以向任何 DOM对象添加事件监听，不仅仅是HTML元素。如：window对象。
                                      可以更简单的控制事件（冒泡与捕获）。
                                      可读性更强，在没有控制HTML标记时也可以添加事件监听。
                                      你可以使用 removeEventListener()方法来移除事件的监听。
语法：
 element.addEventListener(事件, 函数,布尔值);
第一个参数是事件的类型 (如"click"或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
注意:不要使用"on"前缀。例如，使用"click"
 ,而不是使用 "onclick"。














事件监听引用外部函数


<button id="myBtn">点我</button>
<pid="demo"></p>
document.getElementById("myBtn").addEventListener("click",displayDate);//给myBtn分配了一个点击事件
 和 一个函数   


                                                                                 //使用事件监听时 
 分配的事件不需要加on
function displayDate() {
   document.getElementById("demo").innerHTML = Date();    //外部函数
}


事件监听不引用外部函数


<button id="myBtn">点我</button>
document.getElementById("myBtn").addEventListener("click",function(){
   alert("Hello World!");   //不引用外部函数
});


 
向同一个元素中添加多个事件
例子=======================


<button id="myBtn">点我</button>
var x =document.getElementById("myBtn");
x.addEventListener("click",myFunction);      //第一个事件


x.addEventListener("click",someOtherFunction);   //第二个事件


function myFunction() {      
   alert ("Hello World!")
}
function someOtherFunction() {   
   alert ("函数已执行!")
}
 
向 Window对象添加事件句柄：当用户重置窗口大小时添加事件监听 返回一个随机数：
例子====================


window.addEventListener("resize",function(){     




   document.getElementById("demo").innerHTML= =Math.random(); 
});
 
在事件监听里面调用函数


<button id="myBtn">点我</button>
<pid="demo"></p>
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click",function() {
   myFunction(p1, p2);
});
function myFunction(a, b) {
   var result = a * b;
   document.getElementById("demo").innerHTML = result;
}
 



事件传递


事件传递定义了元素事件触发的顺序。如果你将 <p>元素插入到<div>元素中，用户点击<p>元素,哪个元素的"click"事件先被触发呢？


addEventListener()方法可以指定 第三个参数来设置传递类型： 默认值为 false,即冒泡传递，当值为
 true时,事件使用捕获传递。
#事件冒泡：
内部元素的事件会先被触发，然后再触发外部元素，即：<p>元素的点击事件先触发，然后会触发<div>元素的点击事件。


<div id="myDiv">
       <p id="myP">点击段落，我是冒泡。</p>
</div>
document.getElementById("myP").addEventListener("click",function() {
   alert("你点击了 P元素!");    //先弹出这个


}, false);
document.getElementById("myDiv").addEventListener("click",function() {
   alert(" 你点击了 DIV元素 !");
}, false);
#事件捕获：
外部元素的事件会先被触发，然后才会触发内部元素的事件，即：<div>元素的点击事件先触发，然后再触发<p>元素的点击事件。


<div id="myDiv2">
       <pid="myP2">点击段落，我是捕获。 </p>
</div>
document.getElementById("myP2").addEventListener("click",function() {
   alert("你点击了 P2元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click",function() {
   alert("你点击了 DIV2元素 !");    //先弹出这个


}, true);
#移除事件句柄


#removeEventListener()方法：




removeEventListener()方法移除由 addEventListener()方法添加的事件句柄:


DOM2级删除事件不能直接使用匿名函数。

btn3.addEventListener('click',function(){alert("this.value");},false);//添加事件有效

btn3.removeEventListener('click',function(){alert("this.value");},false);//删除事件无效

因为匿名函数看起来是一样的，其实是两个不同的对象。

btn3.addEventListener('click',function(){alert("this.value");},false);

btn3.removeEventListener('click',function(){alert("this.value");},false);

这两行代码中的function(){alert(alert("this.value"));}看上去是同一个东西，实际上是不同的对象，而removeEventListener要求函数必须一样。

所以addEventListener最好还是用将匿名函数赋值给某个变量

addEventListener('click',showValue,false);

removeEventListener('click',showValue,false);

这样就不会出bug了。





例子=====================


<div id="myDIV">       //div 元素添加了onmousemove事件句柄，鼠标在桔红色的框内移动时会显示随机数。
 <p>点击按钮移除DIV的事件句柄。</p>
 <button οnclick="reHan()" id="myBtn">点我</button>
</div>
<pid="demo"></p>
document.getElementById("myDIV").addEventListener("mousemove",myFunction);




function  myFunction() {           
   document.getElementById("demo").innerHTML =Math.random();  //指定id的随机数
}
function  reHan() {        //点击事件
   document.getElementById("myDIV").removeEventListener("mousemove",myFunction); //移除句柄
}



注意： IE 8及更早 IE版本，Opera
 7.0及其更早版本不支持 addEventListener()和 removeEventListener()方法。
但是，对于这类浏览器版本可以使用 detachEvent()方法来移除事件句柄:
兼容的解决方法:#能力检测
============================

//跨浏览器事件处理程序

var eventUtil={

//添加句柄

addHandler:function(element,type,handler){

//DOM2级事件处理程序判断

if(element.addEventListener){

element.addEventListener(type,handler,false); 

}else if(element.attachEvent){

element.attachEvent('on'+type,handler);

}else{

//DOM0级事件处理程序判断
/*变量element和字符串'on'不能用“.”连接起来

element.οnclick===element['onclick']*/
element['on'+type]=handler;

}

},

//删除句柄

removeHandler:function(element,type,handler){

if(element.removeEventListener){

element.removeEventListener(type,handler,false); 

}else if(element.detachEvent){

element.detachEvent('on'+type,handler);

}else{

element['on'+type]=null;

}

}

}

eventUtil.addHandler(btn3,'click',showMes);


========================================================


<button id="myBtn">点我</button>
var x =document.getElementById("myBtn");  //获取要改变的目标id
if (x.addEventListener) {              //判断是否支持这个方法
   x.addEventListener("click",myFunction); 
 //添加句柄
} else if (x.attachEvent) {         //判断是否支持这个方法
   x.attachEvent("onclick", myFunction); 
 //添加句柄
}
function myFunction() {                //函数
   alert("Hello World!");
}




例子=======================
添加事件句柄：



function 函数名(ev){            

获取id

var ev=ev  || window.ev                                            //IE需要用window方法 把它等于ev就可以了

 var ele=ev.target || ev.srcElement                        //弹出事件的打开目标

  alert（‘这个变量ele’）                                            //要执行的代码块

ev.stopPropagetion()；                                         //阻止事件冒泡

ev.preventDefault();                                              //阻止事件默认行为



var 对象={

    句柄名称（随便起）：function(元素，事件类型，触发了什么句柄){        //因为DOM事件与IE事件的事件类型一个有on一个没有on，解决办法是：不加on  然后给ie的事件类型加“on”

if(元素.addEventListener){                          //DOM2级的处理程序 如果支持DOM2级就用DOM2级  

元素.addEventListener（事件类型，句柄，flase）

}else if(元素.attachEvent){                        //IE的处理程序

元素.attachEvent（“on”+事件类型，句柄）

}else{ 

 元素[‘on’+事件类型]=句柄                         //DOM0级的处理程序 
注意这里不能用.和字符串on链接 那么就要用中括号

}                                                           

                                                                       //js中所有用.点的地方都可以用[]   元素.事件事件类型===事件[‘事件类型’]

    

}          

}



//删除句柄



var 对象={

    句柄名称（随便起）：function(元素event，事件类型type，触发了什么句柄hadler){     

if(元素.removeEventListener){                                                                 //DOM2级的处理程序 如果支持DOM2级就用DOM2级

元素removeEventListener（事件类型type，触发了什么句柄hadler，flase）

}else if(元素.datachEvent){                                                                       //IE的处理程序

元素.datachEvent（“on”+事件类型type，句柄hadler）

}else{ 

 元素[‘on’+事件类型type]=null；                                                             //DOM0级的处理程序 注意这里不能用.和字符串on链接 那么就要用中括号

}  

}          

}



//设置使用的方法
getEVent变量:function(ev){

return event?event:window.event;                         //IE需要用window方法 把它等于ev就可以了

}

//获取事件类型

getType:function(event){

return event.type；

}

//获取事件的元素

getElement:function(){

 return event.target || event.srcElement;

}

//阻止事件默认行为

preventDefault变量:function(event){

if（event.preventDefault）{

event.preventDefault（）；                           //如果支持阻止默认行为默认就用event

}else{

event.returnValue=flase;                                 //如果不支持就用IE的阻止默认行为

}

}



//阻止事件冒泡

stopPropagation变量：function(event){

if(event.stopPropagation){                                 //如果支持阻止事件冒泡就用event

event.stopPropagation();

}else{                                                                       //如果不支持就用IE的阻止事件冒泡

event.cancelbubble=true;

}

}

}









然后传参数 添加事件： 对象名称.添加事件的句柄名称（id，事件类型不要加on，调用的函数）





删除事件

对象名称.删除事件的句柄名称（id，事件类型不要加on，调用的函数）







======================================



另外如果外部引用js 先加载

window.οnlοad=function(){

获取ID

对象.封装的函数名（id名，类型不加on，function(）{

代码块

});



//知道对象的内省

对象.封装的函数名（id，类型不加on，function(e）{

e=对象.封装的方法（e）；

或者e=e || window.event

//阻止事件冒泡与默认

eventutil.preventDefault(e);

eventutil.stopPropagation(e);

}）；

}







#DOM节点  JavaScriptHTML
 DOM 节点：







发现：
1，  window对象最高级
2，  BOM：浏览器对象：brower objecj Model
3，  DOM：文档对象模型：document object model
4，  BOM网页一打开就会存在
5，  DOM去操作的代码
6，  Document是链接DOM和BOM
Document有下级：其他都没有下级【多窗口】



=========================


 insertBefore() 方法可在已有的子节点前插入一个新的子节点。



setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。






在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：


一、nodeName 属性: 节点的名称，是只读的。



1. 元素节点的 nodeName 与标签名相同

2. 属性节点的 nodeName 是属性的名称

3. 文本节点的 nodeName 永远是 #text

4. 文档节点的 nodeName 永远是 #document



二、nodeValue 属性：节点的值



1. 元素节点的 nodeValue 是 undefined 或 null

2. 文本节点的 nodeValue 是文本自身

3. 属性节点的 nodeValue 是属性的值



三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:



元素类型    节点类型

  元素          1

  属性          2

  文本          3

  注释          8

  文档          9





childNodes   访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。

firstChild             返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。

                           说明：与elementNode.childNodes[0]是同样的效果。 

lastChild             返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。

                           说明：与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。

parentNode   获取指定节点的父节点   注意:父节点只能有一个。
elementNode.parentNode.parentNode访问祖节点:

nextSibling 属性可返回某个节点之后紧跟的节点（兄弟节点）。说明：如果无此节点，则该属性返回
 null。

previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。说明：如果无此节点，则该属性返回 null。

appendChild()  在指定节点的最后一个子节点列表之后添加一个新的子节点。



insertBefore(newnode,node)   
 可在已有的子节点前插入一个新的子节点。
                                                         newnode: 要插入的新节点。node: 指定此节点前插入节点。

removeChild()    从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。



replaceChild(newnode,oldnew)   
 实现子节点(对象)的替换。返回被替换对象的引用。 



                                     newnode : 必需，用于替换 oldnew 的对象。  oldnew : 必需，被 newnode 替换的对象。

createElement（tagName）
     创建元素节点。此方法可返回一个 Element 对象。

                                                          tagName：字符串值，这个字符串用来指明创建元素的类型。

                                             注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。

createTextNode（data）
    创建新的文本节点，返回新创建的 Text 节点。

                                                    data : 字符串值，可规定此节点的文本。





例子====================


创建新的 HTML元素
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
var  para=document.createElement("p"); //创建新的<p>元素：
var  node=document.createTextNode("这是一个新段落。"); //创建文本
para.appendChild(node);//向<p>元素追加这个文本
var  element=document.getElementById("div1");  //获取要交给的对象
element.appendChild(para);  //交给这个对象

例子====================



删除已有的 HTML元素
<div id="div1">
       <pid="p1">这是一个段落。</p>
       <pid="p2">这是另一个段落。</p>
</div>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
 例子====================
不引用父元素的情况下删除某个元素
<div id="div1">
       <pid="p1">这是一个段落。</p>
       <pid="p2">这是另一个段落。</p>
</div>
var  child=document.getElementById("p1");
child.parentNode.removeChild(child);
//指定id的父节点
例子：============================================


    <script type="text/javascript">

        function fn(){

            var obj = document.getElementById("div1");

            var n = obj.childNodes.length;

            alert(n);

            //obj.childNodes[1].style.background="yellow";

            //obj.lastChild.previousSibling.style.background="blue";

            //obj.firstChild.nextSibling.style.background="red";

            //obj.parentNode.style.background="red";

            //obj.previousSibling.previousSibling.style.background="red";

            //obj.parentNode.nextSibling.nextSibling.style.background="blue";

        }

    </script>
    <div id="div1">

        <p>段落</p>

        <div>这是div的内容</div>

        <a>链接</a>

    </div>

    <div>

        abcdEFG

    </div>

    <input type="button" value="点击" οnclick="fn()">


例子：===================================

网页打开之后随即大小，随即位置出现星星    点击星星让星星消失  游戏进度条


    <style type="text/css">

        #d2{

            width:100px;

            height:20px;

            border:1px solid red;

            display:inline-block;

        }

        #d3{

            display:inline-block;

            background:yellow;

            height:20px;

        }

    </style>

    <script type="text/javascript">

        //window.οnlοad=init;

        var dingshiqi;//定时器名

        var sj;//时间定时器名

        var count=0;//记录星星个数的变量

        var n = 0;//记录游戏时间的变量

        //点击开始游戏的函数

        function startGame(){

            window.clearInterval(sj);

            window.clearInterval(dingshiqi);

            sj=window.setInterval("shijian()",1000);

            dingshiqi = window.setInterval("star()",400);

        }

        //创建星星的函数

        function star(){

            //创建星星

            var obj = document.createElement("img");

            //给星星添加src属性

            obj.src="xingxing.gif"

            //随即星星大小

            var w = Math.floor(Math.random()*80+20);

            obj.width=w;

            //随即位置

            var x = Math.floor(Math.random()*1166+100);

            var y = Math.floor(Math.random()*500+100);

            obj.style.position="absolute";

            obj.style.top=y+"px";

            obj.style.left=x+"px";

            //添加点击事件

            obj.οnclick=removeStar;

            count++;

            var sp = document.getElementById("d3");

            sp.style.width=count*5+"px";

            if(count>=20){

                alert("游戏结束");

                window.clearInterval(dingshiqi);

                location.reload();

            }

            //放到body中

            document.body.appendChild(obj);

        }

        //点击删除星星的函数

        function removeStar(){

            this.parentNode.removeChild(this);

            count--;

            var sp = document.getElementById("d3");

            sp.style.width=count*5+"px";

        }

        //点击暂停游戏的函数

        function zanting(){

            alert("暂停游戏");

        }

        //记录游戏事件的函数

        function shijian(){

            n++;

            var obj = document.getElementById("d1");

            obj.innerHTML="游戏进行了"+n+"秒";

        }

    </script>

</head>

<body>

    <input type="button" value="开始游戏" οnclick="startGame()">

    <input type="button" value="暂停游戏" οnclick="zanting()">

    <span id="d1">游戏进行了0秒</span>

    <span id="d2"><span id="d3"></span></span>

</body>

</html>


例子：====================================================
=========================



    <div id="div1"></div>  <!--  DOM对象获取元素 -->

    <div id="div2">

        <p></p>

        <span></span>

        <a href=""></a>

    </div>







    <div id="div3"> <!--  DOM对象给标签添加元素 -->

33333

    </div>





    <select id="prov">   <!-- DOM对象给标签添加元素 并把数组输出到这个元素中 -->

        <option >请选择</option>

    </select>







    <script>

        var divobj=document.getElementById("div1");

        document.write(divobj+"<br/>");  //通过id名称获取到div这个元素

        var divs=document.getElementsByTagName("div");

        document.write(divs);  //通过标签名称获取到div这个元素的集合

        document.write(divs.length+"<br/>")// 输出div元素集合的长度

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

             document.write(divs.item(i).nodeName+"<br/>");//循环输出这个div元素集合

        }



        //获取子元素

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

        document.write(div2.firstChild.nodeName);  //获取第一个子元素



        //DOM对象给标签添加元素

        var div3obj=document.getElementById("div3");

        var new_p=document.createElement("p");  //创建p标签这个元素

            div3obj.appendChild(new_p);         //把这个标签添加到另一个标签中









        //DOM对象给标签添加元素 用for循环创建元素 并把数组输出到这个元素中

        var provobj=document.getElementById("prov");

        var arr_prov=['湖北','湖南','河南','河北'];

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

            var new_opt=document.createElement("option"); //循环创建option这个标签

            new_opt.innerHTML=arr_prov[i]; //循环把数组输出到option这个标签

            provobj.appendChild(new_opt);  //循环把这个标签添加到另一个标签中

        }



    </script>


==================================================
点出满天小星星

    <script type="text/javascript">

        //让页面出现星星

        function star(e){

            //创建一个星星

            var obj = document.createElement("img");

            //添加src属性

            obj.src="xingxing.gif";

            //假设让星星的大小在20到100之间随机

            var w = Math.floor(Math.random()*(100-20)+20);

            obj.width=w;

            //找到鼠标点击时候的坐标位置

            var x = e.clientX;

            var y = e.clientY;

            obj.style.position="absolute";

            obj.style.top=y+"px";

            obj.style.left=x+"px";

            //放到body里面

            document.body.appendChild(obj);

        }

    </script>



<img src="...">



=======================





==================================================
#Date（日期）对象：


Date类型使用UTC(Coordinated Universal Time，国际协调时间[又称世界统一时间])
 1970年1月1日午夜(零时)开始经过的毫秒来保存日期。在使用这种数据存储格式的条件下，Date类型保存的日期能够精确到1970年1月1日之前或之后的285616年。
创建一个日期对象，使用new运算符和Date构造方法(构造函数)即可。
var box = new Date();                              //创建一个日期对象



在调用Date构造方法而不传递参数的情况下，新建的对象自动获取当前的时间和日期。
alert(box);                                               //不同浏览器显示不同



ECMAScript提供了两个方法，Date.parse()和Date.UTC()。Date.parse()方法接收一个表示日期的字符串参数，然后尝试根据这个字符串返回相应的毫秒数。ECMA-262没有定义Date.parse()应该支持哪种日期格式，因此方法的行为因实现而异，因地区而异。默认通常接收的日期格式如下：
1.'月/日/年'，如6/13/2011;
2.'英文月名日,年'，如May
 25, 2004;
3.'英文星期几英文月名日年时:分:秒时区'，如Tue
 May 25 2004 00:00:00 GMT-070
alert(Date.parse('6/13/2011'));                    //1307894400000
 
如果Date.parse()没有传入或者不是标准的日期格式，那么就会返回NaN。
alert(Date.parse());                                   //NaN
 
如果想输出指定的日期，那么把Date.parse()传入Date构造方法里。
var box = new Date(Date.parse('6/13/2011'));//Mon Jun 13 2011 00:00:00 GMT+0800
var box = new Date('6/13/2011');                //直接传入，Date.parse()后台被调用
 
PS：Date对象及其在不同浏览器中的实现有许多奇怪的行为。其中有一种倾向是将超出的范围的值替换成当前的值，以便生成输出。例如，在解析“January
 32, 2007”时，有的浏览器会讲其解释为“February1, 2007”。而Opera则倾向与插入当前月份的当前日期。
 
Date.UTC()方法同样也返回表示日期的毫秒数，但它与Date.parse()在构建值时使用不同的信息。(年份，基于0的月份[0表示1月，1表示2月]，月中的哪一天[1-31]，小时数[0-23]，分钟，秒以及毫秒)。只有前两个参数是必须的。如果没有提供月数，则天数为1；如果省略其他参数，则统统为0.
alert(Date.UTC(2011,11));                         //1322697600000  
 
如果Date.UTC()参数传递错误，那么就会出现负值或者NaN等非法信息。
alert(Date.UTC());                                   //负值或者NaN
 
如果要输出指定日期，那么直接把Date.UTC()传入Date构造方法里即可。
var box = new Date(Date.UTC(2011,11, 5, 15, 13,16));
 
二．通用的方法
与其他类型一样，Date类型也重写了toLocaleString()、toString()和valueOf()方法；但这些方法返回值与其他类型中的方法不同。
var box = new Date(Date.UTC(2011,11, 5, 15, 13,16));
alert('toString:' + box.toString());                     
alert('toLocaleString:' +box.toLocaleString());   //按本地格式输出
 
PS：这两个方法在不同浏览器显示的效果又不一样，但不用担心，这两个方法只是在调试比较有用，在显示时间和日期上，没什么价值。valueOf()方法显示毫秒数。
 
 
三．日期格式化方法
Date类型还有一些专门用于将日期格式化为字符串的方法。
 
var box = new Date();
alert(box.toDateString());                         //以特定的格式显示星期几、月、日和年
alert(box.toTimeString());                        //以特定的格式显示时、分、秒和时区
alert(box.toLocaleDateString());               //以特定地区格式显示星期几、月、日和年
alert(box.toLocaleTimeString());               //以特定地区格式显示时、分、秒和时区
alert(box.toUTCString());                        //以特定的格式显示完整的UTC日期。
 
 
 
四．组件方法

       组件方法，是为我们单独获取你想要的各种时间/日期而提供的方法。需要注意的时候，这些方法中，有带UTC的，有不带UTC的。UTC日期指的是在没有时区偏差的情况下的日期值。
alert(box.getTime());                               //获取日期的毫秒数，和valueOf()返回一致
alert(box.setTime(100));                                 //以毫秒数设置日期，会改变整个日期
alert(box.getFullYear());                                 //获取四位年份
alert(box.setFullYear(2012));                    //设置四位年份，返回的是毫秒数
alert(box.getMonth());                             //获取月份，没指定月份，从0开始算起
alert(box.setMonth(11));                                  //设置月份
alert(box.getDate());                                //获取日期
alert(box.setDate(8));                               //设置日期，返回毫秒数
alert(box.getDay());                                 //返回星期几，0表示星期日，6表示星期六
alert(box.setDay(2));                                //设置星期几
alert(box.getHours());                              //返回时
alert(box.setHours(12));                           //设置时
alert(box.getMinutes());                           //返回分钟
alert(box.setMinutes(22));                        //设置分钟
alert(box.getSeconds());                           //返回秒数

       alert(box.setSeconds(44));                        //设置秒数
alert(box.getMilliseconds());                     //返回毫秒数
alert(box.setMilliseconds());                     //设置毫秒数
alert(box.getTimezoneOffset());                //返回本地时间和UTC时间相差的分钟数
 
PS：以上方法除了getTimezoneOffset()，其他都具有UTC功能，例如setDate()及getDate()获取星期几，那么就会有setUTCDate()及getUTCDate()。表示世界协调时间。    
例子1=================================
    <script type="text/javascript">

        /*var n1 = new Date();

        var n2 = new Date("1999/9/9 6:6:6");

        var n3 = new Date(1999,9,9,6,6,6);

        var n4 = new Date(1623556734678);

        document.write(n1.toLocaleString()+"<br />");

        document.write(n2.toLocaleString()+"<br />");

        document.write(n3.toLocaleString()+"<br />");

        document.write(n4.toLocaleString()+"<br />");*/

        var n = new Date();

        var m = n.getFullYear();//获取n里面年份

        var m = n.getMonth();//获取月份

        var m = n.getDate();//获取日期

        var m = n.getDay();//获取星期

        var m = n.getTime();//获取毫秒值

        document.write(m);

    </script>



例子2=================================




  <script>
        var date=new Date();
        var min=date.getHours();
        if(min<10){
            alert("上午好");
        }

    </script>




例子3=================================



 计算到现在为止你所生活了多少天
    <script type="text/javascript">

        var chusheng = new Date("1990/5/28 8:35:36");//创建你出生时候的时间日期对象

        var xianzai = new Date();

        var n1 = chusheng.getTime();//获取从1970年到出生到的毫秒值

        var n2 = xianzai.getTime();//获取1970年到现在的毫秒值

        var jieguo = n2 - n1;//获取生活到现在的毫秒值

        jieguo = jieguo/24/60/60/1000;

        document.write("生活到现在为止经过了"+jieguo+"天");

    </script>


====================================










JavaScriptWindow Navigator对象包含有关访问者浏览器的信息
txt = "<p>浏览器代号:" + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称:" + navigator.appName + "</p>";
txt+= "<p>浏览器版本:" + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies:" + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台:" + navigator.platform + "</p>";
txt+= "<p>用户代理:" + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言:" + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
==============
    <script type="text/javascript">

        function fn(){

            //var n = navigator.appName;

            //var n = navigator.appCodeName;

            //var n = navigator.appVersion;

            var n = navigator.userAgent;

            alert(n);

        }

    </script>


<input type="button" value="点击" οnclick="fn()">


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

        //打开页面之后，弹出用户是用的什么浏览器

        //window.onload

        //navigator

        window.οnlοad=init;

        function init(){

            var obj = navigator.userAgent;

            if(obj.indexOf("Firefox")!=-1){

                alert("你很牛用的既然是火狐好厉害的样子");

            }else if(obj.indexOf("Chrome")!=-1){

                alert("你非常时髦既然用的是谷歌");

            }else{

                alert("杀马特非主流你abcd用的是ie浏览器");

            }

        }

    </script>


=====================


#计时器
   setInterval() - 
间隔指定的毫秒数不停地执行指定的代码。  （要调用的函数或要执行的代码串 ,毫秒）


   setTimeout() - 暂停指定的毫秒数后执行指定的代码

创建定时器：

         一次性定时器：var abcd = window.setTimeout(“js代码”,时间t)
                   执行：是在时间t之后执行js代码【只会执行一次】
                   时间：以毫秒为单位
         反复性定时器：var dsq = window.setInterval(“js代码”,时间t)
                   执行：是没过时间t就会执行一次js代码【n次】
                   时间：是以毫秒为单位
清除定时器：
                  清除一次性定时器：Window.clearTimeout(abcd);
                  清除反复性定时器：window.clearInterval(dsq);
注意：要想清除定时器，必须给定时器名字，匿名定时器无法清除
例子：================================

    <script type="text/javascript">

        //var dsq = window.setTimeout("fn()",3000);

        var dingshiqi = window.setInterval("fn()",1000);

        function fn(){

            alert(678);

        }

        function fun(){

            //window.clearTimeout(dsq);

            window.clearInterval(dingshiqi);

        }

    </script>
<input type="button" value="点击清除定时器" οnclick="fun()">


例子：================================


每三秒弹出 "hello"：
      setInterval(function(){alert("Hello")},3000);
显示当前时间
<pid="demo"></p>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
      vard=new Date();
      vart=d.toLocaleTimeString(); //把本地时间的一部分转化为时间
      document.getElementById("demo").innerHTML=t;
}
例子：================================


<pid="demo"></p>
<button οnclick="myStop Function()">停止时钟</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
      var d=new Date();
      var t=d.toLocaleTimeString();
      document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
      clearInterval(myVar);
}
setTimeout()方法只执行一次
setTimeout(function(){alert("Hello")},3000);
如何停止执行?要使用clearTimeout()方法,你必须在创建超时方法中（setTimeout）使用全局变量:
var myVar = setTimeout(function(){alert("Hello")},3000);
clearTimeout(myVar)；
 
例子==================================
动态获取时间


    <script type="text/javascript">

        window.οnlοad=init;

        function init(){

            fn();

            window.setInterval("fn()",1000);

        }

        //显示时间的

        function fn(){

            var n = new Date();//获取现在的时间

            //获取div对象

            var obj = document.getElementById("div1");

            obj.innerHTML=n.toLocaleString();

        }

    </script>


==============================














JavaScriptCookies Cookies
 用于存储 web页面的用户信息。
创建 cookie如下所示：document.cookie="username=JohnDoe";
您还可以为 cookie添加一个过期时间（以 UTC或
 GMT时间）。默认情况下，cookie在浏览器关闭时删除：
document.cookie="username=JohnDoe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
您可以使用 path参数告诉浏览器 cookie的路径。默认情况下，cookie属于当前页面。
document.cookie="username=JohnDoe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
使用 JavaScript读取 Cookie
var x = document.cookie; document.cookie 
将以字符串的方式返回所有的 cookies
使用 JavaScript修改 Cookie 旧的
 cookie将被覆盖
document.cookie="username=JohnSmith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
使用 JavaScript删除 Cookie设置
 expires参数为以前的时间即可
document.cookie = "username=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
 
 






 
 
#BOM
 
 
1.window对象
2.location对象
3.history对象
BOM的核心对象是window，它表示浏览器的一个实例。window对象处于JavaScript结构的最顶层，对于每个打开的窗口，系统都会自动为其定义window对象。
1.对象的属性和方法 
window对象有一系列的属性，这些属性本身也是对象。
 
window对象的属性

 
 

  
  
属性 

含义 

closed

当窗口关闭时为真 

defaultStatus

窗口底部状态栏显示的默认状态消息

document

窗口中当前显示的文档对象

frames

窗口中的框架对象数组 

history

保存有窗口最近加载的URL

length

窗口中的框架数 

location

当前窗口的URL

name

窗口名 

offscreenBuffering

用于绘制新窗口内容并在完成后复制已存在的内容，控制屏幕更新

opener

打开当前窗口的窗口 

parent

指向包含另一个窗口的窗口（由框架使用）

screen

显示屏幕相关信息，如高度、宽度（以像素为单位）

self

指示当前窗口。 

status

描述由用户交互导致的状态栏的临时消息

top

包含特定窗口的最顶层窗口（由框架使用）

window

指示当前窗口，与self等效


 
 
 
window对象的方法

 
 

  
  
方法

功能

alert(text)

创建一个警告对话框，显示一条信息

blur()

将焦点从窗口移除

clearInterval(interval)

清除之前设置的定时器间隔

clearTimeOut(timer)

清除之前设置的超时

close()

关闭窗口

confirm()

创建一个需要用户确认的对话框

focus()

将焦点移至窗口

open(url,name,[options])

打开一个新窗口并返回新window对象

prompt(text,defaultInput)

创建一个对话框要求用户输入信息

scroll(x,y)

在窗口中滚动到一个像素点的位置

setInterval(expression,milliseconds)

经过指定时间间隔计算一个表达式

setInterval(function,millisenconds,[arguments])

经过指定时间间隔后调用一个函数

setTimeout(expression,milliseconds)

在定时器超过后计算一个表达式

setTimeout(expression,milliseconds,[arguments])

在定时器超过时后计算一个函数

print()

调出打印对话框

find()

调出查找对话框


 
 
 
window下的属性和方法，可以使用window.属性、window.方法()或者直接属性、方法()的方式调用。例如：window.alert()和alert()是一个意思。
 
2.系统对话框
浏览器通过alert()、confirm()和prompt()方法可以调用系统对话框向用户显示信息。系统对话框与浏览器中显示的网页没有关系，也不包含HTML。
 
//弹出警告
alert('Lee');                                                     //直接弹出警告
 
//确定和取消
confirm('请确定或者取消');             
              //这里按哪个都无效          
if (confirm('请确定或者取消')) {                     //confirm本身有返回值
       alert('您按了确定！');              
              //按确定返回true
} else {
       alert('您按了取消！');              
              //按取消返回false
}
 
//输入提示框
var num = prompt('请输入一个数字', 0);         //两个参数，一个提示，一个值
alert(num);                                                    //返回值可以得到
 
//调出打印及查找对话框
print();                                                           //打印
find();                                                            //查找
 
defaultStatus = '状态栏默认文本';                           //浏览器底部状态栏初始默认值
status='状态栏文本';                        
              //浏览器底部状态栏设置值
 
3.新建窗口
使用window.open()方法可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。它可以接受四个参数：1.要加载的URL；2.窗口的名称或窗口目标；3.一个特性字符串；4.一个表示新页面是否取代浏览器记录中当前加载页面的布尔值。
open('http://www.baidu.com');      
                     //新建页面并打开百度
open('http://www.baidu.com','baidu');                //新建页面并命名窗口并打开百度
open('http://www.baidu.com','_parent');             //在本页窗口打开百度,_blank是新建
 
PS：不命名会每次打开新窗口，命名的第一次打开新窗口，之后在这个窗口中加载。窗口目标是提供页面的打开的方式，比如本页面，还是新建。
 
第三字符串参数

 
 

  
  
设置

值

说明

width

数值

新窗口的宽度。不能小于100

height

数值

新窗口的高度。不能小于100

top

数值

新窗口的Y坐标。不能是负值

left

数值

新窗口的X坐标。不能是负值

location

yes或no

是否在浏览器窗口中显示地址栏。不同浏览器默认值不同

menubar

yes或no

是否在浏览器窗口显示菜单栏。默认为no

resizable

yes或no

是否可以通过拖动浏览器窗口的边框改变大小。默认为no

scrollbars

yes或no

如果内容在页面中显示不下，是否允许滚动。默认为no

status

yes或no

是否在浏览器窗口中显示状态栏。默认为no

toolbar

yes或no

是否在浏览器窗口中显示工具栏。默认为no

fullscreen

yes或no

浏览器窗口是否最大化，仅限IE


 
 
 
//第三参数字符串
open('http://www.baidu.com','baidu','width=400,height=400,top=200,left=200,toolbar=yes');
 
//open本身返回window对象
var box = open();
box.alert('');           
                                          //可以指定弹出的窗口执行alert();
 
//子窗口操作父窗口
document.onclick = function () {
       opener.document.write('子窗口让我输出的！');
}
 
3.窗口的位置和大小
用来确定和修改window对象位置的属性和方法有很多。IE、Safari、Opera和Chrome都提供了screenLeft和screenTop属性，分别用于表示窗口相对于屏幕左边和上边的位置。Firefox则在screenX和screenY属性中提供相同的窗口位置信息，Safari和Chrome也同时支持这两个属性。
 
//确定窗口的位置,IE支持
alert(screenLeft);                                            //IE支持
alert(typeof screenLeft);                                  //IE显示number，不支持的显示undefined
 
//确定窗口的位置,Firefox支持
alert(screenX);                                                      //Firefox支持
alert(typeof screenX);                                      //Firefox显示number,不支持的同上
 
PS：screenX属性IE浏览器不认识，直接alert(screenX)，screenX会当作一个为声明的变量，导致不执行。那么必须将它将至为window属性才能显示为初始化变量应有的值，所以应该写成：alert(window.screenX)。
 
//跨浏览器的方法
var leftX = (typeof screenLeft == 'number') ?screenLeft : screenX;
var topY = (typeof screenTop == 'number') ?screenTop : screenY;
 
窗口页面大小，Firefox、Safari、Opera和Chrome均为此提供了4个属性：innerWidth和innerHeight，返回浏览器窗口本身的尺寸；outerWidth和outerHeight，返回浏览器窗口本身及边框的尺寸。
 
alert(innerWidth);                                            //页面长度
alert(innerHeight);                                           //页面高度
alert(outerWidth);                                            //页面长度+边框
alert(outerHeight);                                           //页面高度+边框
 
PS：在Chrome中，innerWidth=outerWidth、innerHeight=outerHeight；
PS：IE没有提供当前浏览器窗口尺寸的属性；不过，在后面的DOM课程中有提供相关的方法。
 
在IE以及Firefox、Safari、Opera和Chrome中，document.documentElement.clientWidth和document.documentElement.clientHeight中保存了页面窗口的信息。
PS：在IE6中，这些属性必须在标准模式下才有效；如果是怪异模式，就必须通过document.body.clientWidth和document.body.clientHeight取得相同的信息。
 
//如果是Firefox浏览器，直接使用innerWidth和innerHeight
var width = window.innerWidth;   
                     //这里要加window，因为IE会无效
var height = window.innerHeight;
 
if (typeof width != 'number') {      
                     //如果是IE，就使用document         
       if(document.compatMode == 'CSS1Compat') {
              width =document.documentElement.clientWidth;
              height =document.documentElement.clientHeight;
       }else {
              width = document.body.clientWidth;   //非标准模式使用body
              height = document.body.clientHeight;
       }
}
 
PS：以上方法可以通过不同浏览器取得各自的浏览器窗口页面可视部分的大小。document.compatMode可以确定页面是否处于标准模式，如果返回CSS1Compat即标准模式。
 
//调整浏览器位置
moveTo(0,0);         
                                          //IE有效，移动到0,0坐标
moveBy(10,10);                                              //IE有效，向下和右分别移动10像素
 
//调整浏览器大小
resizeTo(200,200);         
                                   //IE有效，调正大小
resizeBy(200,200);        
                                   //IE有效，扩展收缩大小
 
PS：由于此类方法被浏览器禁用较多，用处不大。
 
 
 
 
4.间歇调用和超时调用
JavaScript是单线程语言，但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。前者在指定的时间过后执行代码，而后者则是每隔指定的时间就执行一次代码。
超时调用需要使用window对象的setTimeout()方法，它接受两个参数：要执行的代码和毫秒数的超时时间。
setTimeout("alert('Lee')", 1000);   
                     //不建议直接使用字符串
 
function box() {
       alert('Lee');
}
setTimeout(box, 1000);                                   //直接传入函数名即可
 
setTimeout(function () {       
                                   //推荐做法
       alert('Lee');
}, 1000);
 
PS：直接使用函数传入的方法，扩展性好，性能更佳。
 
调用setTimeout()之后，该方法会返回一个数值ID，表示超时调用。这个超时调用的ID是计划执行代码的唯一标识符，可以通过它来取消超时调用。
要取消尚未执行的超时调用计划，可以调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它。
var box = setTimeout(function () {                         
//把超时调用的ID复制给box
       alert('Lee');
}, 1000);
 
clearTimeout(box);                                          //把ID传入，取消超时调用
 
间歇调用与超时调用类似，只不过它会按照指定的时间间隔重复执行代码，直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是setInterval()，它接受的参数与setTimeout()相同：要执行的代码和每次执行之前需要等待的毫秒数。
setInterval(function () {                                   //重复不停执行
       alert('Lee');
}, 1000);
 
取消间歇调用方法和取消超时调用类似，使用clearInterval()方法。但取消间歇调用的重要性要远远高于取消超时调用，因为在不加干涉的情况下，间歇调用将会一直执行到页面关闭。
var box = setInterval(function () {                          //获取间歇调用的ID
       alert('Lee');
}, 1000);
 
clearInterval(box);                                           //取消间歇调用
 
但上面的代码是没有意义的，我们需要一个能设置5秒的定时器，需要如下代码：
var num = 0;                                                  //设置起始秒
var max = 5;                                                  //设置最终秒
 
setInterval(function () {                                  //间歇调用
       num++;                                                  //递增num
       if(num == max) {                                  //如果得到5秒
              clearInterval(this);                            //取消间歇调用，this表示方法本身
              alert('5秒后弹窗！');               

       }     
}, 1000);                                                       //1秒
 
一般认为，使用超时调用来模拟间歇调用是一种最佳模式。在开发环境下，很少使用真正的间歇调用，因为需要根据情况来取消ID，并且可能造成同步的一些问题，我们建议不使用间歇调用，而去使用超时调用。
var num = 0;
var max = 5;
function box() {
       num++;
       if(num == max) {
              alert('5秒后结束！');
       }else {
              setTimeout(box, 1000);
       }
}
setTimeout(box, 1000);                                    //执行定时器
 
PS：在使用超时调用时，没必要跟踪超时调用ID，因为每次执行代码之后，如果不再设置另一次超时调用，调用就会自行停止。
 
二．location对象
location是BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。事实上，location对象是window对象的属性，也是document对象的属性；所以window.location和document.location等效。
 
alert(location);                                                       //获取当前的URL
 
location对象的属性

 
 

  
  
属性

描述的URL内容

hash

如果该部分存在，表示锚点部分

host

主机名：端口号

hostname

主机名

href

整个URL

pathname

路径名

port

端口号

protocol

协议部分

search

查询字符串


 
 
 
location对象的方法

 
 

  
  
方法

功能

assign()

跳转到指定页面，与href等效

reload()

重载当前URL

repalce()

用新的URL替换当前页面


 
 
 
location.hash = '#1';                                         //设置#后的字符串，并跳转
alert(location.hash);                                         //获取#后的字符串
 
location.port = 8888;                                       //设置端口号，并跳转
alert(location.port);                                               //获取当前端口号，
 
location.hostname = 'Lee';                                 //设置主机名，并跳转
alert(location.hostname);                                  //获取当前主机名，
 
location.pathname = 'Lee';                                //设置当前路径，并跳转
alert(location.pathname);                                  //获取当前路径，
 
location.protocal = 'ftp:';       
                                   //设置协议，没有跳转
alert(location.protocol);                                   //获取当前协议
 
location.search = '?id=5';       
                            //设置?后的字符串，并跳转
alert(location.search);                                     //获取?后的字符串
 
location.href = 'http://www.baidu.com';              //设置跳转的URL，并跳转
alert(location.href);                                               //获取当前的URL
 
在Web开发中，我们经常需要获取诸如?id=5&search=ok这种类型的URL的键值对，那么通过location，我们可以写一个函数，来一一获取。
 
function getArgs() {
//创建一个存放键值对的数组
       varargs = [];                      
//去除?号                  

       varqs = location.search.length > 0 ? location.search.substring(1) : '';
//按&字符串拆分数组
       varitems = qs.split('&');
       varitem = null, name = null, value = null;
//遍历
       for(var i = 0; i < items.length; i++) {
              item = items[i].split('=');
              name = item[0];
              value = item[1];
//把键值对存放到数组中去
              args[name] = value;
       }
       returnargs;
}
 
var args = getArgs();
alert(args['id']);
alert(args['search']);
 
location.assign('http://www.baidu.com');            //跳转到指定的URL
 
location.reload();                                             //最有效的重新加载，有可能从缓存加载
location.reload(true);                                       //强制加载，从服务器源头重新加载
 
location.replace('http://www.baidu.com');           //可以避免产生跳转前的历史记录
 
 
三．history对象
history对象是window对象的属性，它保存着用户上网的记录，从窗口被打开的那一刻算起。
history对象的属性

 
 

  
  
属性

描述URL中的哪部分

length

history对象中的记录数


 
 
 
 
history对象的方法

 
 

  
  
方法

功能

back()

前往浏览器历史条目前一个URL，类似后退

forward()

前往浏览器历史条目下一个URL，类似前进

go(num)

浏览器在history对象中向前或向后


 
 
 
function back() {           
                                   //跳转到前一个URL
       history.back(); 
}
 
function forward() {                                        //跳转到下一个URL
       history.forward();
}
 
function go(num) {                                               //跳转指定历史记录的URL
       history.go(num);
}
 
PS：可以通过判断history.length== 0，得到是否有历史记录。
 
 ================
#错误检测：



 



try 语句测试代码块的错误。var txt=""; function message()    try {adddlert("Welcomeguest!");}



catch 当 try代码块发生错误时，所执行的代码块。catch(err) { txt+="错误描述：" + err.message 



+"\n\n"; alert(txt);}



 



throw语句创建自定义错误。



function myFunction(){



      try{



           varx=document.getElementById("demo").value;



           if(x=="")    throw "值为空";



           if(isNaN(x))throw "不是数字";



           if(x>10)     throw "太大";



           if(x<5)      throw "太小";



      }



      catch(err){



           vary=document.getElementById("mess");



           y.innerHTML="错误："+ err + "。";



      }



}



</script>



JavaScript调试工具：



断点 (代码停止执行的位置),且可以在代码执行时检测变量。



console.log() 方法



debugger 关键字这个关键字与在调试工具中设置断点的效果是一样的。



 



Chrome 浏览器：工具开发者工具 Console。



Firefox 浏览器：安装Firebug。



Internet Explorer 浏览器：工具开发者工具 Console。



Opera：Dragonfly



Safari：右击鼠标，选择检查元素。在底部弹出的窗口中选择"控制台"。






 
=========================
JavaScript使用注意



switch 语句会使用恒等计算符(===)进行比较:



使用名字来作为索引的数组称为关联数组(或哈希)。JavaScript不支持使用名字来索引数组，只允许使用数字



索引。



Undefined 不是Null在JavaScript中,null用于对象,undefined用于变量，属性和方法。对象只有被定义才有



可能为null，否则为undefined。



如果我们想测试对象是否存在：if (typeof myObj !=="undefined" && myObj !== null)



for循环里面声明的变量是全局变量











 



#JavaScript严格模式： "usestrict" 严格模式下你不能使用未声明的变量。在函数内部声明是局部作用域 (



只在函数内使用严格模式):



#严格模式的限制“”



     对象也是一个变量。 x= {p1:10, p2:20};



      不允许删除变量或对象。varx = 3.14; delete x;  



      不允许删除函数。functionx(p1, p2) {}; delete x; 



      不允许变量重名:functionx(p1, p1) {};



      不允许使用八进制:varx = \010;



      不允许使用转义字符:varx = \010;



      不允许对只读属性赋值:varobj = {};Object.defineProperty(obj, "x", 



{value:0,writable:false});obj.x = 3.14;



      不允许对一个使用getter方法读取的属性进行赋值varobj = {get x() {return 0} };obj.x = 3.14;



      不允许删除一个不允许删除的属性：deleteObject.prototype;



      变量名不能使用"eval"字符串:var eval = 3.14;



      变量名不能使用"arguments"字符串:var arguments = 3.14;



      不允许使用以下这种语句:with(Math){x = cos(2)};



      由于一些安全原因，在作用域eval()创建的变量不能被调用eval("var x = 2"); alert (x);



      禁止this关键字指向全局对象。return!this;



      使用构造函数时，如果忘了加new，this不再指向全局对象，而是报错 function f(){"use 



strict";this.a =1;};f();// 报错，this未定义;







JavaScriptJSON



JSON 是用于存储和传输数据的格式。



JSON 通常用于服务端向网页传递数据。



JSON 数据"firstName":"John"



什么是 JSON?



    JSON 英文全称 JavaScript Object Notation

    JSON 是一种轻量级的数据交换格式。

    JSON是独立的语言 *

    JSON 易于理解。

    * JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。

    文本可以被任何编程语言读取及作为数据格式传递。



JSON对象保存在大括号内。{"firstName":"John", "lastName":"Doe"}



JSON数组保存在中括号内。就像在 JavaScript中,数组可以包含对象：



"employees":[



   {"firstName":"John","lastName":"Doe"},



   {"firstName":"Anna","lastName":"Smith"},



   {"firstName":"Peter","lastName":"Jones"}



]



 



//在以上实例中，对象"employees"是一个数组。包含了三个对象。每个为个对象为员工的记录（姓和名）。



 



JSON字符串转换为 JavaScript对象



首先，创建 JavaScript字符串，字符串为JSON格式的数据：



var text = '{ "employees" :[' +



'{"firstName":"John" , "lastName":"Doe"},' +



'{ "firstName":"Anna", "lastName":"Smith" },' +



'{"firstName":"Peter" ,"lastName":"Jones" } ]}';



然后，使用 JavaScript内置函数 JSON.parse()将字符串转换为 JavaScript对象:



var obj = JSON.parse(text);



最后，在你的页面中使用新的 JavaScript对象：



<script>

document.getElementById("demo").innerHTML =

obj.employees[1].firstName + " " + obj.employees[1].lastName;

</script> 







JavaScript代码规范



JavaScript 中通常推荐使用驼峰法，jQuery及其他JavaScript库都使用驼峰法。



-字符:通常在JavaScript中被认为是减法，所以不允许使用。



下划线:PHP 语言通常都使用下划线。



变量名不要以 $ 作为开始标记，会与很多 JavaScript库冲突



使用简洁的格式载入 JavaScript文件 (type属性不是必须的):



HTML 与 JavaScript尽量使用相同的命名规则。
========================================
javascript:void(0)含义该操作符指定要计算一个表达式但是不返回值。



语法格式如下：



void fun()       javascript:void fun()  或  void(fun())  javascript:void(fun())



下面的代码创建了一个超级链接，当用户点击以后不会发生任何事。



<a href="javascript:void(0)">单此处什么也不会发生</a>



在用户点击链接后显示警告信息：



<ahref="javascript:void(alert('Warning!!!'))">点我!</a>



以下实例中参数 a将返回 undefined : 表示空，



重点在于：无论void后的表达式是什么，void操作符都会返回undefined

var a = 3,b = 5,c = 7;

a = void ( b = 5, c = 7 );

document.write('a = ' + a + ' b = ' + b +' c = ' + c );



 <a href="javascript:void(0)></a>



href="#"与href="javascript:void(0)"的区别



 



#包含了一个位置信息，默认的锚是#top也就是网页的上端。



而javascript:void(0),仅仅表示一个死链接。



在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。



如果你要定义一个死链接请使用 javascript:void(0)。



==============================


笔记




js外部引用后位置就在html里面图片路径也要从html里开始算起



定义图片的下标i=0时这个变量必须是全局变量才能被if或for获取



设置鼠标离开后循环下一张必须设置body加载时启动第一张图片



if判断用的变量是全局变量 ++循环要放在if判断的前面并且变量要是全局变量



变量名称不要和函数名称一样



获取自己的id：



①单个元素直接获取id



②多个元素通过this.id为实参   函数的形参接受 （可以用作数组的下标）



③id字符串为实参



 ④（id名有顺序）字符串为实参  +   for循环拼接



⑤（id名有顺序）字符串为实参  变量=值  变量++   if判断终止或返回



获取别人的id（一个对象）：



①别人id的字符串为实参



②（id名有顺序）字符串为实参  +   for循环拼接



③（id名有顺序）字符串为实参  变量=值  变量++   if判断终止或返回



 变量不需要加引号 字符串要加引号





获取单个元素



var x=document.getElementById("id");





获取多个元素 



变量名=document.getElementsByTagName("div")  //返回带有指定标签名的对象的集合



输出所有标签用for循环i++ 然后输出 变量名.item(i).nodeName//方法返回一个节点列表中指定索引的节点名



称



获取指定元素的第一个子元素



父id变量.firstChild.nodeName   //返回指定节点的第一个子节点名称





获取指定元素集合的第一个子元素



变量名=document.getElementsByTagName("div")  //返回带有指定标签名的对象的集合



变量名.firstChild.nodeName





让文本框内一次只显示一个数组的值，并且循环出现



定义数组



变量i=0 当做数组的下标



文本框.innerHTML=数组[i]



判断结束数组



计时器来循环文本框的值



 



在每次启动计时器前如果不清除计时器那么计时器就会叠加



（如果启动计时器是个事件那么就要把计时器包含在函数里）



给计时器赋值一个变量=null



然后再用这个变量清除计时器



然后再用这个变量启动计时器



+=（一般用于for循环中）



实现累加效果



        





一用js创建两个标签，再把数组赋值给标签，再把标签添加到另一个标签 



创建一个数组



获取需要添加到目标标签的id



创建for循环i=0 （它的值从数组下标0开始）



标签的变量=document.createElement("要创建的标签")//循环创建这个标签



标签.innerhtml= 数组【i】    //循环把数组赋值给标签



目标标签.appendChild(标签);       //把创建的标签添加到指定的标签中



二两个标签与两个数组如何产生联动效果（用下标）



4.1定义第二个数组



4.2 内容改变事件onchange（）



4.3函数



（如何把两个数组通过下标对应）



获得要改变对象的id



【bug联动后内容不消失，需要在下次循环前把数组的长度等于1】



对象的id.length=1;



5.1第一个标签的子标签的value=for循环的i



//定义子标签的val ue用来对应第二个数组的下标



5.2第一个标签事件的参数为它的value值（this。value）



5.3第一个标签事件的函数的形参接受这个value值（因为这个事件改变第二个标签）



------------------------------------



6.1把第二个数组用下标（传过来的形参）定义变量



      //  否则for循环里不能接收到形参



6.2for循环



6.3 document.createElement（“option”） //循环创建第二级option的标签 并赋值一个变量



6.4把第二级数组用设置的变量+循环的i交给第二级option标签变量的内容  //把数组的值添加到标签中



6.5.把子标签交给父标签 父标签.appendChild(子标签);



把第二级标签的变量.innerhtml= 数组【i】    //循环把数组赋值给标签



6.5.把子标签交给父标签 父标签.appendChild(子标签);



如何让一个段落的内容变成数字类型



定义一个变量=数字



把这段文字的内容等于这个数字



表单的长度



value.length



如何限制字数不再出现负数



用if判断如果这个数字小于0那么这个数字就等于0



如何限制文本输入的字数



用截取 文本的value等于文本的value截取（，）

qq_36106235

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
javascript

javascript:事件驱动的，可嵌入式的，基于对象的客户端脚本语言。弱语言：功能并不弱，变量的数据不需要规定数据类型，自动识别.JavaScript的书写位置【内部】在要书写JavaScript的网页中创建一个js代码标签。JavaScript在内容可以放到任何的一个位置，但这样的方式仅限于不对document元素修改的情况下。除非在函数中。【行内】
复制链接

扫一扫

专栏目录

方法	功能
test	在字符串中测试模式匹配，返回true或false
exec	在字符串中执行匹配搜索，返回结果数组

属性	短名	含义
input	$_	当前被匹配的字符串
lastMatch	$&	最后一个匹配字符串
lastParen	$+	最后一对圆括号内的匹配子串
leftContext	$`	最后一次匹配前的子串
multiline	$*	用于指定是否所有的表达式都用于多行的布尔值
rightContext	$'	在上次匹配之后的子串

属性	含义
global	Boolean值，表示g是否已设置
ignoreCase	Boolean值，表示i是否已设置
lastIndex	整数，代表下次匹配将从哪里字符位置开始
multiline	Boolean值，表示m是否已设置
Source	正则表达式的源字符串形式

元字符/元符号	匹配情况
.	匹配除换行符外的任意字符
[a-z0-9]	匹配括号中的字符集中的任意字符
[^a-z0-9]	匹配任意不在括号中的字符集中的字符
\d	匹配数字
\D	匹配非数字，同[^0-9]相同
\w	匹配字母和数字及_
\W	匹配非字母和数字及_

元字符/元符号	匹配情况
\0	匹配null字符
\b	匹配空格字符到达边界
\f	匹配进纸字符
\n	匹配换行符
\r	匹配回车字符
\t	匹配制表符
\s	匹配空白字符、空格、制表符和换行符
\S	匹配非空白字符

元字符/元符号	匹配情况
^	行首匹配
$	行尾匹配
\A	只有匹配字符串开始处
\b	匹配单词边界，词在[]内时无效
\B	匹配非单词边界
\G	匹配当前搜索的开始位置
\Z	匹配字符串结束处或行尾
\z	只匹配字符串结束处

元字符/元符号	匹配情况
x?	匹配0个或1个x
x*	匹配0个或任意多个x
x+	匹配至少一个x
(xyz)+	匹配至少一个(xyz)
x{m,n}	匹配最少m个、最多n个x

元字符/元符号	匹配情况
this\|where\|logo	匹配this或where或logo中任意一个

元字符/元符号	匹配情况
(string)	用于反向引用的分组
\1或$1	匹配第一个分组中的内容
\2或$2	匹配第二个分组中的内容
\3或$3	匹配第三个分组中的内容

属性	含义
closed	当窗口关闭时为真
defaultStatus	窗口底部状态栏显示的默认状态消息
document	窗口中当前显示的文档对象
frames	窗口中的框架对象数组
history	保存有窗口最近加载的URL
length	窗口中的框架数
location	当前窗口的URL
name	窗口名
offscreenBuffering	用于绘制新窗口内容并在完成后复制已存在的内容，控制屏幕更新
opener	打开当前窗口的窗口
parent	指向包含另一个窗口的窗口（由框架使用）
screen	显示屏幕相关信息，如高度、宽度（以像素为单位）
self	指示当前窗口。
status	描述由用户交互导致的状态栏的临时消息
top	包含特定窗口的最顶层窗口（由框架使用）
window	指示当前窗口，与self等效

方法	功能
alert(text)	创建一个警告对话框，显示一条信息
blur()	将焦点从窗口移除
clearInterval(interval)	清除之前设置的定时器间隔
clearTimeOut(timer)	清除之前设置的超时
close()	关闭窗口
confirm()	创建一个需要用户确认的对话框
focus()	将焦点移至窗口
open(url,name,[options])	打开一个新窗口并返回新window对象
prompt(text,defaultInput)	创建一个对话框要求用户输入信息
scroll(x,y)	在窗口中滚动到一个像素点的位置
setInterval(expression,milliseconds)	经过指定时间间隔计算一个表达式
setInterval(function,millisenconds,[arguments])	经过指定时间间隔后调用一个函数
setTimeout(expression,milliseconds)	在定时器超过后计算一个表达式
setTimeout(expression,milliseconds,[arguments])	在定时器超过时后计算一个函数
print()	调出打印对话框
find()	调出查找对话框

设置	值	说明
width	数值	新窗口的宽度。不能小于100
height	数值	新窗口的高度。不能小于100
top	数值	新窗口的Y坐标。不能是负值
left	数值	新窗口的X坐标。不能是负值
location	yes或no	是否在浏览器窗口中显示地址栏。不同浏览器默认值不同
menubar	yes或no	是否在浏览器窗口显示菜单栏。默认为no
resizable	yes或no	是否可以通过拖动浏览器窗口的边框改变大小。默认为no
scrollbars	yes或no	如果内容在页面中显示不下，是否允许滚动。默认为no
status	yes或no	是否在浏览器窗口中显示状态栏。默认为no
toolbar	yes或no	是否在浏览器窗口中显示工具栏。默认为no
fullscreen	yes或no	浏览器窗口是否最大化，仅限IE

属性	描述的URL内容
hash	如果该部分存在，表示锚点部分
host	主机名：端口号
hostname	主机名
href	整个URL
pathname	路径名
port	端口号
protocol	协议部分
search	查询字符串

方法	功能
assign()	跳转到指定页面，与href等效
reload()	重载当前URL
repalce()	用新的URL替换当前页面

属性	描述URL中的哪部分
length	history对象中的记录数

方法	功能
back()	前往浏览器历史条目前一个URL，类似后退
forward()	前往浏览器历史条目下一个URL，类似前进
go(num)	浏览器在history对象中向前或向后

javascript

<p id="demo">单击按钮创建一个数组,调用ucase（）方法,并显示结果。</p>

求1到任意一个数n（n>=1）之间的所有的偶数的个数

#While循环

#do while循环

#函数作用域：

只是针对函数来说的

#return

注意：如果有返回值必须接收返回值

函数的位置：

求1到任意一个数n（n>=1）之间的所有的偶数的个数

九九乘法表

Location.assign和locaiton.reolace的区别：

#盒子模型

修改div样式

改变图片大小：

开关灯

修改div中的内容

网页打开之后随即大小，随即位置出现星星 点击星星让星星消失 游戏进度条

例子2=================================

例子3=================================

创建定时器：

“相关推荐”对你有帮助么？

网页打开之后随即大小，随即位置出现星星点击星星让星星消失游戏进度条