码迷,mamicode.com
首页 > 其他好文 > 详细

DOM对象属性

时间:2017-09-07 19:34:06      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:思路   get   显示   png   判断   一个   操作   二维   body   

 

事件

 onmouseover 鼠标以上事件
 onmouseout    鼠标离开事件
 onclock 鼠标点击事件 
onfocus 获取焦点
onblur 失去焦点
oninput  输入事件
页面直接获取光标:事件源 . focus()
 
小知识
1、replace("被替代的值","替换值") 方法用于在字符串中。用一些字符替换另一些字符
 
表单属性
 
1、type、value、checked、selected、disabled
2、禁用文本框
    A) disabled 禁用文本框
    B) disabled true类型的值都可以用
inp.disabled=true “aaa”;  inp.disabled=false;

 

案例

  //显示 隐藏二维码
    window.onload=function(){
        var nodeSmall=document.getElementsByClassName("nodeSmall")[0]; //类名取值
        var div=document.getElementsByTagName("div")[1];//标签取值
        console.log(div.className)//获取它的 类名 字符串

        //绑定事件 调用事件函数,不要写括号,只写函数名
        nodeSmall.onmouseover=fu1;
        nodeSmall.onmouseout=fu2;
        function fu1(){
            //了解 字符串操作,吧字符串中的hide替换成show
            /*div.className="erweima  show"*/
            div.className=div.className.replace("hide","show");
        }
        function fu2() {
          /*  div.className="erweima hide"*/
            div.className=div.className.replace("show","hide");
        }

    };

 

  //获取失去焦点
    var inp1=document.getElementById("inp1");
    inp1.onfocus=function (){
        if(this.value==="我是京东"){
            this.style.color="#000";
            this.value=""
        }
    };
    inp1.onblur =function (){
        if(this.value === ""){
            this.style.color="#ccc";
            inp1.value = "我是京东";
        }

    }

 

//需求1:点击上面的的input,下面全选或者反选。
    //思路:获取了上面的input按钮,只需要判断,checked属性是true还是false,如果是true,
    下面的全部变成true;false同理。
    var tioInp=document.getElementById("theadInp");
    var tbo=document.getElementById("tbody");
    var inpArr=tbo.getElementsByTagName("input");


    tioInp.onclick=function(){
     //费劲版
    /* if(tioInp.checked===true){
         for(var i=0; i<inpArr.length; i++ ){
             inpArr[i].checked=true;
         }
     }else{
         for(var i=0; i<inpArr.length; i++ ){
             inpArr[i].checked=true;
         }
     }*/
        //优化版
        //被点击的input按钮的checked属性值,应该直接作为下面的所有的input按钮的checked属性值
        for(var i=0; i<inpArr.length; i++ ){
            inpArr[i].checked=this.checked;
        }

    }
    
    //需求2:点击下面的的input,如果下面的全部选定了,上面的全选,否则相反。
    //思路:为下面的每一个input绑定事件,每点击一次都判断所有的按钮
    // checked属性值是否全部都是true,如果有一个是false,
    // 那么上面的input的checked属性也是false;都是true,topInp的checked就是true;
    for(var i=0; i<inpArr.length; i++){
        inpArr[i].onclick=function () {
            var bool=true;//开辟原则
            //检测每一个input的checked属性值。
            for(var j=0; j<inpArr.length; j++){
               if(inpArr[j].checked===false){
                    bool=false;
               }
               tioInp.checked=bool;
           }
        }   
    }

技术分享

 

用户名:<input type="text" onclick="fu(this)"><br><br>
<script>
    function fu(aa){
        //这里的this window 标签行内调用function的时候,是先通过
        //window调用的function
        console.log(this);
        //只有传递的this才指的是标签本身
        console.log(aa)

 

DOM对象属性

标签:思路   get   显示   png   判断   一个   操作   二维   body   

原文地址:http://www.cnblogs.com/wdz1/p/7491113.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!