princess,西米露的做法,照相机-3d暮色,汇聚全世界最好看的夕阳暮色风景

admin 3周前 ( 05-29 04:24 ) 0条评论
摘要: 1.增强页面动态效果 2.实现页面与用户之间的实时、动态交互第2章 JS基础语法操作符之间的优先级: 算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号 如果同级的运算...

第1章 知道JS

JavaScript能做什么?

1.增强页面动态作用(如:下拉菜单、图片轮播、信息翻滚等)

2.完结页面与用户之间的实时、动态交互(如:用户注册、登陆验证等)

第2章 JS根底语法

操作符之间的优先级(高到低):

算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号

假定同级的运算是按从左到右次第进行,多层括号由里向外。

第3章 数组

3-1 什么是数组

数组是一个值的调集,每个值都有一个索引号,从0开端,每个索引都有一个相应的值,依据需求增加更多数值。

3-2 怎么创立数组

创立数组语法:

var myarray=new Array();

咱们创立数组的一同,还可认为数组指定长度,长度可恣意指定。

var myarray= new Array(8); //创立数组,存储8个数据。

留意:

1.创立的新数组是空数组,没有值,如输出,则显现undefined。

2.尽管创立数组时,指定了长度,但实践上数组都是变长的,也便是说即便指定了长度为8,依然能够将元素存储在规则长度以外。3-3 数组赋值

数组的表达办法:

榜首步:创立数组var myarr=new Array();

第二步:给数组赋值

myarr[2]=" 李四";```
下面创立一个数组,用于存储5个人的数学成果。

var myarray=new Array(); //创立一个新的空数组

myarray[0]=66; //存储第1个人的成果

myarray[1]=80; //存储第2个人的成果

myarray[2]=90; //存储第3个人的成果

myarray[3]=77; //存储第4个人的成果

myarray[4]=59; //存储第5个人的成果

**留意:**数组每个值有一个索引号,从0开端。
咱们还能够用简略的办法创立上面的数组和赋值:
榜首种办法:
`var myarray = new Array(66,80,90,77,59);//创立数组一同赋值`
第二种办法:
`var myarray = [66,80,90,77,59];//直接输入一个数组(称 “字面量数组”)`
**留意:**数组存储的数据能够是任何类型(数字、字符、布尔值等)
###3-4 向数组中增加一个新元素
只需运用下一个未用的索引,任何时刻能够不断向数组增加新元素。
`myarray[5]=88; //运用一个新索引,为数组增加一个新元素`
###3-5 运用数组元素
要得到一个数组元素的值,只需引证数组变量并供给一个索引,如:
**榜首个人的成果表明办法:**myarray[0]
**第三个人的成果表明办法:** myarray[2]
###3-6 数组特点length
**语法:**
`myarray.length; //取得数组myarray的长度`
**留意:**由于数组的索引总是由0开端,所以一个数组的上下限分别是:0和length-1。如数组的长度是5,数组的上下限分别是0和4。

var arr=[55,32,5,90,60,98,76,54];//包括8个数值的数组arr

document.write(arr.length); //显现数组长度8

document.write(arr[7]); //显现第8个元素的值54

一同,JavaScript数组的length特点是可变的,这一牛人克己船用推进器点需求特别留意。

arr.length=10; //增大数组的长度

document.write(arr.length); //数组长度现已变为10

数组随元素的增加,长度也会改动,如下:

var arr=[98,76,54,56,76]; // 包括5个数值的数组

document.write(arr.length); //显现数组的长度5

arr[15]=34; //增加元素,运用索引为15,赋值为34

alert(arr.length); //显现数组的长度16

###3-7 二维数组
1. 二维数组的界说办法一

var myarr=new Array(); //先声明一维

for(var i=0;i<2;i++){ //一维长度为2

myarr[i]=new Array(); //再声明二维

for(var j=0;j<3;j++){ //二维长度为3

myarr[i][j]=i+j; // 赋值,每个数组元素的值为i+j

}

}

2. 二维数组的界说办法二
var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]
3. 赋值

myarr[0][1]=5; //将5的值传入到数组中,掩盖原有值。```

阐明: myarr[0][1] ,0 表明表的行,1表明表的列。

第4章 流程操控句子

4-1 if句子

if句子是依据条件建立才履行相应代码时运用的句子。

语法:

if(条件)

{ 条件建立时履行代码}

假定你应聘web前端技术开发岗位,假定你会HTML技术,你面试成功,欢迎参加公司。代码表明如下:

 var mycarrer = "HTML";
if (mycarrer == "HTML")
{
document.write("你面试成功,欢迎参加公司。");
}
```
###4-2 if...else句子
语法:
if(条件)
{ 条件建立时履行的代码}
else
{条件不建立时履行的代码}
假定你应聘web前端技术开发岗位,假定你会HTML技术,你面试成功,欢迎参加公司,不然你面试不成功,不能参加公司。
代码表明如下:
``````
###4-3 多重判别(if..else嵌套句子)
语法:
if(条件1)
{ 条件1建立时履行的代码}
else if(条件2)
{ 条件2建立时履行的代码}
...
else if(条件n)
{ 条件n建立时履行的代码}
else
{ 条件1、2至n不建立时履行的代码}
###4-4 多种挑选(Switch句子)
当有很多种选项的时分,switch比if else运用更便利。
语法:
```switch(表达式)
{
case值1:
履行代码块 1
break;
case值2:
履行代码块 2
break;
...
case值n:
履行代码块 n
break;
default:
与 case值1 、 case值2...case值n 不一同履行的代码
}```
语法阐明:
Switch有必要赋初始值,值与每个case值匹配。满意履行该 case 后的一切句子,并用break句子来阻挠运转下一个case。如一切case值都不匹配,履行default后的句子。
###4-5 重复重复(for循环)
for句子结构:

for(初始化变量;循环条件;循环迭代)

{

循环句子

}```

假定,一个盒子里有6个球,咱们每次取一个,重复从盒中取出球,直到球取完中止。

var num=1;
for (num=1;num<=6;num++) //初始化值;循环条件;循环后条件值更新
{ document.write("取出第"+num+"个球
");
}
```
###4-6 反重复复(while循环)
while句子结构:

while(判别条件)

{

循环句子

}```

运用while循环,完结从盒子里取球的动作,每次取一个,共6个球。

var num=0; //初始化值
while (num<=6) //条件判别
{
document.write("取出第"+num+"个球
");
num=num+1; //条件值更新
}
```
###4-7 来来回回(Do...while循环)
do while结构的根本原理和while结构是根本相同的,可是它确保循环体至少被履行一次。由于它是先履行代码,后判别条件,假定条件为真,持续循环。
do...while句子结构:
```do
{
循环句子
}
while(判别条件)```
咱们试着输出5个数字。
``````
###4-8 退出循环break
在while、for、do...while、while循环中运用break句子退出当时循环,直接履行后边的代码。
格局如下:

for(初始条件;判别条件;循环后条件值更新)

{

if(特殊状况)

{break;}

循环代码

}```

4-9 持续循环contin达利芙小鲜ue

continue的作用是只是越过本次循环,而整个循环体持续履行。

句子结构:

for(初始条件;判别条件;循环后条件值更新){ 
if(特殊状况) { continue; } 循环代码
}```
上面的循环中,当特殊状况发作的时分,本次循环将被越过,而后续的循环则不会受到影响。比方输出10个数字,假定数字为5就不输出了。
[![](http://upload-images.jianshu.io/upload_images/4334240-3ad63fd76d987497.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/52dc89270001212905110297.jpg)
**履行成果:**
**[![](http://upload-images.jianshu.io/upload_images/4334240-5278e20c4c6b053f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/52dc88e800017b8d03700342.jpg)**
##第5章 函数
###5-1 什么是函数
函数的作用,能够写一次代码,然后重复地重用这个代码。
运用函数完结:
```function add2(a,b){
sum = a + b;
alert(sum);
} // 只需写一次就能够
add2(3,2);
add2(7,8);
//只需调用函数就能够```
###5-2 界说函数
function 函数名( )
{
函数体;
}
function界说函数的关键字,“函数名”你为函数取的姓名,“函数体”替换为完结特定功用的代码。
###5-3 函数调用
函数界说好后,是不能主动履行的,需求调用它,直接在需求的方位写函数名。
榜首种状况:在```
第二种状况:在HTML文件中调用,如经过点击按钮后调用界说好的函数。
```





//按钮,onclick点击事情,直接写函数名


```
###5-4 有参数的函数
function 函数名(参数1,参数2)
{
函数代码
}
留意:参数能够多个,依据需求增减参数个数。参数之间用(逗号,)离隔。
依照这个格局,函数完结恣意两个数的和应该写成:
```function add2(x,y)
{
sum = x + y;
document.write(sum);
}```
x和y则是函数的两个参数,调用函数的时分,咱们可经过这两个参数把两个实践的加数传递给函数了
###5-5 回来值的函数
考虑:上一节函数中,经过"document.write"把成果输出来,假定想对函数的成果进行处理怎么办呢?
咱们只要把"document.write(sum)"这行改成如下代码:
```function add2(x,y)
{
sum = x + y;
return sum; //回来函数值,return后边的值叫做回来值。
}```
还能够经过变量存储调用函数的回来值,princess,西米露的做法,照相机-3d暮色,会聚全世界最美观的落日暮色景色代码如下:
```result = add2(3,4);//句子履行后,result变量中的值为7。```
留意:函数中参数和回来值不只是数字,还能够是字符串等其它类型。
##第6章 事情呼应,网页交互
###6-1 什么是事情
JavaScript 创立动态页面。事情是能够被 JavaScript 侦测到的行为。 网页中的每个元素都能够发作某些能够触发 JavaScript 函数或程序的事情。
比方说,当用户单击按钮或许提交表单数据时,就发作一个鼠标单击(onclick)事情,需求阅览器做出处理,回来给用户一个成果。
**首要事情表:**
[![](http://upload-images.jianshu.io/upload_images/4334240-e7d8d60fc8218f04.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/53e198540001b66404860353.jpg)
###6-2 鼠标单击事情( onclick )
onclick是鼠标单击事情,当在网页上单击鼠标时,就会发作该事情。一同onclick事情调用的程序块就会被履行,一般与按钮一同运用。
比方,咱们单击按钮时,触发 onclick 事情,并调用两个数和的函数add2()。代码如下:
```








```
留意: 在网页中,如运用事情,就在该元素中设置事情特点。
###6-3 鼠标经过事情(onmouseover)
鼠标经过事情,当鼠标移到一个目标上时,该目标就触发onmouseover事情,并履行onmouseover事情调用的程序。
实际鼠标经过"确认"按钮时,触发onmouseover事情,调用函数info(),弹出音讯框,代码如下:
[![](http://upload-images.jianshu.io/upload_images/4334240-1e84bc81cf07b3d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/53e196e500013f1807700354.jpg)
**运转成果:**
![](http://upload-images.jianshu.io/upload_images/4334240-46a0d04188c76313.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

###6-4 鼠标移开事情(onmouseout)
鼠标移开事情,当鼠标移开当时目标时,履行onmouseout调用的程序。
当把鼠标移动到"登录"按钮上,然后再移开时,触发onmouseout事情,调用函数message(),代码如下:
[![](http://upload-images.jianshu.io/upload_images/4334240-15e2b65ac806d7fd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/53e195580001a0bc07730356.jpg)
**运转成果:**
[![](http://upload-images.jianshu.io/upload_images/4334240-da27f311f8cda973.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/53e195bf00010d1804760385.jpg)
###6-5 光标聚集事情(春药有哪些onfocus)
当网页中的目标取得聚点时,履行onfocus调用的程序就会被履行。
如下代码, 当将光标移到文本框内时,即焦点在文本框内,触发onfocus 事情,并调用函数message()。
[![](http://upload-images.jianshu.io/upload_images/4334240-884e4166ad2206c6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/53e19337000113d108390338.jpg)
**运转成果:**
[![](http://upload-images.jianshu.io/upload_images/4334240-03e0a913a81e0dc1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/5312c5660001821a04300326.jpg)
###6-6 失焦事情(onblur)
onblur事情与onfocus是相对事情,当光标脱离当时取得聚集目标的时分,触发onblur事情,一同履行被调用的程序。
如下代码, 网页中有用户和暗码两个文本框。当时光标在用户文本框内时(即焦点在文本框),在光标脱离该文本框后(即失焦时),触发onblur事情,并调用函数message()。
[![](http://upload-images.jianshu.io/upload_images/4334240-3bc93257a2628593.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/53e191d00001dfe508560326.jpg)
**运转成果:**
**[![](http://upload-images.jianshu.io/upload_images/4334240-993df81199e4d8cb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/5312da710001968704410319.jpg)**
###6-7 内容选中事情(onselect)
选中事情,当文本框或许文本域中的文字被选中时,触发onselect事情,一同调用的程序就会马口铁封罐机被履行。
如下代码,中选中用户文本框内的文字时,触发onselect 事情,并调用函数message()。
[![](http://upload-images.jianshu.io/upload_images/4334240-8b7823dd31fabf52.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/53e190b70001ffa908560325.jpg)
**运转成果:**
**[![](http://upload-images.jianshu.io/upload_images/4334240-2958900843e98377.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/5312d7ba0princess,西米露的做法,照相机-3d暮色,会聚全世界最美观的落日暮色景色0013fff03950319.jpg)**
###6-8 文本框内容改动事情(onchange)
经过改动文本框的内容来触发onchange事情,一同履行被调用的程序。
如下代码,当用户将文本框内的文字改动后,弹出对话框“您改动了文本内容!”。
[![](http://upload-images.jianshu.io/upload_images/4334240-ce7fe5b42ff76a1e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/5312d59c00011cd311490444.jpg)
**运转成果:**
**[![](http://upload-images.jianshu.io/upload_images/4334240-628f8d54ef252811.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/5312d5c600012c3703960319.jpg)**
###6-9 加载事情(onload)
事情会在页面加载完结后,当即发作,一同履行被调用的程序。
留意:1.加载页面时,触发onload事情,事情写在标签内。
2 此节的加载页面,可理解为翻开一个新页面时。如下代码,当加载一个新页面时,弹出对话框“加载中,请稍等…”。
[![](http://upload-images.jianshu.io/upload_images/4334240-d899b446466373dd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/5312e3c10001bd9908920372.jpg)
**运转成果:**
**[![](http://upload-images.jianshu.io/upload_images/4334240-311fd6630e65b1ab.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/5312e3eb0001e8a103930318.jpg)**
###6-10 卸载事情(onunload)
当用户退出页面时(页面封闭、页面改写等),触发onUnload事情,一同履行被调用的程序。
**留意:不同阅览器对onunload事情支撑不同。**
如下代码,当退出页面时,弹出对话框“您确认脱离该网页吗?”。
[![](http://upload-images.jianshu.io/upload_images/4334240-24ebcb4190cf5747.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/5312ee6b0001f89408950418.jpg)
**运转成果:(IE阅览器)**
[![](http://upload-images.jianshu.io/upload_images/4334240-3c61b3dbf374f9a7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/546470c90001583205460464.jpg)
##第7章 javascript内置目标
###7-1 什么是目标
JavaScript 中的一切事物都是目标,如:字符串、数值、数组、函数等,每个目标带有特点和办法。
目标的特点:反映该目标某些特定的性质的,如:字符串的长度、图画的长宽等;
目标的办法:能够在目标上履行的动作。例如,表单的“提交”(Submit),时刻的“获取”(getYear)等;
JavaScript 供给多个内建目标,比方 String、Date、Array 等等,运用目标前先界说,如下运用数组目标:
``` var objectName =new Array();//运用new关键字界说目标
或许
var objectName =[];```
拜访目标特点的语法:

objectName.propertyName```

如运用 Array 目标的 length 特点来取得数组的长度:

var myl=myarray.length;//拜访数组长度length特点```
以上代码履行后,myl的值将是:6
拜访目标的princess,西米露的做法,照相机-3d暮色,会聚全世界最美观的落日暮色景色办法:

objectName.methodName()```

如运用string 目标的 toUpperCase() 办法来将文本转换为大写:

var request=mystr.toUpperCase(); //运用字符串目标办法```
以上代码履行后,request的值是:HELLO WORLD!

###7-2 Date 日期目标
日期目标能够贮存恣意一个日期,而且能够准确到毫秒数(1/1000 秒)。
界说一个时刻目标 :
```var Udate=new Date();```
**留意**:**运用关键字new,Date()的首字母有必要大写。
使 Udate 成为日期目标,而且已有初始值:**当时时刻(当时电脑体系时刻)**。
假定要自界说初始值,能够用以下办法:
```var d = new Date(2012, 10, 1); //2012年10月1日
var d = new Date('Oct 1, 2012'); //2012年10月1日```
咱们最好运用下面介绍的“办法”来严厉界说时刻。
**拜访办法语法:**“<日期目标>.<办法>”
Date目标中处理时刻和日期的常用办法:
[![](http://upload-images.jianshu.io/upload_images/4334240-7c5249c436de735d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/555c650d0001ae7b04180297.jpg)
###7-3 回来/设置年份办法
```get/setFullYear() 回来/设置年份,用四位数表明。```
```var mydate=new Date();//当时时刻2014年3月6日
document.write(mydate+"
");//输出当时时刻
document.write(mydate.getFullYear()+"
");//输出当时年份
mydate.setFullYear(81);princess,西米露的做法,照相机-3d暮色,会聚全世界最美观的落日暮色景色 //设置年份
document.write(mydate+"
"); //输出年份被设定为 0081年。```
留意:不同阅览器, mydate.setFullYear(81)成果不同,年份被设定为 0081或81两种状况。
成果:
Thu Mar 06 2014 10:57:47 GMT+0800
2014
Thu Mar 06 0081 10:57:47 GMT+0800
留意:
1成果格局依次为:星期、月、日、年、时、分、秒、时区。(火狐阅览器)
2不同阅览器,时刻格局有差异。
###7-4 回来星期办法
getDay() 回来星期,回来的是0-6的数字,0 表明星期天。假定要回来相对应“星期”,经过数组完结,代码如下:
``````
留意:以上代码是在2014年3月7日,星期五运转。
成果:
5
今天是:星期五
###7-5 回来/设置时刻办法
get/setTime() 回来/设置时刻,单位毫秒数,核算从 1970 年 1 月 1 日零时到日期目标所指的日期的毫秒数。
假定将现在日期目标的时刻推延1小时,代码如下:
``````
成果:
当时时刻:Thu Mar 6 11:46:27 UTC+0800 2014
推延一小时时刻:Thu Mar 6 12:46:27 UTC+0800 2014
留意:1. 一小时 60 分,一分 60 秒,一秒 1000 毫秒
2. 时刻推延 1 小时,便是: “x.setTime(x.getTime() + 60 * 60 * 1000);”
###7-6 String 字符串目标
在之前的学习中现已运用字符串目标了,界说字符串的办法便是直接赋值。比方:
```var mystr = "I love JavaScript!"```
界说mystr字符串后,咱们就能够拜访它的特点和办法。
拜访字符串目标的特点length:
```stringObject.length; 回来该字符串的长度。
var mystr="Hello World!";
var myl=mystr.length;```
以上代码履行后,myl 的值将是:12
拜访字符串目标的办法:
运用 String 目标的 toUpperCase() 办法来将字符串小写字母转换为大写:
```var mystr="Hello world!";
var mynum=mystr.toUpperCase();```
以上代码履行后,mynum 的值是:HELLO WORLD!
###7-7 回来指定方位的字符
charAt() 办法可回来指定方位的字符。回来的字符是长度为 1 的字符串。
**语法:**
stringObject.charAt(index)
**参数阐明:**
[![](http://upload-images.jianshu.io/upload_images/4334240-17d03e50e8699dde.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/53251a310001cf1e03370092.jpg)
**留意**:**1.字符串中榜首个字符的下标是 0。最终一个字符的下标为字符串长度减一(string.length-1)。
2.假定参数 index 不在 0 与 string.length-1 之间,该办法将回来一个空字符串。
**如:**在字符串 "I love JavaScript!" 中,回来方位2的字符:
``````
**留意:**一个空格也算一个字符。
以上代码的运转成果:
l
###7-8 回来指定的字符串初次呈现的方位
indexOf() 办法可回来某个指定的字符串值在字符串中初次呈现的方位。
**语法**
stringObject.indexOf(substring, startpos)
**参数阐明:**
[![](http://upload-images.jianshu.io/upload_images/4334240-8e734bb740390595.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/53853d4200019feb04920149.jpg)**阐明:**
1.该办法将自始至终地检索字符串 stringObject,看它是否含有子串 substring。
2.可选参数,从stringObject的startpos方位开端闲适158连锁酒店查找substring,假定没有此参数将从stringObject的开端方位查找。
3.假定找到一个 substring,则回来 substring 的榜初次呈现的方位。stringObject 中的字符方位是从 0 开端的。
**留意:**1.indexOf() 办法差异巨细写。
2.假定要检索的字符串值没有呈现,则该办法回来 -1。
例如: 对 "I love JavaScript!" 字符串内进行不同的检索:
``````
以上代码的输出:

0

4

9```

7-9 字符串切割split()

常识解说:

split() 办法将字符串切割为字符串数组,并回来此数组。

语法:

stringObject.split(separator,limit)

参数阐明:

留意:假定把空字符串 ("") 用作 separator,那么 stringObject 中的每个字符之间都会被切割。

咱们将依照不同的办法来切割字符串:

 运用指定符号切割字符串,代码如下:document.write(mystr.split(".")+"
");
document.write(mystr.split(".", 2)+"
");```
**运转成果:**
www,imooc,com
www,imooc
将字符串切割为字符,代码如下:

document.write(mystr.split("")+"

");

document.write(mystr.split("", 5));```

运转成果:

w,w,w,.,i,m,o,o,c,.,c,o,m

w,w,w,.,i

7-10 提取字符串substring()

substring() 办法用于提取字符串中介于两个指定下标之间的字符。

语法:

stringObject.substring(startPos,stopPos)

参数阐明:

  1. 留意:回来的内容是从 start开端(包括start方位的字符)到 stop-1 处的毛选第六卷才是精华一切字符,其长度为 stop 减start。
  2. 假定参数 start 与 stop 持平,那么该办法回来的便是一个空串(即长度为 0 的字符串)。
  3. 假定 start 比 stop 大,那么该办法在提取子串之前会先交流这两个参数。
  4. 运用 substring() 从字符串中提取字符串,代码如下:
var mystr="I love JavaScript"; 
document.write(mystr.substring(7)); document.write(mystr.substring(2,6));
```
**运转成果****:**
JavaScript
love
###7-11 提取指定数目的字符substr()
substr() 办法从字符串中提取从 startPos方位开端的指定数目的字符串。
**语法:**
stringObject.substr(startPos,length)
**参数阐明:**
[![](http://upload-images.jianshu.io/upload_images/4334240-3fda3394432dac59.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://释梦大全img.mukewang.com/532bf2e00001105305100098.jpg)
**留意:**
假定参数startPos是负数,从字符串的尾部开端算起的方位。也便是说,-1 指字符串中最终一个字符,-2 指倒数第二个字符,以此类推。
假定startPos为负数且绝对值大于字符串长度,startPos为0。
运用 substr() 从字符串中提取一些字符,代码如下:
``````
**运转成果:**
JavaScript!
love
###7-12 Math目标
Math目标,供给对数据的数学核算。
运用 Math 的特点和办法,代码如下:

```

运转成果

3.14159265358979315

留意:Math 目标是一个固有的目标,无需创立它,直接把 Math 作为目标运用就能够调用其一切特点和办法。这是它与Date,String目标的差异。

Math 目标特点

Math 目标办法

7-13 向上取整ceil()

ceil() 办法可对一个数进行向上取整。

语法:

Math.ceil(x)

参数阐明:

留意:它回来的是大于或等于x,而且与x最挨近的整数。

 咱们将把 ceil() 办法运用到不同的数字上,代码如下:document.write(Math.ceil(0.8) + "
")
document.write(Math.ceil(6.3) + "
")
document.write(Math.ceil(5) + "
")
document.write(Math.ceil(3.5) + "
")
document.write(Math.ceil(-5.1) + "
")
document.write(Math.ceil(-5.9))
```
**运转成果:**
1
7
5
4
-5
-5
###7-14 向下取整floor()
floor() 办法可对一个数进行向下取整。
**语法:**
Math.floor(x)
**参数阐明:**
[![](http://upload-images.jianshu.io/upload_images/4334240-7f527e4f00f2f392.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewan三明十八寨g.com/532fe8e00001e4e605230063.jpg)
**留意:**回来的是小于或等于x,而且与 x 最挨近的整数。
咱们将在不同的数字上运用 floor() 办法,代码如下:
``````
**运转成果:**
0
6
5
3
-6
-6
###7-15 四舍五入round()
round() 办法可把一个数字四舍五入为最挨近的整数。
**语法:**
Math.round(x)
**参数阐明:**
![](http://upload-images.jianshu.io/upload_images/4334240-d369d1c719bc1fde.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
**留意:**
1. 回来与 x 最挨近的整数。
2. 关于 0.5,该办法将进行上舍入。(5.5 将舍入为 6)
3. 假定 x 与两边整数平等挨近,则成果挨近 +∞方向的数字值 。(如 -5.5 将舍入为 -5; -5.52 将舍入为 -6),如下图:
[![](http://upload-images.jianshu.io/upload_images/4334240-47efb91df69b25b8.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/53fc4cc8000169a907530196.jpg)
把不同的数舍入为最挨近的整数,代码如下:
``````
**运转成果:**
2
3
0
-6
-7
###7-16 随机数 random()
random() 办法可回来介于 0 ~ 1(大于或等于 0 但小于 1 )之间的一个随机数。
语法:
Math.random();
留意:回来一个大于或等于 0 但小于 1 的符号为正的数字值。
咱们取得介于 0 到 1 之间的一个随机数,代码如下:
``````
运转成果:
0.190305486195328
留意:由于是随机数,所以每次运转成果不相同,可是0 ~ 1的数值。
取得0 ~ 10之间的随机数,代码如下:
``````
运转成果:
8.72153625893887
###7-17 Array 数组目标
数组目标是一个目标的调集,里面的目标能够是不同类型的。数组的每一个成员目标都有一个“下标”,用来表明它在数组中的方位,是从零开端的
**数组界说的办法:**
1. 界说了一个空数组:
var 数组名= new Array();
2. 界说时指定有n个空元素的数组:
var 数组名 =new Array(n);
3. 界说数组的时分,直接初始化数据:
var 数组名 = [<元素1>, <元素2>, <元素3>...];
咱们界说myArray数组,并赋值,**代码如下:**
var myArray = [2, 8, 6];
**阐明:**界说了一个数组 myArray,里面的元素是:myArray[0] = 2; myArray[1] = 8; myArray[2] = 6。
**数组元素运用:**
数组名[下标] = 值;
**留意**: 数组的下标用方括号括起来,从0开端。
**数组特点:**
length 用法:<数组目标>.length;回来:数组的长度,即数组里有多少个元素。它等于数组里最终一个元素的下标加一。
**数组办法:**
[![](http://upload-images.jianshu.io/upload_images/4334240-9e4e819ff8f7c694.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/533295ab0001dead05190599.jpg)
###7-18 数组衔接concat()
concat() 办法用于衔接两个或多个数组。此办法回来一个新数组,不改动本来的数组。
**语法**

arrayObject.concat(array1,array2,...,arrayN)```

参数阐明:

**留意: **该办法不会改动现有的数组,而只是会回来被衔接数组的一个副本。

 咱们创立一个数组,将把 concat() 中的参数连逆杀神魔接到数组 myarr 中,代码如下:var mya = new Array(3); 
mya[0] = "1";
mya[1] = "2";
mya[2] = "3";
document.write(mya.concat(4,5)+"
");
document.write(mya);
```
**运转成果:**
1,2,3,4,51,2,3
咱们创立了三个数组,然后运用 concat() 把它们衔接起来,代码如下:
``````
**运转成果:**
hello!,I,love,JavaScript,!
###7-19 指定分隔符衔接数组元素join()
join()办法用于把数组中的一切元素放入一个字符串。元素是经过指定的分隔符进行分隔的。
**语法:**
arrayObject.join(分隔符)
**参数阐明:**
![](http://upload-images.jianshu.io/upload_images/4唐米拖拉机334240-08d562d11a7b8e19.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
留意:回来一个字符串,该字符串把数组中的各个元素串起来,用<分隔符>置于元素与元素之间。这个办法不影响数组本来的内容。 咱们运用join()办法,将数组的一切元素放入一个字符串中,代码如下:

```

运转成果:

I,love,JavaScript

咱们将运用分隔符来分隔数组中的元素,代码如下:

var myarr = new Array(3) 
myarr[0] = "I";
myarr[1] = "love";
myarr[2] = "JavaScript";
document.write(myarr.join(".")一向被强插的影帝);
```
**运转成果:**
I.love.JavaScript
###7-20 倒置数组元素次序reverse()
reverse() 办法用于倒置数组中元素的次序。
语法:
arrayObject.reverse()
留意:该办法会改动本来的数组,而不会创立新的数组。
界说数组myarr并赋值,然后倒置其元素的次序:
``````
运转成果:
1,2,3
3,2,1
###7-21 选定元素slice()
slice() 办法可从已有的数组中回来选定的元素。
**语法**
arrayObject.slice(start,end)
**参数阐明:**
[![](http://upload-images.jianshu.io/upload_images/4334240-2bdf3d4a39fe1237.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/533299680001637b05160145.jpg)
1. 回来一个新的数组,包括从 start 到 end (不包括该元素)的 arrayObject 中的元素。
2. 该办法并不会修正数组,而是回来一个子数组。
**留意:**
1.可运用负值从数组的尾部选取元素。
2.假定 end 未被规则,那么 slice() 办法会选取从 start 到数组结束的一切元素。
3.String.slice() 与 Array.slice() 相似。
咱们将创立一个新数组,然后从其间选取的元素,代码如下:

```

运转成果:

1,2,3,4,5,6

3,4

1,2,3,4,5,6

7-22 数组排序sort()

sort()办法使数组中的元素依照必定的次序排列。

语法:

arrayObject.sort(办法函数)

参数阐明:

1.假定不指定<办法函数>,则按unicode码次序排列。

2.假定指定<办法函数>,则按<办法函数>所指定的排序办法排序。

myArray.sort(sortMethod);**留意: **该函数要比较两个值,然后回来一个用于阐明这两个值的相对次序的数字。比较函数应该具有两个参数 a 和 b,其回来值如下:

若回来值<=-1,则表明 A 在排序后的序列中呈现在 B 之前。 若回来值>-1 && <1,则表明 A 和 B 具有相同的排序次序。 若回来值>=1,则表明 A 在排序后的序列中呈现在 B 之后。

1.运用sort()将数组进行排序,代码如下:

var myarr1 = new Array("Hello","John","love","JavaScript"); 
var myarr2 = new Array("80","16","50","6","100","1"); document.write(myarr1.sort()+"
");
document.write(myarr2.sort());
```
**运转成果:**
Hello,JavaScript,John,love
1,100,16,50,6,80
**留意:上面的代码没有依照数值的巨细对数字进行排序。**
**2.如要完结这一点,就有必要运用一个排序函数,代码如下:**
``````
**运转成果:**
80,16,50,6,100,11,6,16,50,80,100
##第8章 阅览器目标
###8-1 window目标
window目标是BOM的中心,window目标指当时的阅览器窗口。
**window目标办法:**
**[![](http://upload-images.jianshu.io/upload_images/4334240-984fa35bd5be94dd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/535483720001a54506670563.jpg)**
**留意:**在JavaScript根底篇中,已寅行道解说了部分特点,window目标要点解说计时器。
###8-2 JavaScript 计时器
在JavaScript中,咱们能够在设定的时刻距离之后来履行代码,而不是在函数被调用后当即履行。
**计时器类型:**
一次性计时器:仅在指定的推迟时刻之后触发一次。
距离性触发计时器:每隔必定的时刻距离就触发一次。
**计时器办法:**
[![](http://upload-images.jianshu.io/upload_images/4334240-76bcc3f110c30f36.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/56976e1700014fc504090143.jpg)
###8-3 计时器setInterval()
在履行时,从载入页面后每隔指定的时刻履行代码。
语法:
setInterval(代码,交互时刻);
参数阐明:
1. 代码:要调用的函数或要履行的代码串。
2. 交互时刻:周期性履行或调用表达式之间的时刻距离,以毫秒计(1s=1000ms)。
回来值:
一个能够传递给 clearInterval() 然后撤销对"代码"的周期性履行的值。
调用函数格局(假定有一个clock()函数):
setInterval("clock()",1000)

setInterval(clock,1000)
咱们设置一个计时器,每隔100毫秒调用clock()函数,并将时刻显现出来,代码如下:

计时器

```

8-4 撤销计时器clearInterval()

clearInterval() 办法可撤销由 setInterval() 设置的交互时刻。

语法:

clearInterval(id_of_setInterval)

参数阐明:

id_of_setInterval:由 setInterval() 回来的 ID 值。

每隔 100 毫秒调用 clock() 函数,并显现时刻。当点击按钮时,中止时刻,代码如下:





计时器








```
###8-5 计时器setTimeout()
setTimeout()计时器,在载入后推迟指定时刻后,去履行一次表达式,仅履行一次。
语法:
setTimeout(代码,推迟时刻);
参数阐明:
1. 要调用的函数或要履行的代码串。
2. 延时时刻:在履行代码前需等候的时刻,以毫秒为单位(1s=1000ms)。
当咱们翻开网页3秒后,在弹出一个提示框,代码如下:

当按钮start被点击时,setTimeout()调用函数,在5秒后弹出一个提示框。

```

要创立一个运转于无量循环中的计数器,咱们需求编写一个函数来调用其本身。鄙人面的代码,当按钮被点击后,输入域便从0开端计数。












```
###8-6 撤销计时器clearTimeout()
setTimeout()和clearTimeout()一同运用,中止计时器。
语法:
clearTimeout(id_of_setTimeout)
参数阐明:
id_of_setTimeout:由 setTimeout() 回来的 ID 值。该值标识要撤销的推迟履行代码块。
下面的比方和上节的无量循环的比方相似。仅有不同是,现在咱们增加了一个 "Stop" 按钮来中止这个计数器:

```

8-7 History 目标

history目标记载了用户从前阅览过的页面(URL),并能够完结阅览器行进与撤退相似导航的功用。

留意:从窗口被翻开的那一刻开端记载,每个阅览器窗口、每个标签页甚至每个结构,都有自己的history目标与特定的window目标相关。

语法:

window.history.[特点|办法]

留意:window能够省掉。

History 目标特点

History 目标办法

 运用length特点,当时窗口的阅览前史总长度,代码如下:var HL = window.history.length; 
document.write(HL);
```
###8-8 回来前一个阅览的页面
back()办法,加载 history 列表中的前一个 URL。
语法:
window.history.back();
比方,回来前一个阅览的页面,代码如下:
window.history.back();
留意:等同于点击阅览器的撤退按钮。
back()相当于go(-1),代码如下:
window.history.go(-1);
###8-9 回来下一个阅览的页面
forward()办法,加载 history 列表中的下一个 URL。
假定撤退之后,再想回到撤退之前阅览的页princess,西米露的做法,照相机-3d暮色,会聚全世界最美观的落日暮色景色面,则能够运用forward()办法,代码如下:
window.history.forward();
留意:等价点击行进按钮。
forward()相当于go(1),代码如下:
window.history.go(1);
###8-10 回来阅览前史中的其他页面
go()办法,依据当时所在的页面,加载 history 列表中的某个详细的页面。
**语法:**
window.history.go(number);
**参数:**
[![](http://upload-images.jianshu.io/upload_images/4334240-8ed8164afae888a9.jpg?imageMogr2/auto-orient/strippkhex运用教程%7CimageView2/2/w/1240)](http://img.mukewang.com/5354947e00011a9a06490153.jpg)
阅览器中,回来当时页面之前阅览过的第二个前史页面,**代码如下:**
window.history.go(-2);
**留意:和在阅览器中单击两次撤退按钮操作相同。**
同理,回来当时页面之后阅览过的第三个前史页面,**代码如下:**
window.history.go(3);
###8-11 Location目标
location用于获取或设置窗体的URL,而且能够用于解析URL。
**语法:**
location.[特点|办法]
**location目标特点图示:**
[![](http://upload-images.jianshu.io/upload_images/4334240-2b2e3a9eb2fafb27.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/53605c5a0001b26909900216.jpg)
**location 目标特点:**
**[![](http://upload-images.jianshu.io/upload_images/4334240-1e9d1d6bfab6234e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/5354b1d00001c4ec06220271.jpg)**
**location 目标办法:**
**[![](http://upload-images.jianshu.io/upload_images/4334240-b75d7ef87942b508.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/5354b1eb00016a2405170126.jpg)**
###8-12 Navigator目标
Navigator 目标包括有关阅览器的信息,一般用于检测阅览器与操作体系的版别。
**目标特点:**
[![](http://upload-images.jianshu.io/upload_images/4334240-cd59a77f21ee2814.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/5354cff70001428b06880190.jpg)
检查阅览器的称号和版别,**代码如下:**
``````
###8-13 userAgent
回来用户代理头的字符串表明(便是包括阅览器版别信息等的字符串)
**语法**
navigator.userAgent
几种阅览的user_agent.,像360的兼容形式用的是IE、极速形式用的是chrom的内核。
[![](http://upload-images.jianshu.io/upload_images/4334240-33efe843da2d8d84.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/535a3a4a0001e03f06870189.jpg)
运用userAgent判别运用的是什么阅览器(假定运用的是IE8阅览器),**代码如下:**
```function validB(){
var u_agent = navigator.userAgent;
var B_name="Failed to identify the browser"; if(u_agent.indexOf("Firefox")>-1){ B_name="Firefox"; }
else if(u_agent.indexOf("Chrome")>-1){ B_name="Chrome"; }
else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){ B_name="IE(8-10)"; }
document.write("B_name:"+B_name+"
"); document.write("u_agent:"+u_agent+"
"); }```
**运转成果:**
[![](http://upload-images.jianshu.io/upload_images/4334240-ebabb1b9a076ab58.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/535dea1e00017b0b06880265.jpg)
###8-14 screen目标
screen目标用于获取用户的屏幕信息。
**语法:**
window.screen.特点
**目标特点:**
**[![](http://upload-images.jianshu.io/upload_images/4334240-057957d5343cd879.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/5354d2810001a47706210213.jpg)**
###8-15 屏幕分辨率的高和宽
window.screen 目标包括有关用户屏幕的信息。
1. screen.height 回来屏幕分辨率的高
2. screen.width 回来屏幕分辨率的宽
留意:
1.单位以像素计。
2.window.screen 目标在编写时能够不运用 window 这个前缀。
咱们来获取屏幕的高和宽,代码如下:
``````
###8-16 屏幕可用高和宽度
1. screen.availWidth 特点回来拜访者屏幕的宽度,以像素计,减去界面特性,比方任务栏。
2. screen.availHeight 特点回来拜访者屏幕的高度,以像素计,减去界面特性,比方任务栏。
留意:
不同体系的任务栏默许高度不相同,及任务栏的方位可在屏幕上下左右任何方位,所以有或许可用宽度和高度不相同。
咱们来获取屏幕的可用高和宽度,代码如下:
``````
留意:依据屏幕的不同显现值不同。
##第9章 DOM目标,操控HTML元素
###9-1 知道DOM
文档目标模型DOM(Document Object Model)界说拜访和处理HTML文档的规范办法。DOM 将HTML文档呈现为带有元素、特点和文本的树结构(节点树)。
**先来看看下面代码:**
[![](http://upload-images.jianshu.io/upload_images/4334240-bacf0c8d99c49924.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/5375ca640001c67307860420.jpg)
**将HTML代码分解为DOM节点层次图:**
[![](http://upload-images.jianshu.io/upload_images/4334240-b7c34dfe8a353be5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/5375ca7e0001dd8d04830279.jpg)
**HTML**文档能够说由节点构成的调集,DOM节点有:
**1. **元素节点:上图中、、

等都是元素节点,即标签。
**2. **文本节点:向用户展现的内容,如```

  • ...
  • ```中的JavaScript、DOM、CSS等文本。
    **3. **特点节点:元素特点,如``````标签的链接特点href="http://www.3dmus.com/?urldecode=aHR0cDovL3d3dy5pbW9vYy5jb20="。
    **节点特点:**
    [![](http://upload-images.jianshu.io/upload_images/4334240-6ff52070dd297264.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/5375c953000117ee05240129.jpg)
    **遍历节点树:**
    [![](http://upload-images.jianshu.io/upload_images/4334240-96466463eeff403e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/53f17a6400017d2905230219.jpg)
    **以上图ul为例,它的父级节点body,它的子节点3个li,它的兄弟结点h2、P。**
    **DOM操作:**
    [![](http://upload-images.jianshu.io/upload_images/4334240-06c4663dc3fd2c64.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/538d29da000152db05360278.jpg)
    **留意:**前两个是document办法。
    ###9-2 getElementsByName()办法
    回来带有指定称号的节点目标的调集。
    **语法:**
    document.getElementsByName(name)
    与getElementById() 办法不同的是,经过元素的 name 特点查询元素,而不是经过 id 特点。
    **留意:**
    1. 由于文档中的 name 特点或许不仅有,一切 getElementsByName() 办法回来的是元素的数组,而不是一个元素。
    2. 和数组相似也有length特点,能够和拜访数组相同的办法来拜访,从0开端。
    **看看下面的代码:**
    [![](http://upload-images.jianshu.io/upload_images/4334240-b1a6a81fde83853a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/5375d5ec00012bac06210322.jpg)
    **运转成果:**
    [![](http://upload-images.jianshu.io/upload_images/4334240-5520beb5d414709c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/53795f0b0001233404580318.jpg)
    ###9-3 getElementsByTagName()办法
    getElementsByTagName()办法
    回来带有指定标签名的节点目标的调集。回来元素的次序是它们在文档中的次序。
    **语法:**
    document.getElementsByTagName(Tagname)
    **阐明:**
    1. Tagname是标签的称号,如p、a、img等标签名。
    2. 和数组相似也有length特点,能够和拜访数组相同的办法来拜访,所以从0开端。
    看看下面代码,经过getElementsByTagName()获取节点。
    [![](http://upload易升宝-images.jianshu.io/upload_images/4334240-a5601e2a62d1f228.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/53ec174a0001404206540436.jpg)
    ###9-4 差异getElementByID,getElementsByName,getElement
    **以人来举例阐明,人有能标识身份的身份证,有姓名,有类别(大人、小孩、白叟)等。**
    1. ID 是一个人的身份证号码,是仅有的。所以经过getElementById获取的是指定的一个人。
    2. Name 是他的姓名,能够重复。所以经过getElementsByName获取姓名相同的人调集。
    3. TagName可看似某类,getElementsByTagName获取相同类的人调集。如获取小孩这类人,getElementsByTagName("小孩")。
    **把上面的比方转换到HTML中,如下:**
    音乐
    input标签就像人的类别。
    name特点就像人的姓名。
    id特点就像人的身份证。
    **办法总结如下:**
    [![](http://upload-images.jianshu.io/upload_images/4334240-341edd1b0887abeb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/5405263300018bcf05760129.jpg)
    **留意:**办法差异巨细写
    经过下面的比方(6个name="hobby"的复选项,两个按钮)来差异三种办法的不同:
    ``` 音乐
    爬山
    游水
    阅览
    打球
    跑步

    ```
    1. document.getElementsByTagName("input"),成果为获取一切标签为input的元素,共8个。
    2. document.getElementsByName("hobby"),成果为获取特点name="hobby"的元素,共6个。
    3. document.getElementById("hobby6"),成果为获取特点id="hobby6"的元素,只要一个,"跑步"这个榜首皇夫复选项。
    ###9-5 getAttribute()办法
    经过元素节点的特点称号获取特点的值。
    **语法:**
    elementNode.getAttribute(name)
    **阐明:**
    1. elementNode:运用getElementById()、getElementsByTagName()等办法,获取到的元素节点。
    2. name:要想查询的元素节点的特点姓名
    看看下面的代码,获取h1标签的特点值:
    [![](http://upload-images.jianshu.io/upload_images/4334240-066aaa820de27aa3.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/538d242700019ec809330432.jpg)
    **运转成果:**
    h1标签的ID :alinkh1标签的title :getAttribute()获取标签的属值
    ###9-6 setAttribute()办法
    setAttribute() 办法增加一个指定称号和值的新特点,或许把一个现有的特点设定为指定的值。
    语法:
    elementNode.setAttribute(name,value)
    阐明:
    1.name: 要设置的特点名。
    2.value: 要设置的特点值。
    留意:
    1.把指定的特点设置为指定的值。假定不存在具有指定称号的特点,该办法将创立一个新特点。
    2.相似于getAttribute()办法,setAttribute()办法只能经过元素节点目标调用的函数。
    ###9-7 节点特点
    在文档目标模型 (DOM) 中,每个节点都是一个目标。DOM 节点有三个重要的特点 :
    1. nodeName : 节点的称号
    2. nodeValue :节点的值
    3. nodeType :节点的类型
    一、nodeName 特点: 节点的称号,是只读的。
    1.元素节点的 nodeName 与标签名相同
    2.特点节点的 nodeName 是特点的名princess,西米露的做法,照相机-3d暮色,会聚全世界最美观的落日暮色景色称
    3.文本节点的 nodeName 永远是 #text
    4.文档节点的 nodeName 永远是 #document
    二、nodeValue封景被强 特点:节点的值
    1.元素节点的 nodeValue 是 undefined 或 null
    2.文本节点的 nodeValue 是文本本身
    3.特点节点的 nodeValue 是特点的值
    三、nodeType 特点: 节点的类型,是只读的。以下常用的几种结点类型:
    元素类型 节点类型
    元素 1
    特点 2
    文本 3
    注释 8
    文档 9
    ###9-8 拜访子节点childNodes
    拜访选定元素节点下的一切子节点的列表,回来的值能够看作是一个数组,他具有length特点。
    **语法:**
    elementNode.childNodes
    **留意:**
    假定选定的节点没有子节点,则该特点回来不包括节点的 NodeList。
    **咱们来看看下面的代码:**
    [![](http://upload-images.jianshu.io/upload_images/4334240-3548253f05c86554.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/538405fa00010e6c05630357.jpg)
    **运转成果:**
    **IE:**
    UL子节点个数:3
    节点类型:1
    **其它阅览器:**
    UL子节点个数:7
    节点类型:3
    **留意:**
    1. IE全系列、firefox、chrome、opera、safari兼容问题
    2. 节点之间的空白符,在firefox、chrome、operaprincess,西米露的做法,照相机-3d暮色,会聚全世界最美观的落日暮色景色、safari阅览器是文本节点,所以IE是3,其它阅览器是7,如下图所示:
    [![](http://upload-images.jianshu.io/upload_images/4334240-1ad64ace93def924.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/538d2b8a000163e303430127.jpg)
    **假定把代码改成这样:**
    ```

    ```
    **运转成果:(IE和其它阅览器成果是相同的)**
    UL子节点个数:3
    节点类型:1
    ###9-9 拜访子节点的榜首和最终项
    一、firstChild 特点回来‘childNodes’数组的榜首个子节点。假定选定的节点没有子节点,则该特点回来 NULL。
    语法:
    node.firstChild
    阐明:与elementNode.childNodes[0]是相同的作用。
    二、 lastChild 特点回来‘childNodes’数组的最终一个子节点。假定选定的节点没有子节点,则该特点回来 NULL。
    语法:
    node.lastChild
    阐明:与elementNode.childNodes[elementNode.childNodes.length-1]是相同的作用。
    ###9-10 拜访父节点parentNode
    获取指定节点的父节点
    语法:
    elementNode.parentNode
    留意:父节点只能有一个。
    看看下面的比方,获取 P 节点的父节点,代码如下:

    parentNode 获取点拨节点的父节点

    ```

    运转成果:

    parentNode 获取点拨节点的父节点

    DIV

    拜访祖节点:

    elementNode.parentNode.parentNode

    看看下面的代码:



    parentNode
    获取点拨节点的父节点



    ```
    运转成果:
    parentNode获取点拨节点的父节点
    DIV
    留意: 阅览器兼容问题,chrome、firefox等阅览器标签之间的空白也算是一个文本节点。
    ###9-11 拜访兄弟节点
    1. nextSibling 特点可回来某个节点之后紧跟的节点(处于同一树层级中)。
    **语法:**
    nodeObject.nextSibling
    **阐明:**假定无此节点,则该特点回来 null。
    2. previousSibling 特点可回来某个节点之前紧跟的节点(处于同一树层级中)。
    **语法:**
    nodeObject.previousSibling
    **阐明:**假定无此节点,则该特点回来 null。
    留意: 两个特点获取的是节点。Internet Explorer 会疏忽节点间生成的空白文本节点(例如,换行符号),而其它阅览器不会疏忽。
    **解决问题办法:**
    判别节点nodeType是否为1, 如是为元素节点,越过。
    [![](http://upload-images.jianshu.io/upload_images/4334240-83675b421eab627c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/5386e3c80001c25607010856.jpg)
    **运转成果:**
    LI = javascript
    nextsibling:LI = jquery
    ###9-12 刺进节点appendChild()
    在指定节点的最终一个子节点列表之后增加一个新的子节点。
    **语法:**
    appendChild(newnode)
    **参数:**
    newnode:指定追加的节点。
    咱们来看看,div标签内创立一个新的 P 标签,代码如下:
    [![](http://upload-images.jianshu.io/upload_images/4334240-dacbd0223e96b228.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/5398fd020001ad4905890193.jpg)
    **运转成果:**
    HTML
    JavaScript
    This is a new p
    ###9-13 刺进节点insertBefore()
    insertBefore() 办法可在已有的子节点前刺进一个新的子节点。
    **语法:**
    insertBefore(newnode,node);
    **参数:**
    newnode: 要刺进的新节点。
    node: 指定此节点前刺进节点。
    咱们在来看看下面代码,在指定节点前刺进节点。
    [![](http://upload-images.jianshu.io/upload_images/4334240-907b30ec2da79258.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)](http://img.mukewang.com/5395318100010c6806960431.jpg)
    **运转成果:**
    This is a new p
    JavaScript
    HTML
    **留意:** otest.insertBefore(newnode,node); 也能够改为: otest.insertBefore(newnode,otest
    文章版权及转载声明:

    作者:admin本文地址:http://www.3dmus.com/articles/1415.html发布于 3周前 ( 05-29 04:24 )
    文章转载或复制请以超链接形式并注明出处3d暮色,汇聚全世界最好看的夕阳暮色风景