Bom的初始

BOM
    Brower Object Model
    浏览器对象模型,浏览器的操作内容都是在对象的方法操作
    浏览器的顶级对象 window
        在全局中定义的变量其实就是在window身上作为属性
        alert('弹弹弹')
        全局中this,top指向window
        全局中的name属性在window上有,属性值为字符串
        浏览器的尺寸
            innerWidth,innerHeight 获取浏览可视窗口的宽高(包含了滚动条)
            console.log(window.innerHeight)
            console.log(window.innerWidth)
    弹出层
        alert()
            提示弹框,没有返回值
        confirm()
            询问弹窗
                当点击确定的时候返回true
                当点击取消的时候返回false
        prompt()
            提示输入弹窗
                当点击取消的时候返回null
                当输入点击确定的返回的返回输入的内容(如果啥也不填返回null)
    浏览器的地址信息
        location 对象中就存储而来浏览器的地址信息
        console.log(location)
        location.href
            location对象中href属性就是浏览器访问的完整地址
    //  会将地址中的中文转码为url中的编码格式
            btn.onclick = function(){
location.href = 'http://1000phone.com'
}
        location.reload()
            重新加载页面
            这个方法不要在全局中使用
            btn.onclick = function(){
location.reload()
}
        location中的其他属性(http://localhost/2111/location.html#12345?name=zs&age=123)
            hash
                地址中#后面的东西(#12345?name=zs&age=123)
            host
                是访问地址主机的地址
            search
                是浏览器中?后面的内容
                    ?name=zs&age=123
    history
        前提是要有历史记录
        history中的lenght属性,如果为1表示没有历史记录
        history.back()
            回到历史记录的上一个页面
        history.forward()
            去到历史记录中的下一个页面
        history.go(n)
            去到历史记录中指定的页面
        history.go(1)
            相当于history.forward()
        history.go()-1
            相当于history.back()
    浏览器的版本信息
        navigator
            记录了浏览器的各种信息
            appversion 浏览器的版本 不一定有效
            platfor 浏览器运行的环境版本 不一定有效
            userAgent 获取浏览器的版本信息
                console.log(navigator.userAgent)
    浏览器的事件
        scroll(当滚动条动起来的时候触发的事件
            scrollTop
                页面垂直卷去的距离
            scrollLeft
                页面水平卷去的距离
            document.body.scrollleft 
                当页面没有使用DOCTYPE声明的时候可以获取到
            document.documentElement.scrollTop
                当页面有使用DOCTYPE声明的时候可以获取到
            / /window.onscroll = function(){
    // console.log(document.body.scrollTop);
    // console.log(document.documentElement.scrollTop);
    // console.log(document.body.scrollLeft);
    // console.log(document.documentElement.scrollLeft);
  // }
        浏览器的页面加载事件 load
            当浏览器页面中的内容(页面结构,文本,图片,css,js等资源)全部加载完毕后会触发的事件
            // window.onload = function(){
  //   btn.onclick = function(){
  //     alert('你真棒');
  //   }
        浏览器的页面可视窗口变化事件 resize
            当浏览器窗口大小变化的时候会触发
            window.onresize = function(){
 console.log(window.innerWidth);
 console.log(window.innerHeight);
}
    定时器
        间隔定时器
            setInterval(函数,时间)时间单位是毫秒
            每隔一段时间就运行一次函数
            返回定时器标识id
            // var timerId = setInterval(function(){
  //   alert('我又来啦');
  // },5000);
  // console.log(timerId);
        倒计时定时器
            setTimeout(函数,时间)
                时间单位是毫秒
            过一段时间会执行一次函数
            返回定时器标识id
            // var timerId = setTimeout(function(){
  //   console.log('爆炸');
  // },3000);
  // console.log(timerId);
        清除定时器
            clearInterval(),clearTimeout()
        定时器的异步
            同步执行
                代码按顺序执行
            异步执行
                代码不按顺序执行,先执行同步代码,当所有同步代码执行完毕,才开始执行异步代码
 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值