js 系列(2) Dom 事件 操作

Posted on Posted in js

获取元素

  • document.getElementById()
  • document.getElementsByTagName()
<html>
<head>
<title>Index Page</title>
<meta charset="utf-8">
</head>

<body>
<div id="box">内容</div> 
</body>
</html>
<script>
    // document.title = "获取元素";
    // alert(document.title);

    //获取div元素
    var box = document.getElementById("box");
    box.onclick = function(){
        box.style.border = "10px solid #0f0";
        box.style.backgroundColor = "#0f0";
    }
</script>

操作html

  • getAttribute()
  • setAttribute()
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>体验DOM</title>
    <style>
        div,p{
            width: 100px;
            height: 100px;
            background: #f00;
        }
    </style>
</head>
<body>
    <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="图片" style="border:2px solid #f00;" class="tupian" id="image" kaola="bianxing" />
    <script>
        // 获得元素
        var oImg = document.getElementById("image");
        //获得img标签的src属性
        console.log(oImg.src);
        console.log(oImg.id);
        console.log(oImg.alt);
        console.log(oImg.alt);
        //通过点语法得到相关属性,等号赋新值
        // oImg.src = "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white.png";
        // //不要去更改id属性,id是只读。
        // console.log(oImg.getAttribute("src"));   //得到的就是属性值的字符串
        // console.log(oImg.getAttribute("alt"));   //得到的就是属性值的字符串
        // oImg.setAttribute("src","images/kaola.jpg");


        //自定义属性
        // oImg.setAttribute("kaola","yuanxing");
        // console.log(oImg.kaola);
        // console.log(oImg.getAttribute("kaola"));

        //更改一些属性名的写法,只限于点语法
        // console.log(oImg.class);
        // console.log(oImg.className);
        // console.log(oImg.getAttribute("className"));
        // console.log(oImg.getAttribute("class"));

        //复合属性的驼峰命名
        //console.log(oImg.style.border-color);
        console.log(typeof oImg.style)
        console.log(typeof oImg.getAttribute("style"))
        // console.log(oImg.style.borderColor);
        // console.log(oImg.getAttribute("style"));

    </script>
</body>
</html>

操作css

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>体验DOM</title>
    <style>
        div,p{
            width: 100px;
            height: 100px;
            background: #f00;
        }
        img{
            width: 300px;
        }
    </style>
</head>
<body>
    <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="百度" style="border:2px solid #f00;" class="tupian" id="image" kaola="bianxing" />
    <div id="box">这是一个div</div>
    <input type="text" value="这是表单元素的内容" id="txt" />
    <script>
        // 获得元素
        var oImg = document.getElementById("image");
        var oBox = document.getElementById("box");
        var oTxt = document.getElementById("txt");
        //点语法得到样式都是行内样式,更改的也是行内样式
        // console.log(oImg.style.width);
        // console.log(oImg.style.border);

        //更改样式
        oImg.style.height = "400px";
        oImg.style.borderColor = "#00f";
        console.log(oBox.innerHTML);
        console.log(oTxt.value);
    </script>
</body>
</html>

事件

  • onclick 单击事件
  • ondblclick 双击事件
  • onmouseover 鼠标移上事件
  • onmouseout 鼠标移出事件
  • onmousedown 鼠标按下事件
  • onmouseup 鼠标弹起事件
  • onfocus 获得焦点事件
  • onblur 失去焦点事件
  • onload 加载事件
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>体验DOM</title>
    <script>
        // 只有页面全部加载完了才会触发window.onload
        window.onload = function(){
            //获取元素
            var oImg = document.getElementById("image");
            var oTxt = document.getElementById("txt");
            //绑定鼠标移上的效果,变图片
            oImg.onmouseover = function(){
                oImg.src = "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white.png";
            };
            //鼠标移出效果,一般与鼠标移上成对出现
            oImg.onmouseout = function(){
                oImg.src = "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white.png";
            };

    
            //鼠标单击事件
            oImg.onclick = function(){
                oImg.style.width = "300px";
            };
    
            //鼠标双击事件
            oImg.ondblclick = function(){
                oImg.style.width = "300px";
            };
    
            //得焦点事件,输入框清空
            oTxt.onfocus = function(){
                oTxt.value = "abc";
            };
            oTxt.onblur = function(){
                oImg.src = "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white.png";
            };
    
            //onload加载,图片加载完之后,弹出一句话,加载完了
            oImg.onload = function(){
                alert("加载完毕");
            };
        }
    </script>
</head>
<body>
    <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="百度"  id="image" />
    <div id="box">这是一个div</div>
    <input type="text" value="这是表单元素的内容" id="txt" />
    
</body>
</html>

eg1:鼠标移进移出

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>体验DOM</title>
    <style>
        .box{
            width: 160px;
            height: 170px;
            background: url(images/jd1.png) no-repeat;
        }
    </style>
</head>
<body>
    <div class="box" id="box"></div>
    <script>
        //获取元素
        var oBox = document.getElementById("box");
        //添加鼠标移上和移出事件
        oBox.onmouseover = function(){
            oBox.style.backgroundImage = "url(images/jd2.png)";
        };
        oBox.onmouseout = function(){
            oBox.style.backgroundImage = "url(images/jd1.png)";
        };
    </script>
</body>
</html>

eg2:鼠标按下抬起

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>体验DOM</title>
    <style>
        .btn{
            width: 200px;
            height: 80px;
            background: skyblue;
            line-height: 80px;
            text-align: center;
            font-family: "微软雅黑";
            font-size: 20px;
            outline: none;
        }
    </style>
</head>
<body>
    <button class="btn" id="btn">按钮</button>
    <script>
        //获取元素
        var oBtn = document.getElementById("btn");
        //添加鼠标按下和弹起事件
        oBtn.onmousedown = function(){
            oBtn.style.backgroundColor = "pink";
        };
        oBtn.onmouseup = function(){
            oBtn.style.backgroundColor = "skyblue";
        };
    </script>
</body>
</html>

eg3:手动点击轮播图

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>体验DOM</title>
    
</head>
<body>
    <input type="button" value="上一张" id="leftbtn" />
    <img src="images/lunbo/1.jpg" alt="" width="400" id="image" />
    <input type="button" value="下一张" id="rightbtn" />
    <script>
        var image = document.getElementById("image");
        var leftbtn = document.getElementById("leftbtn");
        var rightbtn = document.getElementById("rightbtn");

        var index = 1;
        leftbtn.onclick = function(){
            index--;
            if(index < 1){
                index = 5;
            }
            image.src = "images/lunbo/" + index +".jpg";
        };
        rightbtn.onclick = function(){
            index++;
            if(index > 5){
                index = 1;
            }
            image.src = "images/lunbo/" + index +".jpg";
        };
    </script>
</body>
</html>

getElementsByTagName

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<script>
    //通过p标签获取元素,查找所有页面上的p标签,得到的是所有标签元素对象组成的数组。
    var ps = document.getElementsByTagName("p");
    console.log(ps);
    console.log(typeof ps);
    console.log(ps[0]);
    console.log(ps.innerHTML);
    console.log(ps[0].innerHTML);
    // 得到里面的元素,可以遍历数组
    //要看得到的元素内部的html内容
    //遍历对象数组,得到每一个元素对象,打点调用属性和方法
    for(var i = 0 ; i < ps.length ; i++){
        console.log(ps[i].innerHTML);
    }
</script>

批量添加事件

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 500px;
            height: 100px;
            border: 1px solid #000;
            background: #ccc;
        }       
        div p{
            float: left;
            width: 100px;
            height: 100px;
            margin-right: 10px;
            background: skyblue;
        }
    </style>
</head>
<body>  
    <div class="box1" id="box1">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </div>
    <div class="box2" id="box2">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </div>
    <script>
        // 选取第一个盒子的所有p
        var box1 = document.getElementById("box1");
        var ps = box1.getElementsByTagName("p");
        
        //批量添加,for循环
        //闭包对函数内部语句的影响
        // for(var i = 0 ; i < ps.length ; i++){
        //  //用IIFE解决闭包问题
        //  (function(a){
        //      ps[a].onclick = function(){
        //          ps[a].style.background = "yellowgreen";
        //          // console.log(ps[i].innerHTML);
        //      };  
        //  })(i);
            
        // }

        //用自定义属性和事件函数内部的this来解决闭包问题
        for(var i = 0 ; i < ps.length ; i++){
            //自定义一个属性存储下标
            ps[i].index = i;
            //绑定事件
            ps[i].onclick = function(){
                //谁触发事件,它就有一个this指向他自身,this本身就是这个对象
                //this.index的值就是触发的这个对象的index。
                ps[this.index].style.background = "yellowgreen";
            }
        }
    </script>
</body>
</html>

批量控制多选框

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            margin: 100px;
        }
    </style>
</head>
<body>
    <div id="box">
        <p>
            <input type="checkbox" name="hobby" id="hob1"/> 
            <label for="hob1">学习</label>
        </p>
        <p>
            <input type="checkbox" name="hobby" id="hob2"/> 
            <label for="hob2">吃饭</label>
        </p>
        <p>
            <input type="checkbox" name="hobby" id="hob3"/> 
            <label for="hob3">睡觉</label>
        </p>
        <p>
            <input type="checkbox" name="hobby" id="hob4"/> 
            <label for="hob4">打考拉</label>
        </p>
        <p>
            <input type="checkbox" name="hobby" id="hob5"/> 
            <label for="hob5">书法</label>
        </p>
        <p>
            <input type="checkbox" name="hobby" id="hob6"/> 
            <label for="hob6">篮球</label>
        </p>
    </div>
    
    <div>
        <input type="button" value="全选" id="all" />
        <!-- <input type="button" value="全不选" id="none" /> -->
    </div>
    <script>
        //选中所有input标签
        var checks = document.getElementById("box").getElementsByTagName("input");
        var all = document.getElementById("all");
        // var none = document.getElementById("none");
        //信号量方法
        //如果信号量为1,表示我要全选,0表示全不选
        var sema = 1;
        var str = "";
        //添加点击事件
        all.onclick = function(){
            //判断信号量是谁,如果是1,表示全选,str变成checked选中,信号量要改为0,value要变成全不选
            //如果是1,str变成checked选中,如果不是变成“”
            str = sema == 1 ? "checked" : "";
            //信号量更改
            sema = sema == 1 ? 0 : 1;
            //改按钮的value
            all.value = sema == 0 ? "全不选" : "全选";
            //调用变动函数
            choose();
        }
        //变动函数
        function choose(){
            for(var i = 0 ; i < checks.length ; i++ ){
                checks[i].checked = str;
            }
        }
        // //给all这个元素添加点击事件
        // all.onclick = function(){
        //  //判断all的value值如果是全选,将前面全部选中,将自己的value改成全不选
        //  // 如果是全不选,将前面全部取消选择,将自己改成全选
        //  if(all.value == "全选"){
        //      //全部选中
        //      for(var i = 0 ; i < checks.length ; i++ ){
        //          checks[i].checked = "checked";
        //      }
        //      // value改为全不选
        //      all.value = "全不选";
        //  }else{
        //      //全部不选中
        //      for(var i = 0 ; i < checks.length ; i++ ){
        //          checks[i].checked = "";
        //      }
        //      // value改为全选
        //      all.value = "全选";
        //  }
        // };
        //批量全选
        // all.onclick = function(){
        //  //遍历每一个多选框,添加checked属性
        //  for(var i = 0 ; i < checks.length ; i++ ){
        //      checks[i].checked = "checked";
        //  }
        // };
        // none.onclick = function(){
        //  //遍历每一个多选框,更改checked属性
        //  for(var i = 0 ; i < checks.length ; i++ ){
        //      checks[i].checked = "";
        //  }
        // }

    </script>
</body>
</html>

对应控制

用一个元素去控制另外一个元素的变动。需要找到之间的关系。一般找数组下标

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 500px;
            height: 100px;
            border: 1px solid #000;
            background: #ccc;
        }       
        div p{
            float: left;
            width: 100px;
            height: 100px;
            margin-right: 10px;
            background: skyblue;
        }
    </style>
</head>
<body>
    
    <div class="box1" id="box1">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <div class="box2" id="box2">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <script>
        //获取所有元素
        var ps1 = document.getElementById("box1").getElementsByTagName("p");
        var ps2 = document.getElementById("box2").getElementsByTagName("p");

        //批量给PS1里的元素加事件
        for(var i = 0 ; i < ps1.length ; i++){
            //自定义属性存储下标
            ps1[i].index = i;
            ps1[i].onclick = function(){
                ps2[this.index].style.background = "yellowgreen";
            }
        }
    </script>
</body>
</html>

排他控制

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 500px;
            height: 100px;
            border: 1px solid #000;
            background: #ccc;
        }       
        div p{
            float: left;
            width: 100px;
            height: 100px;
            margin-right: 10px;
            background: skyblue;
        }
    </style>
</head>
<body>
    
    <div class="box1" id="box1">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <div class="box2" id="box2">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <script>
        //给PS1添加事件,点击的元素变颜色,其他的是默认,对应ps2里其他p元素默认,对应的元素变色。
        //获取所有元素
        var ps1 = document.getElementById("box1").getElementsByTagName("p");
        var ps2 = document.getElementById("box2").getElementsByTagName("p");

        //批量给PS1里的元素加事件
        for(var i = 0 ; i < ps1.length ; i++){
            //自定义属性存储下标
            ps1[i].index = i;
            ps1[i].onclick = function(){
                //先将所有元素回归默认样式,给对应的元素再添加单独样式
                //排他操作
                for(var j = 0 ; j < ps1.length ; j++){
                    ps1[j].style.background = "skyblue";
                    ps2[j].style.background = "skyblue";
                }
                
                //给这个元素和对应的p加特殊样式
                ps1[this.index].style.background = "yellowgreen";
                ps2[this.index].style.background = "pink";
            }
        }
    </script>
</body>
</html>

轮播图

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 880px;
            height: 550px;
            margin: 50px auto;
            border: 1px solid #000;
            position: relative;
        }
        ul{
            list-style: none;
        }
        ul li{
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        ul li.current{
            display: block;
        }
        img{
            display: block;
        }
        .btn span{
            position: absolute;
            top: 50%;
            width : 55px;
            height: 55px;
            margin-top: -27.5px;
            background: url(images/slide-btnL.png);
        }
        .btn .left{
            left: 30px;
        }
        .btn .right{
            right: 30px;
            background: url(images/slide-btnR.png);
        }
        ol{
            list-style: none;
            width: 240px;
            height: 20px;
            position: absolute;
            left: 50%;
            bottom: 40px;
            margin-left: -120px;
        }
        ol li{
            float: left;
            width: 20px;
            height: 20px;
            background: rgba(255,255,255,0.4);
            border-radius: 50%;
            margin-right: 20px;
        }
        ol li.current{
            background: rgba(255,255,255,1);
        }
    </style>
    <script>
        window.onload = function(){
            //获得所有的元素
            var ulLis = document.getElementById("pic").getElementsByTagName("li");
            var olLis = document.getElementById("xiabiao").getElementsByTagName("li");
            var leftbtn = document.getElementById("leftbtn");
            var rightbtn = document.getElementById("rightbtn");

            //信号量,ulLis数组的下标
            var index = 0;
            // 给左按钮绑定事件
            leftbtn.onclick = function(){
                index--;
                //后验收
                if(index < 0){
                    index = ulLis.length - 1;
                }
                change();
            }
            // 给右按钮绑定事件
            rightbtn.onclick = function(){
                index++;
                //后验收
                if(index > ulLis.length - 1){
                    index = 0;
                }
                change();
            }
            //批量给ol里的里加点击事件
            for(var i = 0 ; i < olLis.length ; i++){
                //自定义属性
                olLis[i].idx = i;
                olLis[i].onclick = function(){
                    // 找olLis的下标与全局变量index的关系
                    index = this.idx;
                    change();
                };

            }


            //定义一个都使用的函数change
            function change(){
                //排他思想,所有情况默认,选谁谁显示
                for(var i = 0 ; i < ulLis.length ; i++){
                    ulLis[i].className = "";
                    olLis[i].className = "";
                }
                // index是谁就给谁加current类
                ulLis[index].className = "current";
                olLis[index].className = "current";
            }
        };
    </script>
</head>
<body>
    <div class="box">
        <ul id="pic">
            <li class="current"><img src="images/c1.jpg" alt="" /></li>
            <li><img src="images/c2.jpg" alt="" /></li>
            <li><img src="images/c3.jpg" alt="" /></li>
            <li><img src="images/c4.jpg" alt="" /></li>
            <li><img src="images/c5.jpg" alt="" /></li>
            <li><img src="images/c6.jpg" alt="" /></li>
        </ul>
        <div class="btn">
            <span class="left" id="leftbtn"></span>
            <span class="right" id="rightbtn"></span>
        </div>
        <ol id="xiabiao">
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
</body>
</html>

tab 切换格

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>简易tab栏</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .tab{
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 100px auto;
            overflow: hidden;
        }
        .tab .tab_top{
            overflow: hidden;
        }
        .tab .tab_top span{
            float: left;
            width: 99px;
            height: 40px;
            color: #333;
            background: #ddd;
            font-size: 18px;
            font-family: "微软雅黑";
            text-align: center;
            line-height: 40px;
            border-left: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }
        .tab .tab_top span.news{
            width: 100px;
            border-left: 0;
        }
        .tab .tab_top span.current{
            background: none;
            border-bottom: 0;
            font-weight: bold;
        }
        .tab .tab_bottom{
            overflow: hidden;
        }
        .tab .tab_bottom div{
            width: 300px;
            height: 259px;
            display: none;
        }
        .tab .tab_bottom div.current{
            display: block;
        }
    </style>
</head>
<body>
    <div class="tab">
        <div class="tab_top" id="boxtop">
            <span class="current news">新闻</span>
            <span>时尚</span>
            <span>运动</span>
        </div>
        <div class="tab_bottom" id="boxbottom">
            <div class="current">新闻</div>
            <div>时尚</div>
            <div>运动</div>
        </div>
    </div>
    <script>
        //获取所有元素
        var spans = document.getElementById("boxtop").getElementsByTagName("span");
        var divs = document.getElementById("boxbottom").getElementsByTagName("div");

        //批量给span添加鼠标移上事件
        for(var i = 0 ; i < spans.length ; i++){
            //自定义属性存下标
            spans[i].index = i;
            spans[i].onmouseover = function(){
                //排他,第一步清空
                //特殊情况,给span的第一个清空后,把news类加回来
                for(var i = 0 ; i < spans.length ; i++){
                    spans[i].className = "";
                    spans[0].className = "news";
                    divs[i].className = "";
                }
                //移上谁谁加current,对应的div也加current
                spans[this.index].className += " current";
                divs[this.index].className = "current";
            }
        }
        
    </script>
</body>
</html>
» 转载请注明来源:若我若鱼 » js 系列(2) Dom 事件 操作

Leave a Reply

Your email address will not be published. Required fields are marked *

five × three =