学习日记53--JavaScript1

最新推荐文章于 2025-10-14 14:31:22 发布

原创最新推荐文章于 2025-10-14 14:31:22 发布 · 177 阅读

0 ·

CC 4.0 BY-SA版权

日记专栏收录该内容

55 篇文章

订阅专栏

本文介绍了一个简单的网页一键换肤功能实现，并讲解了JavaScript数组的基本操作方法，以及字符串处理等基础知识。

demo：一键换肤
index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Change Skin</title>
	<link rel="stylesheet" type="text/css" href="1.css" id="link1">
	<script type="text/javascript">
		window.onload = function(){
			var oBtn01 = document.getElementById('btn01');
			var oBtn02 = document.getElementById('btn02');

			oBtn01.onclick = skin01;
			oBtn02.onclick = skin02;
		}

		function skin01(){
			var oLink = document.getElementById('link1');
			oLink.href='1.css';
		}

		function skin02(){
			var oLink = document.getElementById('link1');
			oLink.href='2.css';			

		}

	</script>
</head>
<body>
	<input type="button" name="" value="skin_1" id="btn01">
	<input type="button" name="" value="skin_2" id="btn02">
	<div class="box01"></div>
	<div class="box02"></div>

	
</body>
</html>

1.css

body{
	background-color:gold; 

}

.box01{
	width: 200px;
	height: 200px;
	background-color:green;
	float: left;
	margin: 20px;

}


.box02{
	width:200px;
	height: 200px;
	background-color:pink;
	float: left;
	margin: 20px;

}

2.css

body{
	background-color:#ddd; 

}

.box01{
	width: 200px;
	height: 200px;
	background-color:red;
	float:left;
	margin: 20px;

}


.box02{
	width:200px;
	height: 200px;
	background-color:cyan;
	float:left;
	margin: 20px;

}

JavaScript数组及操作方法

数组就是一组数据的集合，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
多维数组 
多维数组指的是数组的成员也是数组的数组。

var aList = [[1,2,3],['a','b','c']];

alert(aList[0][1]); //弹出2;
获取元素的第二种方法 
document.getElementsByTagName(''),获取的是一个选择集，不是数组，但是可以用下标的方式操作选择集里面的dom元素。

字符串处理方法
1、字符串合并操作：“ + ”
2、parseInt() 将数字字符串转化为整数
3、parseFloat() 将数字字符串转化为小数
4、split() 把一个字符串分隔成字符串组成的数组
5、charAt() 获取字符串中的某一个字符
6、indexOf() 查找字符串是否含有某字符
7、substring() 截取字符串用法： substring(start,end)（不包括end）
8、toUpperCase() 字符串转大写
9、toLowerCase() 字符串转小写
```
//字符串反转
var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join(''); //reverse 和 join 是数组的操作方法

alert(str2);
```
定时器
setTimeout（fun，time）只执行一次的定时器
clearTimeout 关闭只执行一次的定时器
setInterval 反复执行的定时器
clearInterval 关闭反复执行的定时器
1)全局变量-函数外部定义的变量，函数内部和外部都可以访问,它的值可以共享。
2)局部变量-函数内部定义的变量，函数内部可以访问，外部无法访问，函数内部访问变量时，先在内部查找是否有此变量，如果有，就使用内部，如果没有，就去外部查找。
3)函数内部如果不用’var’ 关键字定义变量，变量可能会变成全局变量
封闭函数
格式：(fun(){…})(); //内部可以引用外部变量，外部无法引用内部变量
其他格式：~function(){…}();
!function(){…}();
闭包
1.闭包就是：函数嵌套函数，内部函数可以引用外部函数的参数和变量，参数和变量不会被垃圾回收机制收回
2.用处
1. 将一个变量长期驻扎在内存当中，可用于循环中存索引值
2. 私有变量计数器，外部无法访问，避免全局变量的污染