常熟人家blog头像

JavaScript事件_dom对象_表单

时间:16-04-21 栏目:javascript 楼主:鲁智深 评论:0 点击: 1,771 次

JavaScript中的事件

1、onclick = "";//单点触发

2、ondblclick = "";//双击触发

3、onchange = "";//值发生改变是触发

4、onfocus = "";//获得焦点是触发

5、onblur = "";//失去焦点是触发

6、onmouserover= "";//鼠标进入某个元素时触发

7、onmouseout = "";//鼠标离开某个元素触发

8、onload="";//页面加载完的时候执行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js事件</title>

</head>
<body>
     <input type="button" value="单击" onclick="fun1()"/>
     <input type="button" value="双击" ondblclick="fun2()"/>
     <select onchange="fun3()">
         <option>111</option>
         <option>222</option>
     </select>
     <input type="text" onfocus="fun4()" onblur="fun5()" value="请输入用户名" id="usename"/>
     <p id="status" onmouseover="fun6()" onmouseout="fun7()">鼠标你过来</p>
</body>
     <script>
         function fun1(){
             alert("我是单击事件");
         }
         
         function fun2(){
             alert("我是双击事件");
         }
         function fun3(){
             alert("我是改变事件");
         }
         function fun4(){
             //alert("获得焦点");
             document.getElementById("usename").value="";
         }
         function fun5(){
             //alert("失去焦点");
             document.getElementById("usename").value="请输入用户名";
         }
         function fun6(){
             document.getElementById("status").innerHTML = "鼠标已经放上来";
         }
         function fun7(){
             document.getElementById("status").innerHTML = "鼠标已经移开了";
         }
     </script>
</html>

dom对象

childNotes //获取所有子节点

children //获取所有子节点,并排除空节点

firstChild //第一个子节点

lastChild //最后一个子节点

previousSibling //上一个兄弟节点

nextSibling //下一个兄弟节点

nodeType;//节点类型(1:标签2:文本节点)

className;//获取class样式名称

方法:

getAttribute(属性名);//获取节点对象的属性值

setAttribute(属性名,属性值);//css属性名是什么这里就是什么

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
     <div class="index">
         测试 css
     </div>
     <input type="button" value="fun1" onclick="fun1()";
</body>
     <script>
         //跟换div样式
         function fun1(){
             var d = document.getElementsByTagName("div")[0];
             //alert(d.className);
             //d.className = "index1";
             //d.style.backgroundColor="blue";
             //alert(d.getAttribute("class"));
             d.setAttribute("style","background-color:blue;");
         }
     </script>
</html>

form表单:

获取form表单节点

1、document.getElementById(id);

2、document.forms//所有form节点对象,以数组形式返回

3、document.表单name

通过js设置表单属性

action

method

name

submit()//自动提交

事件方法:onsubmit

提交前对form表单做验证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<body>
     <form id="fm1" name="fmname" action="login.php" method="post" onsubmit="return sub()">
         用户名:<input id="username" type="text" name="username">
         <input type="submit" value="提交">
     </form>
</body>
     <script>
     /*
     //给表单添加属性
         var ob = document.getElementById("fm1");//取表单节点方法一
         var ob1 = document.forms;//取表单节点方法二
         var ob2 = document.fmname;//取表单节点方法三
         //alert(ob2);
         ob2.action = "login.php";
         ob2.method = "post";
         //ob2.submit();
    */

    //提交前对form表单做验证
     function sub(){
         var intp = document.getElementById("username");
         if(intp.value.length==0){
             alert("你的用户名是透明的");
             return false;
         }else{
             return true;
         }
     }
     </script>
</html>

收藏本页

    声明:  如有关于wordpress代码问题请留言即可...!

发表评论

------====== 本页公告 ======------
   建站程序也叫开源程序,建站程序都是免费的,现在国内比较流行的建站程序有个人博客(wordpress,zblog),门户(dedecms),商城(shopex),论坛(discuz!)本博就是用wordpress作为基础搭建起来的网站。