js数组、循环、this指针以及应用

最新推荐文章于 2022-07-15 14:55:22 发布

攸宁-

最新推荐文章于 2022-07-15 14:55:22 发布

阅读量485

点赞数

文章标签： js

本文链接：https://blog.csdn.net/youning222/article/details/79903468

版权

JavaScript的数组

一、简要说明：

1.数组变量var arr = [];

2.数组是数据的仓库，length为数组数据的数量；

3.表示方法：["第一个数据","第二个数据","第三个数据"]；

4.arr[下标]为数组下标位置的数据（从0开始);

5.arr.push("第四个数据")向数组最后一位后添加数据;

注意：数组用标签名获取元素：document.getElementsByTagName("");

二、该方法与ById的区别：

1.ById是静态方法（它的前面必须是document）；ByTagName是动态方法（它的前面可以是另一个元素的所有后代元素中获取）；

2.ById获取的只有一个元素（而且id本身在同一个页面中也是唯一的）；ByTagName获取的可能是多个（无论是一个和多个都会变成类数组），需要加上[]和数字或者遍历来控制；

3.ById无法选中动态创建的元素（如通过innerHTML生成的标签），ByTagName可以选中动态创建的元素；

js循环

当我们需要重复执行某些代码或连续执行的代码有数字在变化时，就可以使用循环：for(;;){}。而且循环也被用做给数组或类数组遍历（既让数组或类数组的每项都执行）。

注意：多个for可以都用变量i，但是循环嵌套要换变量名。

this指针

1.它是一个object，直接用alert弹出的是window。

2.Js里当对象是window的时候一般把window省略，实际上alert是window的方法。

3.再试一下div的点击事件里弹出this则变成了div。

4.得到的结论是：this就是调用当前方法（函数）的（元素）对象，在全局下就是window。

5.但是事件调用匿名函数里直接调用时，this又回变成window，这时元素调用的函数实际是匿名函数，而匿名函数内部直接调用的函数依然是window在调用。

应用举例

1.for循环应用举例：用for循环做出一个v字型效果

<style type="text/css">
body{margin:0;}
ul{margin:0; padding:0; list-style:none; position:relative;}
li{width:50px; height:50px; background-color:red; position:absolute;}
</style>
</head>
<body>
<ul id="ul1"></ul>
<script>
var oUl = document.getElementById("ul1");
var str = "";
for(var i=0;i<11;i++){
	str += "<li></li>";
}
oUl.innerHTML = str;
var aLi = oUl.getElementsByTagName("li");
for(var i=0;i<aLi.length;i++){
	if(i<6){
		aLi[i].style.top = i*50+"px";
	}else{
		aLi[i].style.top = (aLi.length-1-i)*50+"px";
	}
	aLi[i].style.left = i*50+"px";
}
</script>

2.用数组实现切换图片效果

<body>
<input type="button" value="上一张"/>
<input type="button" value="下一张"/><br/>
<img src="img/1.png" width="391" height="479"/>
<script>
var arr = ["img/1.png","img/2.png","img/3.png","img/4.png"];
var i=0;
var aBtn = document.getElementsByTagName("input");
var oImg = document.getElementsByTagName("img")[0];
aBtn[0].onclick = function (){
	if(i==0){
		i = 3;
	}else{
		i--;
	}
	oImg.src = arr[i];
}
aBtn[1].onclick = function (){
	if(i==3){
		i = 0;
	}else{
		i++;
	}
	oImg.src = arr[i];
}
</script>
</body>

3.this指针应用举例：

<style type="text/css">
li{font-size:18px; background-color:red; color:#fff;}
</style>
</head>
<body>
<ul>
	<li>li1</li>
    <li>li2</li>
    <li>li3</li>
    <li>li4</li>
    <li>li5</li>
</ul>
<script>
var aLi = document.getElementsByTagName("li");
for(var i=0;i<aLi.length;i++){
	aLi[i].onclick = function (){
		this.style.backgroundColor = "blue";
	};
}

注意错误写法：

for(var i=0;i<aLi.length;i++){
	aLi[i].onclick = function (){  //错误写法
		changeStyle();
	};

攸宁-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js数组、循环、this指针以及应用

JavaScript的数组一、简要说明： 1.数组变量var arr = []; 2.数组是数据的仓库，length为数组数据的数量； 3.表示方法：["第一个数据","第二个数据","第三个数据"]； 4.arr[下标]为数组下标位置的数据（从0开始); 5.arr.push("第四个数据")向数组最后一位后添加数据;注意：数...
复制链接

扫一扫