js-BOM基础部分
js--BOM
@(js基础部分)
BOM的含义： BOM（Browser Object Document）即浏览器对象模型。
- BOM提供了独立于内容 而与浏览器窗口进行交互的对象；
由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；
- BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；
- BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。
一、 window对象是BOM的核心对象, 它将整个浏览器看成是一个对象
window对象是js中的顶级对象，所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法，在调用的时候可以省略window。
例：打开窗口 window.open(url,target,param);
// url 要打开的地址
//target 新窗口的位置 _blank _self _parent(父框架)
//param 新窗口的一些设置
//返回值，新窗口的句柄
关闭窗口：window.close();
1,window对象包括了整个js运行时的作用域(全局作用域)
2,所有全局作用域下的变量和函数都是window对象的属性和方法
function test(){
console.log("this is test");
}
window.test();
window.setInterval(function (){console.log(1);}, 1000);
3,要访问一个对象的属性和方法, 语法: 对象名.属性名(方法名)
如果一个属性(方法)是直接依附于window对象, 那么在访问的时候,
可以省略对象名和.操作符
利用这个特性，
可以用于判断全局作用域下是否存在某变量或者函数
var a = 1;
if(window.a){
console.log(a);
}
function test(){
console.log("this is test");
}
if(window.test && typeof window.test == "function"){
test();
}//用于判断是否存在全局作用域下的变量或者函数
var btn = document.getElementById('btn');
btn.onclick = function (){
};//这种写法是为了避免产生全局变量
二、1、 window对象常用方法
1、定时器
var btn = document.getElementById('btn');
btn.onclick = function (){
//定时器的第一个参数: 函数
//1. 传匿名函数的定义
//2. 传已经定义的函数的名称
// 3. 传一小段字符串形式的js代码
window.setInterval("console.log(1)", 1000);
对于字符串形式的js代码运行机制:
js的解释器会在全局作用域下临时创建一个函数,
这个函数的代码就是字符串形式给出的代码
};
2、系统对话框
1, alert()方法:
参数: 需要弹出的字符串
功能: 在页面上弹出一个系统对话框, 框中显示参数字符串
返回值: 无(undefined)
var res = window.alert('abc');
console.log(res);
2,confirm()方法:
参数: 需要弹出显示字符串
功能: 弹出一个系统对话框, 显示参数字符串内容.
对话框有两个按钮, 一个确定, 一个取消
返回值:
1. 如果点击的是确定, 返回true
2. 如果点击的是取消, 或直接关闭, 返回false
var res = window.confirm("你确定吗?");
console.log(res);
3.、prompt()方法:
两个参数:
1. 提示字符串
2. (可选)默认内容字符串
功能: 弹出一个系统对话框, 显示参数一的提示字符串,
同时框中出现一个输入框, 附带两个按钮, 确定和取消
如果指定了第二个参数的话, 框中的输入框会使用该参数的值作为默认值
返回值:
1. 如果点击的是确定, 返回框中输入的字符串
2. 如果点击的是取消或关闭, 返回null
var res = window.prompt('提示字符串','默认值)
//默认值为匹配字符串
系统对话框的特点：
-
对话框代码有代码阻塞效应，一旦停止对话框函数执行，js代码立即被挂起（暂停）。* 指定对话框被处理（确定或者关闭）。
-
对话框是模态的，如果不对对话框进行处理，那么无法点击以及和页面的任何其他内容做出交互。
-
与页面无关。
- 对话框的样式是不能更改的
- 只能由操作系统和浏览器本身决定。
二、2、window对象的常用属性
1、页面可视区域的宽高
- window对象的innerWidth属性, 可以获取整个页面可视区域的宽度
window.innerWidth;
- window对象的innerHeight属性, 可以获取整个页面可视区域的高度
window.innerHeight
注：还可以使用document对象下的documentElement对象的clientWidth属性获得，document是将整个文档看成一个对象documentElement其实是html这个标签元素
window.document.documentElement.clientWidth;
页面的可视区域的高度还可以使用document对象下documentElement对象的clientHeight属性获得
window.document.documentElement.clientHeight
- 注意：innerXXX属性包括了页面的的滚动条的的宽（高）；
- 而clientXXX属性不包括页面的滚动条的宽（高）
2、浏览器的宽高相关
- window对象的outerWidth属性, 可以获取这个浏览器的宽度
window.outerWidth
- window对象的outerHeight, 可以获取这个浏览器的高度
window.outerHeight;
3、window几种常用事件
- window的onscroll事件, 会在页面发生滚动时触发
window.onscroll = function (){
//通过document对象下的documentElement对象的scrollTop属性
//可以获取页面垂直方向的滚动距离
//firefox以及IE下可以获取值, chrome一直为0
var st = document.documentElement.scrollTop;
//chrome下可以通过document.body的scrollTop属性去获取
//此属性在firefox以及IE下一直为0
var st = document.body.scrollTop;
//对于兼容性的处理Chrom与其他
var st = document.documentElement.scroollTop || document.body.scrollTop
//水平方向获得滚动距离
var sl = document.documentElement.scrollLeft ||document.boy.scrollLeft;
window.onload = function (){
var btn = document.getElementById('btn');
btn.onclick = function (){
//访问scollTop(Left)属性可以获取到滚动距离
//给这个属性赋值, 可以改变滚动距离
//赋值是需要同时写两行, 以保证兼容性
document.body.scrollTop = 200;
document.documentElement.scrollTop = 200;
};
};
- window对象的onload事件, 在页面完全加载完后
立即触发
注：onload旨在文档加载完成之后运行里面的函数，正常情况下是不可以将script标签放在body标签前面的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
<script>
// window对象的onload事件, 在页面完全加载完后立即触发
window.onload = function (){
var btn = document.getElementById('btn');
btn.onclick = function (){
console.log("btn is clicked");
};
};
</script>
</head>
<body style="height:2000px;width:2000px;">
<input type="button" id="btn" value="测试">
</body>
</html>
- window的onclick事件（注意观察去区别）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
<script>
// window对象的onload事件, 在页面完全加载完后立即触发
window.onload = function (){
var btn = document.getElementById('btn');
btn.onclick = function (){
console.log("btn is clicked");
};
};
</script>
</head>
<body style="height:2000px;width:2000px;">
<input type="button" id="btn" value="测试">
</body>
</html>
（补充）只在IE下生效的几种常用方法
- 1、 moveBy方法可以让浏览器窗口相对于当前位置移动一定距离
范围只能在屏幕的可视区域
参数:
1) 整数,水平方向的移动距离, 负值倒退, 正值前进
2) 整数,垂直方向的移动距离, 负值往上, 正值往下
window.moveBy(100,100);
- 2、 moveTo方法可以让浏览器窗口移动到指定位置
范围只能在屏幕的可视区域
参数:
1) 整数,水平方向的终点位置
2) 整数,垂直方向的终点位置
window.moveTo(-100,100);
- 3、resizeBy方法可以让浏览器窗口相对于当前大小变化一定大小
范围只能在屏幕的可视区域
参数:像素, 正值代表放大, 负值代表缩小
1) 整数,水平方向的变化宽度
2) 整数,垂直方向的变化高度
window.resizeBy(100,100);
- 4、resizeTo方法可以让浏览器窗口变化到一定大小
范围只能在屏幕的可视区域
参数:像素
1) 整数,宽度终点
2) 整数,高度终点
window.resizeTo(300,400);
这些方法是W3C的标准方法, IE具体地实现了这些方法的功能
firefox和chrome虽然有这些方法, 但是没有具体去实现
相关练习，制作一个回到顶部的按钮
window.resizeBy(100,100);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
<script>
// window对象的onload事件, 在页面完全加载完后立即触发
window.onload = function (){
var btn = document.getElementById('btn');
btn.onclick = function (){
console.log("btn is clicked");
};
};
</script>
</head>
<body style="height:2000px;width:2000px;">
<input type="button" id="btn" value="测试">
</body>
</html>
- 常规写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
body {height: 5000px;}
#btn{
position: fixed;right: 50px; bottom:80px;
border:none;
background: rgba(0,0,0,.8);
color: #fff;
width: 60px;
height: 60px;
font-size: 30px;
transition:all .8s;
outline: none;
}
#btn:hover {
background: #C6C2C2;
transform:rotate(900deg);
border-radius:30px;
color: #434242;
font-size: 25px;
}
</style>
<body>
<input type="text" id="inp">
<div>dasdasdasas sdaerawdasfasfasfasrfasfasfasfasfsa</div>
<input type="button" value="↓" id="btn">
<script>
var btn = document.getElementById('btn');
btn.onclick = function(){
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>
注：location对象
- location对象将浏览器的地址栏看做是一个对象
- location是window对象的一个属性
*location对象的属性
- 1、location对象的href属性：1. 可以用来获取或者修改地址栏的url，访问该属性，表示获取地址栏值（字符串）
`var res = window.location.href;
console.log(res);
//给该属性赋值，可以改变页面地址（相当于跳转）
location.href = 'http://www.baidu.com'
location对象的常用方法
1,assign():用于页面跳转
* 参数：需要一个字符串（url）作为参数
* 功能：跳转到指定的页面
var url = 'http://www.baidu.com/';
location.assign(url);//跳转至百度'http://www.baidu.com'
2,replace():用于页面跳转
- 参数：需要一个字符串（url）作为参数
- 功能跳转到指定页面
- 注意：用replace作的页面跳转没有历史记录
var url = 'http://www.baidu.com';
location.replace(url);//跳转至指定页面
3,reload()方法：用于刷新（重新加载）页面
- 参数：（可选）布尔值，名称是fromServe，含义是是否重新加载所有媒体资源
true：重新从服务加载所有的媒体资源
false：不重新加载媒体资源（使用本地缓存）
** 功能：刷新页面 **
location.reload();
练习：在页面上作一个输入框及一个按钮实现输入什么转到百度搜索的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<!-- 输入框 -->
<input type="text" id="inp">
<!-- 搜索按钮 -->
<input type="button" id="btn" value="百度一下">
<script>
var btn = document.getElementById('btn');
btn.onclick = function (){//整体思路是获取输入框里的值与网页api拼接起来，利用location方法跳转。
var inp = document.getElementById('inp');
var str = inp.value;//获取输入框里的value
var url = "http://www.baidu.com/s?wd=" + str;//'s?wd='百度的一个api,'s?'即是search什么，语义化理解
location.href = url;
};
</script>
</body>
</html>
注2：navigator对象
- navigator对象将浏览器的基本信息封装到了对象中去
1、 navigator对象的appVersion，
标示了当前浏览器的版本
window.navigator.appVersion;
2、navigator对象的appName属性，
标示了但前浏览器的名称（内核最初的厂商）
window.navigator.appName
3、navigator对象的platform属性，
标示了当前浏览器运行的系统平台
window.navigator.platform
以上这三个属性现在基本已经弃用了，统一由userAgent属性代替，这个属性包含了关于浏览器的所有基本信息
- chrome:
Mozilla/5.0 (Windows NT 6.1; WOW64)
AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/56.0.2924.87 Safari/537.36- firefox:
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:51.0)
Gecko/20100101 Firefox/51.0- IE:
Mozilla/5.0 (MSIE 9.0; qdesk 2.4.1266.203;
Windows NT 6.1; WOW64; Trident/7.0; SLCC2;
.NET CLR 2.0.50727; .NET CLR 3.5.30729;
.NET CLR 3.0.30729; Media Center PC 6.0; rv:11.0)
like Gecko
如何判断浏览器品牌示例代码
var res = navigotar.userAgent
console.log(res);
if(res.indexOf("WebKit") != -1 && res.indexOf('Chrome') != -1){
console.log('这是谷歌浏览器');
} else if(res.indexOf("Gecko") != -1 && res.indexOf('Firefox') != -1){
console.log("这是火狐浏览器");
} else if(res.indexOf('Trident') != -1 && res.indexOf("MSIE") != -1){
console.log("这是IE浏览器");
}
window对象的常用属性--窗口大小
补充：逻辑运算短路
- 含义：在进行逻辑运算的时候，如果前面的运算已经能够唯一确定整个运算的结果，那么后面的表达式将不再运行
- 例如
var a = 1;
a++; // 结果1
var res = true || a++;
true && a++;
alert(a);
blog示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 逻辑中断 （短路操作）
// 逻辑或： ||
// 逻辑与： &&
// 逻辑或：
// 语法： 表达式1 || 表达式2
// 如果第一个表达式的值为真：则返回表达式1
// 如果第一个表达式的值为假：则返回表达式2
// 逻辑与：
// 语法： 表达式1 && 表达式2
// 如果第一个表达式的值为真：则返回表达式2
// 如果第一个表达式的值为假：则返回表达式1
// var b = 123 || 456 || 345;//无论后面是什么运算都已经在123处结束了。第一个‘真’的地方。
var b = 0 || 456 || 34;//返回456，如果第一个是假的话，会去后面找真得，找到就会结束运算。
console.log(b);
// 应用场景：函数的参数默认值
function fn(num1) {
// console.log(num1);
num1 = num1 || 1;
// if(num1 !== 0) {
// num1 = 1;
// }
console.log(num1);
}
// 如果不穿参数，num1的值：undefined
fn(); // 0
fn(123); // 123
// 逻辑与
// var b = 123 && 456 && 34;//打印34，尽管34为真，但是因为他是最后一个，如果第一个为假的话就会直接在第一个运算的地方结束。
// var b = 0 && 456;
// console.log(b);
// 做判断的时候
// if( 条件1 && 条件2 && 条件3)
// if( 条件1 || 条件2 || 条件3)
//
</script>
</body>
</html>
