javascript之数组、ById、ByTagName、循环、cssText和this
一.JS的数组：
1.表示：
一维数组var 数组名=[元素1，元素2，元素3...]
二维数组var 数组名=[[1,2,3],[4,5,6],[7,8,9,10]...]
a.数组是数据的仓库，数组名.length是数组元素个数的总和；数组名[i].length是二维数组中第i行元素个数总和。
b.JS中数组下标从0 开始；
c.数组名.push(x)表示向数组后面追加一位元素，值为x
举例：用数组控制图片的切换：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="common.css" type="text/css" rel="stylesheet" />
<style>
#p1,#p2{background-color:#ccc; line-height:30px; font-size:20px; color:#fff; margin:0; width:100%; text-align:center; opacity:0.6;}
.box{position:relative; width:400px;}
#p1{position:absolute; top:0; left:0;}
#p2{position:absolute; bottom:0; left:0;}
</style>
</head>
<body>
<input type="button" value="上一张" id="btn1" />
<input type="button" value="下一张" id="btn2" />
<p class="box">
<img src="" id="img1" width="400" height="500"/>
<p id="p1"></p>
<p id="p2"></p>
</p>
<script>
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
var oImg = document.getElementById("img1");
var oP1 = document.getElementById("p1");
var oP2 = document.getElementById("p2");
var arr = ['img/1.png','img/2.png','img/3.png','img/4.png'];
var arr2 = ['老鹰','魔女','精灵','钢铁侠'];
var thisPic = 0;
oImg.src = arr[0];
oP2.innerHTML = arr2[thisPic];
oP1.innerHTML = (thisPic+1)+'/'+arr.length;
oBtn1.onclick = function(){
if(thisPic==0){
thisPic=arr.length-1;
}else{
thisPic--;
}
oImg.src = arr[thisPic];
oP2.innerHTML = arr2[thisPic];
oP1.innerHTML = (thisPic+1)+'/'+arr.length;
}
oBtn2.onclick = function(){
if(thisPic==arr.length-1){
thisPic=0;
}else{
thisPic++;
}
oImg.src = arr[thisPic];
oP2.innerHTML = arr2[thisPic];
oP1.innerHTML = (thisPic+1)+'/'+arr.length;
}
</script>
</body>
</html>
2.【】符号的一种用法示例：
a.“.”后面的值不能改变，如.style.width中的width不能用变量替换；而“[]”后面的值可以改变，如.style.width可以写成.style["width"]，或者[]内的值用一个变量代替，从而通过修改变量改变要修改的样式
b.例子：做两个input框 和一个按钮，通过分别输入样式名称和样式值的方法来改变一个p的样式。
代码如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link type="text/css" href="css/common.css" rel="stylesheet" />
<style type="text/css">
button{cursor:pointer;}
.page1{width:735px; height:420px; padding-left:25px; padding-top:25px; position:absolute; top:0; bottom:0; right:0; left:0; margin:auto;background:#efefef;}
.page1 p{width:272px;font-size:23px; font-weight:bold; color:#000;}
#btn1{width:100px; height:40px; border:none; background:red; font-size:12px; color:#fff; text-align:center; line-height:40px; position:absolute; left:290px; top:10px;}
#p1{width:100px; height:100px; background:#fff; border:4px #393129 solid; margin-top:31px;}
#page2{width:735px; height:420px;background:#808080; position:absolute;top:0; left:0;opacity:0.7; filter:alpha(opacity=70); z-index:2; display:none;}
#select{width:340px; height:240px; border:20px #9c949c solid; position:absolute; bottom:30px; right:30px; background:#fff; z-index:3; padding-top:40px;padding-left:10px; display:none;}
#select button{width:50px; height:30px;background:#002952;margin-left:5px; border:none; text-align:center; line-height:32px;color:#fff;position:absolute;}
#select input{width:250px; height:30px; border:1px #000 solid; margin-bottom:8px;}
#btn2{bottom:20px; right:180px; }
#btn3{bottom:20px; right:125px; }
#btn4{bottom:20px; right:70px; }
</style>
</head>
<body>
<p class="page1">
<p>请为下面的DIV设置样式：</p>
<button id="btn1">点击设置</button>
<p id="p1"></p>
<p id="page2"></p>
<p id="select">
<input type="text" id="input1" placeholder="请输入要修改的样式名称" />
<input type="text" id="input2" placeholder="请输入要修改的样式值"/>
<button id="btn2">改变</button>
<button id="btn3">恢复</button>
<button id="btn4">确定</button>
</p>
</p>
<script>
var oPage2=document.getElementById("page2");
var oSelect=document.getElementById("select");
var oDiv1=document.getElementById("p1");
var oText1=document.getElementById("input1");
var oText2=document.getElementById("input2");
var oBtn1=document.getElementById("btn1");
var oBtn2=document.getElementById("btn2");
var oBtn3=document.getElementById("btn3");
var oBtn4=document.getElementById("btn4");
function show(){
oPage2.style.display="block";
oSelect.style.display="block";
}
function hide(){
oPage2.style.display="none";
oSelect.style.display="none";
}
function goback(){
oDiv1.style.background="#fff";
oDiv1.style.width="100px";
oDiv1.style.height="100px";
}
oBtn1.onclick=show;
oBtn2.onclick=function(){
var cssName=oText1.value;
var cssValue=oText2.value;
oDiv1.style[cssName]=cssValue;
}//此处使用了【】
oBtn3.onclick=goback;
oBtn4.onclick=hide;
</script>
</body>
</html>
结果图如下：
未输入值之前：
输入值之后：
二.JS的选择元素方法：
1.有两种：
document.getElementById("")
document.getElementsByTagName("")
2.两者的区别：
a.ById是静态方法（只能是document的）；
ByTagName是动态方法（可以是另一个元素的）
b.ById只有一个元素；
ByTagName可能是多个元素（类数组）。此时需要注意，要给类数组的元素加上【】和下标进行操作，不能整体控制操作。
c.ById无法选中动态生成的元素；
ByTagName可以。
3.针对上面的区别举例如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#ul1{ margin:0; padding:0;}
li{list-style:none; margin:0; padding:0; margin-bottom:5px; background-color:#999; height:20px;}
</style>
</head>
<body>
<ul id="ul1">
</ul>
<script>
var oUl = document.getElementById("ul1");
var aLi = oUl.getElementsByTagName("li");
for(var i =0;i<50; i++){
oUl.innerHTML+="<li>"+"</li>";
}
var liNum = aLi.length;
for(var i = 0;i<liNum; i++){
aLi[i].onclick = function(){
aLi[i].style.backgroundColor="red";//此处代码其实有错。关于此处的错误和解决在本篇文章的后面“this”处会提到
}
}
</script>
</body>
</html>
该段代码表示，用循环生成50个li标签，且控制ul中的li标签，使得鼠标每点上去的时候背景色变为红色。有如下几个注意点：
1.关于区别的第一点：var oUl = document.getElementById("ul1")中的ById为静态方法，只能这样获取ul；而ul中的li标签有三个，可以构成类数组，故可以用ByTagName这种动态方法来选择。表示选择ul下的所有li：var aLi = oUl.getElementsByTagName("li")
2.关于区别的第二点：ById方法获取到了全文中唯一的一个ul；而ByTagName方法获取到了ul下所有的li标签；并且此后对该方法获取的元素变量aLi操作时都是用【】和下标配合约束
3.关于区别第三点：若将<script></script>内的代码修改如下就会出错，因为li标签是在JS代码中动态地产生的，而aLi的选择方法为ById，它定义在产生li标签之前，所以无法选中动态生成的元素；而原代码中ByTagName方法就可以，定义变量的顺序与产生li标签的顺序无关。
<script>
var oUl = document.getElementById("ul1");
var aLi = document.getElementById("li的id名")；
for(var i =0;i<50; i++){
oUl.innerHTML+="<li>"+"</li>";
}
...
</script>
三.Java/" target="_blank">JavaScript的循环
1.在重复执行某些代码时；或每次执行时，有数字在变化时，使用循环for(;;){}
2.但是循环太多时要考虑性能，比如var一个字符串先循环添加字符串且把长度预先保存起来：
<script>
var oUl = document.getElementById("ul1");
var aLi = oUl.getElementsByTagName("li");
var str = "";
for(var i =0;i<11;i++){
str += "<li></li>"
}
oUl.innerHTML = str;
若直接在循环内写oUl.innerHTML+="<li></li>",则每循环一次都要先加载原来的内容再添加新内容，效率低下。
3.JavaScript用循环给元素加定位
用for循环和定位做50个平铺的li
练习1：每10个li就换一行
练习2：每个li向下移动一格（楼梯状）
练习3：用11个li做一个V字形
代码如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link type="text/css" href="common.css" rel="stylesheet" />
<style type="text/css">
body{padding:0; margin:0;}
#ul1{padding:0; margin:0; position:relative;}
ul li{ padding:0; margin:0; list-style:none;width:50px; height:50px; background:red; position:absolute;}
</style>
</head>
<body>
<ul id="ul1">
</ul>
<script>
var oUl=document.getElementById("ul1");
var aLi=oUl.getElementsByTagName("li");
var str="";
var i;
var j=0;
for(i=0;i<50;i++)
{
str+="<li></li>"
}
oUl.innerHTML=str;
for(i=0;i<50;i++)/*平铺*/
{
aLi[i].style.left=i*51+"px";
}
for(i=0;i<50;i++)/*阶梯*/
{
aLi[i].style.left=i*51+"px";
aLi[i].style.top=parseInt(i/1)*51+"px";
}
for(i=0;i<50;i++)/*5行10列*/
{
aLi[i].style.left=(i%10)*51+"px";
aLi[i].style.top=parseInt(i/10)*51+"px";
}
for(i =0; i<11;i++){/*v型排列*/
if(i<6){
aLi[i].style.top = i*51+"px";
}else{
aLi[i].style.top = (10-i)*51+"px";
}
aLi[i].style.left = i*51+"px";
}
</script>
</body>
</html>
四.JavaScript的cssText
1.oDiv.style.width = '200px';
是在style属性里添加(即在行间样式里添加)
2.oDiv.style.cssText= 'width:200px';
是在style属性里修改(即在行间样式里替换原有内容)
五.JavaScript的this
1.得到一个object，直接弹出的是window；
2.js是window的时候一般把window省略，实际上是window的方法；
3.得到的结论是this就是调用当前方法（函数）的对象，例如上面讲JS选择元素方法时用到的例子中出现的那个问题就应该用this来解决：
<script>
var oUl = document.getElementById("ul1");
var aLi = oUl.getElementsByTagName("li");
for(var i =0;i<50; i++){
oUl.innerHTML+="<li>"+"</li>";
}
var liNum = aLi.length;
for(var i = 0;i<liNum; i++){
aLi[i].onclick = function(){
tihs.style.backgroundColor="red";//此时i的之已经到最大，所以无法通过它来操作aLi类数组中每一个元素，应此利用“this就是调用当前方法（函数）的对象”这一点成功地解决这个问题
}
}
</script>
4.但是事件调用函数时用匿名函数的方法去调用时，this又回变成window（意思是点击时，让window去执行）
最后，利用今天的循环，通过循环实现定位，通过循环更换背景图的位置等方法来完成最后的一个大练习：页面*有100个小方块，要求鼠标移入时显示出它们的背景图：
代码如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#all_page{width:510px; height:510px; background:#999; position:relative;}
#all_page p{width:50px; height:50px; opacity:0; position:absolute; background:url(img/pic.jpg) no-repeat;}
</style>
</head>
<body>
<p id="all_page"></p>
<script>
var oDiv=document.getElementById("all_page");
var aDiv=oDiv.getElementsByTagName("p");
var str="";
for(var i=0;i<100;i++)
{
str+="<p></p>";
}
oDiv.innerHTML=str;
for(var i=0;i<100;i++){
aDiv[i].style.left=(i%10)*51+"px";
aDiv[i].style.top=parseInt(i/10)*51+"px";
var oLeft=-parseInt(i/10)*51+"px";
var oTop=-(i%10)*51+"px";
aDiv[i].style.backgroundPosition=oTop+"空格 "+oLeft;
aDiv[i].onmouseo/" target="_blank">seover=function(){
this.style.opacity=1;
}
}
</script>
</body>
</html>
思路分析：定义一个大的p，让其背景为灰色。在这个p上定义100个小p，并且利用循环把它们定位成10*10的布局，给每个小块设置同一张背景图，将小p的透明度设为0，则就有一开始打开页面时只有灰色背景的情况。然后，通过算法将每个p的背景图用background-position属性设置地显示大背景图的不同区域，最终点开这100个小块的时候，完全显示这张背景图。
代码中aDiv[i].style.backgroundPosition=...部分为p加样式的方式也可以用.cssText的方法写为
aDiv[i].style.cssText="top:"+parseInt(i/10)*51+"px;left:"+(i%10)*51+"px;background-position:"+(-(i%10)*51)+"px"+"空格"+（-parseInt(i/10)*51）+"px"
结果图如下：
刚打开页面时：
任意移动鼠标：
最终鼠标滑过100个小p之后：
上一篇： ASP程序中常用的脚本语言
下一篇： 链栈的基本操作(C语言)