JavaScript自学笔记一

1.onload和onunload是打开与关闭页面事件,可以用来出cookie。

 1 <!DOCTYPE html>
 2 <html>
 3 <body onload="checkCookies()"> //打开body页面的时候触发函数
 4  
 5 <script>
 6 function checkCookies()
 7 {
 8 if (navigator.cookieEnabled==true) //检查cookie并弹窗提示
 9     {
10     alert("已启用 cookie")
11     }
12 else
13     {
14     alert("未启用 cookie")
15     }
16 }
17 </script>
18  
19 <p>提示框会告诉你,浏览器是否已启用 cookie。</p>
20 </body>
21 </html>

2.onchange是在改变时触发。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <script>
 6 function myFunction()
 7 {
 8 var x=document.getElementByIdx_x("fname");
 9 x.value=x.value.toUpperCase(); //toUpperCase大写转换
10 }
11 </script>
12 </head>
13 <body>
14  
15 请输入英文字符:<input type="text" id="fname" onchange="myFunction()">
16 <p>当您离开输入字段时,会触发将输入文本转换为大写的函数。</p>
17  
18 </body>
19 </html>

3.onmouseover和onmouseout,鼠标移入和移除时触发。

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4  
 5 <!-- this表示当前元素,所以在Function里就不必使用getElementById来获取元素了。-->
 6 <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
 7  
 8 <script>
 9 function mOver(obj)
10 {
11 obj.innerHTML="谢谢"
12 }
13  
14 function mOut(obj)
15 {
16 obj.innerHTML="把鼠标移到上面"
17 }
18 </script>
19  
20 </body>
21 </html>

4.onmousedown鼠标按下,onmouseup鼠标弹起,onclick鼠标点击。

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4  
 5 <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>
 6 <br>
 7 <div onClick="mClick(this)" style="background-color:green;color:#ffffff;90px;height:20px;padding:40px;font-size:12px;">用onClick来触发函数,实现变色</div>
 8 <script>
 9 function mDown(obj)
10 {
11 obj.style.backgroundColor="#1ec5e5";
12 obj.innerHTML="请释放鼠标按钮";
13 }
14  
15 function mUp(obj)
16 {
17 obj.style.backgroundColor="green";
18 obj.innerHTML="请按下鼠标按钮";
19 }
20 //用onClick来实现变色,第1次学习的灯泡就是用这个onclick来触发实现。
21 function mClick(obj)
22 {
23 if (obj.style.backgroundColor.match("green"))
24     {
25      obj.style.backgroundColor="red";
26      obj.innerHTML="用onClick来触发函数,实现变色";
27     }
28     else
29     {
30      obj.style.backgroundColor="green";
31      obj.innerHTML="用onClick来触发函数,实现变色";
32     }
33 }
34 </script>
35  
36 </body>
37 </html>
原文地址:https://www.cnblogs.com/gmblog/p/3826455.html