一、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>第28天：js-Tab栏切换封装函数
原文地址：http://www.cnblogs.com/le220/p/7502638.html