BOM简介Browser Object Model 浏览器对象模型专门操作浏览器窗口或软件的一套对象和方法的集合获取浏览器软件的信息或操作当前窗口时，都可以用BomBom没有标准，所以有兼容性问题window对象代替了ES标准中的global对象，充当全局作用域对象 eg:var a=10; a实际保存在window中保存所有我们可以直接使用的原生的对象和函数 原生：浏览器中已经自带的，我们不需要创建或下载，就可以直接使..............
BOM简介
Browser Object Model 浏览器对象模型,专门操作浏览器窗口或软件的一套对象和方法的集合
BOM没有标准，所以有兼容性问题
BOM比Dom更大，它包含Dom，documnet就是dom
window对象
BOM的核心是window对象，表示浏览器的实例。
window对象保存了所有可以直接使用的原生的对象和函数
原生的对象和函数：浏览器中已经自带的，我们不需要创建或下载，就可以直接使用的一切代码都是原生。包括ES/DOM/BOM
通过var声明的全局变量和函数都会变成window对象的属性和方法。
wndow下的一个特殊属性window.name,就是建议不要声明这个，var name
window下包含六大对象
location history navigator document (DOM) screen event
window窗口
所有现代浏览器都支持4个属性innnerWidth,innerHeight,outerWidth,outerHeight
打开窗口：window.open();
关闭窗口：window.close();
还代表了当前正在打开的浏览器窗口
窗口的完整大小：window.outerWidth(窗口完整宽 这里包括窗口的阴影)
window.outerHeight（ window.outerHeight<=36来判断窗口是否最小化了，小于36就是最小化了）
文档显示区范围： window.innerwidth(文档显示区 就是代码网页)
window.innerHeight
当窗口内容都加载完成后，自动执行：
window.οnlοad=function(){ } //事件
当窗口大小重新改变时，自动触发
window.οnresize=function(){ }//事件
案列：随着窗口大小，自动调整内部div的宽与窗口等宽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul{
list-style:none;
}
ul>li{
float:left;
border:1px solid #555;
padding: 5px 10px;
text-align: center;
}
ul>li>div{
width:100%; /*如果将来设置wdith:100%不管用,就可以用 window.onresize */
height:200px;
border:1px solid #555;
position:absolute;
top:50px;
left:0;
}
</style>
</head>
<body>
<ul>
<li>
<span>一级菜单</span>
<div>二级菜单</div>
</li>
</ul>
</body>
<script>
//当窗口加载完成后，自动执行一项任务
window.onload=function(){
//找到div
var div=document.querySelector("ul>li>div");
div.style.width=window.innerwidth+"px";
}
//当窗口大小重新变化时自动执行一项任务
window.onresize=function(){
//找到div
var div=document.querySelector("ul>li>didv");
div.style.width=window.innerWidth+"px";
</div>
}
</script>
</html>
打开新链接
在当前窗口打开，可后退
HTML <a href="url" target="_self">
JS window.open("url","_self");
在当前窗口打开，禁止后退
JS(只能用js实现)：location.replace("新的url")
在新窗口打开，可打开多个
HTML <a herf="url" target="_blank">
JS window.open("url","_blank");
在新窗口打开，只能打开一个
HTML <a herf="url" target="自定义窗口名">
JS window.open("url","自定义窗口名");
每个窗口在浏览器内存中都有一个唯一的窗口名
浏览器规定相同名称的窗口只能打开一个。后打开的同名窗口，会把先打开的同名窗口覆盖掉。
我们可以通过a的target属性和window.open()的第二个参数为新窗口指定自定义的名称：
eg:< a href="http://www.baidu.com" target="tmooc">或window.open("http://www.baidu.com","baidu"):
当单击a或按钮时，会打开新窗口，但是窗口名会被改为tmooc.
tmooc就保存在了window.names属性中。window.name是BOM中专门保存窗口名的特殊意义的属性。所以，自己起变量名或属性名时，绝对不能用name.
因为名为tmooc的窗口在内存中已经存在了，所以，将来如果重复点击按钮时，虽然会打开新的窗口，但是新的同名窗口会覆盖掉旧的同名窗口，最后只会有一个窗口被保留下来。
预定义窗口名：_self 将当前窗口自己的名字贡献给新窗口。结果，当前窗口自己被新窗口覆盖。
_blank 不指定任何新窗口名。但是浏览器不会让窗口名空着。浏览器绝对不会让窗口名空着。浏览器会自动给新窗口随机起名。因为随机取名一定不会重复，所以_blank打开的窗口可以反复打开多个
视频：
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<link rel="stylesheet" type="text/css" href="my.css">
<script>
function open1(){
window.open("http://www.baidu.com","_self");
}
function open3(){
location.replace("http://www.baidu.com");
}
function open6(){
window.open("http://www.baidu.com","mylove");
}
function open7(){
window.open("http://www.baidu.com","_blank");
}
</script>
</head>
<body>
<h3>在当前窗口打开，可后退</h3>
<a href="http://www.baidu.com" target="_self">go</a>
<button onclick="open1()">go to</button>
<h3>在新窗口打开，禁止后退</h3>
<button onclick="open3()">go to</button>
<h3>在新窗口打开，可打开一个</h3>
<a href="http://www.baidu.com" target="mylove">go</a>
<button onclick="open6()">go to</button>
<h3>在新窗口打开，只能打开多个</h3>
<a href="http://www.baidu.com" target="_blank">go</a>
<button onclick="open7()">go to</button>
</body>
</html>
history对象
浏览器中，专门保存当前窗口打开后，成功访问过的所以url的数组。
只有在前进、后退、刷新时，才用history
history.go(i)
前进一步 history.go(1)
后退一步 history.go(-1) //当后退一步不管用时，可以后退2步 history.go(-2)
刷新 history.go(0)
视频：
location对象
浏览器窗口的地址栏，专门保存当前窗口正在打开的url地址信息。
location可以获取url信息，执行跳转操作
location分段获取url各个部分的信息 最后两个补充视频
location.href 获取完整的url
location.protocol 获得//前的协议部分
location.host 获取主机名+端口号
location.hostname 获得主机名
location.port 获得端口号
location.pathname 获得相对路径
location.search 获得地址栏中显示的表单提交的查询字符串 ？变量1=值1 & 变量2=值2 & .....
location.hash 获得url中的锚点 #top
视频：
执行跳转操作的函数
在当前窗口打开可后退 location.assign("新url") ====window.open("新url","_self")
在当前窗口打开禁止后退 location.replace("新url")
刷新页面 location.reload();
navigator对象
专门保存浏览器配置信息的对象
当需要检查浏览器配置时就可以用它。
navigator.userAgent : 获取当前浏览器的名称、内核、版本号
navigator.plugins: 保存当前浏览器安装过的所以插件信息的关联数组
检查是否安装了某个插件
navigator["插件全名"]!==undefined 说明装了插件
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<link rel="stylesheet" type="text/css" href="my.css">
</head>
<body>
</body>
<script>
//查看浏览器内核 版本号 名称
console.log(navigator.userAgent);
//查看浏览器安装的插件信息
console.log(navigator.plugins);
//判断浏览器是否安装pdf插件
if(navigator.plugins["Chrome PDF Viewer "]!==undefined){
document.write(`已安装pdf插件,可以查看pdf电子书`)
}else{
document.write(`未安装pdf插件,请<a href="#">点此安装</a>`)
}
</script>
</html>
screen对象
screen内容很多重点，就是那个scrollxy这个东西，我一直都分不清楚
事件
浏览器自动触发的或用户手动触发的页面内容或状态的改变就是事件
绑定事件处理函数的方式
事件处理函数：希望当事件发生时自动执行的函数
事件绑定：提前将事件处理函数，保存在元素的事件属性上.仅保存暂不执行。当事件发生时，浏览器会自动找到元素身上对应事件属性上保存的函数，自动执行
html中绑定事件
在元素的开始标签中，为元素的事件属性添加一条函数调用语句，在head的script标签里定义事件处理函数
但这种方式事件绑定分散在网页的各个角落，不符合内容与行为分离的原则，不便于维护
<元素 on事件名=“事件处理函数（）”>
function 事件处理函数（）{
........
}
案例：在html中绑定事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<!-- 在html中绑定事件 -->
<div onclick="bk()">111111</div>
</body>
<script>
function bk(){
var div=document.getElementsByTagName("div")[0];
div.style.width=200+"px";
div.innerHTML=2222;
}
</script>
</html>js中通过赋值方式绑定事件
1.查找元素
2.元素.on事件名=function(){.......}
所有事件绑定都集中在js中，便于维护
但无法让同一个元素的同一个事件，同时绑定多个事件处理函数
案列：js赋值方式绑定事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 事件监听和js绑定事件 -->
<button id="btnShoot">shoot</button><br/>
<button id="btnAward">获得跟踪导弹</button><br/>
</body>
<script>
// 点击shoot发射子弹
var btnShoot=document.getElementById("btnShoot");
btnShoot.onclick=function(){
console.log("发射子弹.....");
}
//点击获得跟踪导弹，不发射子弹，给shoot增加一种新子弹，并且之后shoot可以发送两种子弹
var btnAward=document.getElementById("btnAward");
btnAward.onclick=function(){
// js绑定事件
bt
最低0.47元/天 解锁文章
1050
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
