JS笔记1

2024-04-27 14:24:15

字体：大中小

来源：转载

供稿：网友

JS笔记1

1.鼠标的移入与移出

(原理)

当鼠标移入的时候,把Div1的style的display变成block.

当鼠标移出的时候,把Div1的style的display变成none.

移入 onmouSEOver 移出 onmouseout

2.获取元素

document.getElementById('ID')

 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=utf-8" /> 5 <title>无标题文档</title> 6 <style type="text/CSS"> 7 #div1 {width:100px; height:50px; background:#FF9900; border:1px solid #FFFF66; display:none;} 8 </style> 9 </head>10 11 <body>12 <label onmousemove="document.getElementById('div1').style.display='block';" 13        onmouseout="document.getElementById('div1').style.display='none';">14 <input type="checkbox"  />自动登陆</label>15 <div id="div1">16 请不要在网吧.....17 </div>18 </body>19 </html>

3.class的使用

在JS中,class一律写为className

 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=utf-8" /> 5 <title>无标题文档</title> 6 <style> 7 div {width:100px; height:100px; background:red;} 8 .box {width:200px; height:200px; background:green;} 9 </style>10 </head>11 12 <body>13 <div id="div1" onmousemove="document.getElementById('div1').className='box';" 14 onmouseout="document.getElementById('div1').className=' ';"></div>15 </body>16 </html>

4.网页换肤

(原理)

准备几套css样式

调试好兼容性

在点击按钮时,改变herf值

5.点击onclick事件

 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=utf-8" /> 5 <title>无标题文档</title> 6 </head> 7  8 <body> 9 <input type="button" value="按钮" onclick="alert('zcvzxcvzx');" />10 </body>11 </html>

6.JS函数的定义和调用

 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=utf-8" /> 5 <title>无标题文档</title> 6 <script type="text/javascript"> 7 function show()        //定义 8 { 9     alert('abc');10 }11 12 show();                //调用13 </script>14 </head>15 16 <body>17 </body>18 </html>

7.改变DIV样式

 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=utf-8" /> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 #div1 { 8     width:200px; 9     height:200px;10     background:red;11 }12 </style>13 <script type="text/Javascript">14 function toGreen()15 {16     var oDiv=document.getElementById('div1');17     18     oDiv.style.width='300px';19     oDiv.style.height='300px';20     oDiv.style.background='green';21 }22 23 function toRed()24 {25     var oDiv=document.getElementById('div1');26     27     oDiv.style.width='200px';28     oDiv.style.height='200px';29     oDiv.style.background='red';30 }31 </script>32 </head>33 34 <body>35 <div id="div1" onmouseover="toGreen()" onmouseout="toRed()">36 </div>37 </body>38 </html>

8.if判断

if(条件){语句1}else{语句2}

 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=utf-8" /> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 #div1 {width:100px; height:200px; background:#CCC; display:none;} 8 </style> 9 <script type="text/javascript">10 function showHide()11 {12     var oDiv=document.getElementById('div1');13     14     if(oDiv.style.display=='block')15     {16         oDiv.style.display='none';17     }18     else19     {20         oDiv.style.display='block';21     }22 }23 </script>24 </head>25 26 <body>27 <input type="button" value="显示隐藏" onclick="showHide()" />28 <div id="div1">29 </div>30 </body>31 </html>

总结:

1.编写JS的流程

布局：HTML+CSS

属性：确定要修改哪些属性

事件：确定用户做哪些操作（产品设计）

编写JS：在事件中，用JS来修改页面元素的样式

2.任何标签都可以加ID，包括link

任何标签的任何属性，也都可以修改

HTML里怎么写，JS里就怎么写

3.为a链接添加JS <a href=“javascript:;”></a>

上一篇：ahjesus用forever管理nodejs服务

下一篇：浅谈 js 正则字面量与 new RegExp 执行效率