js学习笔记-初探JavaScript魅力 – 2

2013.10.09 分享 17807 人浏览 6 条留言

JS练习-合并参数-行间事件-提取行间事件

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>JS练习-合并参数-行间事件-提取行间事件</title>  
  5.     <meta charset="UTF-8" />  
  6.     <style>  
  7.     #div1{width: 200px;height: 200px;background: red;}  
  8.     #div2{width: 200px;height: 200px;border: 1px solid black;}  
  9.     .box{background: red}  
  10.     </style>  
  11.     <script>  
  12.     //最原始的写法  
  13.     function toGreen()  
  14.     {  
  15.         var oDiv=document.getElementById('div1');  
  16.         oDiv.style.background='green';  
  17.     }  
  18.     function toYellow()  
  19.     {  
  20.         var oDiv=document.getElementById('div1');  
  21.         oDiv.style.background='yellow';  
  22.     }  
  23.     function toBlack()  
  24.     {  
  25.         var oDiv=document.getElementById('div1');  
  26.         oDiv.style.background='black';  
  27.     }  
  28.   
  29.     //单个参数  
  30.     function setColor(color)  
  31.     {  
  32.         var oDiv=document.getElementById('div1');  
  33.         oDiv.style.background=color;  
  34.     }  
  35.   
  36.     //两个参数  
  37.     function setStyle(name,value)  
  38.     {  
  39.         var oDiv=document.getElementById('div1');  
  40.         /*oDiv.style.name=value;  这里会出错*/  
  41.         oDiv.style[name]=value;  
  42.         //oDiv[style][name]=value;  这个和上面效果是一样的  
  43.     }  
  44.   
  45.   
  46.   
  47.   
  48.     //1.style加样式  行间  
  49.     //2.style去样式  行间  
  50.     //3.建议只修改class或者只修改style  
  51.   
  52.     //通过改变class来控制背景色  
  53.     function toRed1()  
  54.     {  
  55.         var oDiv=document.getElementById('div2');  
  56.         oDiv.className='box';  
  57.     }  
  58.     //通过改变行间样式来改变背景色  
  59.     function toGreen1()  
  60.     {  
  61.         var oDiv=document.getElementById('div2');  
  62.         oDiv.style.background='green';  
  63.     }  
  64.   
  65.       
  66.     </script>  
  67. </head>  
  68. <body>  
  69.     <input type="button" value="变黄" onclick="toYellow();"/>  
  70.     <input type="button" value="变绿" onclick="toGreen();"/>  
  71.     <input type="button" value="变黑" onclick="toBlack();"/>  
  72.     <br>  
  73.     <input type="button" value="变黄" onclick="setColor('yellow');"/>  
  74.     <input type="button" value="变绿" onclick="setColor('green');"/>  
  75.     <input type="button" value="变黑" onclick="setColor('black');"/>  
  76.     <br/>  
  77.     <input type="button" value="变宽" onclick="setStyle('width','400px');"/>  
  78.     <input type="button" value="变高" onclick="setStyle('height','400px');"/>  
  79.     <input type="button" value="变绿" onclick="setStyle('background','green');"/>  
  80.     <div id="div1"></div>  
  81.     <br>  
  82.     <br>  
  83.     <input type="button" value="变红" onclick="toRed1();">  
  84.     <input type="button" value="变绿" onclick="toGreen1();">  
  85.     <div id="div2"></div>  
  86. </body>  
  87. </html>  

JS练习-提取行间事件,获取一组元素,循环

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>JS练习-提取行间事件,获取一组元素,循环</title>  
  5.     <meta charset="UTF-8" />  
  6.     <script>  
  7.   
  8.           
  9.         window.onload=function()  
  10.         //在加载完整个页面后执行，如果不添加window.onload，则变量获取不到id tagname  
  11.         {  
  12.             //获取一组元素 getElementsByTagName  
  13.             var aDiv=document.getElementsByTagName('div');  
  14.   
  15.             var bDiv=document.getElementById('btn2');  
  16.   
  17.             //alert(aDiv.lenth);  
  18.   
  19.             //aDiv.style.background='red';这个是错误的  
  20.   
  21.             /*  
  22.             bDiv.onclick=function()  
  23.             {  
  24.                 aDiv[0].style.background='red';  
  25.                 aDiv[1].style.background='red';  
  26.                 aDiv[2].style.background='red';  
  27.                 aDiv[3].style.background='red';  
  28.             };  
  29.             */  
  30.   
  31.             bDiv.onclick=function()  
  32.             {  
  33.                 for (var i=0;i<aDiv.length; i++)   
  34.                 //判断aDiv的个数 原i<4  
  35.                 {  
  36.                     aDiv[i].style.background='red';  
  37.                 };  
  38.             };  
  39.               
  40.         }  
  41.   
  42.         //while循环  
  43.         /*  
  44.         var i=0;        //1.初始化  
  45.         while (i<5)     //2.条件  
  46.         {  
  47.             alert(i);   //3.语句  
  48.             ii=i+1;      //4.自增 也可以用 i++  
  49.         }  
  50.         */  
  51.   
  52.         //for循环  
  53.         /*  
  54.         for(var i=0;i<5;i++)  
  55.         {  
  56.             alert(i);  
  57.         }  
  58.         */  
  59.   
  60.     </script>  
  61.     <style>  
  62.         div{width: 200px;height: 200px;border: 1px solid black;margin: 10px;float: left;}  
  63.     </style>  
  64. </head>  
  65. <body>  
  66.     <input type="button" id="btn2" value="变色"/>  
  67.     <br/>  
  68.     <div></div>  
  69.     <div></div>  
  70.     <div></div>  
  71.     <div></div>  
  72. </body>  
  73. </html>  

全选,不选,反选

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>全选,不选,反选</title>  
  5.     <meta charset="UTF-8" />  
  6.     <script>  
  7.     window.onload=function()  //此处是“=”不是"."
  8.     {  
  9.         var oBtn1=document.getElementById('btn1');  
  10.         var oBtn2=document.getElementById('btn2');  
  11.         var oBtn3=document.getElementById('btn3');  
  12.         var oDiv=document.getElementById('div1');  
  13.         var aCh=oDiv.getElementsByTagName('input');  
  14.         oBtn1.onclick=function()  
  15.         {  
  16.             //aCh[0].checked=true;  //好吧checked别写错了 纠结  
  17.             for (var i=0; i<aCh.length; i++) {  
  18.                 aCh[i].checked=true;  
  19.             };  
  20.         };  
  21.   
  22.         oBtn2.onclick=function()  
  23.         {  
  24.             for (var i=0; i<aCh.length; i++)  //注意别写漏var，及i=0不是=1
  25.             {  
  26.                 aCh[i].checked=false;  
  27.             };  
  28.         };  
  29.   
  30.         oBtn3.onclick=function()  
  31.         {  
  32.             for (var i=0; i<aCh.length; i++)  
  33.             {  
  34.                 if (aCh[i].checked==true)//别忘了用==判断,且后面没分号  
  35.                 {  
  36.                     aCh[i].checked=false;  
  37.                 }  
  38.                 else  
  39.                 {  
  40.                     aCh[i].checked=true;  
  41.                 }  
  42.                   
  43.             };  
  44.   
  45.         };  
  46.   
  47.   
  48.     };  
  49.     </script>  
  50. </head>  
  51. <body>  
  52.     <input id="btn1" type="button" value="全选" /><br/>  
  53.     <input id="btn2" type="button" value="不选" /><br/>  
  54.     <input id="btn3" type="button" value="反选" /><br/>  
  55.     <div id="div1">  
  56.         <input type="checkbox"/><br/>  
  57.         <input type="checkbox"/><br/>  
  58.         <input type="checkbox"/><br/>  
  59.         <input type="checkbox"/><br/>  
  60.         <input type="checkbox"/><br/>  
  61.         <input type="checkbox"/><br/>  
  62.         <input type="checkbox"/><br/>  
  63.         <input type="checkbox"/><br/>  
  64.         <input type="checkbox"/><br/>  
  65.         <input type="checkbox"/><br/>  
  66.         <input type="checkbox"/><br/>  
  67.     </div>  
  68. </body>  
  69. </html>  

选项卡制作

  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>选项卡</title>  
  6. <style>  
  7.     input.active{background: red}  
  8.     #div1 div{width:200px;height:200px;background:red;display: none;}  
  9. </style>  
  10. <script>  
  11. window.onload=function()  
  12. {  
  13.     var oBtn=document.getElementsByTagName('input');  
  14.     var oDiv=document.getElementById('div1');  
  15.     var aCh=oDiv.getElementsByTagName('div');  
  16.   
  17.     for(var i=0;i<oBtn.length;i++)  
  18.     {  
  19.         oBtn[i].index=i;//注意此处的引用  
  20.         oBtn[i].onclick=function()  
  21.         {  
  22.             for(var i=0;i<oBtn.length;i++){  
  23.                 //先去掉之前的属性  
  24.                 oBtn[i].className='';  
  25.                 aCh[i].style.display='none';  
  26.             }  
  27.             //this的用法  
  28.             this.className='active';  
  29.             aCh[this.index].style.display='block';  
  30.         };  
  31.     };  
  32. };  
  33. </script>  
  34. </head>  
  35.   
  36. <body>  
  37. <input type="button" value="选项卡1" class="active">  
  38. <input type="button" value="选项卡2">  
  39. <input type="button" value="选项卡3">  
  40. <br>  
  41. <div id="div1">  
  42.     <div style="display:block">内容1</div>  
  43.     <div>内容2</div>  
  44.     <div>内容3</div>  
  45. </div>  
  46. </body>  
  47. </html>  

万年历制作(好吧，我承认下面内容中的div结构，css都是复制粘贴的，当然 js都是我手打并测试的...)

  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>万年历</title>  
  6. <style>  
  7.     * { padding: 0; margin: 0; }  
  8.     li { list-style: none; }  
  9.     body { background: #f6f9fc; font-family: arial; }  
  10.     .calendar { width: 210px; margin: 50px auto 0; padding: 10px 10px 20px 20px; background: #eae9e9; }  
  11.     .calendar ul { width: 210px; overflow: hidden; padding-bottom: 10px; }  
  12.     .calendar li { float: left; width: 58px; height: 54px; margin: 10px 10px 0 0; border: 1px solid #fff; background: #424242; color: #fff; text-align: center; cursor: pointer; }  
  13.     .calendar li h2 { font-size: 20px; padding-top: 5px; }  
  14.     .calendar li p { font-size: 14px; }  
  15.     .calendar .active { border: 1px solid #424242; background: #fff; color: #e84a7e; }  
  16.     .calendar .active h2 { }  
  17.     .calendar .active p { font-weight: bold; }  
  18.     .calendar .text { width: 178px; padding: 0 10px 10px; border: 1px solid #fff; padding-top: 10px; background: #f1f1f1; color: #555; }  
  19.     .calendar .text h2 {font-size: 14px; margin-bottom: 10px; }  
  20.     .calendar .text p { font-size: 12px; line-height: 18px; }  
  21. </style>  
  22. <script>  
  23. window.onload=function()  
  24. {  
  25.     //这里是赋值数组，方便后续调用  
  26.     var aDatas=[  
  27.         "快过年了，大家可以商量着去哪玩吧～",  
  28.         "精通JavaScript开发课程 - 结课标准 - 有十条标准可让大家修练成JS高手……",  
  29.         "HTML5开发课程，让你熟练掌握移动应用开发技术",  
  30.         "精通各种DOM类应用，熟练掌握面向对象编程思想（OOP）、熟悉JS面向对象开发方式",  
  31.         "熟练掌握AJAX技术及相关应用（例如：新浪微博级应用）",  
  32.         "可以独立写出类似jQuery的小型库（支持各类选择符、事件类、DOM、自定义动画animate、AJAX……）",  
  33.         "精通JS运动特效技术，能完整实现各类网站所有动画特效，如 智能课堂 官网",  
  34.         "掌握JS调试及优化技术、能兼容所有浏览器",  
  35.         "精通JS事件对象及事件的工作机制，并能完成各类跨平台应用模块的开发",  
  36.         "能独立开发表现和性能都很优秀的RIA应用",  
  37.         "了解后台编程的相关知识，能够和后台工程师配合完成大型交互应用",  
  38.         "熟悉正则表达式的编写、应用及高级表单验证技术"  
  39.     ];  
  40.   
  41.     var oDiv=document.getElementById('tab');  
  42.     var aLi=oDiv.getElementsByTagName('li');  
  43.   
  44.     var oTxt=oDiv.getElementsByTagName('div')[0]; //注意第0个的应用  
  45.     //var oTxt=document.getElementById('txt'); 也可以这么写，简单点  
  46.   
  47.     for(i=0;i<aLi.length;i++)  
  48.     {  
  49.         aLi[i].index=i;  
  50.         aLi[i].onclick=function()//这里别漏了[i]  
  51.         {  
  52.             for(i=0;i<aLi.length;i++)  
  53.             {  
  54.                 aLi[i].className='';  
  55.             }  
  56.             this.className='active';  
  57.   
  58.             //这个是在onclick里面的，别写出外面  
  59.             oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+aDatas[this.index]+'</p>'  
  60.         }  
  61.     }  
  62. }  
  63. </script>  
  64. </head>  
  65.   
  66. <body>  
  67.     <div id="tab" class="calendar">  
  68.   
  69.         <ul>  
  70.             <li class="active"><h2>1</h2><p>JAN</p></li>  
  71.             <li><h2>2</h2><p>FER</p></li>  
  72.             <li><h2>3</h2><p>MAR</p></li>  
  73.             <li><h2>4</h2><p>APR</p></li>  
  74.             <li><h2>5</h2><p>MAY</p></li>  
  75.             <li><h2>6</h2><p>JUN</p></li>  
  76.             <li><h2>7</h2><p>JUL</p></li>  
  77.             <li><h2>8</h2><p>AUG</p></li>  
  78.             <li><h2>9</h2><p>SEP</p></li>  
  79.             <li><h2>10</h2><p>OCT</p></li>  
  80.             <li><h2>11</h2><p>NOV</p></li>  
  81.             <li><h2>12</h2><p>DEC</p></li>  
  82.         </ul>  
  83.           
  84.         <div class="text" id="txt">  
  85.             <h2>1月活动</h2>  
  86.             <p>快过年了，大家可以商量着去哪玩吧～</p>  
  87.         </div>  
  88.   
  89.     </div>  
  90. </body>  
  91. </html>  

文章地址：https://huilang.me/javascript-charm-2/

“js学习笔记-初探JavaScript魅力 – 2” 有 6 条评论

  1. rootspring说道：
    2013 年 10 月 11 日 下午 10:51

    继续收藏，继续学习！

    回复
  2. 社新社说道：
    2013 年 10 月 16 日 上午 12:49

    博主好厉害！

    回复
  3. 陈运江说道：
    2014 年 7 月 14 日 下午 3:54

    膜拜

    回复

回复本文

您的电子邮箱地址不会被公开。 必填项已用 * 标注

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif