DOM用法(二)

时间：2021-05-24 09:42:31 阅读：0 评论：0 收藏：0 [点我收藏+]

标签：fun use div ext etc hide 用户 padding contain

一、DOM 控制class

classList ：以数组形式,获取该节点元素所有的class样式

remove ：移除类

add 　　：添加类

contains：判断是否包含某个类选择器

toggle ：没有就添加.有则删无则加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控制class选择器</title>
    <style>
        .c1
        {width:400px;height:400px;border-radius: 400px;}
        .bg_red
        {background: red;}
        .bg_green
        {background: green;}


    </style>

</head>
<body>
    <button>点击</button>
    <div id="box" class="c1 bg_red bg_green"></div>
    <script>
        var div = document.getElementById("box")
        console.log(div)
        // 以数组形式,获取该节点元素所有的class样式
        console.log(div.classList)
        // remove 移除bg_green类选择器
        div.classList.remove("bg_green")
        // add 添加bg_green类选择器
        div.classList.add("bg_green")
        // 判断是否包含某个类选择器
        console.log(div.classList.contains("bg_green"))
        

        btn = document.querySelector("button")
        btn.onclick = function(){
            // 有这样class选择器就删除,没有就添加.有则删无则加;
            div.classList.toggle("bg_green")
        }

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

View Code

二、事件

2.1 onmouseover/onmouseout移入移出事件

onmouseover：鼠标移到某元素之上触发事件
onmouseout ：鼠标从某元素移开触发事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>onmouseover/onmouseout移入移出事件</title>
    <style>
        *
        {margin:0px;padding:0px;}
        #box
        {width:100px;height:100px;background: red;position:absolute;left:0px;}

    </style>
</head>
<body>
    <!-- https://www.w3school.com.cn/jsref/dom_obj_event.asp 事件手册-->
    <!-- 事件静态绑定 -->
    <button onclick="func()">点击</button>
    <div id="box" ></div>

    <script>
        var box = document.querySelector("#box")
        function func(){
            var left = parseInt(window.getComputedStyle(box).left)
            console.log(left , typeof(left))

            id = setInterval(function(){
                left += 1
                box.style.left = `${left}px`;
            },50)    

        }

        // 事件动态绑定
        // onmouseover 鼠标移到某元素之上触发事件
        box.onmouseover = function(){
            clearInterval(id)
        }

        // onmouseout 鼠标从某元素移开触发事件
        box.onmouseout = function(){
            func()
        }


    </script>

</body>
</html>

View Code

2.2 遮罩层/模态框效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遮罩层/模态框效果</title>
    <style>
        #box
        {
            width:100%;height:100%;
            background-color: black;
            position:fixed;top:0px;
            /* 设置透明度 */
            opacity: 0.7;
            display: none;
        }
        #content
        {
            border:solid 1px red;
            width:300px;
            height:300px;
            background-color: cornflowerblue;
            margin:15% auto ;
        }

        #close
        {cursor: pointer;}

    </style>
</head>
<body>
    <button id="login">点我</button>
    <div id="box">
        <div id="content">
            <div id="close">x</div>
            <img src="./quanquan.gif" alt="" width=100 >
        </div>
    </div>

    <script>
        var btn = document.querySelector("#login")
        var box = document.querySelector("#box")
        var close = document.querySelector("#close")
        btn.onclick = function(){
            box.style.display = "block"
        }
        close.onclick = function(){
            box.style.display = "none"
        }

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

2.3 onfocus/onblur聚焦事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>onfocus/onblur聚焦事件</title>
</head>
<body>
    <input type="text" value="请输入内容" class="ceshi" >
    <script>
        var input = document.querySelector(".ceshi")
        console.log(input)

        // onfocus元素获得焦点触发事件
        input.onfocus = function(){
            console.log(1)
            input.value = ""
        }

        // onblur元素失去焦点触发事件
        input.onblur = function(){
            if(!input.value){
                input.value = "请输入内容"
            }            
        }

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

2.4 onchange 事件

省市区三级联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>onchange 省市区三级联动</title>
</head>
<body>
    <!-- 第一个下拉框 -->
    <select name="" id="d1">
        <option value="" disabled selected>---请选择---</option>
    </select>

    <!-- 第二个下拉框 -->
    <select name="" id="d2">

    </select>

    <script>
        data = {
            "河北" :["石家庄","邢台","廊坊","保定","张家口"],
            "北京" :["大兴","朝阳","顺义","海淀"],
            "辽宁" :["沈阳","大连","葫芦洞","锦州"],
            "深圳" :["南山","福田","龙岗","光明"]
        }

        var d1 = document.querySelector("#d1")
        var d2 = document.querySelector("#d2")
        console.log(d1)
        // 循环插入option 到 select下拉框中
        for(var i in data){
            var  option = document.createElement("option")
            // 在option中插入城市名 (给用户看的)
            option.innerHTML = i
            // 在value中插入城市名(给后台看的)
            option.value = i
            // 插入节点
            d1.appendChild(option)
        }
        
        
       d1.onchange = function(){
            console.log(d1.value)
            var current_opt = d1.value // 北京
            // 获取对应的数组
            var citylist = data[current_opt]
            console.log(citylist)
            var string = "<option disabled selected >--请选择--</option>"
            // 将标签文本直接放进去
            d2.innerHTML = string;

            for(var i = 0 ; i < citylist.length;i++){
                console.log(i)
                // citylist[i]获取区域名字
                var current_city = citylist[i]
                var option = document.createElement("option")
                // 在option中插入城市名 (给用户看的)
                option.innerHTML = current_city
                // 在value中插入城市名(给后台看的)
                option.value=  current_city
                // 插入到select下拉框中
                d2.appendChild(option)
            }


        }

    </script>

</body>
</html>

2.5 onload事件与 BOM对象location

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> onload事件 与 BOM对象location </title>
</head>
<body>
    <button onclick="func1()">查看location</button>
    <button onclick="func2()">跳转页面</button>
    <button onclick="func3()">刷新页面</button>
    <button onclick="func4()">过一秒刷新页面</button>
    <script>

        function func1(){
            console.log(location)
            /* 地址: 协议 http:// ip + 端口号 + 路径 + 参数 + 锚点 */
            console.log(location.protocol) // 协议
            console.log(location.hostname) // ip
            console.log(location.port)     // 端口
            console.log(location.pathname) // 文件路径
            console.log(location.hash)     // 获取锚点
            console.log(location.search)   // 获取地址参数
            console.log(location.href)     // 获取完整地址
        }


        function func2(){
            location.href = "http://www.baidu.com"
        }

        function func3(){
            location.reload();
        }

        function func4(){
            setTimeout(func3,1000)
        }

        // 每过一秒刷新一下页面
        // 触发时机: 等待页面所有内容[文字,图片,连接]加载完毕之后,再去执行对应代码
        window.onload = function(){
            console.log(1111)
            func4()
        }



    </script>

</body>
</html>