javascript小实例【第二课时笔记】

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>选项卡切换</title>
 6 <style>
 7 .active{background:red;}
 8 div{width:100px;height:100px;background:#0000FF;display:none;}
 9 input{background:#CCCCCC;}
10 </style>
11 <script>
12     window.onload=function(){
13         var ainput=document.getElementsByTagName('input');
14         var odiv=document.getElementsByTagName('div');
15         var i=0;
16         for(i=0;i<ainput.length;i++){
17             ainput[i].index=i;
18             ainput[i].onclick=function()
19             {    
20                 for(i=0;i<ainput.length;i++){
21                     ainput[i].className='';
22                     odiv[i].style.display='none';
23                 }
24                 odiv[this.index].style.display='block';
25                 this.className='active';
26             };
27         }
28     };
29 </script>
30 </head>
31 <body>
32 <input class="active" type="button"  value="one"/>
33 <input type="button"  value="two" />
34 <input type="button"  value="three"/>
35 <div style="display:block;">我是第一个</div>
36 <div>我是第二个</div>
37 <div>我是第三个</div>
38 </body>
39 </html>

这个是选项卡的切换原理，做的一个简单的例子。选项卡的应用很广泛，每个标签的切换修改的只是display值，比较容易理解。通过循环来遍历获取标签，然后复制给每一个标签。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>this</title>
 6 <script type="text/javascript">
 7     window.onload=function(){
 8         var abtn=document.getElementsByTagName('input');
 9         var i=0;
10         for(i=0;i<abtn.length;i++)
11         {    abtn[i].onclick=function(){
12             alert(this.value);
13         };
14         }
15     };
16 </script>
17 </head>
18 <body>
19 <input type="button" value="China"/>
20 <input type="button" value="Hongkong"/>
21 <input type="button" value="Wuhan"/>
22 </body>
23 </html>

这个是当你点击一个按钮的时候，this的应用范围很广泛，浏览器就弹出相应的按钮的标签文本值。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>全选</title>
 6 </head>
 7 <script type="text/javascript">
 8     window.onload=function(){
 9         var obtn=document.getElementById('btn');
10         var ainput=document.getElementsByTagName('input');
11         var i=0;
12         obtn.onclick=function(){
13         for(i=0;i<ainput.length;i++)
14         {
15             ainput[i].checked=true;
16         }
17         };
18     };
19 </script>
20 <body>
21 <p id="btn">全选</p>
22 <input type="checkbox" /><br />
23 <input type="checkbox" /><br />
24 <input type="checkbox" /><br />
25 <input type="checkbox" /><br />
26 <input type="checkbox" /><br />
27 <input type="checkbox" /><br />
28 <input type="checkbox" /><br />
29 <input type="checkbox" /><br />
30 <input type="checkbox" /><br />
31 <input type="checkbox" /><br /><input type="checkbox" /><br />
32 </body>
33 </html>

这个是一个全选的的功能，checked就是当你选中的时候。比较简单，有兴趣的同学可以试着做一下，都很基础。晚安~

念念不忘，必有回响。