js介绍和js引入页面
学习前端脚本语言javascript的基本概念、页面引入方式、获取页面元素及操作元素属性的技巧，学习函数的基本定义方法和使用方法。
JavaScript介绍
JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。 JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript( Adobe公司，需要插件)等。
前端三大块
1、HTML：页面结构
2、CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
3、JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能
JavaScript嵌入页面的方式
1、行间事件（主要用于事件）
<input type="button" name="" onclick="alert('ok！');">
2、页面script标签嵌入
<script type="text/javascript"> var a = '你好！'; alert(a); </script>
3、外部引入
<script type="text/javascript" src="js/index.js"></script>
引入js示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 第三种嵌入js的方式：外链js --> <script type="text/javascript" src="js/hello.js"></script> <!-- 第二种嵌入js的方式：内嵌js --> <script type="text/javascript"> alert("hello world too!"); </script> </head> <body> <!-- 第一种嵌入js的方式：行间事件 --> <input type="button" name="" value="点击" onclick="alert('hello world!')"> </body> </html>
javascript语句与注释
1、一条javascript语句应该以“;”结尾
<script type="text/javascript"> var a = 123; var b = 'str'; function fn(){ alert(a); }; fn(); </script>
2、javascript注释
<script type="text/javascript"> // 单行注释 var a = 123; /* 多行注释 1、... 2、... */ var b = 'str'; </script>
JavaScript变量和操作元素
变量
JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。 定义变量需要用关键字 'var'：
var a = 123;
var b = 'asd';
//同时定义多个变量可以用","隔开，公用一个‘var’关键字
var c = 45,d='qwe',f='68';
变量类型
5种基本数据类型：
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined undefined类型，变量声明未初始化，它的值就是undefined
5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null
1种复合类型：
object
变量、函数、属性、函数参数命名规范
- 区分大小写
- 第一个字符必须是字母、下划线（_）或者美元符号（$）
- 其他字符可以是字母、下划线、美元符或数字
js定义变量使用var定义，可以一行定义一个，也可以一个var定义多个变量；
匈牙利命名风格：
对象o Object 比如：oDiv
数组a Array 比如：aItems
字符串s String 比如：sUserName
整数i Integer 比如：iItemCount
布尔值b Boolean 比如：bIsComplete
浮点数f Float 比如：fPrice
函数fn Function 比如：fnHandler
正则表达式re RegExp 比如：reEmailCheck
js变量声明和类型实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> // 单行注释 /* 多行注释 下面将两个变量申明合成一句 */ //var iNum = 12; //var sTr = 'abc'; var iNum = 12, sTr = 'abc'; var iNum02; //alert(iNum); //alert(sTr); alert(iNum02); </script> </head> <body> </body> </html>
获取元素方法一
可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量，比如：
<script type="text/javascript"> var oDiv = document.getElementById('div1'); </script> .... <div id="div1">这是一个div元素</div>
上面的语句，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载，解决方法有两种：
第一种方法：将javascript放到页面最下边
.... <div id="div1">这是一个div元素</div> .... <script type="text/javascript"> var oDiv = document.getElementById('div1'); </script> </body>
第二种方法：将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。
<script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('div1'); } </script> .... <div id="div1">这是一个div元素</div>
如果我们要通过js给元素添加样式，比如设置font-size=30px；注意要将-的书写方式改为驼峰式的书写方式，比如fontSize，否则会报错；
js获取元素改变样式实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function () { /* document.getElementById('div1').style.color = 'red'; document.getElementById('div1').style.fontSize = '30px' 用变量简化代码： */ var oDiv = document.getElementById('div1'); oDiv.style.color = 'red'; oDiv.style.fontSize = '30px'; } </script> </head> <body> <div id="div1">这是一个div元素</div> </body> <!--<script type="text/javascript">--> <!--var oDiv = document.getElementById('div1');--> <!--oDiv.style.color = 'red';--> <!--oDiv.style.fontSize = '30px';--> <!--</script>--> </html>
操作元素属性
获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。
操作属性的方法 ：
- “.” 操作
- “[ ]”操作
属性写法
- html的属性和js里面属性写法一样
- “class” 属性写成 “className”
- “style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”
通过“.”操作属性：
操作元素属性实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('div1'); var oA = document.getElementById('link'); var oDiv2 = document.getElementById('div2'); // 读取属性 var sId = oDiv.id; alert(sId); // 写属性 oDiv.style.color = "red"; oA.href = "http://www.baidu.com"; oA.title = "这是去到百度网的链接"; // 操作class属性需要写成 className oDiv2.className = "box2"; } </script> <style type="text/css"> .box{ font-size:20px; color:gold; } .box2{ font-size:30px; color:pink; } </style> </head> <body> <div id="div1">这是一个div元素</div> <a href="#" id="link">这个一个链接</a> <div class="box" id="div2">这是第二个div</div> </body> </html>
通过“[ ]”操作属性：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('div1'); var sMystyle = 'fontSize'; var sValue = '30px'; // oDiv.style.fontSize = sValue; //这句话有效 /* 这一句没有作用：变量sMystyle被认为是一个属性 oDiv.style.sMystyle = sValue; */ /* 属性用变量来代替的话需要用[]来操作*/ oDiv.style[sMystyle] = sValue; } </script> </head> <body> <div id="div1">这是一个div元素</div> </body> </html>
改变元素内容
innerHTML
innerHTML可以读取或者写入标签包裹的内容
常用于从数据库读取内容，然后塞入标签内；
innerHTML只能修改标签内包裹的元素，不能修改已有的标签，但你可以向标签内再塞入标签。
innerHTML 示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('div1'); // 读取元素里面的内容 var sTr = oDiv.innerHTML; alert(sTr); // 写元素里面的内容 //oDiv.innerHTML = "修改的文字"; oDiv.innerHTML = "<a href='http://www.baidu.com'>百度一下</a>" } </script> </head> <body> <div id="div1">这是一个div元素</div> </body> </html>
JavaScript函数
函数的定义和调用
函数
函数就是可以重复执行的代码片。
函数定义与执行
<script type="text/javascript"> // 函数定义 function aa(){ alert('hello!'); } // 函数执行 aa(); </script>
函数的定义和调用示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //函数的定义 function fnMyalert() { alert('hello world!'); } //函数调用执行 // fnMyalert(); function fnChange(){ var oDiv = document.getElementById('div1'); oDiv.style.color = "red"; oDiv.style.fontSize = "30px"; } </script> </head> <body> <!-- 标签内调用 --> <div id="div1" onclick="fnMyalert()">这是一个div元素</div> <input type="button" name="" value="改变div" onclick="fnChange()"> </body> </html>
变量与函数预解析
JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。
<script type="text/javascript"> aa(); // 弹出 hello！ alert(bb); // 弹出 undefined function aa(){ alert('hello!'); } var bb = 123; </script>
变量和函数预解析示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> // 预解析会让变量的声明提前 alert(iNum); //弹出undefined // 使用一个未声明的变量，出错！ //alert(iNum02); var iNum = 12; // 预解析会让函数的声明和定义提前 myalert(); function myalert(){ alert('hello world!'); } </script> </head> <body> </body> </html>
提取行间事件
在html行间调用的事件可以提取到javascript中调用，从而做到结构与行为分离。
为什么要提取行间事件？
原来我们是将函数事件直接放在html代码里面，这样的话，在维护时容易误删导致函数不能正确执行；还有就是应该将js相关的放在一起，实现代码分离，方便观看和维护；
<!--行间事件调用函数 --> <script type="text/javascript"> function myalert(){ alert('ok!'); } </script> ...... <input type="button" name="" value="弹出" onclick="myalert()"> <!-- 提取行间事件 --> <script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementById('btn1'); oBtn.onclick = myalert; function myalert(){ alert('ok!'); } } </script> ...... <input type="button" name="" value="弹出" id="btn1">
提取行间事件示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementById('btn01'); // 将事件属性和一个函数关联，函数不能写小括号，写了会马上执行 oBtn.onclick = fnChange; function fnChange(){ var oDiv = document.getElementById('div1'); oDiv.style.color = "red"; oDiv.style.fontSize = "30px"; } } </script> </head> <body> <div id="div1">这是一个div元素</div> <input type="button" name="" value="改变div" id="btn01"> </body> </html>
注意：
在行间调用函数时函数后面要写小括号；
提取行间事件时 oBtn.onclick = fnChange(); 是错误的，不能加括号，否则会不用点击，直接执行，正确的应该是oBtn.onclick = fnChange;
匿名函数
定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。
匿名函数适合是给某个元素做一件事情的情况，如果要为多个元素做事，就需要将函数命名，不能使用匿名函数了。
<script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementById('btn1'); /* oBtn.onclick = myalert; function myalert(){ alert('ok!'); } */ // 直接将匿名函数赋值给绑定的事件 oBtn.onclick = function (){ alert('ok!'); } } </script>
实际上实现提取行间事件并不是函数的最终写法，我们用的比较多的是 匿名函数的写法，如下。
js匿名函数示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementById('btn01'); /* 提取行间事件写法 oBtn.onclick = fnChange; function fnChange(){ var oDiv = document.getElementById('div1'); oDiv.style.color = "red"; oDiv.style.fontSize = "30px"; } */ // 最终写法-转化成匿名函数的写法： oBtn.onclick = function(){ var oDiv = document.getElementById('div1'); oDiv.style.color = "red"; oDiv.style.fontSize = "30px"; }; } </script> </head> <body> <div id="div1">这是一个div元素</div> <input type="button" name="" value="改变div" id="btn01"> </body> </html>
匿名函数综合示例-网页换肤
skin01.css body{ background-color:green; } input{ 200px; height:50px; background-color:gold; border:0; } skin02.css body{ background-color:#ddd; } input{ 200px; height:50px; border-radius:25px; background-color:pink; border:0; } 网页换肤.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/skin01.css" id="link01"> <script type="text/javascript"> window.onload = function(){ var oBtn01 = document.getElementById('btn01'); var oBtn02 = document.getElementById('btn02'); var oLink = document.getElementById('link01'); oBtn01.onclick = function(){ oLink.href = "css/skin01.css"; }; oBtn02.onclick = function(){ oLink.href = "css/skin02.css"; } } </script> </head> <body> <input type="button" name="" value="皮肤一" id="btn01"> <input type="button" name="" value="皮肤二" id="btn02"> </body> </html>
函数传参
<script type="text/javascript"> function myalert(a){ alert(a); } myalert(12345); </script>
函数传参示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function(){ function fnMyalert(a){ alert(a); } //fnMyalert('hello world!'); function fnChangestyle(mystyle,val){ var oDiv = document.getElementById('div1'); oDiv.style[mystyle] = val; } fnChangestyle('fontSize','30px'); fnChangestyle('color','red'); fnChangestyle('backgroundColor','pink'); } </script> </head> <body> <div id="div1">这是一个div元素</div> </body> </html>
函数'return'关键字
函数中'return'关键字的作用：
- 返回函数执行的结果
- 结束函数的运行
- 阻止默认行为
return关键字使用示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> function fnAdd(a,b) { var c = a + b; // 返回c的值，然后结束函数的运行 return c; alert("函数内部的c="+c); } var iResult = fnAdd(2,5); alert(iResult); </script> </head> <body> </body> </html>
分支语句
条件语句
通过条件来控制程序的走向，就需要用到条件语句。
运算符
- 算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
- 赋值运算符：=、 +=、 -=、 *=、 /=、 %=
- 条件运算符：==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
if else
if else 的简单使用示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> var iNum01 = 12; var iNum02 = 24; if(iNum01>iNum02){ alert('iNum01大于iNum02'); } else{ alert('iNum01不大于iNum02'); } </script> </head> <body> </body> </html>
if else 点击按钮隐藏显示示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementById('btn01'); var oDiv = document.getElementById('box01'); // oDiv.style.display 是读取的标签里写的display属性值，如果没有写，这个值为空 oBtn.onclick = function(){ if(oDiv.style.display=='block'||oDiv.style.display=='') { oDiv.style.display = 'none'; } else { oDiv.style.display = 'block'; } } } </script> <style type="text/css"> .box{ width:200px; height:400px; background-color:gold; } </style> </head> <body> <input type="button" name="" value="切换" id="btn01"> <div class="box" id="box01"></div> </body> </html>
else if 多重条件判读语句
多重条件判读语句示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function () { var iWeek = 5; var oBody = document.getElementById('body01'); if (iWeek == 1) { oBody.style.backgroundColor = 'gold'; } else if (iWeek == 2) { oBody.style.backgroundColor = 'green'; } else if (iWeek == 3) { oBody.style.backgroundColor = 'pink'; } else if (iWeek == 4) { oBody.style.backgroundColor = 'yellowgreen'; } else if (iWeek == 5) { oBody.style.backgroundColor = 'lightblue'; } else { oBody.style.backgroundColor = 'lightgreen'; } } </script> </head> <body id="body01"> </body> </html>
switch
switch语句的性能比else if语句的性能高；
switch语句网页换肤示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function(){ var iWeek = 3; var oBody = document.getElementById('body01'); /*if(iWeek==1){ oBody.style.backgroundColor = 'gold'; } else if(iWeek==2) { oBody.style.backgroundColor = 'green'; } else if(iWeek==3){ oBody.style.backgroundColor = 'pink'; } else if(iWeek==4){ oBody.style.backgroundColor = 'yellowgreen'; } else if(iWeek==5){ oBody.style.backgroundColor = 'lightblue'; } else{ oBody.style.backgroundColor = 'lightgreen'; }*/ switch (iWeek){ case 1: oBody.style.backgroundColor = 'gold'; break; case 2: oBody.style.backgroundColor = 'green'; break; case 3: oBody.style.backgroundColor = 'pink'; break; case 4: oBody.style.backgroundColor = 'yellowgreen'; break; case 5: oBody.style.backgroundColor = 'lightblue'; break; default: oBody.style.backgroundColor = 'lightgreen'; } } </script> </head> <body id="body01"> </body> </html>
运算符
加法运算练习
用.value()获取input输入的两个数字，提交后弹出加法结果
注意，从input框中输入的都是字符串，在js中需要使用 parseInt 转换成int类型；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload =function(){ var oInput01 = document.getElementById('input01'); var oInput02 = document.getElementById('input02'); var oBtn = document.getElementById('btn'); oBtn.onclick = function(){ var iVal01 = parseInt(oInput01.value); var iVal02 = parseInt(oInput02.value); alert(iVal01+iVal02); } } </script> </head> <body> <input type="text" name="" id="input01"> ＋ <input type="text" name="" id="input02"> <input type="button" name="" value="相加" id="btn"> </body> </html>
求余运算符
求余示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> var iNum01 = 11; var iNum02 = 2; //alert(iNum01%iNum02); // 弹出1 var iNum03 = 0; var iNum04 = 10; alert(iNum03%iNum04); // 弹出0 </script> </head> <body> </body> </html>
赋值运算符
赋值运算符示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> var iNum01 = 12; // iNum01 = iNum01 + 2; 可以简写成下面的写法： iNum01 += 2; alert(iNum01); // 弹出14 // iNum01 = iNum01 - 5; 可以简写成下面的写法： iNum01 -= 5; alert(iNum01); //iNum01 = iNum01*2; 可以简写成下面的写法： iNum01 *= 2; alert(iNum01); //iNum01 = iNum01/2; iNum01 /= 2; alert(iNum01); //iNum01 = iNum01%2; iNum01 %= 2; alert(iNum01); iNum01++; // 等同于 iNum01 += 1 ; alert(iNum01); </script> </head> <body> </body> </html>
条件运算符
在js中，==判断是否相等存在一个bug，就是数字的2和字符串的2使用==判断其实是True，所以我们需要用到===；
条件运算符示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> var iNum01 = 2; var sNum01 = '2'; /* 用“==” 弹出相等 if(iNum01==sNum01){ alert('相等'); } else{ alert('不相等'); } */ if (iNum01 === sNum01) { alert('相等'); } else { alert('不相等'); } if (3 != 4) { alert(true); } else { alert(false); } // 将逻辑运算的结果取反，比如运算是true，取反后就是false if (!4 > 3) { alert('大于') } else { alert('不大于') } // 多个条件运算，都是true，最终结果才是true if (4 > 3 && 5 > 6) { alert('都是大于') } else { alert('不是都大于') } // 多个条件运算中只要有一个是true，最终结果就是true if (4 > 3 || 5 > 6) { alert('只有部分大于') } else { alert('都不大于') } </script> </head> <body> </body> </html>
数组和循环语句
数组及操作方法
数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的。
定义数组的方法
//对象的实例创建
var aList = new Array(1,2,3);
//直接量创建
var aList2 = [1,2,3,'asd'];
操作数组中数据的方法
1、获取数组的长度：aList.length;
var aList = [1,2,3,4];
alert(aList.length); // 弹出4
2、用下标操作数组的某个数据：aList[0];
var aList = [1,2,3,4];
alert(aList[0]); // 弹出1
3、join() 将数组成员通过一个分隔符合并成字符串
var aList = [1,2,3,4];
alert(aList.join('-')); // 弹出 1-2-3-4
4、push() 和 pop() 从数组最后增加成员或删除成员
var aList = [1,2,3,4];
aList.push(5);
alert(aList); //弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出1,2,3,4
5、unshift()和 shift() 从数组前面增加成员或删除成员
var aList = [1,2,3,4];
aList.unshift(5);
alert(aList); //弹出5,1,2,3,4
aList.shift();
alert(aList); // 弹出1,2,3,4
6、reverse() 将数组反转
var aList = [1,2,3,4];
aList.reverse();
alert(aList); // 弹出4,3,2,1
7、indexOf() 返回数组中元素第一次出现的索引值
var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));
8、splice() 在数组中增加或删除成员
var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //从第2个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素
alert(aList); //弹出 1,2,7,8,9,4
数组及操作方法示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> // 通过类实例化来创建数组 var aList01 = new Array(1, 2, 3); // 通过直接量的方式创建数组 var aList02 = ['a', 2, 3]; // 通过length来获取数组成员的个数 //alert(aList02.length); // 通过下标操作数组的某个成员 //alert(aList02[0]); // 通过push方法在数组的后面增加成员 aList02.push('b'); //alert(aList02); // 弹出a,2,3,b aList02.pop(); //alert(aList02); // 弹出a,2,3 aList02.unshift('b'); //alert(aList02); // 弹出b,a,2,3 aList02.shift(); //alert(aList02); // 弹出a,2,3 aList02.reverse(); //alert(aList02); // 弹出3,2,a var aList03 = ['a', 'b', 'c', 'd', 'a', 'b']; //alert(aList03.indexOf('b')); //弹出1 // 第一个参数是开始的位置，第二个参是从起始位置删除多少个成员，第三个（包括第三个）之后是要增加的成员的值 aList03.splice(1, 0, 'e'); //alert(aList03); // 弹出 a,e,b,c,d,a,b aList03.splice(1, 2, 'f', 'g'); //alert(aList03); // 弹出 a,f,g,c,d,a,b var sTr = aList03.join("-"); // 数组执行方法后返回一个字符串 alert(sTr); var sTr2 = aList03.join(""); alert(sTr2); </script> </head> <body> </body> </html>
多维数组
多维数组指的是数组的成员也是数组的数组。
var aList = [[1,2,3],['a','b','c']];
alert(aList[0][1]); //弹出2;
多维数组示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> var aList = [[1,2,3,4],['a','b','c'],[6,7,8]]; //alert(aList.length); alert(aList[0].length); alert(aList[1][0]); </script> </head> <body> </body> </html>
循环语句
程序中进行有规律的重复性操作，需要用到循环语句。
for循环
for(var i=0;i<len;i++) { ...... }
for循环简单示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> /* for(var i=0;i<5;i++) { alert('ok!'); }*/ var aList = ['a', 'b', 'c', 'd']; var iLen = aList.length; for (var i = 0; i < iLen; i++) { alert(aList[i]); } </script> </head> <body> </body> </html>
for循环将数据放入页面列表中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function () { var oUl = document.getElementById('list'); var aList = ['美人鱼', '疯狂动物城', '魔兽', '美国队长3', '湄公河行动']; var iLen = aList.length; var sTr = ''; for (var i = 0; i < iLen; i++) { sTr += '<li>' + aList[i] + '</li>'; } oUl.innerHTML = sTr; } </script> <style type="text/css"> .list { list-style: none; margin: 50px auto 0; padding: 0; width: 300px; height: 305px; } .list li { height: 60px; border-bottom: 1px dotted #000; line-height: 60px; font-size: 16px; } </style> </head> <body> <ul class="list" id="list"> <!-- <li>美人鱼</li> <li>美人鱼</li> <li>美人鱼</li> <li>美人鱼</li> <li>美人鱼</li> --> </ul> </body> </html>
while循环
var i=0; while(i<8){ ...... i++; }
数组去重
数组去重示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> var aList = [2, 3, 4, 3, 5, 6, 7, 8, 3, 4, 5, 2, 7, 8, 9, 3, 4, 5, 6, 3, 4, 8, 9]; var iLen = aList.length; var aList2 = []; for (var i = 0; i < iLen; i++) { if (aList.indexOf(aList[i]) == i) { aList2.push(aList[i]); } } alert(aList2); </script> </head> <body> </body> </html>