BOM对象

Posted 2021-12-20 qq308015824

1 BOM对象

 

浏览器相关的对象。获取浏览器相关的信息，可以设置和修改浏览器属性。

 

Window

 

浏览器相关的宽高信息

 

setInterval

 

setTimeout

 

clearInterval

 

clearTimeout

 

Fetch:未来学习ajax的时候可以用到的方法

Open:打开一个新的页面

outerHeight: 浏览器的高度

outerWidth: 浏览器的宽度

 

 

弹框：

 

Alert:仅仅只是一个弹框，只有一个确定按钮

 

Comfirm:有确定和取消按钮的弹框，返回值分别为true和false

 

Prompt：这是一个可以让用户输入内容的弹框。（不建议使用）

 

Scrollto:设置滚动条，滚动到什么位置，语法：scrollTo(水平位置，垂直位置)

 

 

2 延迟函数：setTimeout

延迟一段时间执行某个函数,setTimeout有返回值，这个返回值即是setTimeout的id值。

注意：延迟函数是异步执行的。

语法1：setTimeout(函数对象，延迟多少毫秒执行)

语法2：setTimeout(函数对象，延迟时间，后面的参数皆为函数对象的参数)

 

 

清除延迟函数：clearTimeout

 

语法：clearTimeout(延迟函数的ID)

 

3 间隔函数：setInterval

每隔一段时间执行一次，第一次执行也会延迟。间隔函数也是异步执行函数，会将间隔执行的函数对象，放置到内存的事件队列里，到了时间点，就会从事件队列拿到主线程进行执行，主线程会根据在空闲时间点执行事件。

 

 

清除间隔函数：clearInterval

 

语法：clearInterval(间隔函数的ID)

 

异步问题案例：

 

var jiuba = function(doSomething)
                console.log("是时候去酒吧了")
                console.log("去做什么："+doSomething)
            

var interId1 = setTimeout(function()
                jiuba("把妹")
            ,0)
            console.log(123456)

 

 

4 Location

hash: "#hotspotmining" --->页面锚点的位置

host: "baike.baidu.com" --->主机域名

hostname: "baike.baidu.com" --->主机名称

href: "https://baike.baidu.com/item/%E8%BF%90%E5%8A%A8/2134938#hotspotmining" --->这个页面链接地址

origin: "https://baike.baidu.com" --->来源的域名

pathname: "/item/%E8%BF%90%E5%8A%A8/2134938" --->服务器页面的项目路径

port: "" --->端口号，没有写就是根据协议，默认的端口号

protocol: "https:" --->协议,一般是http或者是https

 

可以修改路径，跳转至相对应的页面

 

location.href = "http://www.taobao.com"

 

Assign:跳转页面（有返回值）：

 

location.assign("http://www.qq.com")

 

Reload:重新加载页面（刷新）

 

 

location.reload()

Replace：替换掉当前页面（无返回值）

 

 

 

location.replace(‘http://www.qq.com‘)

注意：assign和replace是有区别的。Assign相当于跳转到下一个页面，所以会有返回键。Replace是替换掉当前页面，所以不能返回之前的页面。

5 Navigator

 

Navigator可以获取浏览器和系统相关的信息。

 

userAgent: "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (Khtml, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1"

 

 

 

一般通过userAgent来获取浏览器的信息，并且根据浏览器信息，发送相对于的页面，例如是发送PC页面还是移动端页面。

 

 

 

通过navigator判断浏览器

 

//通过navigator来判断访问的浏览器
            
            var userAgent = navigator.userAgent
            
            console.log()
            
            if(userAgent.indexOf("iPhone")!=-1 || userAgent.indexOf("android")!=-1 || userAgent.indexOf("iPad")!=-1)
                console.log("你是移动端")
                //location.assign("http://m.taobao.com")
            else
                console.log("你是pc端")
                //location.assign("http://www.taobao.com")
                
            

 

 

6 History

只能对页面前进后退，不能真正获取用户的浏览记录。

 

history.back()

后退1个页面

 

history.forward()

前进1个页面

 

history.go()

语法：history.go(前进或后退的数)

 

正数是前进，负数是后退。

 

7 LocalStorage

永久性保存数据，只要你不删除数据，数据就会永久保留。

 

 

8 JSON

JSON(javascript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。

 

Javascript  obj<===>文本

 

 

案例：

 

 1 var obj = 
 2                 name:"蔡徐坤",
 3                 like:["唱","跳","rap","打代码"]
 4                 
 5             
 6             
 7             
 8             //将js对象转换成json格式的字符串
 9             var strJson = JSON.stringify(obj)
10             console.log(strJson)
11             
12             //json字符串转换成js对象
13             var jsonObj = JSON.parse(strJson)
14             console.log(jsonObj)

 

 

 

如何使用localstorage进行增删改查

增,改

没有就是增，有就是修改

//localStorage.xx = 赋值内容

//localStorage.setItem("username","隔壁老王")

localStorage["like"] = "c唱t跳rRapl篮球"

 

删除

localStorage.removeItem("like")

//delete localStorage.like

 

获取

1 console.log(localStorage.username)

2 console.log(localStorage[‘username‘])

3 console.log(localStorage.getItem(‘username‘))

 

删除所有

localStorage.clear()

 

 

SessionStorage

当次会话有效，关闭浏览器之后就失效了。