前端知识点（12）
数组
面向对象的方式创建
var aRr01 = new Array(1,2,3,'abc');
直接创建
var aRr02 = [1,2,3,'def'']推荐使用，性能更高
获取数组的成员数量（长度）
alert(aRr02.length);//弹出4
alert(aRr02[3]);//弹出cdf
var aRr03 = [[1,2,3],['a','b','c','d'],[true,false]];
alert(aRr03.length);弹出3
alert(aRr03[1].length);弹出3
alert(aRr03[1][2].length);弹出c
数组常用方法
var aRr = [1,2,3,4];
用-连接数组元素并转为字符串
var sTr = aRr.join("-");//用-连接数组元素并转为字符串，弹出1-2-3-4
var sTr = aRr.join('');//用空串连接
alert(sTr);//弹出1234
向数组最后追加元素
aRr.push(5);
alert(aRr);//1,2,3,4,5
删除末尾元素
aRr.pop();
alert(aRr);//1,2,3
向最前面插入元素0
aRr.unshift(0);
alert(aRr);//0,1,2,3,4
删除第一个（索引为0的）元素
aRr.shift();
alert(aRr);//2,3,4
反转
aRr.reverse();
alert(aRr);//4,3,2,1
通过标签获取元素
window.onload = function(){
// //获取页面上所有的li
// var aLi = document.getElementsByTagName('li');
//获取id为list01的ul
var oList = document.getElementById('list01');
//再获取这个ul下的所有li
var aLi = oList.getElementsByTagName('li');
alert(aLi.length);//8
// aLi.pop();//错误用法，aLi是一个类似数组的选择集，没有数组通用的一些方法
aLi[0].style.backgroundColor = 'gold';
aLi[1].style.backgroundColor = 'gold';
}
</script>
</head>
<body>
<ul id="list01">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
循环语句
while循坏
while（条件表达式）{
语句...
}
执行:
- while语句在执行时，
先对条件表达式进行求值判断，
如果值为true，则执行循环体，
循环体执行完毕以后，继续对表达式进行判断
如果为true，则继续执行循环体，以此类推
如果值为false，则终止循环
do...while循坏
do{
语句...
}while（条件表达式）
执行流程
do...while语句在执行时，会先执行循环体，
循环体执行完毕以后，在对while后的条件表达式进行判断，
如果结果为true，则继续执行循环体，执行完毕继续判断以此类推
如果结果为false，则终止循环
实际上这两个语句功能类似，不同的是while是先判断后执行，
而do...while会先执行后判断，
do...while可以保证循环体至少执行一次，
而while不能
for语句
for
在for循环中，为我们提供了专门的位置用来放三个表达式：
1.初始化表达式
2.条件表达式
3.更新表达式
for 循坏的语法
for(①初始化表达式;②条件表达式;④更新表达式){
③语句...
}
for循环的执行流程：
①执行初始化表达式，初始化变量（初始化表达式只会执行一次）
②执行条件表达式，判断是否执行循环。
如果为true，则执行循环③
如果为false，终止循环
④执行更新表达式，更新表达式执行完毕继续重复②
数组去重
var aRr = [1,3,4,1,6,9,1,2,5,3,1,6,5,4,4];
var aRr2 = [];
for(var i=0; i<aRr.length; i++){
//判断元素第一次出现的位置，恰好是当前索引时，就将元素放入新数组
if(aRr.indexOf(aRr[i]) == i){
aRr2.push(aRr[i]);
}
}
alert(aRr2);//1,3,4,6,9,2,5
字符串反转
var sTr = "123asdf79888asdfe21";
//1、split字符串转成数组
//2、reverse数组反转
//3、join数组转成字符串
var sTr2 = sTr.split('').reverse().join('');
alert(sTr2);//12efdsa88897fdsa321
定时器弹窗
.pop{
width: 400px;
height: 300px;
background-color: #fff;
border: 1px solid #000;
/*固定定位*/
position: fixed;
/*左上角位于页面中心*/
left: 50%;
top: 50%;
/*让div向左偏移半个宽度、向上偏移半个高度，使div位于页面中心*/
margin-left: -200px;
margin-top: -150px;
/*弹窗在最上面*/
z-index: 9999;
}
/*遮罩样式*/
.mask{
position: fixed;
width: 100%;
height: 100%;
background-color: #000;
left: 0;
top: 0;
/*设置透明度30%*/
opacity: 0.3;
filter: alpha(opacity=30);/*兼容IE6、7、8*/
/*遮罩在弹窗的下面，在网页所有内容的上面*/
z-index: 9990;
}
.pop_con{
display: none;/*默认不显示，用定时器显示*/
}
</style>
<script type="text/javascript">
/*
setTimeout 只执行一次的定时器
clearTimeout 关闭只执行一次的定时器
setInterval 反复执行的定时器
clearInterval 关闭反复执行的定时器
*/
window.onload = function(){
var oPop = document.getElementById('pop');
var oShut = document.getElementById('shutOff');
/*setTimeout(showPop, 3000);//开启定时器，3秒后调用函数showPop()弹框
function showPop(){
oPop.style.display = 'block';//显示弹框和遮罩
}*/
//开启定时器的简写方式：调用匿名函数
setTimeout(function(){
oPop.style.display = 'block';
}, 3000);
oShut.onclick = function(){
oPop.style.display = 'none';//关闭弹框和遮罩
}
}
<h1>首页标题</h1>
<p>页面内容</p>
<a href="http://www.baidu.com">百度网</a>
<div class="pop_con" id="pop">
<div class="pop">
<h3>提示信息！</h3>
<a href="#" id="shutOff">关闭</a>
</div>
<div class="mask"></div>
</div>
定时器的基本用法
//单次定时器
var timer = setTimeout(function(){
alert('hello!');
}, 3000);
//清除单次定时器
clearTimeout(timer);
//反复循环定时器
var timer2 = setInterval(function(){
alert('hi~~~');
}, 2000);
//清除反复循环定时器
clearInterval(timer2);
定时器动画
.box{
width: 100px;
height: 100px;
background-color: gold;
position: fixed;
left: 20px;
top: 20px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oBox = document.getElementById('box');
var left = 20;
//反复循环定时器，每30毫秒修改一次盒子的left值
var timer = setInterval(function(){
left += 2;
oBox.style.left = left + 'px';
//当left值大于700时停止动画（清除定时器）
if(left > 700){
clearInterval(timer);
}
},30);
<div class='box' id = 'box'></div>
