Java教程

java script的BOM

本文主要是介绍java script的BOM，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

我们知道，js的组成部分分为三类，ECMA、DOM、BOM

学习BOM来操作浏览器，BOM意思是浏览器模型，BOM中最大的对象叫window，是浏览器窗口对象包含了许多的浏览器的操作

浏览器信息（navigator）

 console.log(window.navigator.appCodeName); // 返回浏览器的代码名
 console.log(window.navigator.appName); // 返回浏览器的名称
 console.log(window.navigator.appVersion); // 返回浏览器的平台和版本信息
 console.log(window.navigator.cookieEnabled); // 返回指明浏览器是否启用cookie的布尔值
 console.log(window.navigator.platform); // 返回运行浏览器的操作系统平台
 console.log(window.navigator.userAgent); // 返回由客户机发送服务器的user-agent头部的值

结果

 书写时可以将window省略

浏览器的历史记录：history，可以控制网页的前进和后退

history.back（）返回上一个页面

history.forward（）前进到下一个页面

history.go（数值）正数表示前进几个页面，负数表示后退几个页面

 浏览器的地址栏操作，location

地址栏的组成：当前页面的路径+数据部分+锚点，

数据部分：文件路径？键=值&键=值&键=值... 

location的三种属性 

console.log（window.location.href）//输出网址，默认编码

解码：decodeURI（）

编码：encodeURI（）

console.log（location.hash）//输出网址中的锚点，若是没有，则输出空

console.log（location.search）//设置或返回从问号 (?) 开始的 URL（查询部分

location的三种设置

1.设置锚点<button id="setmaodian">设置锚点</button>

setmaodian.onclick = function() {

    window.location.hash = '#mima'

}

2.设置数据<button id="setdata">设置数据</button>

setdata.onclick = function() {

    window.location.search = '?name=zhangsan'

}

3.跳转网址<button id="sethref">设置路径</button>

sethref.onclick = function() {

    window.location.href = '10-history/c.html'

}

 浏览器的弹出层 alert、confirm、prompt都属于window的方法，我们很多操作都是以window开头，为了简便就省略了。

浏览器的窗口尺寸

  • window.innerHeight - 浏览器窗口的高度

  • window.innerWidth - 浏览器窗口的宽度

  • 返回值单位是像素

  • 计算范围包括滚动条

浏览器事件

onload事件：当所有的资源加载完成后再执行此代码

 语法： window.οnlοad=function（）{

consol.log（）

}

 onscroll：当网页滚动条位置发生变化时触发这个事件

语法：window.οnscrοll=function（）{

console.log（' '）

}

onresize：浏览器窗口大小改变时触发代码

语法： window.onresize =func（）{

console.log（' '）

}

获取浏览器向下滚动的距离 

document.documentElement.scrollTop 当前文档有doctype，即文档第一行，位于<html>前面

否则则用document.body.scrollTop

兼容写法document.documentElement.scrollTop || document.body.scrollTop

例子

var t = document.documentElement.scrollTop || document.body.scrollTop;

获得向右的距离  document.body.scrollLeft   document.documentElement.scrollLeft

短路运算符 ：|| 和&& 

| |  

var a;
var b = a || 2; // 如果a有值，就将值赋给b，如果a没有值，就给b赋2 - 此时是将2赋给b

&&则是反过来

定时器 ，有两种，一种是延迟进行，另一种是间隔多久进行一次

延迟进行

语法 var 变量名=setTimeout（function（）{

                          执行的代码段

}，延迟时间）延迟时间按毫秒为单位

关闭定时器 clearTimeout（timeId）大写的 i

间隔进行

语法  var 变量名=setInterval（function（）{

                           执行的代码段

}，间隔多久进行）间隔时间按毫秒为单位

关闭定时器  clearInterval（timeId）大写的 i

异步操作

定时器是我们学习中第一个异步代码，到目前为止，只有定时器是异步代码

区别：同步是一个接着一个执行，异步是互不干扰，同一时间两件事件同时进行 

流程： 

s执行代码的内存：调用栈

    从上到下将每一行代码放到调用栈中执行，

        被执行的代码是同步代码，直接执行

        被执行的代码是异步代码，将异步代码放在浏览器中开始计时

    此时，js在执行同步代码，浏览器在计时

    当浏览器中倒计时到时间了，有一段代码应该被执行了，但是浏览器不会执行这段的，会将这段代码放在一个队列中，等待执行

    当调用栈将所有的同步代码执行结束以后，会去队列中，找是否有需要执行的代码，如果有就执行，如果没有，就过一段时间再到队列中找一次

这篇关于java script的BOM的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航