JavaScript之BOM操作
一, 什么是BOM
BOM:Browser Object Model,浏览器对象模型
BOM的结构图:
从上图也可以看出:
- window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象。
- DOM是BOM的一部分。
window对象:
- window对象是JavaScript中的顶级对象。
- 全局变量、自定义函数也是window对象的属性和方法。
- window对象下的属性和方法调用时,可以省略window。
二, BOM 的常见内置方法和内置对象
弹出系统对话框:
比如说,alert(1)
是window.alert(1)
的简写,因为它是window的子方法。系统对话框有三种:
alert(); //不同浏览器中的外观是不一样的
confirm(); //兼容不好
prompt(); //不推荐使用
打开窗口、关闭窗口:
打开窗口:
window.open(url,target)
//url:要打开的地址。
//target:新窗口的位置。可以是:_blank 、_self、 _parent 父框架。
关闭窗口:
window.close() - 关闭当前窗口 (只能关闭用js的window.open()打开的页面)
获取窗口宽高:
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
定时器:
在js中的定时器分两种:1. setTimeout() 2. setInterval()
setTimeOut():
只在指定时间后执行一次
/定时器 异步运行
function hello(){
alert("hello");
}
//使用方法名字执行方法
var t1 = window.setTimeout(hello,1000);
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
window.clearTimeout(t1);//去掉定时器
setInterval():
在指定时间为周期循环执行
/实时刷新 时间单位为毫秒
var t = setInterval('refreshQuery()',8000);
/*刷新查询 */
function refreshQuery(){
console.log('每8秒调一次')
}
window.clearInterval(t);//去掉定时器
两种方法根据不同的场景和业务需求择而取之,
对于这两个方法,需要注意的是如果要求在每隔一个固定的时间间隔后就精确地执行某动作,那么最好使用setInterval,而如果不想由于连续调用产生互相干扰的问题,尤其是每次函数的调用需要繁重的计算以及很长的处理时间,那么最好使用setTimeout
location对象:
window.location
可以简写成location。location相当于浏览器地址栏,可以将url解析成独立的片段。
location对象的属性
- href:跳转
- hash 返回url中 # 后面的内容,包含#
- host 主机名,包括端口
- hostname 主机名
- pathname url中的路径部分
- protocol 协议 一般是http、https
- search 查询字符串
location.href属性举例:
举例1:点击盒子时,进行跳转
<body>
<div>百度一下</div>
<script>
var div = document.getElementsByTagName("div")[0];
div.onclick = function () {
location.href = "http://www.baidu.com"; //点击div时,跳转到指定链接
// window.open("http://www.baidu.com","_blank");
//方式二
}
</script>
</body>
举例2:5秒后自动跳转到百度
有时候,当访问一个不存在的网页时,会提示5秒后自动跳转到指定页面,此时就可以用到location。举例:
<script>
setTimeout(function () {
location.href = "http://www.baidu.com";
}, 5000);
</script>
location.reload():重新加载
setTimeout(function(){
//3秒之后让网页整个刷新
window.location.reload();
},3000)
navigator对象
window.navigator 的一些属性可以获取客户端的一些信息
- userAgent:系统,浏览器
- platform:浏览器支持的系统,win/mac/linux
例子:
console.log(navigator.userAgent);
console.log(navigator.platform);
history对象
后退:
history.back()
history.go(-1):0是刷新
前进:
history.forward()
history.go(1)
screen对象
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
JavaScript之BOM操作的更多相关文章
- javaScript之BOM操作1
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javaScript之BOM操作2
<!doctype html> <html lang="en"> <head> <title>Document</title& ...
- Javascript学习--BOM操作
1 获取UA(user Agent)用户代理 <!DOCtype html> <html> <head> <title></title> & ...
- JavaScript 中BOM的常用操作
JavaScript BOM操作 1.获取浏览器窗口尺寸 var width=window,innerWidth //获取可视窗口宽度 var height=window.innerHeight // ...
- 前端javascript之BOM、DOM操作、事件
BOM与DOM操作 BOM 浏览器对象模型>>>:使用js操作浏览器 DOM 文档对象模型>>>:使用js操作前端页面 window对象 所有浏览器都支持 wind ...
- JavaScript的BOM、DOM操作、节点以及表格(二)
BOM操作 一.什么是BOM BOM(Browser Object Model)即浏览器对象模型. BOM提供了独立于内容 而与浏览器窗口进行交互的对象: BOM由一系列相关的对象构成 ...
- 第一百一十一节,JavaScript,BOM浏览器对象模型
JavaScript,BOM浏览器对象模型 学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM ...
- JavaScript DOM&BOM
1.DOM含义 D: Document 文档 一份文档就是一棵节点树,每个节点都是一个对象O:Object 对象 JavaScript语言里对象可以分为三种类型: (1)用户定义的对象(user-de ...
- JavaScript的BOM和DOM
JavaScript的BOM和DOM 1,window对象,所有浏览器都支持window对象,它表示浏览器窗口 BOM(browser Object Model)是指浏览器对象模型,它使JavaScr ...
随机推荐
- MySQL简版(一)
第一章 数据库的基本概念 1.1 数据库的英文单词 Database,简称DB. 1.2 什么是数据库? 用于存储和管理数据的仓库. 1.3 数据库的特点 持久化存储数据的.其实数据库就是一个文件系统 ...
- java:Conllection(List,set,get,map,subList)使用
list中的contains:是否包含指定元素 list中的SubList: 返回列表中指定的 fromIndex(包括 )和 toIndex(不包括)之间的部分视图. List<String ...
- 【leetcode】1124. Longest Well-Performing Interval
题目如下: We are given hours, a list of the number of hours worked per day for a given employee. A day i ...
- dnsmasq+Stunnel+sniproxy加密代理
一.环境介绍 [root@kimissVPN ~]# cat /etc/redhat-release CentOS release 6.8 (Final) [root@kimissVPN ~]# un ...
- Redis实战(十一)Redis面试题
序言 单线程的redis为什么这么快? 1.纯内存操作不需要进行磁盘的 IO 2.单线程操作避免了频繁上下文切换 3.采用非阻塞的多路I/O复用模型 什么是路I/O复用模型? 核心是监听socket, ...
- [USACO17JAN]Promotion Counting 题解
前言 巨佬说:要有线段树,结果蒟蒻打了一棵树状数组... 想想啊,奶牛都开公司当老板了,我还在这里码代码,太失败了. 话说奶牛开个公司老板不应该是FarmerJohn吗? 题解 刚看到这道题的时候竟然 ...
- 【bzoj4551】[Tjoi2016&Heoi2016]树
*题目描述: 在2016年,佳媛姐姐刚刚学习了树,非常开心.现在他想解决这样一个问题:给定一颗有根树(根为1),有以下 两种操作:1. 标记操作:对某个结点打上标记(在最开始,只有结点1有标记,其他结 ...
- A Network in a Laptop: Rapid Prototyping for Software-Defined Networks
文章名称:A Network in a Laptop: Rapid Prototyping for Software-Defined Networks 文章来源:Lantz B , Heller B ...
- 小程序app.js小结
小程序app.js app.js import { ApiUrl } from 'utils/apiurl.js'; import { httpReq } from 'utils/http.js'; ...
- 百度地图 API 及使用
如果我们想使用地图的功能,我们就得使用别人的接口,百度地图无疑是个不错的选择 百度地图的网址:http://lbsyun.baidu.com/ 我们想使用里面的功能,就必须要获取密钥 如果时第一次使用 ...