JS中的BOM操作

最新推荐文章于 2024-08-19 12:41:31 发布

Wanidde

最新推荐文章于 2024-08-19 12:41:31 发布

阅读量383

点赞数

分类专栏： WEB

本文链接：https://blog.csdn.net/wan_ide/article/details/102860198

版权

WEB 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

BOM：浏览器对象模型（Browser Object Model ）

用于对浏览器的操作，提供了独立于内容而与浏览器交互的内容，其核心对象是window。

BOM常用对象：

window : alert() , prompt() , confirm() , setInterval() , clearInterval() , setTimeout() , clearTimeout() ;

history : go(参数) , back() , foward() ;

location : herf属性.

window:

1、它是js访问浏览器窗口的一个接口

2、它是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法。

（1）窗口加载事件：

window.onload = function() {} 或

window.addEventLisrener("load",function() { });

document.addEventLisrener('DOMContentLoaded',function()) {};

注意：

1、window.onload是窗口加载事件，当文档内容完全加载完成会触发该事件，就调用处理函数。

2、window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。

3、addEventLisrener没有次数限制。

"load"等页面内容全部加载完毕，包含页面DOM元素，图片，flash，css等等。

DOMContentLoaded 是DOM加载完毕，不包含flash,css等就可以执行，记载速度比load更快一点。

<!DOCTYPE html>
<html>
    <head>
        <title>页面加载事件</title>
        <meta charset="utf-8">
        <script>
            window.onload = function() {
                var btn = document.querySelector('button');
                btn.addEventListener('click',function(){
                    alert('我被显示辣！！');
                })
            }

            window.addEventListener('load',function() {
                alert('我可以显示一遍！');
            })
            window.addEventListener('load',function() {
                alert('我可以显示两遍！！');
            })

            document.addEventListener('DOMContentLoaded',function() {
                alert('我老快了！')
            })
        </script>
    </head>
    <body>
        <button>点我！</button>
    </body>
</html>

（2）调整窗口大小事件：
window.onresize = function() { }
window.addEventListener("resize",function(){});

正常宽度：窗口宽度小于600像素时：

实现：

<!DOCTYPE html>
<html>
    <head>
        <title>页面加载事件</title>
        <meta charset="utf-8">
        <style>
            div {
                width:200px;
                height: 200px;
                background-color: pink;
            }
        </style>
        <script>
           window.addEventListener('load',function(){
               //先后获取div对象
               var div = document.querySelector('div');
               //添加事件
               window.addEventListener('resize',function(){
                   //如果窗口宽度小于600像素
                   if(window.innerWidth <= 600){
                       div.style.display = 'none';
                   }else {
                       div.style.display = 'block';
                   }
               })
           })
        </script>
    </head>
    <body>
        <div></div>
    </body>
</html>

（3）定时：

①setTimeout定时器：

window.setTimeout(调用函数，[延迟的毫秒数]);

window.clearTimeout(定时器名字);

效果：

实现：

<!DOCTYPE html>
<html>
    <head>
        <title>定时函数的使用</title>
        <meta charset="utf-8">

    </head>
    <body>
        <script>
            function timer() {
                alert('时间到了');
            }
            var timer1 = setTimeout(timer,2000);
            //关闭定时器
            //clearTimeout(timer1);
        </script>
    </body>
</html>

②setInterval(调用函数，[延迟的毫秒数])定时器：

每隔一段时间，都会调用这个函数。

<!DOCTYPE html>
<html>
    <head>
        <title>定时函数的使用</title>
        <meta charset="utf-8">

    </head>
    <body>
        <script>
            function timer() {
                alert('时间到了');
            }
            var timer1 = setInterval(timer,2000);
            //关闭定时器
            //clearInterval(timer1);
        </script>
    </body>
</html>

在网页中弹出广告几秒后再消失：

弹出广告时的效果:

实现：

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,intial-scale=1">
    <title>注册网页</title>
    <style type="text/css">
        body {
            width: 1200px;
            height: 1200px;
            margin: 0 auto;
            border: 1px solid lightsalmon;
            background-color: azure;
        }
 
        .dd1 {
 
            height: 60px;
            border: 1px solid pink;
            float: left;
            /*设置向左浮动*/
        }
 
        .dd2 {
            width: 1200px;
            height: 60px;
            background-color: black;
            border: 1px solid palevioletred;
 
        }
 
        a {
            text-decoration: none;
        }
 
        /* 清除浮动 */
        #clear {
            clear: both;
        }
    </style>

    <script>
        function init() {
            //定时轮播图片
            setInterval("changeImg()",2000);

            //1.设置广告图片定时显示
            time = setInterval("showAd()",2000);
        }

        //轮播图片函数
        var i=0;
        function changeImg() {
            i++;
            document.getElementById("img1").src="s"+i+".jpg";
            if(i==3){
                i=0;
            }
        }

        //2.广告显示函数
        function showAd(){
            //3.确定广告图片的位置
            var pos = document.getElementById("img2");
            //4.修改广告图片属性让其显示
            pos.style.display = "block";
            //5.清除显示广告的定时操作
            clearInterval(time);
            //6.设置隐藏图片的定时操作
            time = setInterval("hiddenAd()",2000);
        }

        //7.隐藏广告图片的函数
        function hiddenAd() {
            //8.获取广告图片并设置其style属性的display值为none
            document.getElementById("img2").style.display = "none";
            //9.清除隐藏广告图片的定时操作
            clearInterval(time);
        }
    </script>
</head>
 
<body onload="init()">
    
    <!--第一层-->
    <div>
        <img src="p1.jpg" height="400px" width="1200px" id="img2" style="display:none"/>  
        <div class="dd1">
            <img src="tb1.png" width="398px" height="60px" />
        </div>
        <div class="dd1">
            <img src="tb2.png" width="398px" height="60px" />
        </div>
        <div class="dd1">
            <img src="tb3.png" width="398px" height="60px" />
        </div>
    </div>
 
    <!-- 清除浮动 -->
    <div id="clear"></div>
 
    <!--第二层-->
    <div class="dd2">
        <p>
            &nbsp;&nbsp;&nbsp;
            <a href="#"><font color="white" size="5px"> 首页 </font></a>
            &nbsp;&nbsp;
            <a href="#"><font color="white" size="3px">手机数码</font></a>
            &nbsp;&nbsp;
            <a href="#"><font color="white" size="3px">电脑办公</font></a>
            &nbsp;&nbsp;
            <a href="#"><font color="white" size="3px">鞋靴箱包</font></a>
            &nbsp;&nbsp;
            <a href="#"><font color="white" size="3px">家用电器</font></a>
        </p>
    </div>
 
    <!-- 第三层 -->
    <div>
        <img src="s1.jpg" width="1200px" height="715px" id="img1" />
    </div>
 
</body>
 
</html>

页面的跳转，点击链接跳转到下一个网页，再通过history的go()，或者back()方法跳转回来

效果：

实现：

页面跳转：

<!DOCTYPE html>
<html>
    <head>
        <title>页面转换</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
    </head>
    <body>
        <a href="history.html">点我啊！</a>
    </body>
</html>

history：

<!DOCTYPE html>
<html>
    <head>
        <title>history</title>
        <meta charset="utf-8">
        <script>
            function fanhui() {
                
                //history.go(-1);  //方法一
                history.back();
            }
        </script>
    </head>
    <body>
        <input type="button" value="返回上一页" onclick="fanhui()">
    </body>
</html>