慕课前端入门-BOM基础
BOM
browser object model浏览器对象模型
BOM对象有window、navigator、screen、history、location、document、event。
1. window
window是浏览器的一个实例，在浏览器中，window对象有双重角色，它即使通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。
所有的全局变量和全局方法都被归于window上。
1.1 操作弹窗
| 方法 | 说明 | 实例 |
|---|---|---|
| window.alert(content) | 功能：显示带有一段消息和一个确认按钮的警告框 | alert("弹窗"); |
| window.confirm(message) | 功能：显示一个带有指定消息和确认、取消按钮的对话框 返回值：点击确定返回true；点击取消返回false | console.log(confirm("母鸡还能变鸭子啊")); |
| window.prompt(text,defaultText) | 参数说明：
如果用户点击确认，则返回输入的文本 | console.log(prompt("妹子，芳龄几何？",18)); |
1.2 open/close
| 方法 | 说明 | 实例 |
|---|---|---|
| window.open(pageURL, name, parameters) | 功能：打开一个新的浏览器窗口 参数说明
| window.open("http://www.baidu.com", "newwindow","width=400, height=200,left=0,top=0, toolbar=no,menubar=no, scrollbars=no,location=no, status=no"); |
| window.close() | 功能：关闭当前窗口 | window.close(); |
1.3定时器setTimeout
| 方法 | 说明 | 实例 |
|---|---|---|
| setTimeout(code, millisecond) | 功能：在指定的毫秒数后调用函数或计算表达式 参数说明： 1.code：要调用的函数或要执行的js字符串 2.millisecond：执行代码钱需等待的毫秒数 返回值：超时函数的ID | setTimeout('alert("第1次")',1000); |
| clearTimeout(id_of_setTimeout) | 功能：取消超时函数的执行 | |
| setInterval(code, millisecond) | 功能：每隔指定的时间执行一次代码 参数说明： 1.code:要调用的函数或要执行的代码串 2.millisecond：间隔，单位毫秒 返回值：间歇函数的ID | setInterval('console.log("第1次")',1000); |
| clearInterval(intervalId) | 取消间歇函数的执行 |
使用超时实现间歇打印
<script type="text/javascript">
var num=1,max=10,timer=null;
function inCreamentNum(){
console.log(num);
num++;
if(num<=max){
setTimeout(inCreamentNum,1000);
}else{
clearTimeout(timer);
}
}
timer=setTimeout(inCreamentNum,1000);
</script>
1.4 location对象属性
location对象提供了与当前窗口中加载的文档有关的的信息，还提供了一些导航的功能。它即使window对象的属性，也是document对象的属性。
| 方法 | 说明 | 实例 |
|---|---|---|
| location.href | 功能：返回当前加载页面的完整URL 与window.location.href等价 |
https://www.baidu.com/s?wd=adb sendevent 滑动&rsv_spt=1 |
| laction.hash | 1.有参数是设置锚点 2.返回URL中的锚点，如果没有就返回空字符串 |
<input type="button" value="去你奶奶的" id="btn"> |
| location.host | 功能：返回服务器名称和端口号 | 以上面的URL为例 host:www.baidu.com hostname:www.baidu.com pathname:/s port:"" protocol:https search:?wd=adb sendevent 滑动&rsv_spt=1 |
| location.hostname | 功能：返回不带端口号的服务器名称 | |
| location.pathname | 功能：返回URL中的目录和(或)文件名 | |
| location.port | 功能：返回URL中指定的端口号。如果没有，返回空字符串。 | |
| location.protocol | 功能：返回页面使用的协议 | |
| location.search | 功能：返回URL中的查询字符串，这个字符串以问号开头 | |
| location.replace() | 功能：重新定向URL，不会在历史记录中生成新记录 | |
| location.reload() | 功能：重新加载当前页面，即刷新 location.reload()//有可能从缓存中加载 location.reload(true)//从服务器重新加载 |
改变浏览器位置的方法有href, hash, search ,replace。replace与其他属性不同点在于不会留下历史记录。
1.5 history对象
history对象保存了用户在浏览器中访问页面的历史记录。
| 方法 | 说明 | 实例 |
|---|---|---|
| history.back() | 功能：回到历史记录的上一步 | history.back(); history.forward(); history.go(-1); history.go(2) |
| history.forward() | 功能：回到历史记录的下一步 | |
| history.go(n) | 功能：回到历史记录的第n步 n为正数，就前进；n为负数，就后退 |
1.6 掌握screen对象及其常用属性
screen对象包含客户端显示屏幕的信息。
获取浏览器窗口可视区域的高度和宽度，使用window.innerHeight和window.innerWidth
获取屏幕的高度和宽度，使用screen.availWidth和screen.availHeight(不包括任务栏)
//控制台直接打印
window.innerHeight;
window.innerWidth;
screen.availWidth;
screen.availHeight
1.7 navigator对象即属性userAgent扩展
navigator提供了浏览器即操作系统的信息。
userAgent用来识别浏览器名称、版本、引擎以及操作系统等信息。
//封装一个检测浏览器类型的方法
<script type="text/javascript">
function getBrowsers(){
//获取userAgent属性
var explorer = navigator.userAgent.toLowerCase(),browser;
if(explorer.indexOf("msie")>-1){
browser="IE";
}else if(explorer.indexOf("chrome")>-1){
browser="chrome";
}else if(explorer.indexOf("opera")>-1){
browser="opera";
}else if(explorer.indexOf("safari")>-1){
browser="safari";
}
return browser;
}
var explorer = getBrowsers();
alert("你当前使用的是"+explorer+"浏览器");
</script>
