javascript学习指南_JavaScript事件之dom对象表单操作方法

时间:2020-10-27  来源:Dom教程  阅读:

JavaScript中的事件

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

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

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

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

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

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

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

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





js事件



    
    
    
    
    

鼠标你过来



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

dom对象

childNotes //获取所有子节点

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

firstChild //第一个子节点

lastChild //最后一个子节点

previousSibling //上一个兄弟节点

nextSibling //下一个兄弟节点

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

className;//获取class样式名称

方法:

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

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


    
         测试 css
    
    
     <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>

form表单:

获取form表单节点

1、document.getElementById(id);

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

3、document.表单name

通过js设置表单属性
action

method

name

submit()//自动提交

事件方法:onsubmit

提交前对form表单做验证


    


         用户名:
        
    


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

javascript学习指南_JavaScript事件之dom对象表单操作方法

http://m.bbyears.com/wangyezhizuo/107213.html

推荐访问:
相关阅读 猜你喜欢
本类排行 本类最新