js进阶篇

最新推荐文章于 2023-10-22 23:16:55 发布

zxcsabrina

最新推荐文章于 2023-10-22 23:16:55 发布

阅读量5.9k

点赞数 2

分类专栏： JS类别

本文链接：https://blog.csdn.net/zxcSabrina/article/details/52313900

版权

JS类别专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JS进阶篇

web前端开发师需要掌握什么技术？允许你已经了解HTML标记（也成为结构）知道了css样式（也称为表示）会用html和css创建一个漂亮的页面，但是这个还是不够，它只是静态的页面而已，我们需要js增加行为，为网页添加动态效果。

js能做什么：

1.增加页面的动态效果：（如下拉菜单，图片轮播、信息滚动等等一些常见的js网页特效）

2.实现页面与用户之间的实时、动态交互、（如用户注册。登录验证）

在js入门篇中我们学习了如何插入js输出内容以及一些简单的DOM的操作，js进阶篇会让你进一步了解js的变量。数组。函数，语法，对象，事件，dom操作，制作简单的网页动态效果。

一、什么是变量，变量的概念

什么是变量，从字面的意思来看，变量是可变的量，从编程的角度来看，变量是用于存储某种、某些数值的存储器。我们可以把一个变量看成是一个盒子，盒子用来存放东西，物品可以是衣服玩具水果等。举个例子下面表示的是变量的一些应用。

上面的意思就是形象的看到了变量的应用，变量可以存储不同的东西，同时变量也可以叫做不同的名字，这就是在后面的学习中有了一个更好的掌握了。

二、变量赋予名字（给变量起名字）

我们为了区分不同的盒子，可以给每一个盒子分别起不同的名字，BOX1，BOX2等名字分别代表不同的盒子，同时呢，BOX1也是盒子的名字。

我们将BOX1和BOX2盒子看成是变量

三、变量命名的规范

1.必须是以字母、下划线、或者是美元符号开头，后面可以跟字母、下划线、美元符号和数字

2.变量名称区分大小写，如：A和a是两个不同的变量

3.不允许使用javascript关键字和保留字做变量名

下面的例子中为我们展示了什么样的js关键字不能做为变量名称

如js中的in if等都不能作为变量名。 var mychar可以

四、多样化的变量赋值

我们可以把一个变量看做是一个盒子，盒子用来存放物品，那如何在变量中存储内容呢？我们使用“=”给变量存储内容，看下面的语句：

var mynum=5; 声明变量并赋值，值为5，

var mynum; 先声明变量

mynum=5; 然后给变量赋值

注意：这里“=”号的作用是给变量赋值，不是等于号

盒子可以装衣服，玩具，水果，等。其实，变量是无所不能的容器，你可以把任何东西存储在变量中，如数值，字符，布尔值等。

例如：

var num1=123;

var num2="一、二、三"；

var num3=true 我们可以在盒子里面装好多内容

其中，num1变量存储的是数值，num2变量存储的是字符串，字符串需要引用一对引号“”括起来，num3变量存储的内容是布尔值（true/false）如果是数值的话直接就写了如果是字符串的话一定要加上“”引号。

字符串：字符串表示的是由零个或者是多个字符组成的有限序列，它是编程语言中表示文本的数据类型，字符串就是比如说是我们在键盘上敲的单独的字母或者是由那些拼音组成的汉字都是字符串。

案例：定义两个变量，并赋值，同时在网页中显示出变量的值

显示的结果如下：

上面显示的就是我们先定义变量，然后再输出出来。有定义就必须得有输出。

五、JS中的表达式

表达式和数学中的定义相似，表达式表示的是具有一定的值，用操作符把常量和变量连接起来的代数式。一个表达式可以包含常数或是变量。常量就是比如说是我们数学中常用的1.2...一些自然数，变量就是我们通过函数去定义的变量名称去存储数值的。

六、javascript语句

Num=num+1;

JS语句：其中num是变量，=是赋值，num+1是表达式，其中Num表示的是变量的值，而后面的num表示的是常量，用num+1进行常量的变化进行累加得到结果。

生活中“再见”表达式方法有好多，如英语（goodbye）、网络语言等、肢体语言等。在js表达式无处不在，所以一定要知道可以表达哪些内容，看看下面几种情况：

1）：字符串表达式

2）：数值表达式

3）：布尔表达式

七、操作符（算术、比较、逻辑等操作符）

1.操作符是用于在js中指定一定动作的符号

看看下面的JS代码：

sum=numa+numb;

其中“=”和“+”都是"操作符"。

JS中还有许多这样的操作符，例如：算术操作符（+ - * /）等，比较操作符（<、>、>=、<=、等），逻辑操作符（&、//、！）逻辑操作符是与或非。

注意：“=”操作符是赋值，不是等于。表示的是给变量赋值

2.算术操作符

算术运算符主要是用来完成类似：加减乘除的工作、在JS中“+”不只是代表加法，还可以连接两个字符串，例如：

mystring="java"+"script" mystring的值是javascript这个字符串加号表示的是连接两个字符串。

自加一，自减一，（++和--） ++表示的是加一；--表示的是减一

算术操作符除了（+ - * /）外还有两个非常常用的操作符，自加一 “++”自减一 “--”

首先来看：

上面的例子同时可以写成：mynum=mynum+1; mynum=mynum-1;

案例：

var numa=1; 【=表示的是赋值】

var numb=7;

numa++;

numb--;

document.write("numa的值:"+numa);

document.write("numb的值:"+numb);

</script>

显示的结果如下：numa的值是2； numb的值是6；

3.比较操作符：

案例：我们先来做道题，数学成绩中，小明考了90分，小红考了95分，问谁考的分数高？

其中大于号“>”，就是比较操作符，小红考试成绩和小明考试成绩就是操作数，并且是两个操作数。（两个操作数表示的就是两个数值）

也就是说两个操作数通过比较操作符进行比较，得到的值为true或者false。在javascript中，这样的比较符有很多，这些操作符的含义如下：通过两个操作数的比较，比较的结果就是true或者是false。

案例：

var a=5;

var b=9;

document.write(a<b);表示的是a小于b的值吗？结果是真的（true）

通过比较两个值得到的结果是true或者是false

document.write(a>=b);//表示的是a大于等于b的值吗？结果是假的（false）

document.write(a!=b);//表示的是a不等于b的值吗？结果是真的（true）

document.write(a==b);//表示的是a等于b的值吗？结果是假的（false）

案例：

var numa,numb,jq1,jq2;

numa=1;

numb=7;

jq1= numa>numb ;

jq2= numa!=numb ;

document.write("numa大于numb的分数吗？"+jq1+"<br>")

document.write("numa不等于numb的分数吗？"+ jq2);

</script>

结果如下：

4.逻辑操作符（与、或、非）

1）：逻辑与

数学里面的“a>b”在JS中还表示为a>b,数学中的“b>a,b<c”是“a<b<c”那么在js中可以用&&表示：

如下：b>a&&b<c, &&是并且的意思，读法是“b大于a”并且“b小于c”

这个语法就好比是我们参加高考的时候，进入考场的时候必须有身份证和准考证，两者缺一不可，否则不能参加考试，表示的内容如下：

if( 有准考证&&有身份证){

进行考场考试

}

“&&”是逻辑与操作符，只有“&&”两遍值同时满足（同时为真），整个表达式值才为真，逻辑与操作符值表：

逻辑与操作表示的是只有当值全为真的时候才为真，有一个假就是假的。

注意：如果A为假，A&&B为假，不会再执行B，如果A为真，要由B的值来决定A&&B的值。

案例：JS考试中，numa表示笔试考了60分，numb表示实践考了70分，只要两项成绩都大于等于60分，则该课程考核通过。

var numa,numb;

numa=60;

numb=70;

if( numa>=60&&numb>=60 )

{

document.write("JavaScript考核通过！"+"<br>");

}

</script>

操作结果是：

2）：逻辑或操作符“||”

“||” 逻辑或操作符，相当于生活中“或者”，当两个条件中有任一个条件满足，“逻辑或”的运算结果就为“真”

例如：本周五我们计划出游，可是周一至周五工作，所以周六或者是周日哪天去都可以，即两天中只要有一天有空，就可以出游。

var a=3;

var b=5;

var c;

c=b>a//a>b; b>a是true a>b是false, c是true

逻辑或表示的是一个为真则全部为真，如果有一个是假的则全部是假的。

注意：如果A为真，A//B为真，不会执行B，如果A为假，要由B的值来决定A//B。

案例：

var numa,numb,jq1;

numa=50;

numb=55;

jq1= numa>numb || numa==numb ;

document.write("jq1的值是:"+jq1+"<br>")

</script>

结果显示：

3）：逻辑“非”操作：

“！”是逻辑非操作符，也就是“不是”的意思，非真即假。

例如说：小华今天买了个杯子，小明说“杯子是白色的”小亮说“杯子是红色的”小华说小明说的不是真话，小亮说的不是假话，猜猜小华买的什么颜色的杯子，答案:红色杯子。逻辑非操作符值表：

逻辑非操作就是非真那就是假的。

看看下面的代码，变量c的值是什么：

保持先后顺序（操作符优先级）

我们都知道除法、乘法等操作符的优先级比加法和减法高，例如：

var numa=3;

var numb=6;

JQ=numa+30/2-numb*3；结果为0；

如果我们要改变运算顺序，需添加括号来改变优先级，

var numa=3;

var numb=6;

Jq=（（numa+30）/(2-numb))*3//结果是-24.75

改变了优先级，操作符之间的优先级（高到低）加括号的方式和数学中加减的方式很像。

算术操作符->比较操作符->逻辑操作符->=赋值符号

如果同级的运算是按从左到右次序进行，多层括号由里向外。如果没有特殊的说明正常情况下算术运算符是按照从左到右的顺序进行依次，如果有括号的话就是先算括号里面的。

案例：

var numa=3;

var numb=6；

JQ=numa+30>10&&numb*3<2;

算术的步骤是：先用3+30>10&&18<2;表示的是33>10&&18<2 这表示的是真和假进行并且，结果还是假的。

八、数组（一起组团、什么是数组。要存储许多数的时候我们无法用一个变量去存储一个数，这样太麻烦因此我们用数组去解决）

我们知道变量用来存储数据，一个变量只能存储一个内容，假设你想存储10个人的姓名或者存储20个人的数学成绩，就需要10个或者是20个变量来存储，如果需要存储更多的数据，那就变得更麻烦了。因此我们用数组来解决问题，一个数组变量可以存放多个数据，好比是一个团，团里有很多人，如下：我们使用数组存储5个学生的成绩。

数组就是值的集合：一个数组里面有若干个值每个值都有一个索引号，从0开始同时可以根据需求向数组中增加更多的数。

案例：编辑器中定义数组myarr，并赋值3个学生的成绩，验证结果窗口是否显示的是80,60,90

var myarr=new Array(); //定义数组

myarr[0]=80;

myarr[1]=60;

myarr[2]=99;

document.write("第一个人的成绩是:"+myarr[0]);

document.write("第二个人的成绩是:"+myarr[1]);

document.write("第三个人的成绩是:"+myarr[2]);

</script>

九、创建数组（并且给数组起名字）

使用数组之前要先创建，而且需要把数组本身赋值一个变量好比我们出游要组团并给团定个名字“云南之旅”

创建数组语法:var myarray=new Array();

固定是这么写的，后面是创建新的空数组，前面是定义一个变量。就是比如说是这个数组是放数学成绩的，另外一个是放图书的，等等。

创建一个空的数组，然后给这个数组一个变量就叫做这个数组了，然后数组中有索引号，每一个索引号对应一个数值。

我们创建数组的同时，还可以指定数组的长度，长度是可以任意指定

创建数组长度语法：var myarray=new Array(8);

上面表示的是我们创建数组存储8个数据，长度是我们自己指定的可以存储多个数值，

创建数组注意事项：

1.创建的新数组是空数组，没有值，如果输出，则会显示的是undifined

2.虽然创建数组时，指定了长度，但是数组的长度都是变长的也就是说长度为8，仍然可以将元素存储在规定长度之外。

案例：使用new Array()创建一个新数组，并保存在myarray中，如果我们在数组中不放数则显示的是空的

var myarray=new Array();

document.write("数组的第一个值："+myarr[0]);【显示的结果是空的】

</script>

十、数组赋值（谁是团里成员）

我们把数组看成是旅游团的大巴士，大巴车里面有很多位置，每一个位置都是有一个号码顾客要做在哪个位置呢？

数组中的表达式是这样的{

}

下面来创建一个数组，用来存储5个人的数学成绩：

注意：1.数组中每一个值都有一个索引号，从0开始

2.我们还可以用简单的方法去创建上面的数组和赋值

1）：在新建数组后面直接加上数值是多少。

2）：或者是不用新建数组的形式，直接给变量后面赋予新的数组的值。注意：数组存储的数据可以是任何类型（数字、字符、布尔值等）

案例：创建长度为3的数组，保存在myarray中，在编辑器中为数组中每项赋值，分别为88,90,68

var myarray=new Array(88,90,68);/*可以使用这种方式进行定义数组*/

var myarray[0]=88;

var myarray[1]=90;

var myarray[2]=68;

document.write("数组第一个值是:"+myarr[0]+"<br>");

document.write("数组第二个值是:"+myarr[1]+"<br>");

document.write("数组第三个值是:"+myarr[2]+"<br>");

</script>

十一、向数组中增加一个元素（团里添加新成员）

在上面我们使用myarray存储了5个人的成绩，现在我要多出一个人的成绩，如何存储呢？

只需要使用下一个未用的索引，任何时刻可以不断向数组增加新元素。

这个方式是使用一个新的索引，然后为数组增加一个新元素，我们随时可以为数组增加新的元素成员。

案例：我们可以随时向数组中增加新的元素

var myarray=new Array();

myarray[0]=88;

myarray[1]=90;

myarray[2]=68; /*上面的3个是之前定义好的数组的值*/

myarray[3]=99; /*这个是在后面添加的一个数组*/

document.write("数组第一个值是:"+myarray[0]+"<br>");

document.write("数组第二个值是:"+myarray[1]+"<br>");

document.write("数组第三个值是:"+myarray[2]+"<br>");

document.write("数组新增加的值是:"+myarray[3]+"<br>");

< /script>

十二、使用数组元素（呼叫团里成员）

我们知道数组中的每一个值都是有一个索引号，从0开始，如下图：myarray变量存储6个人的成绩：

要得到一个数组元素的值只需要引用数组变量中提供的一个索引，如：

第一个人的成绩表示方法是：myarray[0]; 第三个人的成绩表示的方法是myarray[2]; 在一个数组中存储了需要的所有数据，所以在需要的时候进行调用即可。

十三、数组属性length（了解成员的数值）

如果我们想知道数组的大小，只需引用数组的一个属性length.length属性表示数组的长度，即数组中元素的个数。

语法：myarray.length; 获得数组myarray的长度

注意：因为数组的索引总是由0开始，所以一个数组的上下限分别是：0和length-1。如数组的长度是5，那么数组的上下限分别为0和4，数组的索引是从0开始的，所以长度比如说是5那么数组的上下限分别为0和4，上下限就是索引值的上下限。

这个案例是直接赋值几个数的，输出的是数值的长度，还有数组中最后一个数值。

注意：1）：javascript中数组的长度是可以增加的，比如说是arr.length=10; 增大数组长度，document.write(arr.length) 数组的长度已经变成10了。

2）：随着数组元素的增加，数组的长度也会变成10

我们之前在数组中放了15个元素，然后输出数组的长度，现在我们在添加新的数值，就是arr[15]这个元素，然后输出新的数组长度。现在数组的长度变成了16了。

案例：创建数组mynum，并赋值65,90,88,98在浏览器中输出length数组的长度。

var mynum=new Array(65,90,88,98);

document.write("数组的长度是:"+ mynum.length );

</script>

十四、二维数组

一维数组：我们看成是一组盒子，每个盒子只能放一个内容。

一维数组的表示：myarray[]这个表示的是一横串数中的数值，水平存储的数，我们可以选择其中一个进行读取。

二维数组表示的是：myarray[][]二维数组一般表示的是水平和竖直数之间的运算结果：比如说是加减或者是乘除之类的。

注意：二维数组中的两个维度的索引值都是从0开始的，两个维度的最后一个索引值为长度-1.

二维数组的定义方法 1）：

先创建一维数组然后定义一维数组的长度，之后再创建二维数组，然后定义二维数组的长度

最后二维数组表示的是两个数相加或者是其他的运算模式

myarray[i]=new Array();这个是根据一维数组的下标进行定义二维数组。

二维数组的定义方法 2）：

var myarray=[[0,1,2],[1,2,3]]

二维数组的赋值 3）：

myarray[0][1]=5; 将5的值传到数组中，会覆盖原有的值，

说明：myarray[0][1] 0表示的是行，1表示的是列。

案例：创建一个二维数组（一维的长度是3，二维的长度是6）值为一维数组和二维数组索引值的积，如myarray[2][5]=2*5;

十五、流程控制语句（跟着我的节奏走）

1.做if判断语句

if语句是基于条件成立才执行相应代码时使用的语句

语法：if(条件){

条件成立时执行代码

}

注意：if小写，大写（IF）会出错！

假设你应聘的web前端技术开发岗位，如果你会HTML技术，你面试成功，欢迎加入公司。

代码如下：

var mycarrer="HTML";

if(mycarrer=="HTML"){

document.write(“你面试成功，欢迎加入公司。”)

}

</script>

这个就是if(条件){ 满足条件则执行}

2. if...else语句（二选一）

if...else语句是在指定的条件成立时执行代码，在条件不成立时执行else后的代码。

语法：

if(条件){条件成立时执行的代码}

else{条件不成立时执行的代码}

假设你应聘web前端技术开发岗位，如果你会html技术，那么你面试成功，欢迎加入公司，否则你面试不成功不能加入公司。

var mycarrer=“HTML”；

if(mycarrer=="HTML"){

document.write("你面试成功，欢迎加入公司。")

}

else{

document.write("你面试不成功，不能加入公司")

}

</script>

案例：今天去看电影，如果有票就可以去看电影，没有票电影看不成，使用if...else。

var ticket=true; //我们将初始值ticket设置为true,表示有票，案例先定义电影票，如果有票则执行if条件后面的语句，如果没有的话则执行else后面的语句。

if(ticket==true){

document.write("有票，可以看电影。")；

}

else{

document.write("没票，电影看不成")；

}

3.多重判断（if...else）嵌套语句

要在多组语句中选择一组来执行，使用if...else嵌套语句

语法：

这个表示的是多重判断，条件1成立时执行的代码，条件2成立时执行的代码，条件n成立时执行的代码，else最后表示的是所有的条件都不成立时执行else后面的语句。

案例：假设数学考试，小明考了86分，60分以下的不及格及格，60分（包括60分）75分为良好（包括75分），85分为很好（包含85分）100分为优秀

代码如下：

这个表示的是多重判断语句，有若干个条件，看你满足哪个，例如说成绩，通过分数决定优秀还是良好还是怎么样。

4.switch(多种选择)

switch 不同于 if/else if/else 是因为switch,可以有很多选项的时候，不如选项特别多，if else特别费劲的时候就可以用switch

语法：上述结果表示的是switch语法通过case的值进行选择哪个语法的判断。

语法说明：switch必须赋初始值，值与每个case值匹配。满足执行该case后的所有语句，并用break语句来阻止运行下一个case,如所有case值都不匹配，执行default后的语句。深刻理解这句话的含义：switch后面必须是我们之前定义的变量。然后case1: case2:是相对应的执行的代码值，每一个代码值执行之后都要有一个break结束，这样就把我们在之前赋值的case几进行相应的执行，如果最后都没有结果，则执行default.

案例：假设评价学生的考试成绩，10分满分制，我们按照每一份一个等级将成绩分等，并根据成绩的等级做出不同的评价。

执行结果是：评语：及格，加油！

var week=3;

switch(week){

case 1:

case2:

document.write("学习理念知识")；

break;

case 3:

case 4:

document.write("企业实践")；

break；

case 5:

dcument.write("总结经验")；

break；

case 6：

case 7：

document.write("休息和娱乐")；

break;

default;

}

上面这个例子就是很好的诠释了从周一到周日应该做的事情都是什么，都已经详细的列出来了。

周一周二学习的是理念知识，周三周四是社会实践，周五是总结经验，周六周日是休息和娱乐。看周三干什么，这个做的是多重选择。

注意：if... else、if else...if else...if else嵌套多重选择 switch表示的是多个值的选择，不同的case对应的是不同的运行代码，switch最终的目的还是多重选择。

5.for循环（重复重复、重复去做一件事情直到事情做完为止，例如从盒子中取小球，用循环去做，直到小球取完为止）

很多事情不只是做一次，要重复做，如打印10分试卷，每次打印一份，重复这个动作，直到打印完成，这些事情，我们使用循环语句来实现，循环语句，就是重复执行一段代码。

for语句结构：

for循环语句做的就是重复执行一个动作，直到循环结束。

案例：假设一个盒子里面有6个小球，我们每次取一个，重复从盒子里取出球，直到球取完为止。

代码如下：

var num=1;

for(num=1;num<6;num++){

document.write("取出第"+num+"个球<br>");

}

</script>

显示的结果如下：

执行思路是：

案例：我们手里有1,2,3...10不同面值的钱，使用for语句完成合计，看看我们一共有多少钱。

var money,sum=0;

for(mymoney=1; mymoney<=10; mymoney++){

sum=sum+mymoney;

}

document.write("sum合计:"+sum);

这个最后输出的位置很重要，如果说我们在for里面进行最后的输出，那么计算的就是每一步的sum得到的值而不是最后的总结果，这个位置要注意：

注意：用for循环语句尤其是做数字加和的一定要注意输出位置的书写，如果是在if的里面，那么输出的结果是每一次加和的结果，如果在if的最外面写上document.write输出的内容，是最后的结果：位置一定要注意。

6.while循环（反反复复，while和for循环的功能相同，只不过函数的写法不同，但是执行的功能都类似）

while循环和for循环有相同的功能，while循环重复执行一段代码，直到某个条件不再满足。

语法： while（判断条件）

{循环语句}

使用while循环，完成从盒子里取球的动作，每次取一个，共6个球

var num=0;

while ( num<=6){

document.write("取出第"+num+"个球+<br>");

num=num+1;

}

</script>

while循环做的是我们先去做，例如取小球，我们先去做，先去取小球，然后一直取直到条件不再满足了。

for循环做的是，看看是不是满足条件然后再去做，比如说是取小球，先判断条件是不是满足，如果满足的话就直接去取小球了，

案例：我们使用while语句，输出5个数。

var mynum=1; 初始化为1

while( mynum<=5){ 循环条件，变量的条件是什么

document.write("数字："+mynum); 输出这个数值

mynum=mynum+1; 让变量的条件依次增加

}

</script>

7.do...while循环（来来回回）

do...while结构的基本原理和while结构是基本相同的，但是他保证至少要执行一次，因为他是先执行代码，后判断条件，如果条件为真，继续循环。

语句结构：do...while

do{

循环语句

}

while(判断条件)

我们试着输出5个数：

num=1;

do{

document.write("数值为："+num+"<br>");

num++;

}

while(num<=5)

</script>

上面这个do...while的意思是我们先执行语句，然后再判断，相当于是将while的条件和执行的语句分开了。

执行结果如上：

看看执行的思路：

先执行一条语句，然后在进行判断。

案例：用do while语句，输出6个字。

var number=6;

do{

document.write("数字："+number+"<br>");

number=number-1;

}

while(number>0)

先执行语句，然后进行判断条件。

8.break退出循环 (相当于是用break直接退出循环的内容)

在while、for、do...while循环中使用break语句退出当前循环，直接执行后面的代码。

这个语法和之前if的循环体挺像，就是一直用for循环，如果有突发情况就是if后面加上特殊情况，直接就break退出了。

注意：当遇到特殊情况的时候，循环就会立即结束。看看下面的例子，输出10个数，如果值为5，就停止输出。

var num;

for( num=1; num<=10; num++){

if(num==5){

break;

}

document.write(“数值：”+num+"<br>");

}

</script>

上述样例中if后面的条件是如果数值是5的话那么就会停止循环，然后输出结果。

案例：考试成绩输出，如果成绩及格继续输出下个成绩，如果成绩不合格，退出并且后面的成绩不输出，我们使用break语句，退出循环。

var num=new Array(70,80,60,90,50,100,90);

var i=0;

while(i<num.length){

if(num[i]<60){

break;

}

document.write("成绩："+num[i]+"及格、继续努力")；

i=i+1;

}

运行结果如下：

8.continue（继续循环）

continue的作用仅仅是跳过本次循环，而整个循环体继续执行。

语法结构：

上面的情况表示的是for后面是初始条件，判断条件，循环后条件值更新。if后面表示的是遇到特殊情况，不是中止了，而是跳过这个值，继续进行其他的操作了。

循环中遇到continue之后会继续执行，只不过是continue这个东西不执行了。

案例：输出除了5之外的其他数值。

var num;

for ( num=1; num<=10; num++ ){

if(num==5){

document.write("数值：”+num+"<br>");

}

</script>

案例：考试成绩输出，如果成绩及格继续输出下个成绩，如果成绩不及格，则不输出该成绩，我们使用continue语句完成。

var num=new Array(70,80,90,60,50,100,89)

var i;

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

if（mynum[i]<60）{

continue;

document.write("成绩不及格，不输出！"+“<br>”);

}

document.write("成绩："+mynum[i]+"及格，输出！"+“<br>”);

}

</script>

编程练习：结合数组，用if for switch等知识点：

在一个大学的编程选修课班里，我们得到了一组参加该班级的学生数据，分别是姓名，性别，年龄，和班级，接下来我们要利用JS的知识挑选出所有大一的女生的姓名，这是一个很好的例子。

学生信息如下：

正确代码书写：

var infos=[["小A","女",21,"大一"],["小B","男",23,"大三"],["小C","男",24,"大四"],["小D","女",21,"大一"],["小E","女",22,"大四"],["小F","男",21,"大一"],["小G","女",22,"大二"],["小H","女",20,"大三"],["小I","女",20,"大一"],["小J","男",20,"大三"]];

var i;

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

if（infos[i][3]=="大一"&&infos[i][0]=="女"）{

document.write(infos[i][0]+"<br>")

}

</script>

十六、函数的概念（正式进入主题）

函数的作用：可以写一次代码，然后重复的去调用这个函数。

如：我们要完成多组数加和的功能：

如果我们要实现8组数的和，就需要16行代码，实现的加和数越多，代码的行数也越多，所以我们可以完成特定功能的代码块放到一个函数里，直接调用这个函数，就省去重复输入大量代码的麻烦。

使用函数完成：

function add2(){

sum=a+b;

alert(sum); 注释：这个函数只需要写一次就可以了，其他的调用就行了，省了好多步骤

}

add2(3,2);

add2(7,8); 注释：如果我们想要计算的话，只需要调用函数就行了。

1.定义函数：

如何定义一个函数：看看下面的格式：

function 函数名（）{

函数体

}

function 定义函数的关键字“函数名”你为函数取的名字，“函数体”替换为完成特定功能的代码。

我们完成对两个数求和并显示结果的功能，并给函数起个有意义的名字 add2()；

代码如下：

运行的结果如下：

在窗口处显示的结果是5.

2.函数的调用：

函数的调用方法有两种：

第一种是直接调用，在function的后面即函数结尾的时候直接用函数的方法：

这种方法就是在函数的末尾处进行直接调用，直接就会执行函数的结果，将运行的结果显示出来。

第二种：在标签中调用函数的名称进行引用函数：

这种方法就是我们在写函数的时候，用html标签去直接引用函数。

3.有参数的函数：

在上面的例子中add2（）函数不能实现任意两个数的相加，其实定义函数还可以有如下的格式：

function 函数名（参数1，参数2）{

函数代码

}

即在function函数名的后面加上参数，参数可以有多个，根据需要增减参数的个数，参数之间用逗号分开。

按照这个格式我们就能做任何两个数的相加而不是局限于指定的数值进行相加。

function add2(x,y){

sum=x+y;

document.write(sum);

}

x，y则是函数的两个参数，调用函数的时候，我们可以把这两个实际的加数传递给函数；例如执行add2(3,4)和add2(60,20)

案例：执行3个数的相加，求得加和。

function add3(x,y,z){

sum=x+y+z;

document.write("+x","+y","+z","+sum"+"<br>")

}

add3(5,8,3);

add3(7,1,4);

4.返回值的函数：

思考：上一节函数中，通过document.write把这个结果输出来，如果我们想要对函数的结果进行操作的时候我们怎么处理呢？

我们只要把document.write(sum)这行改成如下代码即可：

得到返回值然后把返回值存储在新的变量中即可。

我们还可以通过变量存储调用函数的返回值，代码如下：

注意：函数中参数和返回值不只是数字，还可以是字符串或者是其他类型。

案例：定义两个数的积，返回函数值，并且计算5,6/2,3两组两个数的积并且分别保存在req1和req2变量中。并且计算req1和req2的和并且保存在sumq中。

function app(x,y){

var sum,x,y;

sum=x*y;

return sum;

}

req1=app(2,5);

req2=app(2,3);

sumq=req1+req2;

document.write("req1的值："+req1+"<br>");

document.write("req2的值："+req2+"<br>");

document.write(req1+"与"+req2+"和："+sum);

</script>

案例：编程练习：使用JS代码编写一个函数，实现传入两个整数后弹出较大的整数。

function compare（x,y）{

if(x>y){

return x;

}

else if(x=y){

return x; y;

}

else {

return y;

}

compare(4,5);

compare(6,3);

document.write("4和5的较大的值为："+compare(4,5)+"<br>");

document.write("6和3的较大的值是："+compare(6,3)+"<br>");

十七、JS事件

JS创建动态页面，事件可以被javascript帧测到的行为，网页中的每个元素都可以产生某些可以触发javascript函数或程序的事件。

比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件。需要浏览器做出处理，返回给用户一个结果。

正常我们在网页中比如说有鼠标悬停的效果或者是鼠标经过有特效，或者是轮播滚动的那几张图片，都是运用到了JS事件去做的。

主要事件表：

我们引用什么事件就有相应的特效。

1.鼠标单击事件onclick事件：

onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件，同时onclick事件调用的程序块就会被执行，通常和按钮一起使用。

案例：比如我们单击按钮时，触发onclick事件，并调用两个数和的函数add2()代码如下：

执行结果是在浏览器中显示结果：14

点击onclick执行后面的结果。

2.鼠标经过事件（onmouseover）

鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。

上面是onmouseover鼠标经过显示的效果，当我们将鼠标经过按钮上面时，就会触发弹出框显示出来。

3.onmouseout鼠标移开事件

鼠标移开事件，当鼠标移开当前对象时，执行onmouseover调用的函数。

当把鼠标移动到“登录”按钮上，然后再移开，触发onmouseout事件，调用函数message()

代码如下：

效果显示如下:

显示的效果如上：当我们把鼠标放在按钮上然后将鼠标移开，小窗口就弹出来了，这个就是鼠标离开之后的效果。

注意：点击鼠标事件和鼠标经过事件鼠标移开事件其实都是一种类似的效果，只是在显示的效果上或者是时间上，或者是表示的时间有延迟的事件，大体上功能都类似。

4.onfocus光标聚集事件：

当网页中的对象获得聚点时，执行onfocus调用放入程序就会被执行。

如下代码：当将光标移至文本框内时，即焦点在文本框内，触发onfocus事件，并调用函数message(),表示的是当鼠标移至文本框时，就会调用了相应的函数就执行了相应的代码。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>onfocus光标聚集事件</title>
    <script type="text/javascript">
        function message(){
            alert("请在此输入姓名");
        }
    </script>
</head>
<body>
   <form>
       <input name="username" type="text" value="请输入姓名" onfocus="message()">
   </form>
</body>
</html>

显示效果如下：当我们把光标放在文本框中时，就会将文本框中的内容进行聚集，onfocus函数被执行。

效果：

当鼠标放在文本框时，弹出框就会弹出来了。

案例：当光标聚集在下拉列表时会有弹出框显示你选择的职业是什么：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>onfocus光标聚集事件</title>
    <script type="text/javascript">
        function message(){
            alert("请在此输入姓名");
        }
        function information(){
            alert("请输入你的职业");
        }
    </script>
</head>
<body>
   <form>
       <input name="username" type="text" value="请输入姓名" onfocus="message()">
       <select name="career" onfocus="information()">
           <option>学生</option>
           <option>教师</option>
           <option>工程师</option>
           <option>演员</option>
           <option>会计</option>
       </select>
   </form>
</body>
</html>

显示效果是当我们将鼠标放在下拉列表上面时就会有弹出框显示出来

5.onblur失焦事件

onblur事件和onfocus是相对事件，当光标离开当前获得聚集对象的时候，触发onblur事件，同时执行被调用的程序，如下代码：网页中有用户名和密码两个文本框，当前光标在用户文本框内时（即焦点在文本框），在光标离开该文本框后（即失焦时），触发onblur事件，并调用message()，onfocus表示的是当鼠标点击在文本框时会有效果发生，而onblur表示的是当光标点击在文本框离开之后会有效果发生。

案例如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>onblur鼠标失焦事件</title>
    <script type="text/javascript">
         function message(){
             alert("请确定已输入的用户名后，再离开！");
         }
    </script>
</head>
<body>
   <form>
      用户： <input type="text" name="username" value="请输入用户名" onblur="message()">
      密码： <input type="text" name="password" type="text" value="请输入密码">
   </form>
</body>
</html>

上面显示的效果表示的是，当我们在文本框中输入姓名或者是当光标在文本框中时，我们之后将光标离开文本框，就是将光标点击其他位置的时候就会有小窗口的弹出框显示出来。

6.onselect 内容选中事件

选中事件表示的是，当文本框或者是文本区域中的字被选中时，触发onselect事件，同时调用的程序就会被执行，就是比如说是一个文本框，文本框中有文字，当我们用鼠标将所有的文字选中的时候就会执行相应的JS程序。

案例：如下代码当选中用户文本框中的文字时，触发onselect事件，并调用函数message()

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>onselect内容选中事件</title>
    <script type="text/javascript">
        function  message(){
           alert("您触发了选中事件！");
        }
    </script>
</head>
<body>
   <form>
       <input name="username" type="text" value="请输入用户名！" onselect="message()">
   </form>
</body>
</html>

显示的结果如下：

显示的内容表示的是：当我们用鼠标选中文本中的内容的时候，就会有弹出框弹出来。

7.onchange文本框内容改变时间

通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。

案例：当用户将文本框中的内容改变后就会弹出对话框，显示已经改了的文本内容。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>onselect内容选中事件</title>
    <script type="text/javascript">
        function  message(){
           alert("您触发了选中事件！");
        }
    </script>
</head>
<body>
   <form>
       <input name="username" type="text" value="请输入用户名！" onselect="message()">
   </form>
</body>
</html>

显示效果如下：

当我们改变了文本框中的内容之后，点击enter确定更改的内容之后，就会有新的弹出框弹出来了。

注意：上面所有的函数表示的都是当我们点击事件的时候就会触发事件的发生，进而执行相应的JS函数。

8.onload加载事件

事件会在页面加载完成后，立即发生，同时执行调用的程序，这个就比如说是在手机端的时候，我们会看到加载缓存的数据在不断的增长，等到增加到100%才能进入页面这个过程就是加载的过程，当加载完成之后就会执行我们之前写好的函数。

注意：加载页面的时候触发onload事件，事件要写在body标签里面。

案例：打开网页，当页面加载完成时，就会弹出新的窗口。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>onload加载事件</title>
    <script type="text/javascript">
        function  message(){
          alert("加载中，请稍等...");
        }
    </script>
</head>
<body  onload="message()">
   欢迎学习javascript.
</body>
</html>

显示效果如下：

显示效果表示的是：当我们打开新的页面的时候，当加载完成之后就会弹出一个新的窗口，看上面onload的加载小圈圈就会发现了。

8.onunload事件属性当用户卸载文档时执行JS （关闭浏览器提示是否全部关闭，用的就是这个方法）

定义和用法：onunload属性会在页面下载时触发（或者浏览器窗口已关闭）

onunload在用户从页面导航离开时发生（通过点击链接、提交表单或者关闭浏览器窗口等等）

注意：如果您重载页面，也会触发unload以及onload事件。

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title> 卸载事件 </title>
    <script type="text/javascript">
        window.onunload = onunload_message;
        function onunload_message(){
            alert("您确定离开该网页吗？");
        }
    </script>
</head>
<body>
欢迎学习JavaScript。
</body>
</html>

难点：现在出现了这个问题我在做代码的时候，页面特效显示不出来。

编程练习：使用JS完成一个简单的计算器功能，实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用JS完成一个简单的计算器功能，实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除</title>
    <script type="text/javascript">
        function  count(){
            var txt1 =parseInt(document.getElementById("txt1").value);
            var txt2=parseInt(document.getElementById("txt2").value);
            var select=document.getElementById("select").value;
            var result="";
            switch(select){
                case "+":
                result=txt1+txt2;
                break;
                case"-":
                result=txt1-txt2;
                break;
                case"*":
                result=txt1*txt2;
                break;
                case"/":
                    result=txt1/txt2;
                    break;


            }
          document.getElementById("fruit").value=result;

        }
    </script>
</head>
<body>
   <input type="text" id="txt1">
       <select id="select">
           <option>+</option>
           <option>-</option>
           <option>*</option>
           <option>/</option>
       </select>
<input type="text" id="txt2">
<input type="button" value="=" onclick="count()">
<input type="text" id="fruit">
</body>
</html>

显示的结果如下所示：

注意事项：1.parseInt可以得到原始数据的一个特定的字符串，parseInt得到的是一个整数型的数字。

var txt2=parseInt(document.getElementById("txt2").value)

表示的是得到输入框中的整数数值，进行运算

3.varresult=""; /*定义结果的输出值，用什么变量存储数值*/、

4.用switch判断方法，分为加减乘除

5.最后面的fruit是随便起的函数名称。

6.下面的html中的内容表示的是在页面中排列的展示内容。

在JS中我们先要得到文本框中输入的内容，然后再进行操作。

其实JS蛮简单的就是自己想到哪了就用代码写到哪了。

十八、对象（什么是对象）

JS中的所有事物都是对象，如：字符串、数值、数组、函数等，每一个对象带有属性和方法。

对象的属性：反映该对象某些特定的性质的，如：字符串的长度，图像的长宽等。

对象的方法：能够在对象上执行的动作，例如表单的提交submit、时间的获取getYear

JS提供多个内建对象，比如说是String、Date、Array等等，使用对象前要先定义，如下使用数组对象：

1.var objectName=new Array(); 使用new关键字定义对象

或者是var objectName=[];

访问对象属性的语法：

objectName.propertyName

如何使用Array对象的length属性来获得数组的长度；

var myarray=new Array(6);

var myl=myarray.length;

以上代码执行后，myl的值将是：6

访问对象的方法：

objectName.methodName()

如何使用String对象的topUpperCase()方法来将文本转换为大写：

var mystr="hello world"创建一个字符串

var request=mystr.topUpperCase();

以上代码执行后request的值是HELLO WORLD

1）：Date日期对象：

日期对象可以存储任意一个日期，并且可以精确到毫秒数（1/1000秒）

定义日期对象：

var udate=new Date(); 注意：使用关键字new Date()的首字母必须大写。

注意：使用udate成为日期对象，系统的初始时间为当前电脑的系统时间，

自定义系统初始时间方法：

var d=new Date(2012,10,1) 显示的时间是2012年10月1日

var d=new Date('Oct1,2012') 显示的时间也是2012年10月1日

我们最好使用下面介绍的方法来严格定义时间：

访问方法语法："<日期对象>.<方法>"

Date对象处理中处理时间和日期的常用方法：

2)返回/设置年份方法

get/setFullYear() 返回/设置年份，用四位数表示。

var mydate=new Date();

document.write（mydate+"<br>"）;

document.write(mydate.getFullYear()+"<br>");

mydate.setFullYear(81);

document.write(mydate+"<br>");

注意在不同的浏览器中，mydate.setFullYear(81)结果不同，年份被设定为0081或者是81两种情况。

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>get/setFullYear()返回/设置年份，用四位数表示</title>
</head>
<body>
    <script type="text/javascript">
         var mydate=new Date();
         document.write(mydate+"<br>");
         document.write(mydate.getFullYear()+"<br>");
        mydate.setFullYear(81);
        document.write(mydate+"<br>");
    </script>
</body>
</html>

显示的效果如下：

上面表示的是我们先自定义时间，自定义的时间是系统的默认时间，后面新的时间是我们通过重新设置年限的方法重新设置的，

注意：1.结果格式依次为：星期、月、日、年、时、分、秒、时区（火狐浏览器）

2.不同的浏览器，时间格式有差异。

案例：定义时间输出当前系统时间，更改时间年份时间，将年份更改为2014年

<script type="text/javascript">
    /*   var mydate=new Date();
     document.write(mydate+"<br>");
     document.write(mydate.getFullYear()+"<br>");
    mydate.setFullYear(81);
    document.write(mydate+"<br>");*/
    var  mydate=new  Date();
    document.write(mydate+"<br>");
    document.write(mydate.getFullYear()+"<br>");
    mydate.setFullYear(2014);
    document.write(mydate+"<br>");
</script>

显示效果如下：

上述的方法表示的就是我们年份日期进行更改到了2014年。

3）：getDay()返回星期的方法：

getDay()返回星期，返回的是0-6的数字，0表示的是星期天，如果想要返回相应的“星期”通过数组完成，代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>getDay返回星期方法：</title>
</head>
<body>
    <script type="text/javascript">
         var  mydate=new  Date();
         var  weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
         var  mynum=mydate.getDay();
         document.write(mydate.getDay());
         document.write("今天是："+weekday[mynum]);
    </script>
</body>
</html>

上面显示的是：设置时间，定义星期时间数组，然后输出时间数组对应的数字是什么，通过输出的数字，就能确定今天是周几了。

执行步骤操作如下：

1.定义日期对象：

2.定义数组项，给每个数组项赋值

3.返回值存储在变量中

4.输出getDay()获取值，输出的是获取值0-6之间的数值，

5.输出今天是星期几

4）：get/setTime() 返回/设置时间方法：

get/setTime() 返回/设置时间，单位毫秒数，计算从1970年1月1日零时到对象所指的日期的毫秒数。

案例：将目前日期对象的时间推迟1小时，代码如下：

var mydate=new Date();

document.write("当前时间："+mydate+"<br>");

mydate.setTime(mydate.getTime()+60*60*1000);

document.write("推迟一小时时间："+mydate);

注意：1.一小时60分，一分60秒，一秒1000毫秒

2.时间推迟一小时：就是X.setTime(x.getTime()+60*60*1000)这个是正确的算法

案例：输出时间，推迟两个小时：

var mydate=new Date();

document.write("输出当前时间"+mydate+"<br>");

mydate.setTime(mydate.getTime()+120*60*1000);

document.write("输出推迟后的时间"+mydate+"<br>");

推迟时间的正确算法：xx.setTime(xx.getTime()+几个小时*60*60*1000) 这个表示的就是推迟时间的正确算法。

显示结果如下图：

上面表示的就是推迟时间的算法，我们用正确的方式去做的话，就会显示推迟的时间如上述表示。

5）：String字符串对象：

在之前的学习中已经使用字符串对象了，定义字符串的方法就是直接赋值，比如：

var mystr=" i love you" 这个表示的是直接进行定义字符串的变量。

定义mystr字符串后，我们就可以直接访问他的属性和方法了

访问字符串对象的属性length：

字符串的属性：比如说是在css中一个文本颜色，那这个颜色是文本样式标签的属性，例如我们现在自定义的字符串，例如我们定义了数组，那么数组的长度就是字符串的属性。

@1.字符串的长度

语法：StringObject.length:返回该字符串的长度；前面的StringObject表示的就是定义的变量的名称。

var mystr="hello world";

var myl=mystr.length;

这个字符串的长度和数组的长度表示的方法是一致的，将字符串的长度返回存储在新的变量中

以上代码执行后：返回值是12

@2.访问字符串对象的方法：

使用String对象的toUpperCase()方法来将字符串小写字母转换为大写（toUpperCase()就是和string相匹配的属性）

var mystr="hello world";

var mynum=mystr.toUpperCase();

执行的结果就是将hello world 以大写的形式输出来

以上执行后的结果是：HELLO WORLD!

@3.charAt()返回指定位置的字符

charAt()方法可返回指定位置的字符，返回的字符是长度为1的字符串。

语法：StringObject.charAt(index)其中StringObject是定义的变量名称，后面的charAt()表示的是String的属性就是可以返回指定位置的字符。

注意：1字符串中第一个字符的下标是0.最后一个字符的下标为字符串长度减1，String.length-1 字符串的下标表示的是数值就是对应该字符串的，对应的数值是从0到length-1的

2.如果参数index不在0和string-1之间，则方法将返回一个空字符串。

案例：在字符串I Love Javascript中，返回位置2的字符。

var mystr=" I LOVE javascript";

document.write(mystr.charAt(2));

注意：一个空格也算是一个字符：

以上代码的运行结果是：L；

案例：1.输出字符的长度，2.将字符变成大写，3.输出特定位置的字符。

var mystr="hello world";

var myl=mystr.length;

document.write(myl+"<br>");

var mynum=mystr.toUpperCase();

document.write(mynum+"<br>");

var mynumber=mystr.charAt(3);

document.write(mynumber+"<br>");

注意：1.空格算是字符串的长度，2，charAt表示的根据指定的位数进行输出字符，空格也算是字符。

@4.IndexOf() 返回指定的字符串首次出现的位置

IndexOf()方法用于返回指定的字符串值在字符串中首次出现的位置。

语法：StringObject.indexOf(substring,startpos)这是两个参数必须要填写的前面表示的是要检索的是什么元素，后面表示的是从第几个元素开始查询，如果不定义的话会自动默认为从首位开始检索。

参数说明：

其中第一个值表示的是我们要检索的字符，后面的表示的是从哪个位置开始检索，如果没有特定说明的话就会默认从第一个位置开始。

说明：

1.该方法将从头到尾地检索字符串StringObject,看他是否含有子串substring

2. 可选参数，从stringobject的startpos位置开始查找substring，如果没有此参数将从stringobject的位置查找。

3.如果找到一个substring则返回substring的第一次出现的位置，stringobject中的字符位置是从0开始的。

注意：1.indexOf()方法区分大小写

2.如果要检索的字符串没有出现，则该方法返回-1.

例如：对“ I Love Javascript”字符串内进行不同的检索

案例：<script type="text/javascrript">

var str="I Love javascript";

document.write(str.indexOf("I")+"<br>");

document.write(str.indexOf("v")+"<br>");

document.write(str.indexOf("v",8))

</script>

以上代码的运行结果是0 4 9 前面两个表示的是没有指定检索字符串的位置的，默认是从头开始检索的，而最后的一个表示的是已经指定了位置，从指定的位置开始检索，第一个出现该字母的位置即可。

这里面要注意的是：如果要是有空格的话，空格也是占位的，特别注意的是比如说是在开头的位置上要是有空格的话，那么也算是有空格。

@5.split字符串分割

split（）方法将字符串分割为字符串数组，并返回此数组。

语法： StringObject.split(separator,limit)

参数说明：

前面第一个参数表示的是我们要分割什么，比如说是空字符“”或者是什么，后面的limit表示的是分割的次数是多少，如果没有次数的规定的话就会默认为全部分解完成，如果有规定的次数的话会根据指定的次数直接分解到指定的次数即可。

注意：如果把空字符串“”用作separator,那么StringObject中的每一个字符都应该被分解。

我们按照两种不同的方式来分割字符串：

案例：使用指定的字符串符号分割字符串：

var mystr="www.imooc.com";

document.write(mystr.split(".")+"<br>");

document.write(mystr.split(".",2)+"<br>");

运行结果：www,imooc，com这种情况下表示的是我们用，分割符来控制整体字符串的分解，如果后面没有指定的参数的话，就是默认为将整个字符串分解完成。

www,imooc 这种情况表示的是我们指定了分割的次数，那么就表示的是按照分隔符，分割到指定的参数位即可，指定的是2，那么就分割到2位的时候进行停止分割即可。

将字符串分割为字符，代码如下：

document.write(mystr.split("")+"<br>");

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

运行结果如下：

上面第一行的运行结果表示的是用“”进行分割同时没有参加的截止符，所以将所有的字符串全部分割了。

而下面的分割条件表示的是没有分割符但是有参数的限制就是能分割5次，所以分割到第5个数就停止了。

案例：用split方法将数字字符串进行分割成数组。

var mystr="86-010-85468578"

document.write(mystr.split("-")+"<br>");

document.write(mystr.split("")+"<br>");

document.write(mystr.split("",3)+"<br>");

</script>

运行结果如下：

86,010,85468578

8,6，-，0,1,0，-，8,5,4,6,8,5,7,8

8,6，-

@6.substring()提取字符串

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

语法：StringObject.substring(startPos,stopPos)

参数说明：

注意：1.返回的内容是从start开始的（包含start位置的字符）到stop-1处的所有字符，其长度为stop减start

2.如果参数start与stop相等，那么该方法返回一个空字符串（即长度为0的字符串）

3.如果start比stop大，那么该地方在提取子串之前会交换这两个参数。

使用substring()从字符串中提取字符串，代码如下：

var mystr=" i love javascript"

document.write(mystr.substring(7));

document.write(mystr.substring(2,6));

</script>

运行结果：1. javascript 第一个表示的是从7开始，但是没有规定结束的位置，所以会获取即7后面的位置全部都获取了。

2.love 这个love是给定义了范围从2开始到7结束，包含的数值位数是从2的位置开始到结束的位数6-1位数截止的数值。

案例：获取world!和hello

var mystr="Hello world!";

document.write(mystr.substring(6)+"<br>");

document.write(mystr.substring(0,5))

</script>

运行结果如下：

World!

Hello

@7.substr提取指定数目的字符

substr()方法从字符串中提取从startPos位置开始的指定数目的字符串。

语法：StringObject.substr(startpos.length)

参数说明：

注意：1.如果参数是startPos是负数的话，从字符串的尾部开始算起的位置，也就是说-1指字符串中最后一个字符。-2是倒数第二个字符，依次类推，这就说明如果起始位置是负数的话就从后面开始数。

2.如果startPos为负数并且绝对值大于字符串长度，startPos为0，使用substr()从字符串中提取一些字符，代码如下：如果是startPos是负数的值，并且这个值的绝对值如果大于整个字符串的长度的话，那么输出的字符串的长度为0，就是输不出来。

案例：运用substr()方法提取出一些字符：world和hello

var mystr=" I Love javascript";

document.write(mystr.substr(7));

document.write(mystr.substr(2,4));

运行结果：Javascript!

love

上面表示的是我们获取指定元素位的字符，第一种表示的是从哪个位置开始，如果后面没有截止位的话，就会默认全部都取得到，第二种表示的是从指定位置开始获取，获取的位数为4位数。

6.Math对象

Math对象，提供对应数据的数学计算，使用Math的属性与方法，代码如下：

var mypi=Math.PI;

var myabs=Math.abs(-15);

document,write(mypi);

document.write(myabs);

</script>

注意：Math对象是一个固定的对象，无需创建它，直接把Math作为对象使用就可以调用其所有属性和方法，这是

它和Date,String对象的区别。

这个Math是可以直接使用的表示的就是数学运算，后面加的是什么运算符，这个后面就会跟什么运算符。

Math:对象属性

Math对象：

@1.ceil()向上取整

ceil方法可对一个整数进行向上取整。

语法：Math.ceil(x)

参数说明：

注意：它返回的是大于或者是等于X，并且与X最接近的整数，我们用这个相当于是取了X向上的一个整数，即表示的是X值上侧的一个整数。

案例： <script type="text/javascript">

document.write(Math.ceil(0.8)+"<br>");

document.write(Math.ceil(6.3)+"<br>");

document.write(Math.ceil(5)+"<br>");

document.write(Math.ceil(3.5)+"<br>");

document.write(Math.ceil(-5.1)+"<br>");

document.write(Math.ceil(-5.9));

运行结果是：

1 7 5 4 -5 -5

上面的结果表示的是，取整数的向上的最接近X的一个整数值，例如6.3那么向上值就是7.还有例如说是3.5那么向上值就是4.

@2.floor()向下取整：

floor()方法可对一个数进行向下取整

语法：Math.floor(x);

参数说明：

注意：返回的是小于或者是等于X，并且与X最接近的整数。

案例：我们将在不同的数字上使用floor()方法，代码如下：

document.write(Math.floor(0.8)+"<br>");

document.write(Math.floor(6.3)+"<br>");

document.write(Math.floor(5)+"<br>");

document.write(Math.floor(3.5)+"<br>");

document.write(Math.floor(-5.1)+"<br>");

document.write(Math.floor(-5.9)+"<br>");

</script>

运行的结果是：0 6 5 3 -5 -5

@3.round()四舍五入

round()方法可把一个数字四舍五入为最接近的整数

语法：Math.round(x)

参数说明：

注意：1.返回与X最接近的整数。

2.对于0.5，该方法将进行上舍入（5.5将舍为6）

3.如果X与两侧整数同时接近的，则结果接近+无穷方向的数学值（-5.5将舍入为-5，-5.52将舍为-6）其中-5.5表示的是左右两侧都相等的情况下，那么就会舍入为接近正无方向的数值-5，而后面-5.52表示的是相当于接近-6那个位置了，就会四舍五入到-6的位置上去。

把不同的数舍入为最接近的整数，代码如下：

document.write(Math.round(1.6)+"<br>");

document.write(Math.round(2.5)+"<br>");

document.write(Math.round(0.49)+"<br>");

document.write(Math.round(-6.4)+"<br>");

document.write(Math.round(-6.6))

运行结果如下：分别为2 3 0 -6 -7

@4.随机数random()

random()方法可返回介于0-1（大于或等于0但小于1）之间的随机数

语法：Math.random()

注意：返回一个大于或等于0但小于1的符号为正的整数值，

我们取得介于0到1之间的一个随机数代码如下：

document.wirte(Math.random());

</script>

运行结果是：

注意：因为是随机数所以每次运行的结果不一样，但是是0-1之间的数值，获得0-10之间的随机数，代码如下：

document.write((Math.random())*10);

</script>

运行结果：

7.Array数组对象

数组对象是一个对象的集合，里面的对象可以是不同类型的，数组的每一个成员都有一个下标，用来表示它在数组中的位置，是从零开始的。

数组定义的方法：

1.定义了一个空数组：

var 数组名=new Array();

2.定义时指定有n个空元素的数组：

var 数组名=new Array(n);

3.定义数组的时候，直接初始化数据：

var 数组名=[<元素一>，<元素二>，<元素三>...]

我们定义了myArray数组，并赋值，代码如下：

var myArray=[2,8,6];women

说明：定义了一个数组myArray里面的元素是：myArray[0]=2;myArray[1]=8;myArray[2]=6.

数组元素使用：上面中的内容表示的是下标是几，然后指定的数值是多少

数组名[下标]=值；

注意：数组的下标用方括号括起来，从0开始

数组属性：

@1.length用法：<数组对象>.length返回：数组的长度，即数组里有多少个元素，它等于数组里最后一个元素的下标加1，数组的长度相当于是比如说数组里面有5个数，那么数组的下标是0到4，然后数组的长度是4+1，那么就是5；

数组的方法：

@2.concat()数组连接

concat()方法用于连接两个或者是多个数组，此方法返回一个新数组，不改变原来的数组。

参数说明：

连接数组，相当于是将数组进行连接的时候返回的是一个新数组，而不是改变原来的数组内容。

注意：该方法不会改变现有的数组而仅仅会返回被连接数组的一个副本

案例：我们创建一个数组，将把concat()中的参数连接到数组myarr中，代码如下：

var mya=new Array(3);

mya[0]="1";

mya[1]="2";

mya[2]="3";

document.write(mya.concat(4,5)+"<br>");

document.write(mya);

</script>

运行结果是：

表示的是直接连接数组的数值。

案例二：

我们创建了三个数组，然后使用concat()把他们连接起来，代码如下：

var mya1=new Array("hello !");

var mya2=new Array("I","love");

var mya3=new Array("javascript","!");

var mya4=mya1.concat(mya2,mya3);

document.write(mya4);

</script>

运行结果：

这个表示的是我们将数组mya1和数组mya2 mya3进行连接，连接后的值赋予变量mya4然后输出结果。

@3.指定分隔符连接数组元素join()

join()方法用于把数组中的所有元素放入一个字符串，元素是通过指定的分隔符进行分隔的，将所有数组放入一个字符串中，在字符串中将元素进行分割。

语法：arrayObject.join(分隔符）

join(分隔符)，分隔符里面表示的是符号，如果我们指定了符号，那么分隔的元素用指定的符号，如果我们不指定符号的话，用的就是逗号进行分隔的。

参数说明：

分隔符，我们就用指定的分隔符进行分隔内容，如果不是用指定的分隔符那么就使用逗号作为分隔符使用。

注意：返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元素与元素之间，这个方法不影响数组原本的内容，我们使用join()方法，将数组的所有元素放入一个字符串中，代码如下：

var myarr=new Array(3);

myarr[0]="I";

myarr[1]="love";

myarr[2]="javascript";

document.write(myarr.join());

</script>

运行结果：

1.这个就表示的是我们定义了一个数组，数组中有3个值，我们根据join方法，将数组串联起来，如果没有指定符号的话，就用“，”逗号将数组中的内容用，分隔的方式，存储在新的内容中。

2.同时我们也可以指定分隔符的风格：例如我们指定使用.分隔符来将数组中的数字进行分解，代码如下：

var myarr=new Array(3);

myarr[0]="I";

myarr[1]="love";

myarr[2]="javascript";

document.write(myarr.join("."));

</script>

运行结果如下：I.love.Javascript 这个表示的就是用句号进行将字符串相连接。

@4.reverse()颠倒数组元素顺序

reverse()方法用于颠倒数组中元素的顺序。

语法：arrayObject.reverse()

注意：该方法用于改变原来的数组，而不会创建新的数组，定义数组myarr并赋值，然后颠倒其元素的顺序。

案例：定义数组myarr并赋值，然后颠倒其元素的顺序：

var myarr=new Array(3);

myarr[0]="1";

myarr[1]="2";

myarr[2]="3";

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

document.write(myarr.reverse());

</script>

运行结果：1,2,3

3,2,1

说明：先定义数组，然后定义数组中的几个数，然后输出数组，最后进行的是换位置的输出。

@5.slice()选定元素

slice()方法可以从已有的数组中返回选定的元素

语法：arrayObject.slice(start,end)

参数说明：

1.返回一个新的数组，包含从start到end(不包含该元素)arrayObject中的元素

2.该方法并不会修改数组，而是返回一个子数组。

注意：1.可使用负值从数组的尾部选取元素

2.如果end未被规定，那么slice()方法会选取从start到数组结尾的所有元素。

3.String.slice()与Array.slice()相似，前面表示的是从字符串中选取元素，代码如下：

案例：我们创建一个新数组，然后从其中选取的元素，代码如下：

var myarr=new Array(1,2,3,4,5,6);

document.write(myarr+"<br>");

document.write(myarr.slice(2,4)+"<br>");

document.write(myarr);

</script>

运行结果如下所示：

上面的slice后面的数字显示的内容是从start开始到end结束，然后元素不包括end这个位数上的元素，end.

@6.sort()数组排序

sort()方法使数组中的元素按照一定的顺序排列

语法：arrayObject.sort(方法函数)

参数说明：

1.如果不指定<方法函数>，则按照unicode码顺序排列，如果不写指定的函数方法的话就会直接按照一定的顺序进行执行。

2。如果指定<方法函数>则按<方法函数>所指定的排序方法排序。

myArray.sort(sortMethod);

后面表示的就是函数名称，就是函数指定方法的名称。

注意：该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字，比较函数应该具有两个参数a,b其返回值如下：

若返回值<=-1,则表示A在排序后的序列中出现在B之前。如果a-b<=-1,那么就表示的是a小于b所以a在b的前面。

若返回值>-1&&<1,则表示A和B具有相同的排列顺序。

若返回值>=1,则表示A在排序后的序列中出现在B之后（>=1表示的是a大于b那么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()+"<br>");

document.write(myarr2.sort());

</script>

运行结果：hello,javascript,john,love

1,100,16,50,6,80

这个表示的是sort后面没有加上函数，所以排列顺序是按照一定的顺序排列的不是自己指定的顺序。

注意：上面的代码没有按照数值的大小对数字进行排序。

2.如果要实现这一点，就必须使用一个排序函数，代码如下：

function sortNum(a,b){

return a-b; //升序，如降序把“a-b改成"b-a”

}

var myarr=new Array("80","16","50","6","100","1");

document.write(myarr+"<br>");

document.write(myarr.sort(sortNum));

</script>

这个用的是指定的函数，根据这个函数可以对数组中的数字进行升序的排列。

运行结果是：

编程案例：

某班的成绩出来了，现在老师要把班级的成绩打印出来，效果图如下所示：

格式要求：

1.显示打印的日期。格式为类似“xxx年xx月xx日星期x”的当前时间。

2.计算出该班级的平均分（保留整数）

3.同学成绩如下：

“小明：87；小花：81；小红：97；小天：76；小张：74；小小：94；小西：90；小五：76；小迪：64；小曼：76；”

函数表示方法如下：

var date=new Date();

var timeStr='';

timeStr=date.getFullYear()+"年"；

timeStr+=date.getMonth()+1+"月"；

timeStr+=date.getDate()+"日"；

var day=date.getDay();

var week='';

switch(day){

case 0:

week='星期一'；

break;

case 1:

week='星期二'；

break；

case 2:

week='星期三'；

break;

case 3:

week='星期四'；

break；

case 4：

week='星期五'；

break;

case 5:

week='星期六'；

break;

case 6:

week='星期日'；

break;

}

timeStr+=" "+week;

document.write(timeStr);

var scoreStr="小明：87；小花：81；小红：97；小天：76；小张：74；小小：94；小西：90；小伍：76；小迪：64；小曼：76；"

var arr=scoreStr.split(";");

var sum=0;

var av=0;

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

var index=arr[i].indexOf(':');

sum+=parseInt(arr[i].substr(index+1,2));

}

av=sum/arr.length;

av=Math.floor(av);

document.write("--班级的总平均分为："+av);

以上程序执行步骤：

1.因为成绩是一串的字符不好处理，找规律后分割放在数组里更好操作。

2. 用；将字符串分割放在数组中

3.定义总数变量起始值是0

4.定义平局数变量起始值是0

正式的运算步骤：

1.先定义日期变量

2. 定义一个变量用来存储日期数值

3，输出年份

4.输出月份+号在字符串中是拼接的意思，在数字中是+，例如： I am +zhangchi表示的就是I am zhangchi 文章中timeStr+表示的是年月日中的字符串相连接。这样就能保证题目中要求的会输出日期

5.后面的星期是要进行一个判断，表示的是选择，从0-6表示的是从周一到周日

6.+号在JS中st=1+2+"sum"这个里面的+表示的是前面两个相加然后再拼，结果是3sum先把数字进行相加然后和后面的sum相连接。

7.下面的函数部分，先把字符串用逗号分隔放入数组中。

8.定义总和变量，起始值是0

9.定义平均数变量，起始值是0

10.循环数组

11.根据符号确定数字开始的位置，用indexOf去确定，找到指定的数字

12.parseInt表示的是将字符串类型变成整数型

13.取平均值

14.将数字取整如果得到的平均数是小数的话，就用取整的方式，让输出的数字是整数

15.从数组中将成绩取出来，然后求和取整并输出。

8.window对象

window对象是bom的核心，window对象指当前的浏览器窗口

上面表示的这些方法就是表示的是会弹出各种各样的窗口，供我们自己去选择，例如弹出打印匡，弹出输入框等等

注意：在javascript基础篇中，将讲解了部分内容window对象重点讲解计时器。

例如：点击我将窗口打开

function chuangkou(){

window.open('http://www.imooc.com','_blank','width:400,height:600');

}

</script>

创建函数方法：打开窗口后面的属性表示的是打开的窗口是什么，窗口的大小是多少,后面html中的内容表示的是我们点击这个按钮，点击按钮的时候就会执行onclick这个操作。

9.Javascript计时器

在javascript中，我们可以在设定的时间间隔之后来执行相应的代码。而不是在函数被调用后立即就执行

计时器类型：

一次性计时器，仅在指定的延迟时间之后触发一次

间隔性触发计时器，每隔一定的时间间隔就触发一次
计时器方法:

上面的计时器方法表示的是可以在指定的时间之后就执行方法，还有一个表示的是每隔一段时间就会执行函数，就是比如说是像图片滚动或者换banner图进行滚动的就是javascript计时器。

@1.计时器setInterval() 在执行时，从载入页面后每隔指定的时间执行代码。

语法：setInterval（代码，交互时间）；

参数说明：

1.代码：要调用的函数或执行的代码串。这个位置表示的是我们要执行什么代码，比如说是让图片滚动或者是信息滚动等等，会自己写函数方法，然后进行调用，写上要调用什么和调用的时间

2.交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒（1ms=1000ms）

返回值：一个可以传递给clearInterval从而取消对“代码”的周期性执行的值

调用函数格式（假设有一个clock()函数）；

setInterval("clock()",1000)或者是setInterval(clock,1000)

案例：我们设置一个计时器，每隔1000毫秒调用click()函数，并将时间显示出来，代码如下：

var int=setInterval(clock,100)

function clock(){

var time=new Date();

document.getElementById("clock").value=time;

}

</script>

<form>

</form>

表示的是我们先定义函数，在函数中定义时间日期变量，然后将输出的内容和下面的input中的id相关联这样我们在input中就会看到时间

显示的效果如下：

表示的是每隔100ms时间就会跳一次。

案例二：我们设置一个计时器，每隔100毫秒调用clock()函数，并且时间的格式为：“时：分：秒”。

上面表示的是我们先声明变量；然后定义函数：时间变量表示的是分别获取时，分，秒。然后将这个时间通过id的方法，进行在input输入框中显示出来。

@2.clearInterval()取消计时器

clearInterval()方法可取消由setInterval()设置的交互时间

语法：clearInterval(id_of_setInterval)

参数说明：id_of_setInterval:由setInterval（）返回的ID值

id返回的值表示的就是我们将返回值赋值给i,每隔100ms调用clock()函数，并显示时间。当点击按钮时，停止时间

代码如下：

function clock(){

var time=new Date();

document.getElementById("clock").value=time;

}

var i=setInterval("clock(),100");

</script>

<form>

</form>

执行后显示的效果是：

正常的话每隔100ms时间就会变化一点，但我们点击停止按钮的时候，时间就会停止了，不动了。

案例二：

使用setLnterval()计时器，显示动态时间，点击stop按钮后，取消计时器。

function clock(){

var time=new Date();

document.getElementById("clock").value=time;

}

var i=setInterval("clock()",100);

</script>

<body>

<form>

</form>

</body>

显示效果图如下：正常时间在变化，如果我们点击按钮的话，就会停止了。

方法步骤：先定义函数，定义时间变量，通过ID和下面的内容进行关联，然后进行调用函数，执行事件，最后再点击按钮的时候，执行停止事件。

@3.setTimeout()计时器

settimeout()计时器，在载入后延迟指定时间后，才执行一次表达式，仅执行一次。就是说例如当我们打开网页的时候，打开3秒之后才执行下一个操作，还有就是比如说是我们用移动端打开一个页面，在加载了3ms之后事件作出响应了，这个就是事件的延迟。

语法：

参数说明：

1.要调用的函数或执行的代码串

2.延时时间，在执行代码前需等待事件，以毫秒为单位（1s=1000ms）

案例：当我们打卡网页3s后，在弹出一个提示框，代码如下：

setTimeout("alert('hello!')",3000);

</script>

表示的是我们打开网页3秒后，在弹出一个提示框，显示的效果如下：打开网页3秒后会有一个弹出框弹出。setTimeout()括号内前面是代码方法，后面是执行的时间。

案例二：当按钮start被点击时，setTime()调用函数，在5秒后会弹出一个提示框。代码如下表示：

function tinfo(){

var t=setTime("alert('hello!')",5000);

}

</script>

<form>

</form>

案例三：要创建一个运行于无穷循环中的计数器，我们需要编写一个函数来调用其自身，在下面的代码中，当按钮被点击后，输入域便从0开始计数。就是相当于是在文本框中先输入0然后程序就会执行相应的操作，从0到100依次增加。 <script type="text/javascript">

var num=0;

function numCount(){

document.getElementById('txt').value=num;

num=num+1;

setTimeout("numCount()",1000);

}

</script>

<form>

</form>

上面表示的是我们先初始化变量，变量的初始值为0，然后我们进行定义函数方法，让文本框和下面的内容相连接，我们在文本框中写的内容通过程序能获取到，进而加1，然后随着函数的调用，自动自己变化，所以我们看到的好像是文本框在自己变化数值。

@4.clearTimeout()取消计时器

setTimeout()和clearTimeout()一起使用，停止计时器

语法：clearTimeout(id_0f_setTimeout)

参数说明：id_of_setTimeout;

由setTimeout()返回的ID值，改值标识要取消的延迟执行代码块，改值标识要取消的延迟执行代码块

下面的例子和上面的无穷循环的例子相似。唯一不同是，现在我们添加了一个"stop"按钮来停止这个计时器。[这个代码表示的是当我们浏览网页的时候大约过了3s之后会执行相应的事件，然后我们添加一个stop按钮来停止这个计时器]

10.History对象

history对象记录了用户曾经浏览浏览过的页面（url）并可以实现浏览器前进与后退相似导航的功能（这个就是相当于是我们在浏览360浏览器的时候，系统会有记忆，记住了我们浏览过什么网页，同时这个对象具有前进和后退的功能，这个语法就是我们浏览360浏览器做的操作）

注意：从窗口被打开的那一刻开始记录，每个浏览器窗口。每个标签乃至每个框架，都有自己的history对象与特定的window对象关联，相当于是我们在浏览器中浏览内容的时候，我们浏览的每个东西都会和自己的history对象进行相关联，从而达到存储保留。

语法：window.history.[属性、方法]

注意：window可以省略

history对象属性

这个属性表示的是我们在历史记录中会看到url地址的长度，我们默认说明表示的是多少，结果就会显示多少，

History对象方法：

会记忆history列表中的前一个url同时还有下一个url。同时还会记录列表中某一个具体的页面是什么。

案例：使用length属性，当前窗口的浏览器历史总长度，代码如下：

var HL=window.history.back()

document.write(HL);

</script>

@1.back()方法：返回前一个浏览的页面，加载history列表中的前一个url

语法：window.history.back()

比如返回一个浏览的页面，代码如下：

window.history.back()

注意：等同于点击浏览器的倒退按钮

back()相当于是go(-1)代码如下：window.history.go(-1)

案例：点击锚点链接，点击按钮实现返回前一个页面

function GoBack(){

}

</script>

<body>

点击下面的锚点链接，添加历史列表项

<br/>

<a href="#target1">第一个锚点</a>

<br/>

<a href="#target2">第二个锚点</a>

使用下面按钮，实现返回前一个页面

<form>

</form>

</body>

上面表示的是，当我们点击第一个的时候，会在浏览器窗口中显示一个链接的地址，当我们点击第二个的时候会在浏览器中显示第二个地址，然后我们点击下面的按钮，执行上面的函数调用方法，就会返回第一个浏览的页面

@2.forward()方法,返回下一个浏览页面

forward()方法，加载history列表中的下一个url,back表示的是返回浏览器中的上一个页面，forward()表示的是返回下一个打开的页面。

这个原理就表示，如果浏览网页之后再想倒退，倒退之前浏览的网页，则可以使用forward()方法，代码如下：

window.history.forward();

注意：等价点击前进按钮

forward()相当于go(1),代码如下：

window.history.go(1);

forward()和back应该分别表示的是打开窗口的前后位置。

表示的是如果想要倒退的话，想要回到倒退之前的网页的话就使用这个代码。

@3.Go()方法，返回浏览历史中的其他页面

Go()方法，根据当前所处的页面，加载history列表中某个具体的页面

语法：window.history.go(number)；

参数说明如下：

浏览器中，返回当前页面之前浏览过的第二个历史页面，代码如下：

window.history.go(-2);

注意：和浏览器中单击两次后退按钮操作一样，这个就表示的是浏览器向前点击两次的效果。

同理：返回当前页面之后浏览过的第三个历史页面

代码如下：window.history.go(3)

相当于是前进个后退。

11.location对象用于获取或设置窗体的URL，并且可以用于解析URL

语法：Location.[属性、方法]

location对象属性：

location对象方法：

12.navigator对象

navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本

对象属性：

查看浏览器的名称和版本，代码如下：

查看浏览器版本的代码：

var browser=navigator.appName;

var b_version=navigator.appVersion;

document.write("browser name"+browser);

document.write("<br>");

document.write("Browser version"+b_version);

</script>

13.userAgent对象

返回用户代理头的字符串表示（就是包含浏览器版本信息等的字符串）

语法：navigator.userAgent

几种浏览器的user_agent,像360的兼容模式用的是IE、极速模式用的是chrom的内核。

案例：使用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+"<br>");

document.write("u_agent:"+u_agent+"<br>");

}

通过上面这种方式这个方法：可以判断使用的是什么浏览器，并且浏览器的版本是什么以及用的内核是什么都会检测出来。这个是固定的写法就是这样写的。

显示的效果如下所示：

上面表示的是当我们点击按钮执行上面的函数操作时就会执行上面的函数操作，显示浏览器的名称以及浏览器内核是什么具体详细信息都会显示出来。

14.screen对象：screen对象用户获取用户的屏幕信息

语法：window.screen属性

对象属性：

根据这个对象的属性：就是用window.screen属性后面跟的内容是什么就是表示的是获取的是什么信息，我们就能获取到屏幕的信息。

屏幕分辨率的宽和高：

window.screen对象包含有关用户屏幕的信息

1.screen.height返回屏幕分辨率的高

2.screen.width返回屏幕分辨率的宽

注意：1.单位以像素计

2.window.screen对象在编写时可以不使用window这个前缀，我们来获取屏幕的宽和高，代码如下：

显示结果如下表示：

屏幕宽度是：1440px 屏幕高度是900px显示的结果就是屏幕的具体宽和高，

@1.屏幕可用宽和高

1.screen.availWidth属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏

2.screen.availWidth属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏

注意：不同系统的任务栏默认高度不一样，及任务栏的位置可在屏幕上下左右任何位置，所有可能可用宽度和高度不一样。这个表示的就是不同系统的任务栏默认高度不一样，及任务栏的位置可能在屏幕上下左右任何位置，所以有可能可用宽度和高度不一样。

我们来获取屏幕的可用高和宽度，代码如下：

显示的效果如下：

可用宽度是1440 可用高度是900

会显示出屏幕的有效宽度和高度用于使用

小结：编程练习

制作一个跳转提示页面：

要求：1.如果打开该页面后，如果不做任何操作则5秒后自动跳转到一个新地址，如慕课网

2.如果点击“返回”按钮则返回前一个页面

注意：在窗口运行该程序时，该窗口一定要有历史浏览记录，否则“返回”无效果。任务，第一步：先编写好网页布局如下：

第二步：获取显示秒数的元素，通过定时器来更改秒数

第三步：通过window的location和history对象来控制网页的跳转

<body>

<h4>

操作成功

</h4>

<p>

<b id="second">5</b>秒后回到主页 <a href="javascript:goBack();">返回</a>

</p>

var sec=document.getElementByid("second");

var i=5;

var timer=setlnterval(function(){

i--;

sec.innerHTML=i;

if(i==1){

window.location.href="http://www.imooc.com/";

}

},1000);

function goBack(){

window.history.go(-1);

}

</script>

</body>

代码如上述图片所示：

十五.DOM对象，控制HTML元素

@1.认识DOM

文档对象模型DOM定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素属性和文本的树结构（节点树）

先看看下面的代码：

<body>

<h2><a href="http://www.imooc.com">javascript DOM</a></h2>

<p>对HTML元素进行操作，可添加，改变或者移除css样式等</p>

<ul>

<li>javascript</li>

</ul>

</body>

将HTML代码分解为DOM节点层次图：

HTML文档可以说由节点构成的集合DOM节点有：

1.元素节点：上图中：<html>、<body>、<p>等都是元素节点，即标签。

2.文本节点：向用户展示的内容，如<li>...</li>中的javascript、dom、css等文本。

3.属性节点：如<a>标签的链接属性href="http://www.imooc.com"

节点属性：

遍历节点树：

以上图ul为例，他的父级节点body, 它的子节点3个li,它的兄弟节点h2,p。

DOM操作：

十六、getElementsByName()方法：

返回带有指定名称的节点对象的集合。

语法：document.getElementsByName(name)

与getElementById()方法不同的是，通过元素name属性查询元素，而不是通过id属性。

注意：

1.因为文档中的name属性可能不唯一，所有getElementsByName()方法返回的是元素的数组，而不是一个元素。

2.和数组类似的也有length属性，可以和访问数组一样的方法来访问，从0开始。

看看下面的代码：

function getElements (){

var x=document.getElementsByName("alink");

alert(x.length);

}

</script>

<body>

<a name="alink" href="#">我是链接一</a>

<a name="alink" href="#">我是链接二</a>

<a name="alink" href="#">我是链接三</a>

<br/>

</body>

通过getElementById获取的是具体的元素内容，唯一的id指定的是唯一的元素。

getElementByName()表示的是获取元素的名称，在css中可能有好多的内容属性都叫一个名称，所以我们通过这种方式获取的可能是一串数组。

运行结果如下：

得到的是一串数组：

通过这种获取的方式可以获取我们统一定义的类名称，这些类名称表示的是一个数组，然后我们可以统一获取这个整体数组的属性，例如数组长度等等。

案例二：同样的获取数组的长度：

通过这样的方式就能获取到相关的数组的长度了。

十七、getElementByTagName()方法：

返回带有指定标签名的节点对象的属性，返回元素的顺序是它们在文档中的顺序。

语法：getElementByTagName(Tagname)

说明：

1.Tagname是标签的名称，如p,a,img等标签名称

2.和数组类似的也有length属性，可以和访问数组一样的方法来访问，所以从0开始

看看下面的代码，通过getElementsTagName()获取节点，表示的是我们可以通过这种方式获取文章中例如应用到p的所有标签的内容，我们引用到内容之后进行具体的操作

编写的代码如下：

和getElementByName不同的是这个表示的是我们获取到的是文章中所有相同的标签名，然后进行逐个分类。

getElementByName表示的是得到文档中具有相同类名的标签。

显示效果如下：

案例二：试一试用三种获取节点的方法完成下面的任务：

1.通过ID获取标题H1，

2.通过name获取值为sex的元素。

3.通过标签名获取input元素

代码如下：

分别进行引用不同的内容就会出现相应的变化

显示效果如下：

十八、区分getElementById,getElementsByName,getElementsByTagName()

以人来举例说明，人有能识别身份的身份证，有姓名，有类别（大人，小孩，老人）等。

1.ID是一个人的身份证号，是唯一的，所以通过getElementById获取的是指定的一个人。

2.Name是他的名字，可以重复。所以通过getElementByName获取名字相同的人的集合。

3.TagName可看似某类，getElementByIdTagName获取相同类的人集合。如获取小孩这类人，getElementByTagName("小孩")

把上面的例子转换到HTML中，如下：

<input type="checkbox" name=“body”id="hobby1"> 音乐

input标签就像人的类别

name属性就像人的姓名

id属性就像人的身份证

方法总结如下：

注意：方法区分大小写

通过下面的例子（6个name="hobby" 的复选项，两个按钮）来区分三种方法的不同

区分的结果就是这样的：

案例二：1.通过点击全选按钮的时候，将选中所有的复选项，提示：

document.getElementsByTagName("input")获取的是所有input标签，包括复选项和按钮，所以要判断是否是有复选框，如是选中。

2.实现当点击“全部选按钮时”将取消所有选中的复选框

3.在文本框中输入1-6数值当点击确定按钮时，根据输入的数值，通过id选中相应的复选框。

十八、getAttribute()方法返回指定属性名的属性值

nodeName如果节点是元素节点，则nodeName属性返回标签名

如果节点是属性节点，则nodeName属性返回属性的名称。‘

对于其他节点类型，nodeName属性返回不同节点类型的不同名称。

代码如下：

知识点：字符串拼接，我们在上面获取到了输入框中输入的数值，然后在下面我们进行字符串拼接，比如上面我们输入的是数字5，那么拼接之后就是hobby5，就是input后面id的值对应的是哪个内容，然后我们就用选择器进行选择，他的checked属性设置为true.

效果显示如下：

getAttribute()方法：

通过元素节点的属性名称获取属性的值

语法：elementNode.getAttribute(name)

说明：1.elementNode使用getElementById()、getElementByTagName()等方法，获取到的元素节点

2.name要想查询的元素节点的属性名称。

3.看看下面的代码，获取h1标签的属性值

显示的效果如下：

当我们点击之后会出现如下的效果。

案例二：使用getAttribute()方法，完成下面的任务，使用getAttribute()方法，获取li标签的title值。

通过getElementByTagName()获取到的是一串数组或得到一串数组之后我们就要进行判断了，将数组中的每一个元素进行判断，所以就用到了for方法等等。

显示的效果如上图，会依次显示出结果的内容。

十九、setAttribute()方法：

setAttribute()方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

语法：elementNode.setAttribute(name,value)

说明：1.name:要设置的属性名。

2.value要设置的属性值。

注意：1.把指定的属性设置为指定的值，如果不存在具有指定名称的属性，该方法将创建一个新属性。

2.类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。

案例：使用getAttribute()方法获取元素属性值，保存在变量text中。使用setAttribute()方法设置title属性值。

<body>

<ul>

<li title="js">javascript</li>

<li title="jquery">jquery</li>

</ul>

<h1>以下为li列表title的值，当title为空时，新设置值为：“web前端技术”</h1>

var lists=document.getElementsByTagName("li");

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

var text=list[i].getAttribute("title");

document.write(text+"<br>");

if (text==""){

text=lists[i].setAttribute("title","php也是不错的选择")；

document.write（lists[i].getAttribute("title")+"<br>"）；

}

</script>

</body>

显示的效果如上所示：这表示的是效果中间空的位置已经替换了。

二十、节点属性

在文本对象模型中，每一个节点都是一个对象。DOM节点有3个重要属性：

1.nodeName：节点的名称。

2.nodeValue:节点的值。

3.nodeType:节点的类型。

一、nodeName属性:节点的名称，是只读的。

1.元素节点的nodeName与标签名相同。

2.属性节点的nodeName是属性的名称。

3.文本节点的nodeName永远是#text

4.文档节点的nodeName永远是#document

二、nodeValue 属性: 节点的值

1.元素节点的nodeValue 是undefine或null

2.文本节点的nodeValue是文本自身。

3.属性节点的nodeValue是属性的值。

三、nodeType属性：节点的类型，是只读的，以下常见的几种节点类型。

元素类型节点类型

元素 1

属性 2

文本 3

注释 8

文档 0

案例：在<script>的标签内容中，获取所有li标签，并输出相应节点的名称，节点的值，节点的类型。

二十一、访问子节点childNodes

访问选定元素节点下的所有子节点的列表，返回的值可以看做是一个数组，它具有length属性。

语法：

注意：如果选定的节点没有子节点，则该属性返回不包括节点的NodeList.

运行结果：

结果显示如图：

在360谷歌浏览器中

显示的效果子节点是7个，节点类型是3【是文本类型】

在IE浏览器中结果如图：

子节点是3，节点的类型是1【元素类型】

在360等浏览器中将后面的空白节点也算上了。

二十二、访问子节点的第一和最后项

1.firstChild属性返回childNodes数组的第一个子节点，如果选定的节点没有子节点，则该属性返回Null.

语法：node.firstChild

说明：与elementNode.childNodes[0]是同样的效果。

知识点：[0]表示的是数组中的第一个数据，例如上面的例子表示的是在得到html中所有的ul标签后面跟着一个[0],表示的就是所有ul中的第一个ul,通过childNode得到ul中的所有子元素，[0]括号内的数值可以是从0开始到数组下标的边界。

2.lastChild lastChild属性返回childNodes数组的最后一个子节点，如果选定的节点没有子节点，则该属性返回null.

语法：

说明：与elementNode.childNodes[elementNode.length-1]是同样的效果。

案例：找到指定元素的第一个和最后一个子节点。length

注意：显示效果在360和IE中显示的是不同的在后续的课程中会有所讲解，上一节中我们会忽略节点之间生成的空白文本节点，而其他浏览器不会，我们可以通过检测节点类型。过滤子节点（以后章节中会讲到）

在360中显示的效果如下：

会有空白节点的问题，在IE中显示的效果如下：

二十三、访问父节点parentNode

获取指定节点的父节点：

语法：elementNode.parentNode

注意：父节点只能有一个。看看下面的例子，获取p节点的父节点，代码如下：

运行结果：

访问主节点：

看看下面的代码：

运行结果：

注意：浏览器兼容问题，chrome、fixfox等浏览器标签之间的空白也算是一个文本节点。

案例二：通过获取的mylist节点，使用访问父节点parentNode,将HTML/css课程内容输出。

代码如下：

在360中的显示效果如下：

在IE中显示的效果如下：

因为浏览器的差异，所以导致了浏览器效果的差异。

知识点：innerHTML几乎所有的DOM对象都有innerHTML,它是一个字符串，用来设置获取位于对象起始和结束标签内的HTML（获取HTML当前标签的起始和结束里面的内容就是html中标签之间的内容，经常用这个做信息的动态显示，就是比如说是图片滚动上的信息进行显示，我们先用innerHTML进行获取到我们在html中写的文字信息，然后让其定时显示出来就行了）

二十四、访问兄弟节点：

1.nextSibling属性可返回某个节点之后紧跟的节点（处于同一树层级中）

语法：nodeObject.nextSibling

说明：previousSibling属性可以返回某个节点之后紧跟的节点

2.previousSibling属性可返回某个节点之后紧跟的节点（处于同一树层级中）

语法：nodeObject.Sibling

说明：如果无此节点，则该属性返回Null

注意：两个属性获取的是节点，Internet Explorer会忽略节点间生成的空白文本节点（例如，换行符号），而其他浏览器不会忽略，就是说我们在360浏览器中和IE中某些属性看到的结果不一致。

解决问题办法：判断节点nodeType是否为1，如是元素节点，跳过。

代码如下：

显示的结果如下所示：

上面表示的是我们由于360.chrome.IE等显示的内容不同，360Chrome等会将空白文档的位置也算上，但是IE不会算上，因此我们需要进行先用函数进行判断，判断后面是不是元素节点然后再进行兄弟节点的函数的判断。判断方式是固定的。

就是这个函数，等这个函数判断完成之后就会进行下面的操作。

进行下面的操作就是我们先去找第一个变量，然后进行输出，然后再找到第二个变量，然后再进行输出，这样就是依次就都显示出来了。

重新审视判断说明函数：

<ul>

<li id=”a”>javascript</li>

<li id=”b”>jquery</li>

</ul>

<ul>

</ul>

function get_nextSibling(n){/*自定义函数，后面的变量n表示的是调用这个方法传进来的元素*/

var x=n.nextSibling;/*x表示的是元素n的下一个节点*/

while(x.&&x.nodeType!=1){/*当下一个元素的节点类型不是元素的话就会跳过去忽略这个元素*/

X=X.nextSibling;/*继续找下一个元素节点*/

}

return x;/*返回这个元素*/

} /*上面的一系列表示的是由于不同的浏览器因为最后显示的效果不同，360、chrome会把空白节点算上IE不会，因此我们在通过上面函数的控制就会将空白的节点跳过去，从而找到正确的节点元素*/

</script>

var x=document.getElementsByTagName(“li”)[0];/*得到文中所有的li，得到一个新数组，我们取得新数组的第一个元素，这个x虽然变量名相同但是作用域不同*/

document.write(x.nodeName);/*输出第一个数组的元素名称*/

document.write(“=”);/*用等号进行连接*/

document.write(x.innerHTML);/*用等号进行连接*/

var y=get_nextSibling(x);/*这个表示的是x的下一个节点，并把这个节点赋予y*/

If(y!=null){/*如果y不是空，那么就输出y的元素名称*/

document.write(“<br>nextSibling”);

document.write(y.nodeName);

document.write(y.innerHTML);/*输出li标签下的所有文字内容*/

}

else{

document.write(“<br>已经是最后一个节点”)

}

二十五、插入节点appenChild()

在指定节点的最后一个子节点列表之后添加一个新的子节点。

语法：appendChild(newnode)

参数：newnode:指定追加的节点。

我们来看看。div标签内创建一个新的p标签，代码如下：

步骤及方法：

1.先得到我们要在哪个元素位置之后添加内容，先得到元素

2.创建一个新的元素节点creatElement("")

3.创建节点中包含的元素内容

4.将该元素添加到哪个节点的后面。

元素显示内容如下：

显示的运行结果如下：

二十六、插入节点appenChild()

inserBefore()方法可在已有的子节点前插入一个新的子节点。

语法：

参数：newnode:要插入的新节点。

Node:指定此节点前插入节点。

我们来看看下面的代码，在指定节点前插入节点。

运行结果：

注意：otest.insertBefore(newnode,node);也可以修改为：otest.insertBefore(newnode,otest.childNodes[0]);

代码如下：

显示的结果如下所示：

上述这个显示的内容就是函数最好的方法的诠释。

二十七、删除节点removeChild()

removeChild()方法从子节点列表中删除某个节点。如果删除成功，此方法可返回被删除的节点，如失败，则返回null.

语法：nodeObject.removeChild(node)

参数：node必须，指定需要删除的节点

我们来看看下面的代码，删除子节点:

具体的内容显示的效果如下：

我们先指定大的范围，然后进行写固定的语法语义，删除的内容写法，括号内要写上具体的删除内容是什么就可以了，具体的删除内容括号内有写到。最后显示出删除的内容。

二十八、替换元素节点replaceChild()

replaceChild实现子节点（对象）的替换，返回被替换对象的引用。

语法：node.replaceChild(newnode,oldnew)

参数：newnode:必须，用于替换，返回被替换对象的引用

oldnew:必须填写的，被newnode替换的对象。

我们来看看下面的代码：

效果：将文档中的java改为javascript

显示的浏览效果如下图：

当我们点击替换的时候，点击下面的替换，上面的java就会变成javascript

二十九、创建元素节点creatElement()

creatElement()方法创建元素节点，此方法可返回一个element对象。

表示的就是创建一个新的元素节点，然后在元素节点的后面，进行添加内容。

语法：document.creatElement(tagName)

参数：tagName:字符串值，这个字符串用来指明创建元素的类型，就是比如说是我们要新建一个元素节点，然后进行替换或者是添加一个节点元素，这个创建元素节点的方法可以与appenChild()或者inserBefore()方法联合使用，将元素显示在页面中。

注意：要与appendChild()或者inserBefore()方法联合使用，将元素显示在页面中。

我们来创建一个按钮，代码如下：

效果：在HTML文档中，创建一个按钮

显示的内容如下：

会在空白区域显示一个按钮键，上面的函数表示的是：我们先得到一个内容区域，就是作用域表示的是整个body部分，其次我们要创建一个新的元素节点，括号内是input的类型，接下来我们标注input节点的类型和名称是创建的一个按钮。最后再body作用域中的最后一个元素节点后面添加input标签。

方法二：同时我们还可以通过setAttribute来设置属性值。

使用subAttribute用来表示的结果如下：

这个只不过是用setAttribute这个方法定义指定的我们新加的节点的属性等。

显示的效果如下：

三十、创建文本节点creatTextNode()

creatTextNode()方法创建新的文本节点，返回新创建的Text节点。

语法：

参数：data:字符数值，可规定此节点的文本。

我们来创建一个<div>元素并向其添加一条信息，代码如下：

显示的结果如图所示：

切记无论我们是自己定义创建元素节点还是创建元素后面的文本内容，都要在最后进行插入的操作，如果没有这个固定语法的操作，我们不能将自己定义的内容显示在页面中。

三十、浏览器窗口可视可视区域大

获得浏览器窗口的尺寸（浏览器的视口、不包括工具栏和滚动条）的方法：

一、对于IE9+、chrome、Firefox、opera、以及safari

window.innerHeight-浏览器窗口的内部高度：

window.innerWidth-浏览器窗口的内部宽度：

二、对于Internet Explorer8、7/6/5

document.documentElement.clientHeight表示HTML文档所在窗口的当前高度：

document.documentElement.clientWidth:表示HTML文档所在窗口的当前宽度：

或者

document对象的body属性对应HTML文档中的<body>标签

document.body.clientHeight

document.body.clientWidth

在不同浏览器都使用javascript方案：

显示内容如下：

显示的浏览器宽度和高度如下去：去掉了上面的工具栏和右侧的鼠标滚动的内容：

这个是在惠普大屏幕上面显示的宽度和高度：

这个是在惠普小屏幕上显示的具体的显示器的宽度和高度。

三十一、网页尺寸scrollHeight()

scrollHeight和scrollWidth获取网页内容宽度和高度

一、针对IE和Opera

scrollHeight是网页内容实际高度，可以小于clientHeight

二、针对NS、FF：

scrollHeight是网页内容高度，不过最小值是clientHeight。也就是说网页内容实际高度小于clientHeight时，scrollHeight返回的是clientHeight

三、浏览器兼容性

后面的||线和前面的内容要写在一个横线上。

注意：区分大小写

scrollHeigt和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。

这个scrollHeight表示的是网页内容的实际高度，而clientHeight表示的是窗口可视口区域大小，这个值可以小于clientHeight

代码如下：

显示结果如下：这个表示的就是网页的宽度和高度而不是可视窗口的大小。

三十二、网页尺寸offsetHeight()

offsetHeight和offsetWidth,获取网页内容高度和宽度（包括滚动条等边线，会随窗口的显示大小而改变，这个值包括的是网页的内容区域宽度和高度还有滚动条的宽度和高度，同时会随着窗口的变化，这个值在改变）

一、值

offsetHeight=clientHeight+滚动条+边框，这个值和上面的是有差别的，上面的表示的是网页的宽度和高度，而下面的表示的是网页的宽度包括滚动条的区域内容，会随着屏幕的变化而去变化。

二、浏览器兼容性

var w=document.documentElement.offsetWidth||document.body.offsetWidth

var h=document.documentElement.offsetHeight||document.body.offsetHeight

显示效果如下所示：

这个表示的是网页的宽度和高度，包括右侧滚动条，同时随着浏览器窗口的变化，这个宽度和高度会随之而变化。

三十三、网页卷去的距离和偏移量

我们来先看看下面的图，

scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容最左端之间的距离，即左边灰色的内容。

scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离，即上边灰色的内容。

offsetLeft:获取指定对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置。

offsetTop:获取指定对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置。

注意：

1.区分大小

2.offsetParent:布局中设置position属性（Relative、Absolute、fixed）的父容器，从最近的父节点开始，一层层向上找，直到HTML的body)

值的变化：

代码如下：

显示效果如下：

正常的红色边线就是正常的网页内容区域，滚动条里面的文字的位置会随着滚动条的变化，位置发生变化，当我们和滚动滚动条的时候，相对距离上下左右的距离会发生相应的变化，其中scroll是相对于红色边框的距离，offset是相对于浏览器外面边框的距离。

编程练习：

制作一个表格显示班级的学生信息

要求：1.鼠标移到不同行上时背景色改为设置为#f2f2f2，移开鼠标时则恢复为原背景色#ffff

2.点击添加按钮，能动态在最后添加一行

3.点击删除按钮，则删除当前行

任务：第一步：首先，我们创建删除函数，并在删除按钮上添加点击事件：提示：使用removeChild()

第二步：编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点，提示：使用creatElement()、innerHTML、appendChild()

第三步：更改鼠标移动改变背景则可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

提示：1.获取表格的行，getElementsByTagName.

2.使用for进行循环，为每行添加事件及背景颜色设置。

代码如下：

显示的效果如下：

当鼠标移动到内容区域时，内容区域就会有背景的变化，当我们点击删除的时候，这一行就会被删除，当点击添加一行的时候，新的一行就会被添加上。

最后一章：编程大挑战，用JS实现选项卡切换的效果。

效果图如下：

文字素材：

房产：

275万购昌平邻铁三居总价20万买一居

200万内购五环三居 140万安家东三环

北京首现零首付楼盘53万购东5环50平

京楼盘直降5000 中信府公园楼王现房

家居：

40平出租屋大改造美少女的混搭小窝

经典清新简欧爱家 90平老房焕发新生

新中式的酷色温情 66平撞色活泼家居

瓷砖就像选好老婆卫生间烟道设计

二手房：

通州豪华3居260万二环稀缺2居250w甩

西3环通透2居290万130万2居限量抢购

黄城根小学学区仅260万121平70万抛！

独家别墅280万苏州桥2居优惠价248万

任务：大家先思考和分析实现思路，然后在动手实现

一、HTML页面布局

提示：选项卡标签使用ul...li

选项卡内容使用div

二、css样式制作

提示：整个选项卡的样式设置

选项卡标题的样式设置

选项卡内容的样式设置

一开始只显示一个选项卡内容，其他选项卡内容隐藏。

三、js实现选项卡切换

提示：获取选项卡标题和内容。

zxcsabrina

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
js进阶篇

JS进阶篇web前端开发师需要掌握什么技术？允许你已经了解HTML标记（也成为结构）知道了css样式（也称为表示）会用html和css创建一个漂亮的页面，但是这个还是不够，它只是静态的页面而已，我们需要js增加行为，为网页添加动态效果。js能做什么：1.增加页面的动态效果：（如下拉菜单，图片轮播、信息滚动等等一些常见的js网页特效）2.实现页面与用户之间的实时、动态交互、（如用户注
复制链接

扫一扫

专栏目录