1、匿名函數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>匿名函數</title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
/*有名字的函數*/
// oDiv.onclick = myalert;
// function myalert(){
// alert('hello');
// }
/*匿名函數*/
oDiv.onclick = function(){
alert('hello');
}
}
</script>
</head>
<body>
<div id="div1">這是一個div元素</div>
</body>
</html>
2、函數傳參
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函數傳參</title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
changeStyle('color', 'gold');
changeStyle('background', 'red');
changeStyle('width', '300px');
changeStyle('height', '300px');
changeStyle('fontSize', '30px');
function changeStyle(styl, val){
oDiv.style[styl] = val;
}
}
</script>
</head>
<body>
<div id="div1">這是一個div元素</div>
</body>
</html>
3、流程控制語句
流程控制語句
JS中的程序是從上到下一行一行執(zhí)行的
通過流程控制語句可以控制程序執(zhí)行流程，
使程序可以根據一定的條件來選擇執(zhí)行
語句的分類：
1.條件判斷語句
2.條件分支語句
3.循環(huán)語句
4、條件判斷語句
條件判斷語句：
- 使用條件判斷語句可以在執(zhí)行某個語句之前進行判斷，
如果條件成立才會執(zhí)行語句，條件不成立則語句不執(zhí)行。
- if語句
- 語法一：
if(條件表達式){
語句...
}
if語句在執(zhí)行時，會先對條件表達式進行求值判斷，
如果條件表達式的值為true，則執(zhí)行if后的語句，
如果條件表達式的值為false，則不會執(zhí)行if后的語句。
if語句只能控制緊隨其后的那個語句,
如果希望if語句可以控制多條語句，
可以將這些語句統(tǒng)一放到代碼塊中
if語句后的代碼塊（即{}）不是必須的，但是在開發(fā)中盡量寫上代碼塊，即使if后只有一條語句
- 語法二:
if(條件表達式){
語句...
}else{
語句...
}
if...else...語句
當該語句執(zhí)行時，會先對if后的條件表達式進行求值判斷，
如果該值為true，則執(zhí)行if后的語句
如果該值為false，則執(zhí)行else后的語句
5、多條條件判斷語句
if語句
語法三：
if(條件表達式){
語句...
}else if(條件表達式){
語句...
}else if(條件表達式){
語句...
}else{
語句...
}
if...else if...else
當該語句執(zhí)行時，會從上到下依次對條件表達式進行求值判斷
如果值為true，則執(zhí)行當前語句。
如果值為false，則繼續(xù)向下判斷。
如果所有的條件都不滿足，則執(zhí)行最后一個else后的語句
該語句中，只會有一個代碼塊被執(zhí)行，一旦代碼塊執(zhí)行了，則直接結束語句
條件分支語句也叫switch語句
語法：
switch(條件表達式){
case 表達式:
語句...
break;
case 表達式:
語句...
break;
default:
語句...
break;
}
執(zhí)行流程：
switch...case..語句
在執(zhí)行時會依次將case后的表達式的值和switch后的條件表達式的值進行全等比較，
如果比較結果為true，則從當前case處開始執(zhí)行代碼。
當前case后的所有的代碼都會執(zhí)行，我們可以在case的后邊跟著一個break關鍵字，
這樣可以確保只會執(zhí)行當前case后的語句，而不會執(zhí)行其他的case
如果比較結果為false，則繼續(xù)向下比較
如果所有的比較結果都為false，則只執(zhí)行default后的語句
switch語句和if語句的功能實際上有重復的，使用switch可以實現if的功能，同樣使用if也可以實現switch的功能，所以我們使用時，可以根據自己的習慣選擇。
var today = 4;
switch(today){
case 1:
alert('語文');
break;//結束整個switch語句
case 2:
alert('數學');
break;
case 3:
alert('英語');
break;
case 4:
alert('美術');
break;
case 5:
alert('舞蹈');
break;
default:
alert('不補習');
break;//最后一個default可以不寫break，但建議寫上
6、數組
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>數組</title>
<script type="text/javascript">
//面向對象的方式創(chuàng)建
var aRr01 = new Array(1,2,3,'abc');
//直接創(chuàng)建
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]);//彈出c
</script>
</head>
<body>
</body>
</html>
7、數組的常用的方法
<script type="text/javascript">
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
//查找字母'b'第一次出現的索引
var aRr2 = ['a','b','c','d','a','b','c','d'];
var num = aRr2.indexOf('b');
// alert(num);//1
//從第2索引元素開始，刪除1個元素
// aRr2.splice(2,1);//刪除c
// alert(aRr2);//a,b,d,a,b,c,d
//從第2索引元素開始，刪除1個元素，再插入e
// aRr2.splice(2,1,'e');//把c替換成e
// alert(aRr2);//a,b,e,d,a,b,c,d
//刪除后面的abcd，改為fghi
aRr2.splice(4,4,'f','g','h','i');
alert(aRr2);//a,b,c,d,f,g,h,i
</script>
8、通過標簽來獲取元素
<!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>
9、循環(huán)
循環(huán)：
for
while
do..... while
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>循環(huán)語句</title>
<script type="text/javascript">
/*
循環(huán)語句：
通過循環(huán)語句可以反復的執(zhí)行一段代碼多次
while循環(huán)
- 語法：
while(條件表達式){
語句...
}
- while語句在執(zhí)行時，
先對條件表達式進行求值判斷，
如果值為true，則執(zhí)行循環(huán)體，
循環(huán)體執(zhí)行完畢以后，繼續(xù)對表達式進行判斷
如果為true，則繼續(xù)執(zhí)行循環(huán)體，以此類推
如果值為false，則終止循環(huán)
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)
實際上這兩個語句功能類似，不同的是while是先判斷后執(zhí)行，
而do...while會先執(zhí)行后判斷，
do...while可以保證循環(huán)體至少執(zhí)行一次，
而while不能
for語句，也是一個循環(huán)語句，也稱為for循環(huán)
在for循環(huán)中，為我們提供了專門的位置用來放三個表達式：
1.初始化表達式
2.條件表達式
3.更新表達式
for循環(huán)的語法：
for(①初始化表達式;②條件表達式;④更新表達式){
③語句...
}
for循環(huán)的執(zhí)行流程：
①執(zhí)行初始化表達式，初始化變量（初始化表達式只會執(zhí)行一次）
②執(zhí)行條件表達式，判斷是否執(zhí)行循環(huán)。
如果為true，則執(zhí)行循環(huán)③
如果為false，終止循環(huán)
④執(zhí)行更新表達式，更新表達式執(zhí)行完畢繼續(xù)重復②
任意一種循環(huán)都可以互相嵌套
*/
window.onload = function(){
var oList = document.getElementById('list01');
var aLi = oList.getElementsByTagName('li');
/*for (var i = 0; i < aLi.length; i++) {
if(i % 2 == 0){
aLi[i].style.background = 'gold';
}
}*/
/*for(var j in aLi){
aLi[j].style.background = 'red';
}*/
//創(chuàng)建一個循環(huán)，往往需要三個步驟
//1.創(chuàng)初始化一個變量
var j = 0;
//2.在循環(huán)中設置一個條件表達式
/*while(j < aLi.length){
aLi[j].style.background = 'gold';
//3.定義一個更新表達式，每次更新初始化變量
j++;
}*/
do{
aLi[j].style.background = 'gold';
j++;
}while(j < 0)
/*
以下是死循環(huán)的寫法
像這種將條件表達式寫死為true的循環(huán)，叫做死循環(huán)
該循環(huán)不會停止，除非瀏覽器關閉，死循環(huán)在開發(fā)中慎用
可以使用break，來終止循環(huán)
*/
/*while(true){
if(j>10){
break;//退出整個循環(huán)
}
j++;
}
//for循環(huán)的死循環(huán)寫法
for(;;){
}*/
/*
break關鍵字可以用來退出switch或循環(huán)語句
不能在if語句中使用break和continue
break關鍵字，會立即終止離他最近的那個循環(huán)語句
continue關鍵字可以用來跳過當次循環(huán)
同樣continue也是默認只會對離他最近的循環(huán)循環(huán)起作用
*/
/*
可以為循環(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;
}
}
}
</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>
<li>9</li>
</ul>
</body>
</html>
