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 {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 {100px; height:100px; background:red;} 8 .box {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 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 {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 else 19 { 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>