- 1. 條件分支語句
- 2. 數組
- 3. 獲取標簽過去元素
- 4. 循環(huán)語句
- 5. 數組去重
- 6. 字符串處理的方法
- 7. 定時器
- 8. 變量的作用域
- 9. 封閉函數
- 10. 用變量的方式定義函數
- 11. 閉包
1. 條件分支語句
-
語法:
switch(條件表達式){ case 表達式: 語句... break; case 表達式: 語句... break; default: 語句... break; } -
執(zhí)行流程：
-
在執(zhí)行時會依次將case后的表達式的值和switch后的條件表達式的值進行全等比較季春，
- 如果比較結果為true拳恋，則從當前case處開始執(zhí)行代碼旋奢。當前case后的所有的代碼都會執(zhí)行局服，我們可以在case的后邊跟著一個break關鍵字反惕，這樣可以確保只會執(zhí)行當前case后的語句若河，而不會執(zhí)行其他的case
- 如果比較結果為false，則繼續(xù)向下比較,如果所有的比較結果都為false，則只執(zhí)行default后的語句
switch語句和if語句的功能實際上有重復的泣崩，使用switch可以實現(xiàn)if的功能，同樣使用if也可以實現(xiàn)switch的功能利朵，所以我們使用時律想，可以根據自己的習慣選擇。
-
例子
var today = 1;
switch(today){
case 1:
alert('語文');
break;
case 2:
alert('語文');
break;
case 3:
alert('語文');
break;
case 4:
alert('語文');
break;
case 5:
alert('語文');
break;
default:
alert('不補習')
break;//最后一個可以不寫,但是還是寫的好,如果放在上方,不寫會繼續(xù)執(zhí)行.如果想利用穿透的時候,那就不用寫了;
}
- switch可以穿透,遇到break才停止.
2. 數組
var arr01 = new Array(1,3,6,'acd');
var arr01 = [1,2,3,'lll'];
alert(arr01.length);
alert(arr01[1]);//下標從0開始
//二維數組
var arr03 = [[],[],[]];//二維數組,n維套n層
alert(arr03[1].length);
var str = arr03.join('-');//用-將數組中的元素拼接起來,可以為空
arr03.push(5);//數組末尾追加,
arr03.pop();//刪除末尾;
arr03.unshift(0);//數組開頭添加
arr03.shift();//數組開頭刪除
arr03.reverse();//數組順序翻轉;
arr03.sort();//排序,但是不太好用;
var arr03 = [1 , 5 , 8 , 6 , 5];
//元素在數組中第一次出現(xiàn)的索引值
var num = arr03.indexof(5);
arr03.splice(2,1);//splice(index,num),從下標開始,刪除1個元素,
arr03.splice(2,1,'e');//splice(index,num),從下標開始,刪除1個元素,并添加e,可以理解為替換
arr03.splice(2,4,'e','f','g','h');//從第二個開始,刪除四個,并添加4個
3. 獲取標簽過去元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通過標簽獲取元素</title>
<script type="text/javascript">
window.onload = function(){
// //獲取頁面上所有的li
// var aLi = document.getElementsByTagName('li');
//獲取id為list01的ul
var oList = document.getElementById('list01');
//再獲取這個ul下的所有l(wèi)i
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>
<ul id="list02">
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</body>
</html>
4. 循環(huán)語句
4.1 for 循環(huán)
-
for循環(huán)的語法：
for(①初始化表達式;②條件表達式;④更新表達式){ ③語句... } -
for循環(huán)的執(zhí)行流程：
- ①執(zhí)行初始化表達式，初始化變量（初始化表達式只會執(zhí)行一次）
- ②執(zhí)行條件表達式樟遣，判斷是否執(zhí)行循環(huán)而叼。
- 如果為true，則執(zhí)行循環(huán)③
- 如果為false豹悬，終止循環(huán)
- ④執(zhí)行更新表達式葵陵，更新表達式執(zhí)行完畢繼續(xù)重復②
例子
for( var i=0;i < ali.length ; i++){
if(i % 2 == 0){
ali[i].style.background = 'gold';
}
}
4.2 while循環(huán)
-
語法：
while(條件表達式){ 語句... } -
while語句在執(zhí)行時，
- 先對條件表達式進行求值判斷瞻佛，
- 如果值為true脱篙，則執(zhí)行循環(huán)體，循環(huán)體執(zhí)行完畢以后伤柄，繼續(xù)對表達式進行判斷
- 如果為true绊困，則繼續(xù)執(zhí)行循環(huán)體，以此類推
- 如果值為false适刀，則終止循環(huán)
- 先對條件表達式進行求值判斷瞻佛，
- 例子
//while先判斷后執(zhí)行 var i = 0; while( i < ali.length){ ali[i].style.background = 'gold'; i++; }
4.3 do while 循環(huán)
-
語法：
do{ 語句... }while(條件表達式) -
執(zhí)行流程：
- do...while語句在執(zhí)行時秤朗，會先執(zhí)行循環(huán)體，循環(huán)體執(zhí)行完畢以后笔喉，在對while后的條件表達式進行判斷取视，
- 如果結果為true，則繼續(xù)執(zhí)行循環(huán)體常挚，執(zhí)行完畢繼續(xù)判斷以此類推
- 如果結果為false作谭，則終止循環(huán)
- do...while語句在執(zhí)行時秤朗，會先執(zhí)行循環(huán)體，循環(huán)體執(zhí)行完畢以后笔喉，在對while后的條件表達式進行判斷取视，
-
例子
//do while,先執(zhí)行后判斷 var i = 0; do{ ali[i].style.background = 'gold'; i++; }while(i < ali.length)
4.4 死循環(huán)
在死循環(huán)中,可以使用break，來終止循環(huán);
- break關鍵字可以用來退出switch或循環(huán)語句,不能在if語句中使用break和continue
- break關鍵字奄毡，會立即終止離他最近的那個循環(huán)語句
- continue關鍵字可以用來跳過當次循環(huán)
- 同樣continue也是默認只會對離他最近的循環(huán)循環(huán)起作用
while(true){
//跳出循環(huán)
if(){
break;
}
}
for(;;){
//跳出循環(huán)
if(){
break;
}
}
lable:
for(){
for(){
if(){
break lable;
}
}
}
/*可以為循環(huán)語句創(chuàng)建一個label折欠，來標識當前的循環(huán)
label:循環(huán)語句
使用break語句時，可以在break后跟著一個label，
這樣break將會結束指定的循環(huán)怨酝，而不是最近的*/
outer:
for(var i=0 ; i<5 ; i++){
console.log("@外層循環(huán)"+i);
for(var j=0 ; j<5; j++){
console.log("內層循環(huán):"+j);
break outer;
5. 數組去重
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++){
//判斷元素第一次出現(xiàn)的位置，恰好是當前索引時那先，就將元素放入新數組
if(aRr.indexOf(aRr[i]) == i){
aRr2.push(aRr[i]);
}
}
alert(aRr2);//1,3,4,6,9,2,5
6. 字符串處理的方法
/*字符串切斷轉成數組*/
var s = '2018-8-8'
var arr = s.split('-');//[2018,8,8]
var arr = s.split('');//['2', '0' ,'1' ,'8' ,'-','8', '-' ,'8']
var aRr2 = sTr.split('');
// console.log(aRr2);
/*實際上就是修改了<title>標簽的內容*/
// document.title = aRr2;
var str2 = '#div';
var str3 = '.div';
var str4 = str2.charAt(0);//# 返回索引所對應的字符
if(str4 == '#'){
alert('id選擇器');
}else if(str4 == '.){
alert('類選擇器');
}
/*查看子串第一次出現(xiàn)的位置*/
var tr5 = 'Microsoft Yahei';
var num = tr5.indexof('Yahei');//10 //查詢子串
var num1 = tr5.indexof('Xihei');//-1 說明沒有找到
var str6 = tr5.substring(10,15);//包括開始位置,不包括結束位置;
var str6 = tr5.substring(10);//從第10位開始到最后
//字母的大小寫轉換
var str6 = tr5.toUpperCase();//全大寫
var str6 = tr5.toLowCase();//全小寫
6.1 字符串的反轉
- split 方法 轉成數組
- reverse 反轉數組
- join數組轉成字符串
var str= 'asdfghj147852369';
//var str1 = str.split('').reverse().join('');
var srt1 = str.split('');
var str2 = str1.reverse();
var str3 = str2.join('');
7. 定時器
7.1 定時器彈窗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定時器彈框</title>
<style type="text/css">
.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 只執(zhí)行一次的定時器
clearTimeout 關閉只執(zhí)行一次的定時器
setInterval 反復執(zhí)行的定時器
clearInterval 關閉反復執(zhí)行的定時器
*/
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';//關閉彈框和遮罩
}
}
</script>
</head>
<body>
<h1>首頁標題</h1>
<p>頁面內容</p>
<a >百度網</a>
<div class="pop_con" id="pop">
<div class="pop">
<h3>提示信息！</h3>
<a href="#" id="shutOff">關閉</a>
</div>
<div class="mask"></div>
</div>
</body>
</html>
7.2 定時器的基本用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定時器的基本用法</title>
<script type="text/javascript">
//單次定時器
var timer = setTimeout(function(){
alert('hello!');
}, 3000);
//清除單次定時器
clearTimeout(timer);
//反復循環(huán)定時器
var timer2 = setInterval(function(){
alert('hi~~~');
}, 2000);
//清除反復循環(huán)定時器
clearInterval(timer2);
</script>
</head>
<body>
</body>
</html>
7.3 定時器動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定時器動畫</title>
<style type="text/css">
.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;
//反復循環(huán)定時器汤纸，每30毫秒修改一次盒子的left值
var timer = setInterval(function(){
left += 2;
oBox.style.left = left + 'px';
//當left值大于700時停止動畫（清除定時器）
if(left > 700){
clearInterval(timer);
}
},30);
}
</script>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>
7.4 時鐘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>時鐘</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function(){
var oBox = document.getElementById('box');
function timeGo(){
var now = new Date();
// alert(now);//彈出美式時間：Wed Jun 20 2018 15:27:13 GMT+0800 (中國標準時間)
var year = now.getFullYear();//2018年
var month = now.getMonth() + 1;//6月彈出5//范圍0-11
var date = now.getDate();//20號
var week = now.getDay();//3//星期幾衩茸，西半球時間，范圍0-6贮泞，星期日為一周的第一天楞慈，為0
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
// alert(hour + ":" + minute + ":" + second);//15:33:9
oBox.innerHTML = '當前時間是：' + year + '年' + toDouble(month) + '月' + toDouble(date) + '日 ' + toWeek(week) + ' ' + toDouble(hour) + ":" + toDouble(minute) + ":" + toDouble(second);
}
timeGo();
setInterval(timeGo, 1000);
}
//此函數將星期的數字轉為漢字表示
function toWeek(num){
switch(num){
case 0:
return '星期天';
break;
case 1:
return '星期一';
break;
case 2:
return '星期二';
break;
case 3:
return '星期三';
break;
case 4:
return '星期四';
break;
case 5:
return '星期五';
break;
case 6:
return '星期六';
break;
}
}
//此函數將不足兩位的數字前面補0
function toDouble(num){
if(num < 10){
return '0' + num;
}else{
return num;
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
7.5 倒計時
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒計時</title>
<script type="text/javascript">
window.onload = function(){
//活動第二天要將頁面下線，直接跳轉到其它頁面啃擦，不會走后面的代碼了
// window.location.;
var oDiv = document.getElementById('div1');
function timeLeft(){
//實際開發(fā)中此時間從服務器獲取囊蓝，避免客戶端調整時間
var now = new Date();
var future = new Date(2018,5,20,16,30,20);
// alert(future - now);//彈出與當前時間相差的毫秒數：12469935436
var milli = parseInt((future - now)/1000);
//活動當天頁面下線，避免倒計時到點后繼續(xù)計負時
// if(milli <= 0){
// //頁面跳轉令蛉，不執(zhí)行下面的代碼了
// window.location.;
// }
var day = parseInt(milli / 86400);
var hour = parseInt(milli % 86400 / 3600);
var minute = parseInt(((milli % 86400) % 3600) / 60);
var second = milli % 60;
oDiv.innerHTML = '距離2018年11月12日00時00分00秒還有' + day + '天' + toDouble(hour) + '時' + toDouble(minute) + '分' + toDouble(second) + '秒';
}
timeLeft();
setInterval(timeLeft, 1000);
}
function toDouble(num){
if(num < 10){
return '0' + num;
}else{
return num;
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
8. 變量的作用域
全局變量：函數外部定義的變量聚霜，函數內部和外部都可以訪問，它的值可以共享
局部變量：函數內部定義的變量珠叔，函數內部可以訪問蝎宇，外部無法訪問。函數內部訪問變量時运杭，先在內部查找是否有此變量夫啊，如果有，就使用內部變量辆憔，如果沒有撇眯，就去外部查找
函數內部如果不用'var'關鍵字定義變量，變量可能會變成全局變量虱咧，如果用嚴格模式解析會報錯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>變量的作用域</title>
<script type="text/javascript">
var a = 12;
function aa(){
// var a = 5;
var b = 7;
// alert(a);
}
// alert(a);
// alert(b);//報錯
aa();
</script>
</head>
<body>
</body>
</html>
9. 封閉函數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>封閉函數</title>
<script type="text/javascript">
/*原來的寫法
function myAlert(){
var str = '歡迎訪問我的主頁';
alert(str);
}
myAlert();*/
var str = function(){
alert('test');
}
//封閉函數的一般寫法
//封閉函數定義：(function(){……})()
/*
;;(function(){
var str = '歡迎訪問我的主頁';
alert(str);
})();//最后的()表示馬上執(zhí)行
*/
//封閉函數其他的寫法：在匿名函數前加“熊榛！”或者“~”，之后加“()”
~function(){
var str = '歡迎訪問我的主頁';
alert(str);
}();
</script>
</head>
<body>
</body>
</html>
10. 用變量的方式定義函數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用變量的方式定義函數</title>
<script type="text/javascript">
/*
原來的寫法：可以提前
myAlert();
function myAlert(){
alert('hello!');
}*/
//函數用變量方式定義：先定義再使用
// myalert();//提前會報錯
var myAlert = function(){
alert('hello!');
}
myAlert();//放在下面可以執(zhí)行
</script>
</head>
<body>
</body>
</html>
11. 閉包
- 閉包
- 閉包的本質就是函數嵌套腕巡，就是在函數里面定義函數玄坦，
- 內部函數可以引用外部函數的參數和變量
- 參數和變量不會被垃圾回收機制給回收
- 閉包的用途：可以存循環(huán)的索引值、做私有變量計數器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>閉包</title>
<script type="text/javascript">
/*
//閉包的一般寫法
function aa(b){
var a = 12;
function bb(){
alert(a);
alert(b);
}
return bb;
}
var cc = aa(24);*/
//閉包的封閉函數寫法
var cc = (function(b){
var a = 12;
function bb(){
alert(a);
alert(b);
}
return bb;
})(24);
cc();
/*
//只能調用一次的閉包
(function(b){
var a = 12;
function bb(){
alert(a);
alert(b);
}
return bb;
})(24)();
*/
</script>
</head>
<body>
</body>
</html>
