JavaScript学习第七天

本文介绍了浏览器对象模型(BOM)的基本概念及其核心window对象的功能,包括获取浏览器尺寸、使用弹窗、管理地址栏、监听浏览器事件等,并展示了如何利用BOM进行页面跳转、存储本地数据及操作滚动条。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、初识BOM

  • BOM(Browser Object Model):浏览器对象模型
  • 其实就是操作浏览器的一些能力
  • 我们可以操作哪些内容

                获取一些浏览器的相关信息(窗口大小)

                操作浏览器进行页面跳转

                获取当前浏览器地址栏的信息

                操作浏览器的滚动条

                浏览器的信息(浏览器的版本)

                让浏览器出现一个弹出框(alert、confirm、prompt)

  • BOM的核心就是window对象
  • window是浏览器内置的一个对象,里面包含着操作浏览器的方法

2、浏览器可视窗口的尺寸

innerHeight和innerWidth

这两个方法分别是用来获取浏览器窗口的宽度和高度(包含滚动条的)

<script>
    var windowHeight=window.innerHeight
    console.log(windowHeight)

    var windowWidth=window.innerWidth
    console.log(windowWidth)
</script>

3、浏览器的弹出层

1、alert

返回值没意义

<button id="btn">点一点</button>
<script>
    btn.onclick=function(){
        alert("你好")
    }
</script>

2、询问框confirm

 返回值是true或false

<button id="btn">点一点</button>
<script>
    btn.onclick=function(){
        var res=confirm("你好")
        console.log(res)
    }
</script>

 3、输入框prompt

返回值是你输入的内容

如果没有输入则返回值是null

<button id="btn">点一点</button>
<script>
    btn.onclick=function(){
        var res=prompt("请输入你的密码")
        console.log(res)
    }
</script>

不常用这三个,因为容易产生线程阻塞

js是单线程

4、浏览器的地址栏

  • 浏览器的地址信息
  • 在window中有一个对象叫做location
  • 就是专门用来存储浏览器的地址栏内的信息的

location.href

  • location.href这个属性存储的是浏览器内URL地址的信息

        console.log(window.location.href)

        会把中文变成url编码的格式

  • location.href这个属性也可以给他赋值

        window.location.href='./index.html'

        //这个就会跳转页面到后面你给的那个地址

location.reload

<button id="btn">点一点</button>
<button id="btn2">刷新</button>
<script>
    //拿到地址信息
    console.log(location.href)

    
    // 解码
    // console.log(decodeURI(拿到的码))

    // 跳转页面
    btn.onclick=function(){
        location.href="http://www.baidu.com"
    }

    // reload
    btn2.onclick=function(){
        location.reload()
    }
</script>

5、浏览器的常见事件

浏览器的onload事件

  • 这个不再是对象了,而是一个事件
  • 是在页面所有资源(图片、视频、dom节点)加载完毕后执行的

        window.οnlοad=function(){

                console.log('资源已经加载完毕')

        }

</head>
    <script>
        window.onload=function(){
            console.log("加载完成")
            console.log(btn)
        }
    </script>

</head>
<body>
    <button id="btn"></button>
</body>

onresize

<script>
    // 窗口大小每次发生改变就执行该代码
    window.onresize=function(){
        console.log("resize")
    }
</script>

onscroll

<style>
    body{
        height: 2000px;
    }
</style>
<script>
    // 滚动条滚动的时候执行该函数
    window.onscroll=function(){
        console.log("scroll")
    }
</script>

6、浏览器的滚动距离

一、纵向滚动条

<style>
    body{
        height: 3000px;
    }
</style>
<script>
    window.onscroll=function(){
        // 开头必须写<!DOCTYPE html>
        // 低版本浏览器不支持
        console.log(document.documentElement.scrollTop)
    }
</script>
<style>
    body{
        height: 3000px;
    }
</style>
<script>
    window.onscroll=function(){

        // 低版本浏览器使用
        // 不用写<!DOCTYPE html>
        console.log(document.body.scrollTop)
    }
</script>

综合以上两个最好写

<style>
    body{
        height: 3000px;
    }
</style>
<script>
    window.onscroll=function(){

        console.log(document.documentElement.scrollTop || document.body.scrollTop) 

    }
</script>

二、横向滚动条


<style>
    body{
        width: 3000px;
    }
</style>
<script>
    window.onscroll=function(){

        console.log(document.documentElement.scrollLeft || document.body.scrollLeft) 

    }
</script>

小案例:

<style>
    body{
        height: 3000px;
        width: 3000px;
    }
</style>


</head>
<body>
    <div style="height: 300px;width: 100px;"></div>
    <button id="btn">回到顶部</button>
        <script>
    
        window.onscroll=function(){

            console.log(document.documentElement.scrollTop || document.body.scrollTop)


            if((document.documentElement.scrollTop || document.body.scrollTop)>100){
                console.log("显示回到顶部按钮")
            }
            else{
                console.log("隐藏回到顶部按钮")
            }
        }

        btn.onclick=function(){

            // 写法一
            // window.scrollTo(0,0)
            //1、两个数字   x轴y轴方向上

            // 写法二
            // 2、对象
            window.scrollTo({
                left:0,
                top:0
            })
        }
    </script>

7、浏览器打开标签页

    <button id="btn">click</button>
    <button id="btn2">close</button>
    <script>
        // open打开新的页面
        btn.onclick=function(){
            window.open("http://www.baidu.com")
        }

        // close关闭当前页面
        btn2.onclick=function(){
            window.close()
        }
    </script>

8、浏览器的历史记录

浏览器中的历史记录

  • window中有一个对象叫history
  • 是专门用来存储历史记录信息的

history.back

  • history.back是用来回退历史记录的,就是回到前一个页面
  • window.history.back()
  • 前提是你要有上一条记录,不然就是一直在这个页面,也不会回退

history.forword

  • history.forward是去到下一个历史记录里面,也就是去到下一个页面
  • window.history.forward()
  • 前提是你要之前有过回退操作,不然的话你现在就是最后一个页面,没有下一个

history.go()

  • 参数有正负数
  • history.go(1)          前进一个页面       
  • history.go(-1)        后退一个页面

9、浏览器本地存储

  •  localStorage只能存字符串
  •  localStorage        永久存储
  • sessionStorage        会话存储,关闭页面就丢失
<button id="btn1">存</button>
<button id="btn2">取</button>
<button id="btn3">删</button>
<button id="btn4">清空</button>
    <script>
        btn1.onclick=function(){


            //localStorage.setItem("obj",JSON.stringify({name:"jack",age:100}))

            localStorage.setItem("name","jack")
            localStorage.setItem("age","100")
        }
        btn2.onclick=function(){
            console.log(localStorage.getItem("name"))
            
        }
        btn3.onclick=function(){
            localStorage.removeItem("name")
        }
        btn4.onclick=function(){
            localStorage.clear()
            
        }
    </script>
<button id="btn1">存</button>
<button id="btn2">取</button>
<button id="btn3">删</button>
<button id="btn4">清空</button>
    <script>
        btn1.onclick=function(){
            sessionStorage.setItem("obj",JSON.stringify({name:"jack",age:100}))
            sessionStorage.setItem("name","jack")
            sessionStorage.setItem("age","100")
        }
        btn2.onclick=function(){
            console.log(sessionStorage.getItem("obj"))
            
        }
        btn3.onclick=function(){
            sessionStorage.removeItem("name")
        }
        btn4.onclick=function(){
            sessionStorage.clear()
            
        }
    </script>

10、案例-记住用户名

    <div>
        用户名:
        <input type="text" id="username">
    </div>
    <div>
        密码:
        <input type="password" id="password">
    </div>
    <button id="login">登录</button>
    <script>
        // 先获取用户名  密码信息进行存储
        var  uservalue=localStorage.getItem("username")
        var  passvalue=localStorage.getItem("password")

        username.value=uservalue
        password.value=passvalue

        login.onclick=function(){
            // 获取输入框的内容
            console.log(username.value,password.value)

            localStorage.setItem("username",username.value)
            localStorage.setItem("password",password.value)
        }
    </script>

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值