JavaScript学习第十九天

BOM(Browser Object Model)

BOM可以让JavaScript和浏览器进行对话。
所有的浏览器都支持window对象。表示浏览器窗口。
window全局对象，最高级/顶级对象。
所有的JavaScript全局对象，函数以及变量均自动成为window对象的成员。
全局变量是window对象的属性，全局函数是window对象的方法。
HTML DOM的document也是window对象的属性之一。

初始BOM

JS代码

console.log(window);// window.alert("警告框");//全局方法会省略windowvar a="全局变量";function func(){console.log("全局函数")}console.log(window.location);console.log(window.history);console.log(window.screen);console.log(window.navigator);console.log(window.sessionStorage)

BOM的属性值为对象

JS代码

    //console.log(window);--属性值为对象1. history  历史记录  对history对象的只读引用console.log(window.history);2. location  用于窗口或框架的location对象console.log(window.location);3. navigator  浏览器的配置信息  对navigator对象的只读属性console.log(window.navigator);4. screen  屏幕  对screen对象的只读属性console.log(window.screen);5. document  对document对象的只读属性console.log(window.document);-- 关于缓存1. cookie  console.log(document.cookie);// html5新增的缓存2. sessionStorage  会话缓存对象console.log(window.sessionStorage);3. localStorage  本地缓存对象console.log(window.localStorage)

BOM宽高的属性值

html代码

<h1>03BOM宽高的属性值</h1><div id="box"><div id="min"></div></div><div id="top">返回顶部</div>

css代码

*{margin: 0;padding: 0;}body{border: 20px solid red;}#box{width: 2000px;height: 2000px;background: pink;position: relative;}#min{width: 300px;height: 300px;background: skyblue;padding: 20px;border: 20px solid green;/* margin: 20px; */position: absolute;top: 20px;left: 20px;}#top{width: 40px;height: 40px;background: blue;border-radius: 5px;color: #fff;position: fixed;right: 40px;bottom: 80px;text-align: center;display: none;}

// console.log(window);- 屏幕的宽高  screen  console.log("屏幕的宽："+window.screen.width,"屏幕的高："+window.screen.height);- 和window相关的 宽高innerHeight  浏览器窗口的高（文档显示区,滚动条）innerWidth  浏览器窗口的宽（文档显示区,滚动条）console.log("innerWidth："+window.innerWidth,"innerHeight："+window.innerHeight);outerHeight 浏览器窗口的高（文档显示区,滚动条,工具栏）outerWidth 浏览器窗口的宽（文档显示区,滚动条,工具栏）console.log("outerHeight："+window.outerHeight,"outerWidth："+window.outerWidth);//兼容IE8以下浏览器clientWidth 浏览器窗口宽（文档可见区）clientHeight 浏览器窗口（文档可见区）console.log(document.documentElement.clientHeight,document.documentElement.clientWidth);clientWidth 浏览器窗口宽（文档显示区）clientHeight 浏览器窗口（文档显示区）console.log(document.body.clientHeight,document.body.clientWidth);-- 元素 clientLeft clientTop  元素border的宽距离边框的偏移console.log(document.documentElement.clientLeft,document.documentElement.clientTop);console.log(document.body.clientLeft,document.body.clientTop);var oMin=document.getElementById("min");// offsetWidth 宽+padding+border// offsetHeight 高+padding+border// console.log(oMin.offsetWidth,oMin.offsetHeight);//300 300  只设置了宽高// console.log(oMin.offsetWidth,oMin.offsetHeight);//340 340  设置了宽高+padding// console.log(oMin.offsetWidth,oMin.offsetHeight);//380 380  设置了宽高+padding+borderconsole.log(oMin.offsetWidth,oMin.offsetHeight);//380 380  设置了宽高+padding+border// offsetLeft offsetTop  相对于祖先元素中最近有有定位属性的元素的偏移console.log(oMin.offsetLeft,oMin.offsetTop);// scrollWidth scrollHeight  内容的元素大小(总宽度，总高度)console.log(oMin.scrollWidth,oMin.scrollHeight)console.log(document.documentElement.scrollHeight,document.documentElement.scrollWidth)// scrollTop scrollLeft 元素被卷去的内容的高度和宽度console.log(document.documentElement.scrollLeft,document.documentElement.scrollTop);window.onscroll=function(){if(document.documentElement.scrollTop>500){document.getElementById("top").style.display="block"}}

BOM坐标的属性

 // console.log(window);1. screenX screenY  返回相对于屏幕窗口的坐标/偏移console.log(window.screenX,window.screenY);2. screenLeft screenTop  返回相对于屏幕窗口的坐标/偏移console.log(window.screenLeft,window.screenTop);3. pageXOffset pageYOffset  网页内容相对于window偏移的位置console.log(window.pageXOffset,window.pageYOffset);4. scrollX scrollY  滚动条卷去部分内容的大小console.log(window.scrollX,window.scrollY);console.log(document.documentElement.scrollLeft,document.documentElement.scrollTop);

返回顶部

html代码

        <div id="box"></div><div id="totop">回顶</div>

css代码

         * {margin: 0;padding: 0;}#box {width: 100%;height: 2000px;background: lightgreen;position: relative;}#totop {width: 45px;height: 60px;background: blue;color: #fff;position: fixed;border-radius: 5px;right: 40px;bottom: 80px;text-align: center;display: none;}

JS代码

        //获取元素var oTop = document.getElementById("totop");//添加窗口滚动事件window.onscroll = function() {//判断滚动条距离顶部位置console.log(window.scrollX, window.scrollY);if (window.scrollY > 500) {//让返回顶部按钮位置oTop.style.display = "block"} else {oTop.style.display = "none"}}//给返回顶部按钮添加按钮显示oTop.onclick = function() {var timer = setInterval(function() {var x = document.documentElement.scrollTop;x <= 0 ? clearInterval(timer) : x -= 30;document.documentElement.scrollTop = x;}, 1)}console.log(document.documentElement.scrollLeft, document.documentElement.scrollTop);

BOM框架相关的属性

html代码

    <iframe src="a.html" id="a" frameborder="1" name="frame_a"></iframe><iframe src="b.html" id="b" frameborder="1" name="frame_b"></iframe><iframe src="c.html" id="c" frameborder="1" name="frame_c"></iframe><!-- <iframe src="a.html" name="frame_a" frameborder="0"></iframe><div id="tabBar"><a href="a.html" target="frame_a">微信</a><a href="b.html" target="frame_a">通讯录</a><a href="c.html" target="frame_a">发现</a><a href="d.html" target="frame_a">我的</a></div> -->

css代码

        html{font-size: calc(100vw/750);}#tabBar{width: 100%;position: fixed;bottom: 0;display: flex;align-items: center;justify-content: space-around;height: 100rem;box-shadow: 0rem -5rem 20rem 0rem green;}

JS代码

// length  返回当前窗口中框架的数量console.log(window.length);// self  返回对当前窗口的引用  相当于windowconsole.log(window.self);// top  返回顶级窗口console.log(window.top);// parent  返回父级窗口console.log(window.parent);// contentWindow  获取框架的元素console.log(document.getElementById("a").contentWindow);console.log(document.getElementById("b").contentWindow);console.log(document.getElementById("c").contentWindow);// frames  返回当前窗口，一个类数组对象，列出了当前窗口的所有直接子窗口。console.log(window.frames[2]);console.log(window.frames[2]==document.getElementById("c").contentWindow);// name  设置或返回窗口的名称window.name="当前窗口";console.log(window.name);console.log(document.getElementById("a").contentWindow.name);// opener  返回对创建此窗口的引用// document.οnclick=function(){//     newWindow=window.open("http://www.baidu.com","newWindow","width=100");//     console.log(newWindow.opener);// }

BOM的方法之弹窗

html代码

    <button>alert</button><button>confirm</button><button>prompt</button>

JS代码

    var aBtns = document.getElementsByTagName("button");// alert("内容")  警告框 显示带有一段消息和一个确认按钮的警告框aBtns[0].onclick = function () {window.alert("警告框");}// confirm("内容")  确认框 显示带有一段消息和 取消 确认按钮的确认框   返回 布尔值var sure;aBtns[1].onclick = function () {// console.log(window.confirm("确认退出登录吗？"))var sure = window.confirm("确认退出登录吗？");if (sure) {console.log("确定退出")} else {console.log("点错了，不退出")}}// prompt("提示文本","默认输入的文本")  显示可提示用户输入的对话框  提示框 返回输入的内容aBtns[2].onclick = function () {// console.log(window.prompt("请输入你的年龄",18))var age= window.prompt("请输入你的年龄",18);if(age>=18){console.log("你已成年")}else{console.log("未成年")}}

BOM的方法之定时器

html代码

    <button>setInterval</button><button>setTimeout</button><button>clearInterval</button><button>clearTimeout</button>

JS代码

var aBtns = document.getElementsByTagName("button");// setInterval(function(){},time,参数,参数) 按照指定的周期(以毫秒计)来调用函数或者计算表达式var timer;aBtns[0].onclick=function(){// timer=setInterval(function(){//     console.log("这是每个一秒执行一次的定时器")// },1000)timer=setInterval(func,1000,1,2)}function func(x,y){console.log(x,y)}aBtns[2].onclick=function(){clearInterval(timer)}// setTimeout(function(){},time)  按照指定的周期(以毫秒计)后来调用函数或者计算表达式  延迟计时器  只执行一次aBtns[1].onclick=function(){setTimeout(function(){console.log("这是延迟一秒执行的定时器")},1000)}

BOM的方法之窗口的加载

html代码

    <button>open()</button><button>close()</button><button>focus()</button><button>blur()</button><button>stop()</button><button>print()</button><iframe frameborder="1" name="iframe_a"></iframe>

JS代码

    var aBtns = document.getElementsByTagName("button");// open(URL,name/target,strWindowFeatures)  打开一个新的窗口或者查找一个已经命名的窗口  默认在新窗口打开// URL：地址  必填项// name：窗口的名称// target：窗口打开的位置// strWindowFeatures:包含新窗口的特征  大小 位置等aBtns[0].onclick=function(){// newWin=window.open("http://www.taobao.com");// newWin=window.open("http://www.taobao.com","新打开的窗口");// newWin=window.open("http://www.taobao.com","iframe_a");// newWin=window.open("http://www.taobao.com","_self");newWin=window.open("http://www.taobao.com","_blank","scrollbars=yes,menubar=yes");}// close() 关闭浏览器窗口aBtns[1].onclick=function(){// window.close()newWin.close();}// focus()  把键盘焦点给与某个窗口// blur()  将焦点从窗口移开aBtns[2].onclick=function(){newWin.focus();}// stop()  停止窗口的加载aBtns[4].onclick=function(){window.stop();}// print()  打印窗口的内容aBtns[5].onclick=function(){window.print()}

BOM的方法之窗口的调整

html代码

    <button>open()</button><button>resizeTo()</button><button>resizeBy()</button>

JS代码

    var aBtns = document.getElementsByTagName("button");aBtns[0].onclick=function(){newWin=window.open("window.html","_blank","scrollbars=yes");}// resizeTo(width,height) 把窗口的宽高调整到指定大小  针对open()打开的窗口  无法设置超过一个tab的窗口大小aBtns[1].onclick=function(){window.resizeTo(500,500)}// resizeby(width,height) 按照指定的像素调整窗口大小   可以为负值aBtns[2].onclick=function(){newWin.resizeBy(50,50)}

BOM的方法之窗口的移动

html代码

    <button>open()</button><button>moveTo()</button><button>moveBy()</button>

JS代码

    var aBtns = document.getElementsByTagName("button");aBtns[0].onclick=function(){newWin=window.open("window.html","_blank","scrollbars=yes");}// moveTo(width,height) 把窗口移动到指定位置  针对open()打开的窗口  无法设置超过一个tab的窗口大小aBtns[1].onclick=function(){newWin.moveTo(500,500)}// moveBy(width,height) 按照指定的像素调整窗口位置   可以为负值aBtns[2].onclick=function(){newWin.resizeBy(50,50)}// createPopup() 创建一个 pop-up 窗口。// getSelection() 返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。// getComputedStyle()   获取指定元素的 CSS 样式。// matchMedia()   该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。// atob()   解码一个 base-64 编码的字符串。// btoa()    创建一个 base-64 编码的字符串。

BOM的方法之窗口的滚动条

html代码

    <button>open()</button><button>scrollTo()</button><button>scrollBy()</button><div id="box"></div>

JS代码

    var aBtns = document.getElementsByTagName("button");aBtns[0].onclick=function(){newWin=window.open("a.html","_blank","scrollbars=yes");}// scrollTo(width,height) 把内容滚动到指定的坐标aBtns[1].onclick=function(){window.scrollTo(500,500)}// scrollBy(width,height) 按照指定的元素进行滚动  可以为负值aBtns[2].onclick=function(){window.scrollBy(50,50)}

BOM的窗口的特征窗口特征（Window Features）

其中features可以设置如下属性：

channelmode=yes|no|1|0 是否使用剧院模式显示窗口。默认为 no。
directories=yes|no|1|0 是否添加目录按钮。默认为 yes。
fullscreen=yes|no|1|0 是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。
height=pixels 窗口文档显示区的高度。以像素计。
left=pixels 窗口的 x 坐标。以像素计。
location=yes|no|1|0 是否显示地址字段。默认是 yes。
menubar=yes|no|1|0 是否显示菜单栏。默认是 yes。
resizable=yes|no|1|0 窗口是否可调节尺寸。默认是 yes。
scrollbars=yes|no|1|0 是否显示滚动条。默认是 yes。
status=yes|no|1|0 是否添加状态栏。默认是 yes。
titlebar=yes|no|1|0 是否显示标题栏。默认是 yes。
toolbar=yes|no|1|0 是否显示浏览器的工具栏。默认是 yes。
top=pixels 窗口的 y 坐标。
width=pixels 窗口的文档显示区的宽度。以像素计。

JavaScript学习第十九天相关推荐

JavaScript学习（十六）—实现购物车加减数量，计算总金额
JavaScript学习(十六)-实现购物车加减数量,计算总金额代码如下: <table border="2" cellspacing="0" soli ...
JavaScript学习（十五）—内部样式与外部样式的修改与设置
JavaScript学习(十五)-内部样式与外部样式的修改与设置 (一).行内样式获取方式:元素节点.style.CSS属性名称: 注意:如果CSS属性中包含"-",那么需要采用 ...
JavaScript学习（十四）—元素节点关系和特殊节点
JavaScript学习(十四)-元素节点关系和特殊节点一.元素节点 (1).parentElement: 获取某元素的父元素,它和parentNode的区别是parentElement获取到的值时 ...
JavaScript学习（十二）—removeAttribute方法、hasAttribute方法、createAttribute方法以及setAttributeNode方法
JavaScript学习(十二)-removeAttribute方法.hasAttribute方法.createAttribute方法以及setAttributeNode方法 (一).removeAt ...
JavaScript学习（十）—练习：实现日历
JavaScript学习(十)-练习:实现日历效果如下: 代码: <!DOCTYPE html> <html lang="en"><head> ...
JavaScript学习总结(十六)——Javascript闭包（Closure）
闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现.很早就接触过闭包这个概念了,但是一直糊里糊涂的,没有能够弄明白JavaScript的闭包到底是什 ...
JavaScript学习（十）
目录练习: String对象的方法 1.查找字符串 (1)charAt()方法 (2)indexOf()方法 (3)lastIndexOf()方法 2.截取字符串 (1)silce()方法 (2)s ...
跟燕十八学习PHP-第十九天-热身项目完善
/** 燕十八公益PHP培训课堂地址:YY频道88354001 学习社区:www.zixue.it **/ <?php /* $sql = 'select * from user'; $rs ...
JavaScript学习手册十五：事件处理
事件处理 1.注册事件处理程序任务描述相关知识 (1)为JavaScript对象设置一个函数 (2)设置HTML标签属性的值为事件处理程序 (3)调用addEventListener()函数代码 ...

JavaScript学习第十九天

BOM(Browser Object Model)

初始BOM

BOM的属性值为对象

BOM宽高的属性值

BOM坐标的属性

返回顶部

BOM框架相关的属性

BOM的方法之弹窗

BOM的方法之定时器

BOM的方法之窗口的加载

BOM的方法之窗口的调整

BOM的方法之窗口的移动

BOM的方法之窗口的滚动条

BOM的窗口的特征窗口特征（Window Features）

JavaScript学习第十九天相关推荐

最新文章

热门文章

JavaScript学习第十九天

BOM(Browser Object Model)

初始BOM

BOM的属性值为对象

BOM宽高的属性值

BOM坐标的属性

返回顶部

BOM框架相关的属性

BOM的方法之弹窗

BOM的方法之定时器

BOM的方法之窗口的加载

BOM的方法之窗口的调整

BOM的方法之窗口的移动

BOM的方法之窗口的滚动条

BOM的窗口的特征 窗口特征（Window Features）

JavaScript学习第十九天相关推荐

最新文章

热门文章

BOM的窗口的特征窗口特征（Window Features）