第四章 BOM

Posted 2021-02-20 xu1296634150

BOM:Browser Object Model

4.1.系统对话框方法

• alert()

#警告框
window.alert(‘mjj‘);

• confirm()

#确认框
var a = window.confirm(‘你确定要离开网站?‘);
console.log(a);

如果点击确定,a的值返回true,点击取消,a的值返回false

• prompt()

#弹出框
var name = window.prompt(‘请输入你早晨吃了什么?‘,‘mjj‘);
console.log(name);

prompt()方法接收两个参数,第一个参数是显示的文本,第二个参数是默认的文本,如果点击了确定,则name的结果为mjj

4.2 定时器

• 一次性任务

•  只执行一次 毫秒计时:1000毫秒==1秒)

var timer = setTimeout(callback,2000);callback是回调函数

clearTimeout(timer);

window.setTimeout(function()){
    console.log(‘1111‘);
},2000);
console.log(‘222‘); 先打印222，在打印111，异步的操作不阻塞

• 周期性循环

var timer = setInterval(callback,2000);callback是回调函数

var num =0;
var timer = null;
#开启定时器
timer = window.setsetInterval(function(){
    num ++;
    if (num ===10){
        clearInterval(timer);清除定时器
    }
    console.log(num);
},2000)

//清除定时器 关闭
clearInterval(timer);

4.3 location对象的属性和方法

location 对象是很特别的一个对象，因为它既是 window 对象的属性，也是document 对象的属性;换句话说，window.location 和document.location 引用的是同一个对象。 location 对象的用处不只表现在它保存着当前文档的信息，还表现在它将 URL 解析为独立的片段，让 开发人员可以通过不同的属性访问这些片段。

属性名	例子	说明
hash	#content”	返回URL中的hash(#),如果没有,则返回空字符串，例如网易云音乐的网站
host	“www.apeland.cn:80”	返回服务器名称和端口号
hostname	“www.apeland.cn”	返回不带端口号的服务器名称
href	“https://www.apeland.cn/web“	返回当前加载页面的完成URL
pathname	‘’/web/“	返回url中的目录和文件名
port	‘80’	返回url中指定的端口号,如果url中不包含端口号,则这个属性返回空字符串
seach	“?name=zhangsan”	返回url的查询字符串,这个字符串以问号开头
protocol	“https:”	返回页面使用的协议.通常是http:或https:

• 浏览器有自带的缓存功能和记录功能

console.log(window.location);--可以打印属性和方法
location.reload() 可以做测试，reload承载页面
局部刷新ajax技术：在不重载页面的情况下，对网页进行操作

• href属性：使用location对象可以通过很多方式来改变浏览器的位置.首先,也是最常用的方式通过href属性将其传递一个url

#2秒之后跳转到小猿圈的web页面
setTimeout(function(){
    location.href = ‘https://www.apeland.cn/web‘;
},2000)

#2秒之后跳转网页但不会产生历史记录
setTimeout(function(){
    location.replace(‘https://www.apeland.cn/web‘);
},2000)

• reload ()方法： 它的作用是重新加载当前显示的页面,如果调用 reload() 时不传递任何参数，页面就会以最有效的方式重新加载。也就是说，如果页面自上次请求以来并没有改 变过，页面就会从浏览器缓存中重新加载。如果要强制从服务器重新加载，则需要像下面这样为该方法 传递参数 true。

location.reload();//重新加载(有可能从缓存中加载)
location.reload(true);//重新加载(强制从服务器加载)

• navigator 对象

//此方法只适应非IE浏览器
function hasPlugin(name){
    console.log(navigator.plugins);
    var   name = name.toLowerCase();
    for (var i=0; i < navigator.plugins.length; i++){
        if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){ return true;
                                                                       } }
    return false;
}
//检测 Flash 
alert(hasPlugin("Flash"));
alert(hasPlugin("Native Client"));

• historg对象：history 对象保存着用户上网的历史记录,使用 go()方法可以在用户的历史记录中任意跳转，可以向后也可以向前。这个方法接受一个参数， 表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转(类似于单击浏览器的“后退”按钮),正数表示向前跳转(类似于单击浏览器的“前进”按钮)。 看例子:

//后退一页 history.go(-1);
//前进一页 history.go(1);
//前进两页 history.go(2);