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

你可能感兴趣的:(js)