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 {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>