語句的分類：
條件判斷語句：if else
條件分支語句：switch /case
循環(huán)語句：while for do..while
創(chuàng)建數(shù)組的方法:
通過創(chuàng)建對象創(chuàng)建? var 數(shù)組名 = new.Array();
直接創(chuàng)建數(shù)組 var數(shù)組名 = [];
數(shù)組的常用方法：
計算數(shù)組的長度：console.log(arr02,length)
數(shù)組的下標都是從零開始的;??
可以通過數(shù)組的下標來讀取數(shù)組里面的內(nèi)容
join :將數(shù)組的每一個成員合并成字符串
push ：在數(shù)組的末尾添加一個元素
unshirt：在數(shù)組的前面添加一個零
reverse：將數(shù)組的內(nèi)容反轉
indexOf:? 查看第一次 出現(xiàn)的下標
splice：第一個參數(shù)表示從那個開始刪除吏恭，第二個參數(shù)表示刪除幾個 后面的參數(shù)表示添加什么元素
通過標簽獲取元素
通過類名獲取屬性document.getElementsByClassName
通過ID名獲取屬性? document.getElementById()
通過標簽獲取屬性
js操作屬性：
DOM是為了操作文檔（網(wǎng)頁）的API，document是它的一個對象
BOM是為了操作瀏覽器的API重罪，window是它的一個對象
常用BOM對象還有：alert樱哼、定時器等
JS的style屬性：
style屬性中的樣式屬性，帶"-"號的需要去掉"-"號剿配，寫成小駝峰式
例如：font-size屬性要寫為fontSize
網(wǎng)頁窗口加載完成：window.onload
<script type="text/javascript">
window.onload = function () {
? ? ? var div1 = document.getElementById('div1');
? ? ? div1.style.color = 'red';
? ? ? div1.style.backgroundColor = 'skyblue';
? ? ? div1.style.fontSize = '30px';
}
</script>
<body>
<div? id = 'div1' style = 'color: cornsilk'? >這是一個div元素</div>
</body>
JS操作class：
.box01{
width: 200px;
height: 200px;
background-color: gold;
}
.box02{
width: 300px;
height: 300px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function() {
var div1= document.getElementById('div1');
div1.className = 'box02';
}
class是js中的保留關鍵字搅幅，所以設置class屬性時，要寫為className
數(shù)組
面向對象的方式創(chuàng)建
var arr01 = new Array(1,2,3,'abc');//不推薦使用
直接創(chuàng)建
var arr02 = [1,2,3,'def'];//4
console.log(arr02.length);//'def'
var arr03 = [[1,2,3],['a','b','c','d'],[true,false]];
console.log(arr03.length);//3
console.log(arr03[1].length);//4
console.log(arr03[1][2]);//'c
數(shù)組的常用方法
var aRr = [1,2,3,4];
//拼串
var str = aRr.join('-');//1-2-3-4
var str2 = aRr.join('');//1234
在結尾增加或刪除元素
aRr.push(5);//[1,2,3,4,5]
aRr.pop();//[1,2,3]
在開頭增加或刪除元素
aRr.unshift(0);//[0,1,2,3,4]
aRr.shift();//[2,3,4]
反轉
aRr.reverse();//[4,3,2,1]
var arr2 = ['a','b','c','d','a','b','c','d'];
括號里的這個元素第一次出現(xiàn)的位置
var num = arr2.indexOf('b');//1
從第二個開始刪除刪一個
arr2.splice(2,1);//['a','b','d','a','b','c','d']
從第二個開始刪除一個 在這個位置增加
arr2.splice(2,1,'e');//['a','b','e','d','a','b','c','d']
從第四個開始刪除四個 然后增加三個
arr2.splice(4,4,'e','f','g');//['a','b','e','d','a','b','c','d']
console.log(num);
console.log(str);
JS中括號操作屬性
通過innerHTML可以讀寫元素包括的內(nèi)容?
window.onload = function(){
?? var oDiv = document.getElementById('div1');
?? var oDiv2 = document.getElementById('div2');
?? var attr = 'color';
?? oDiv.style[attr] ='red'呼胚；
? oDiv['style'][attr] = 'red';通過[]操作屬性可以寫變量?
?? console.log(oDiv.innerText);//這是一個div元素
?? // oDiv.innerHTML = '這是第二個div元素';//向div標簽中插入內(nèi)容
?? oDiv.innerHTML = '<a >百度網(wǎng)</a>
?? // oDiv.style.color = 'red';//red必須加引號茄唐，否則會認為它是一個變量，引起來會認為它是一個值蝇更，賦值給=號左邊
}
document.write和innerHTML的區(qū)別
document.write只能重繪整個頁面
innerHTML可以重繪頁面的一部分
變量與函數(shù)預解析
變量是聲明提前,賦值不提前沪编，聲明提前的默認值是undefined
函數(shù)與解析都提前可以調用
匿名函數(shù)
有名稱的函數(shù)
oDiv.onclick = myalert;
function myalert(){
alert('hello');
}
匿名函數(shù)（可以簡化代碼）
oDiv.onclick = function(){
alert('hello');
}
函數(shù)傳參
<script type="text/javascript">
window.onload = function(){
?? var oDiv = document.getElementById('div1');
?? function changeStyle(styl,val){
? ? ? oDiv.style[styl] = val;
}
?? changeStyle('color','red');
?? changeStyle('background','gold');
?? changeStyle('width','30px')
}
</script>
<body>
<div id='div1'>這是一個div元素</div>
</body>
函數(shù)return關鍵字
<script type="text/javascript">
window.onload = function(){
? ? ? ?? var input01 = document.getElementById('input01');
? ? ? ?? var input02 = document.getElementById('input02');
? ? ? ?? var btn = document.getElementById('btn');
寫入值
// input01.value = 10;
// input02.value = 5;
btn.onclick = function () {
?? var val01 = input01.value;
?? var val02 = input02.value;
?? var rs = add(val01,val02);
?? alert(rs);
}
?? function add(a,b) {
? ? ? var c = parseInt(a) + parseInt(b);
? ? ? alert('計算完成');
? ? ? return parseInt(c);//返回函數(shù)設定的值，同時結束函數(shù)的運行
? ? ? return;//不返回值年扩，僅結束函數(shù)的運行
}
? ? ? }
</script>
<body>
<input? type='text' id='input01'>
<input? type='text' id='input02'>
<input? type='button' value='相加' id='btn'>
</body>
流程控制語句?
?JS中的程序是從上到下一行一行執(zhí)行的 通過流程控制語句可以控制程序執(zhí)行流程蚁廓，
?使程序可以根據(jù)一定的條件來選擇執(zhí)行
? 語句的分類：? ? ??
? ? ?1.條件判斷語句if/else
? ? ? 2.條件分支語句switch/case
? ? ? 3.循環(huán)語句 while for do...while
條件判斷語句：
使用條件判斷語句可以在執(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后的語句
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可以實現(xiàn)if的功能抑钟，同樣使用if也可以實現(xiàn)switch的功能，所以我們使用時野哭，可以根據(jù)自己的習慣選擇在塔。
循環(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');
? aLi.length li的長度
?? for (var i=0; i<aLi.length; i++){
? ? ? if(i % 2 == 0){}//偶數(shù)行變色
? ? ? if(i % 2 == 1){}//奇數(shù)行變色
? ? ? aLi[i].style.backgroundColor = 'gold';
?? }
