zoukankan      html  css  js  c++  java
  • js之DOM和事件

    DOM

    查找

    • 直接查找

    • var obj = document.getElementById('i1')

    • 间接查找

    文件内容操作:
                innerText    仅文本
                innerHTML    全内容
                value
                    input    value获取当前标签中的值
                    select   获取选中的value值(selectedIndex)
                    textarea value获取当前标签中的值
                
                搜索框的示例
    

    操作:

    • 样式操作:

    •   		className
                classList
                    classList.add
                    classList.remove
                   
                   
                obj.style.fontSize = '16px';
                obj.style.backgroundColor = 'red';
                obj.style.color = "red"
      
    • 属性操作:

    •           attributes
                getAttribute
                removeAttribute
      
    • 创建标签,并添加到HTML中:

                a. 字符串形式
                
                b. 对象的方式
                    document.createElement('div')
    
    • 提交表单

                任何标签通过DOM都可提交表单
                
                document.geElementById('form').submit()
      
    • 其他:

    •           console.log()
                alert
                var v = confirm(信息)  v:true false
                
                location.href
                location.href = ""  # 重定向,跳转
                location.reload()   # 页面刷新
                location.href = location.href   < === > location.reload()
                
                
                var o1 = setInterval(function(){}, 5000)
                clearInterval(o1);
                
                var o2 = setTimeout(function(){}, 50000);
                clearTimeout(o2);
                
                var obj = setInterval(function(){
                    
                }, 5000)
                
                clearInterval(obj);
      

    事件

    onclick,onblur,onfocus
        
        行为  样式  结构 相分离的页面?
        js    css   html  
        
        绑定事件两种方式:
            a. 直接标签绑定 onclick='xxx()'  onfocus
            b. 先获取Dom对象,然后进行绑定
                document.getElementById('xx').onclick
                document.getElementById('xx').onfocus
                
        this,当前触发事件的标签
            a. 第一种绑定方式
                <input id='i1' type='button' onclick='ClickOn(this)'>
                
                function ClickOn(self){
                    // self 当前点击的标签
                    
                }
            b. 第二种绑定方式
                <input id='i1' type='button' >
                document.getElementById('i1').onclick = function(){
                
                    // this 代指当前点击的标签
                }
            
                
        作用域示例:
                var myTrs = document.getElementsByTagName("tr");
                var len = myTrs.length;
                for(var i=0;i<len;i++){
                    // i=0,i=1,i=2
                    myTrs[i].onmouseover = function(){
                         this.style.backgroundColor = "red";
                    };
    
                }
  • 相关阅读:
    学习笔记—查找
    水晶报表图表制作问题
    Chrome对最小字体的限制
    Devexpress的ASPxDateEdit控件设置其‘today’ 为客户端当前日期
    水晶报表多表数据源
    System.Web.HttpValueCollection.ThrowIfMaxHttpCollectionKeysExceeded
    利用水晶报表制作甘特图
    水晶报表打印时最后多打印一空白页
    day3学习
    Python高级自动化培训day1
  • 原文地址:https://www.cnblogs.com/wspblog/p/6102299.html
Copyright © 2011-2022 走看看