Bom 对象和Dom树

通过获取设备信息来进行跳转页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>

        function isMobile() {
            var ua = navigator.userAgent;
            var ipad = ua.match(/(iPad).*OS\s([\d_]+)/);
            var isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/);
            var isAndroid = ua.match(/(Android)\s+([\d.]+)/);
            return ipad || isIphone || isAndroid;
        }
        if (this.isMobile()) {
            location.href = "phone.html";
        } else {
            location.href = "pc.html";
        }

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

添加标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ol></ol>
    <button onclick="addEle();">添加li</button>

    <script>
        function addEle() {
            var $ol = document.querySelector('ol');
            // 1. 创建元素节点
            var $li = document.createElement('li');
            // 2. 给标签填充内容
            $li.innerText = 222222;
            // 3. 把$li标签添加到ol里面
            $ol.appendChild($li);
        }

    </script>
</body>

</html>
  • 删除标签
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button>btn</button>


    <script>
        var $btn = document.querySelector('button');
        $btn.remove();

    </script>
</body>

</html>
  • 修改标签的属性和class
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: green;
        }

        .dsn {
            visibility: hidden;
        }
    </style>
</head>

<body>
    <div class="box">
        我是div表亲啊
    </div>

    <button id="btn1">该内容</button>
    <button id="btn2">显示或隐藏</button>
    <button id="btn3">修改属性</button>

    <script>
        var $box = document.querySelector(".box");
        // 修改内容
        document.querySelector("#btn1").onclick = function () {
            $box.innerHTML = "222222";
        };
        // 修改class
        document.querySelector("#btn2").onclick = function () {
            var className = $box.className;
            console.log(className);
            if (className === "box") {
                $box.className = "box dsn";
            } else {
                $box.className = "box";
            }
        };

        // 修改属性
        document.querySelector("#btn3").onclick = function () {
            $box.style.backgroundColor = "gray";
        };
    </script>
</body>

</html>
  • jquery 实现显示或隐藏
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: green;
        }

        .dsn {
            visibility: hidden;
        }
    </style>
</head>

<body>

    <div class="box">
        我是div表亲啊
    </div>

    <button id="btn2">显示或隐藏</button>

    <script>
        $('#btn2').click(function () {
            var $box = $('.box');
            $box.toggleClass('dsn');
        })

    </script>
</body>

</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

友情链接更多精彩内容