• 周四. 12 月 12th, 2024

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

js-BOM操作

admin

11 月 28, 2021

####

浏览器对象模型(Browser Object Model (BOM))

####

所有浏览器都支持 window 对象。它代表浏览器的窗口。

所有全局 JavaScript 对象,函数和变量自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至(HTML DOM 的)document 对象也是 window 对象属性:

window.document.getElementById(“header”);

等同于:document.getElementById(“header”);

####

BOM-窗口操作

// window.open(); //打开一个新的tab页面,没什么用
// window.innerHeight; //获取浏览器的高度
// window.innerWidth; //获取浏览器的宽度
// window.close() //- 关闭当前窗口

BOM- location对象

// location对象(这些方法有用,需要记住)
// window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
// 常用属性和方法:

console.log(location.href); //获取URL
// console.log(location.href=”URL”); // 跳转到指定页面
// console.log(location.reload()); //重新加载页面

BOM-history对象

window.history 对象包含浏览器历史。

window.history 对象可不带 window 书写。

history.back() – 等同于在浏览器点击后退按钮
history.forward() – 等同于在浏览器中点击前进按钮

BOM-Navigator对象

window.navigator 对象包含有关访问者的信息。

navigator.appName // 返回”Netscape”网景公司,”Netscape” 是 IE11、Chrome、Firefox 以及 Safari 的应用程序名称的统称。
navigator.appCodeName  //”Mozilla” 是 Chrome、Firefox、IE、Safari 以及 Opera 的应用程序代码名称。
navigator.platform  // mac ,Windows

navigator.cookieEnabled // 属性返回 true,如果 cookie 已启用,否则返回 false:

navigator.product  //属性返回有关浏览器的版本信息:

navigator.userAgent  //属性返回由浏览器发送到服务器的用户代理报头(user-agent header):

navigator.language // 属性返回浏览器语言:

BOM-弹出框

JavaScript 有三种类型的弹出框:警告框、确认框和提示框。

// 警告框
// 当警告框出现后,用户需要点击确定按钮才能继续进行操作。
// 语法:
// alert(“你看到了吗?”);

// 确认框(了解即可)
// 当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。
// 如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。
// 语法:
// confirm(“你年满18岁了吗?”);

// 提示框(了解即可)
// 提示框经常用于提示用户在进入页面前输入某个值。
// 当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
// 如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。
//语法:
// prompt(“请在下方输入”,”你的答案”);

BOM-计时器 

// 计时相关
// 通过使用 JavaScript,我们可以在一定时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。

// 第一个:setTimeout()
var ret=setTimeout(“alert(123)”,5000) //第一个参数是你要执行的语句是什么,第二个参数是你要等多少秒之后执行,
console.log(ret)

function foo() {
console.log(“呵呵”)
}

console.log(setTimeout(foo,3000));
//使用的时候往往会使用函数的形式

// 对应的一个:clearTimeout()
// 在指定时间之后执行一次相应函数
// var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
// clearTimeout(timer);

// 第二个:setInterval()
console.log(setInterval(foo,1000));//这是每隔1秒钟执行一次函数,
// setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
// 对应的就是:clearInterval()

####

#####

发表回复