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

2013.10.08 分享 16031 人浏览 8 条留言

话说弄网站怎么能不会js呢,那么从今天开始,我也开始来学习了,看看我今天学到的内容吧。

我可以说这些都是我手打的吗...

第一个是最简单的-鼠标划过选框,显示提示内容,鼠标移出,提示内容消失。

  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <title>JS练习</title>    
  5.     <meta charset="UTF-8" />    
  6.     <style>#div1{display: none;}</style>    
  7. </head>    
  8. <body>    
  9.     <input type="checkbox" onmouseover="document.getElementById('div1').style.display='block';" onmouseout="document.getElementById('div1').style.display='none';"/>    
  10.     <div id="div1">    
  11.         这里是测试内容,鼠标滑过显示    
  12.     </div>    
  13. </body>    
  14. </html>    

遇到的问题:额,大小写能不能别写错啊!!!

第二个测试,多个style样式改变

  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <title>JS练习</title>    
  5.     <meta charset="UTF-8" />    
  6.     <style>#div1{width: 200px;height: 200px;background: red;}</style>    
  7. </head>    
  8. <body>    
  9.     <div id="div1" onmouseover="   
  10.     document.getElementById('div1').style.width='300px';   
  11.     document.getElementById('div1').style.height='300px';   
  12.     document.getElementById('div1').style.background='green';   
  13.     "    
  14.     onmouseout="   
  15.     document.getElementById('div1').style.width='200px';   
  16.     document.getElementById('div1').style.height='200px';   
  17.     document.getElementById('div1').style.background='red';   
  18.     ">    
  19.             
  20.     </div>    
  21. </body>    
  22. </html>    

第三个js练习,运用函数来调用js

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>JS练习</title>  
  5.     <meta charset="UTF-8" />  
  6.     <style>  
  7.         #div1{  
  8.             width: 200px;  
  9.             height: 200px;  
  10.             background: red;  
  11.             }  
  12.     </style>  
  13.     <script>  
  14.     function togreen(){  
  15.         document.getElementById('div1').style.width='300px';  
  16.         document.getElementById('div1').style.height='300px';  
  17.         document.getElementById('div1').style.background='green';  
  18.     }  
  19.     function tored(){  
  20.         document.getElementById('div1').style.width='200px';  
  21.         document.getElementById('div1').style.height='200px';  
  22.         document.getElementById('div1').style.background='red';  
  23.     }  
  24.     </script>  
  25. </head>  
  26. <body>  
  27.     <div id="div1" onmouseover="togreen()" onmouseout="tored()"><!-- 这里别漏了() -->  
  28.     </div>  
  29. </body>  
  30. </html>  

第四个练习,利用变量来精简代码

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>JS练习</title>  
  5.     <meta charset="UTF-8" />  
  6.     <style>  
  7.         #div1{  
  8.             width: 200px;  
  9.             height: 200px;  
  10.             background: red;  
  11.             }  
  12.     </style>  
  13.     <script>  
  14.     function togreen()  
  15.     {  
  16.         var oDiv=document.getElementById('div1');  
  17.         oDiv.style.width='300px';  
  18.         oDiv.style.height='300px';  
  19.         oDiv.style.background='green';  
  20.     }  
  21.     function tored()  
  22.     {  
  23.         var oDiv=document.getElementById('div1');  
  24.         oDiv.style.width='200px';  
  25.         oDiv.style.height='200px';  
  26.         oDiv.style.background='red';  
  27.     }  
  28.     </script>  
  29. </head>  
  30. <body>  
  31.     <div id="div1" onmouseover="togreen()" onmouseout="tored()">  
  32.     </div>  
  33. </body>  
  34. </html>  

第五个练习,点击切换css(说明了,任何标签都可以添加id,标签内任何属性都可以通过js来替换)

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>JS练习-更换herf里面的内容</title>  
  5.     <meta charset="UTF-8" />  
  6.     <link id="l1" rel="stylesheet" type="text/css" href="css1.css">  
  7.     <script>  
  8.     function skin1()  
  9.     {  
  10.         var oL=document.getElementById.('skin1');  
  11.         oL.href='css1.css';  
  12.     }  
  13.     function skin2()  
  14.     {  
  15.         var oL=document.getElementById.('skin2');  
  16.         oL.href='css2.css';  
  17.     }  
  18.     </script>  
  19. </head>  
  20. <body>  
  21.     <input type="button" value="skin1" onclick="skin1()">  
  22.     <input type="button" value="skin2" onclick="skin2()">  
  23. </body>  
  24. </html>  

好吧,下面的不文字介绍了

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>JS练习-更换herf里面的内容</title>  
  5.     <meta charset="UTF-8" />  
  6.     <script>  
  7.     function setText()  
  8.     {  
  9.         var oTxt=document.getElementById('text1');  
  10.         oTxt.value="文字2";  
  11.     }  
  12.     </script>  
  13. </head>  
  14. <body>  
  15.     <input id="text1" type="text" value="文字1"/>  
  16.     <input type="button" value="改文字" onclick="setText()">  
  17. </body>  
  18. </html>  

if判断+添加/移除class属性

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>JS练习-if判断加变色</title>  
  5.     <meta charset="UTF-8" />  
  6.     <style>  
  7.     #div1{height: 200px;width: 100px;border: 1px solid black;}  
  8.     .box{background: red}  
  9.     </style>  
  10.     <script>  
  11.     function turnRed()  
  12.     {  
  13.         var oDiv=document.getElementById('div1');  
  14.         if (oDiv.className=='box') {  
  15.             oDiv.className='';  
  16.         }  
  17.         else{  
  18.             oDiv.className='box';  
  19.         }  
  20.     }  
  21.     </script>  
  22. </head>  
  23. <body>  
  24.     <input type="button" value="变色" onclick="turnRed()"/>  
  25.     <div id="div1"></div>  
  26.     这里注意className的写法 以及判断语句==  
  27. </body>  
  28. </html>  

初探JavaScript魅力 - 1

JavaScript是什么

  1. 网页特效原理
    • 淘宝、新浪、百度
    • JavaScript就是修改样式
  2. 编写JS的流程布局:
    • HTML+CSS属性:确定要修改哪些属性事件:确定用户做哪些操作(产品设计)
    • 编写JS:在事件中,用JS来修改页面元素的样式

第一个JS特效——鼠标提示框

  1. 分析效果实现原理
    • 样式:Div的display
    • 事件:onmouseover、onmouseout
    • 动手编写此效果
  2. 特效基础
    • 事件驱动:onmouseover
    • 元素属性操作:obj.style.[……]
    • 特效实现原理概括:响应用户操作,对页面元素(标签)进行某种修改

初识函数

  1. 制作更复杂的效果(DIV的颜色、大小都变化)
    • 直接在事件内写代码会很乱引入fucntion()、函数的基本形式
    • 把JS从标签里放入到函数里,类似css里的class
    • 变量的使用——别名
  2. 定义和调用
    • 函数定义:只是告诉系统有这个函数,不会实际执行
    • 函数调用:真正执行函数里的代码
    • 关系和区别

getElementById

  1. 第一个JS兼容性问题
    • 在FF下直接使用ID存在问题
    • 引入document.getElementById()
    • document.getElementById在任何浏览器下均可使用
  2. 网页换肤
    • 土豆网“开灯、关灯”效果
    • 任何标签都可以加ID,包括link
    • 任何标签的任何属性,也都可以修改
    • HTML里怎么写,JS里就怎么写

if判断

  1. 点击按钮显示/隐藏Div (弹出菜单)
    • 特效实现过程及原理分析
    • if的基本形式
  2. 扩展
    • 为a链接添加JS
      1. <a href=“javascript:;”></a>  
    • className的使用

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

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

  1. rootspring说道:

    好东西,我也学习学习1

  2. 爱的回归线说道:

    好的,支持啊!灰狼越来越厉害了

  3. 诸葛小觉说道:

    哈~不错~~~~干吧碟~

  4. 野狼说道:

    看来我得多学习啊 要不然就落后了 其实 本来我就不会 ……

  5. xilouqingzhu说道:

    求教导,就指教,求帮助,各种求

  6. nvoxel说道:

    很久很久没弄主题了,也正是需要学习js最近也拿WP练手来着,学习学习~

回复本文

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

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