一、input.value所有值都是string
二、变量和属性
var index=10;//变量
var arr=[];//数组
arr.index=20;//index为自定义属性，只能在arr下使用
alert(arr.index);
三、判断用户输入事件：oninput
四、多分支语句switch
语法格式
switch(参数){
case:参数1：
语句；
break；//退出
case:参数2：
语句；
break；//退出
...
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>