一、input.value所有值都是string
二、變量和屬性
var index=10;//變量
var arr=[];//數組
arr.index=20;//index為自定義屬性，隻能在arr下使用
alert(arr.index);
三、判斷使用者輸入事件：oninput
四、多分支語句switch
文法格式
switch(參數){
case:參數1：
語句；
break；//退出
case:參數2：
...
default://預設
}
五、下拉菜單事件
sele.onchange=function(){}
案例：
1、多個Tab切換封裝
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Tab切換封裝</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 .box{
12 width: 405px;
13 height: 400px;
14 border:1px solid #c1c1c1;
15 margin: 100px auto;
16 /*overflow: hidden;*/
17 }
18 .mt span{
19 display: inline-block;
20 width: 80px;
21 height: 30px;
22 text-align: center;
23 line-height: 30px;
24 background-color: #ff4400;
25 border-right: 1px solid #c1c1c1;
26 cursor: pointer;
27 }
28 .mt .current{
29 background-color: #3B90CD;
30 }
31 .mb li{
32 width: 100%;
33 height: 370px;
34 background-color: #3B90CD;
35 list-style: none;
36 display: none;
37 }
38 .mb .show{
39 display: block;
40 }
41 </style>
42 <script>
43 window.onload=function(){
44 function tab(obj){
45 //擷取每個盒子的id
46 var target=document.getElementById(obj);
47 //擷取對應id下的标簽
48 var spans=target.getElementsByTagName("span");
49 var lis=target.getElementsByTagName("li");
50 for(var i=0;i<spans.length;i++){
51 spans[i].index=i;//設定索引号
52 spans[i].onmouseover=function(){
53 for(var j=0;j<spans.length;j++){
54 //清除所有的 類
55 spans[j].className="";
56 lis[j].className="";
57 }
58 //顯示目前點選的類
59 this.className="current";
60 lis[this.index].className="show";//li利用spans.index,span和li對應起來
61 }
62 }
63 }
64 tab("one");
65 tab("two");
66 tab("three");
67 }
68 </script>
69 </head>
70 <body>
71 <div class="box" id="one">
72 <div class="mt">
73 <span class="current">新聞</span><span>體育</span><span>娛樂</span><span>科技</span><span>視訊</span>
74 </div>
75 <div class="mb">
76 <ul>
77 <li class="show">新聞子產品</li>
78 <li>體育子產品</li>
79 <li>娛樂子產品</li>
80 <li>科技子產品</li>
81 <li>視訊子產品</li>
82 </ul>
83 </div>
84 </div>
85
86 <div class="box" id="two">
87 <div class="mt">
88 <span class="current">新聞</span><span>體育</span><span>娛樂</span><span>科技</span><span>視訊</span>
89 </div>
90 <div class="mb">
91 <ul>
92 <li class="show">新聞子產品</li>
93 <li>體育子產品</li>
94 <li>娛樂子產品</li>
95 <li>科技子產品</li>
96 <li>視訊子產品</li>
97 </ul>
98 </div>
99 </div>
100
101 <div class="box" id="three">
102 <div class="mt">
103 <span class="current">新聞</span><span>體育</span><span>娛樂</span><span>科技</span><span>視訊</span>
104 </div>
105 <div class="mb">
106 <ul>
107 <li class="show">新聞子產品</li>
108 <li>體育子產品</li>
109 <li>娛樂子產品</li>
110 <li>科技子產品</li>
111 <li>視訊子產品</li>
112 </ul>
113 </div>
114 </div>
115 </body>
116 </html>
運作結果：
2、三種循環語句
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>三個循環語句</title>
6 <script>
7 window.onload=function(){
8 //for循環
9 var sum=0;
10 for(var i=1;i<=100;i++){
11 sum+=i;
12 }
13 console.log(sum);
14
15 //while循環
16 var j=1;
17 var sum1=0;
18 while(j<=100){
19 sum1+=j;
20 j++;
21 }
22 console.log(sum1);
23
24 //do-while循環，至少執行一次
25 var k=1;
26 var sum2=0;
27 do{
28 sum2+=k;
29 k++;
30 }
31 while(k<=100)
32 console.log(sum2);
33
34 }
35 </script>
36 </head>
37 <body>
38
39 </body>
40 </html> 3、多分支switch語句
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>多分支語句switch</title>
6 <script>
7 window.onload=function(){
8 //擷取元素
9 var txt=document.getElementById("txt");
10 var btn=document.getElementById("btn");
11 btn.onclick=function(){
12 var val=txt.value;
13 switch(val){
14 case "蘋果":
15 alert("蘋果的價格是：5元");
16 break;
17 case "香蕉":
18 alert("香蕉的價格是：2元");
19 break;
20 case "梨":
21 alert("梨的價格是：1.5元");
22 break;
23 case "葡萄":
24 alert("葡萄的價格是：3元");
25 break;
26 default:
27 alert("今天沒進貨");
28 }
29 }
30 }
31 </script>
32 </head>
33 <body>
34 <input type="text" id="txt"><button id="btn">查詢價格</button>
35 </body>
36 </html> 4、下拉菜單
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 body{
8 background-image: url(images/chun1.jpg);
9 }
10 </style>
11 <script>
12 window.onload=function(){
13 //擷取元素
14 var sele=document.getElementById("sele");
15 sele.onchange=function(){
16 //alert(this.value);
17 switch(this.value){
18 case "1":
19 document.body.style.backgroundImage="url(images/chun1.jpg)";
20 break;
21 case "2":
22 document.body.style.backgroundImage="url(images/xia1.jpg)";
23 break;
24 case "3":
25 document.body.style.backgroundImage="url(images/qiu1.jpg)";
26 break;
27 case "4":
28 document.body.style.backgroundImage="url(images/dong1.jpg)";
29 break;
30 default:
31 document.body.style.backgroundImage="url(images/chun1.jpg)";
32 }
33 }
34
35 }
36 </script>
37 </head>
38 <body>
39 <select name="" id="sele">
40 <option value="1">春意綿綿</option>
41 <option value="2">夏日炎炎</option>
42 <option value="3">秋聲瑟瑟</option>
43 <option value="4">白雪皚皚</option>
44 </select>
45 </body>
46 </html> ![31、分層驅動程式[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)