当前位置：移动技术网 > IT编程>开发语言>JavaScript > javascript之数组、ById、ByTagName、循环、cssText和this

javascript之数组、ById、ByTagName、循环、cssText和this

2017年12月21日 | 移动技术网IT编程 | 我要评论

一.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之后：

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

详解JavaScript作用域闭包

javascript闭包，是js开发工程师必须深入了解的知识。3月份自己曾撰写博客《javascript闭包》，博客中只是简单阐述了闭包的工作过程和列举了几个示... [阅读全文]
深入了解JavaScript词法作用域

javascript并不是传统的块级作用域，而是函数作用域！一、作用域 javascript引擎在代码执行前会对其进行编译，在这个过程中，像var a = 2... [阅读全文]
详解JavaScript自定义函数

一、定义方法：在javascript中必须用function关键字function funcname(arg1,arg2...){statements;retu... [阅读全文]
fiddler修改host，协议，请求转发

fiddler根据请求路径，修改host，协议，和请求转发if (oSession.host=="517repa... [阅读全文]
如何自定义修改微信链接、QQ链接的标题描述图片

前端时间很多人私信我，问我怎么修改。这里就直接把方法给出来，有什么不懂的可以来问一下我V：jh831x 。或者直... [阅读全文]
ID：32----做一套QQ空间自动加好友的功能

2019年1月7日09:16:03 想法添加背景： 1.QQ空间中添加好友的接口是不会封号的，只会提示你操作过于... [阅读全文]
Redis的数据类型

Redis的五种数据类型：string、hash、list、set、zset。Stringstring类型是二进... [阅读全文]
2016年信息安全工程师综合知识第11-15题解析【建群网培信息安全工程师】

【2016年信息安全工程师综合知识第11题】11.以下关于认证技术的叙述中，错误的是（）。A．指纹识别技术的... [阅读全文]
安全整改思考之道

最近项目组安全整改，然后需要把所有的安全隐患问题一扫而空，其中也踩了不少的坑，记录下来，以便后续遇到类似问题能立... [阅读全文]
Hbuildx--启动微信小程序项目

1、需要在Hbuild官网，下载Hbuildx开发工具2、打开Buildx，导入微信小程序项目，添加小程序开发工... [阅读全文]

网友评论


验证码：

javascript之数组、ById、ByTagName、循环、cssText和this

2017年12月21日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论