第1節 JavaScript概述
第一節 JavaScript概述
JavaScript：其實就是對HTML+CSS靜態頁面進行樣式修改，使其實現各種動態效果。
編寫JS指令碼基本步驟：
1. HTML+CSS靜態佈局；
2. 確定要修改的屬性；
3.確定使用者做哪些操作，即事件（產品樣式）；
4.在事件中，用JS來修改頁面元素的樣式。
特效實現原理：響應使用者操作，對頁面元素（標籤）進行某種動態效果的實現。
函式簡介：
基本形式為“function 函式名(){……}”，把JS從標籤中放入函式裡，類似與CSS中的class
函式的定義和呼叫：
一般函式定義：function 函式名(){……}; n=函式名;//即為函式呼叫，不需加“()”
匿名函式定義：var n=……; n=function(){……};//本身也是一種函式呼叫
document。getElementById();：不會出現直接引用“id”而出現的錯誤
網站更換面板：即把引入的CSS樣式改變了，如CSS1樣式是第一種面板，CSS2是另一種面板一樣。
HTML檔案便籤中怎麼寫特效，JS中特效就怎麼寫，但有一特例，HTML中的class必須在JS中寫className
函式什麼時候該傳引數：當函式裡有定不下來的變數是需要傳參
在函式中，style新增的樣式都是新增在便籤內的，稱為行間樣式（而行間樣式的優先順序最高），所以在編寫程式的時候，要麼只修改style，要麼只修改class。
提取事件：為元素新增事件，事件和其他屬性一樣，可以用js新增，如onload()，如下：當
<script>
var oBtn=document.getElementById('btn1');
oBtn.onclick=function(){alert('a');};
</script>
在標籤<body></body>標籤內時，函式正確執行，但是 如果上述程式碼放在<head></head>標籤內時就會報錯，因為JS（與Python類似）是解釋性語言，即讀一行、執行一行，所以函式呼叫只能寫在函式下面，否則就會報錯，此時的解決辦法為：
<script>
window.onload=function(){
var oBtn=document.getElementById('btn1');
oBtn.onclick=function(){alert('a');};
};
</script>
行為、樣式、結構三者分離：即JS檔案、CSS檔案、HTML檔案分開
獲取一組元素：getElementByTagName
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- div{
- width: 200px;
- height: 200px;
- float: left;
- border:1px solid black;
- margin: 10px;
- }
- </style>
- <script>
- window.onload=function(){
- var aDiv=document.getElementsByTagName('div');
- //alert(aDiv.length);//上述程式碼返回的就是一個數組，此處提示輸出陣列的長度
- //對陣列中的div的樣式分別進行修改，注意，陣列下標是從0開始計數的
- aDiv[0].style.background='red';//即第一個div為的背景顏色變為“紅色”
- }
- </script>
- </head>
- <body>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </body>
小綜合：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload=function(){
var oBtn1=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
var oBtn3=document.getElementById('btn3');
var oDiv=document.getElementById('div1');
var aCh=oDiv.getElementsByTagName('input');
oBtn1.onclick=function () {
//aCh[0].checked=true;
for(var i=0; i<aCh.length; i++){
aCh[i].checked=true;
}
};
oBtn2.onclick=function () {
//aCh[0].checked=false;
for(var i=0; i<aCh.length; i++){
aCh[i].checked=false;
}
};
oBtn3.onclick=function () {
//aCh[0].checked=true;
for(var i=0; i<aCh.length; i++){
if (aCh[i].checked==true){ //判斷用==
aCh[i].checked=false; //賦值用=
}
else{
aCh[i].checked=true;
}
}
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="全選"/>
<input id="btn2" type="button" value="全不選"/>
<input id="btn3" type="button" value="反選"/><br/>
<div id="div1">
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
<input type="checkbox"/><br/>
</div>
</body>
</html>
this：當前發生事件的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選項卡</title>
<style>
#div1 .active{background: yellow;}
#div1 div{
width: 200px;
height: 200px;
background: #ccc;
border: 1px solid #999;
display: none;
}
</style>
<script>
window.onload=function()
{
var oDiv=document.getElementById('div1');
var aBtn=oDiv.getElementsByTagName('input');
var aDiv=oDiv.getElementsByTagName('div');
for (var i = 0; i<aBtn.length; i++){
aBtn[i].index=i; //給每一個按鈕新增一個自定義屬性“index”屬性
//此時用js新增自定義屬性，正規瀏覽器不會報錯；如果在標籤內直接新增自定義屬性，正規瀏覽器不會響應
aBtn[i].onclick=function () {
for (var i = 0;i<aBtn.length; i++){
aBtn[i].className='';
aDiv[i].style.display='none';
}
this.className='active';
//alert(this.index);
aDiv[this.index].style.display='block';
};
}
};
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="教育"/>
<input type="button" value="培訓"/>
<input type="button" value="招生"/>
<input type="button" value="出國"/>
<div style="display: block;">111</div>
<div>222</div>
<div>333</div>
<div>444</div>
</div>
</body>
</html>
innerHTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡易年曆</title>
<style>
#tab{
width: 360px;
height: 600px;
border: 1px solid black;
text-align: center;
line-height: 600px;
margin: 0 auto;
}
#tab ul{
margin-left: -15px;
margin-top: 23px;
}
#tab ul li{
width: 100px;
height: 100px;
border: 1px solid #999999;
float: left;
list-style: none;
/*text-decoration: none;
text-align: center;*/
line-height: 20px;
margin: 1px;
}
.text{
width: 308px;
height: 136px;
border: 1px solid #943E01;
margin-top: 440px;
margin-left: 26px;
list-style: none;
line-height: 20px;
}
</style>
<script>
window.onload=function () {
var arr=[
'快過年了，大家可以商量一下去哪玩兒……',
'不知細葉誰裁出，二月春風似剪刀。',
'陽春三月，此之踏青最佳時節……',
'你是人間四月天……',
'五月初夏，時令剛好……'
];
var oDiv=document.getElementById('tab');
var oLi=oDiv.getElementsByTagName('li');
var oTxt=oDiv.getElementsByTagName('div')[0];
for (var i=0; i<oLi.length; i++){
oLi[i].index=i;
oLi[i].onmouseover=function(){
for (var i=0; i<oLi.length; i++){
oLi[i].className='';
}
this.className='active';
oTxt.innerHTML='<h2>'+(this.index+1)+'月活動</h2><p>'+arr[this.index]+'</p>';
//上句如果(this.index+1)不加“()”則系統預設為字串連線，而不會直接運算，加“()”之後就會直接相加了
};
}
};
</script>
</head>
<body>
<div id="tab" class="calendar">
<ul>
<li class="active"><h2>1</h2><p>Jan</p></li>
<li><h2>2</h2><p>Fer</p></li>
<li><h2>3</h2><p>Mar</p></li>
<li><h2>4</h2><p>Apr</p></li>
<li><h2>5</h2><p>May</p></li>
<li><h2>6</h2><p>Jun</p></li>
<li><h2>7</h2><p>Jul</p></li>
<li><h2>8</h2><p>Aug</p></li>
<li><h2>9</h2><p>Sep</p></li>
<li><h2>10</h2><p>Oct</p></li>
<li><h2>11</h2><p>Nov</p></li>
<li><h2>12</h2><p>Dec</p></li>
</ul>
<div class="text">
<h2>1月活動</h2>
<p>快過年了，大家可以商量一下去哪玩兒……</p>
</div>
</div>
</body>
</html>
函式傳參：函式就是佔位符
style與className：
元素.style.屬性=XXX 是修改行間樣式
之後再修改className不會有效果
自定義屬性：索引值的使用
什麼時候需要使用索引值--需要知道第幾個的時候
注意：HTML標籤新增自定義屬性標籤內屬性index，在執行時會被FF過濾掉，所以要使用js新增自定義索引屬性