DOM对象属性

 

事件

 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.οnlοad=function(){
        var nodeSmall=document.getElementsByClassName("nodeSmall")[0]; //类名取值
        var div=document.getElementsByTagName("div")[1];//标签取值
        console.log(div.className)//获取它的 类名 字符串

        //绑定事件 调用事件函数，不要写括号，只写函数名
        nodeSmall.οnmοuseοver=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" οnclick="fu(this)"><br><br>
<script>
    function fu(aa){
        //这里的this window 标签行内调用function的时候，是先通过
        //window调用的function
        console.log(this);
        //只有传递的this才指的是标签本身
        console.log(aa)

 

转载于:https://www.cnblogs.com/wdz1/p/7491113.html