JS之BOMBOM!
什么是BOM?
bom即browser object model 也就是浏览器对象模型,BOM由多个对象组成,其中代表浏览器窗口的window对象是BOM的顶层对象,其他对象都是该对象的子对象。
顶层对象:window
子对象:location:location 对象包含有关当前 URL 的信息;
history:History 对象包含用户(在浏览器窗口中)访问过的 URL;
screen:Screen 对象包含有关用户屏幕的信息;
navigator:Navigator 对象包含有关访问者浏览器的信息;
document:Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问;
event:Event 对象代表着事件对象的状态。
一.window对象:
(一)alert警告框
语法:window.alert();或 alert();
功能:显示一段带有消息和确认按钮的警告框
(二)confirm选择框
语法:window.confirm();或 confirm();
功能:显示一个带有指定消息的和确定及取消按钮的对话框
返回值:用户点击确定,confirm()返回true
用户点击取消,confirm()返回false
(三)prompt输入框
语法:window.prompt(text[,defaultText]);或者 prompt(text,[,defaultText]);
参数:text:要在对话框中显示的纯文本(不是HTML格式文本)
defaultText:默认的输入文本
返回值:如果用户点击提示框的取消按钮,则返回null
如果用户点击确定按钮,则返回输入的内容
(四)open打开一个新窗口
语法:window.open(pageURL,name,parameters)
功能:打开一个新的浏览器窗口或者查找一个名称的窗口
参数:pageURL:子窗口路径
name:子窗口的名字
parameters:窗口参数(各参数用逗号分隔)
width:窗口宽度,
height:窗口高度,
left:窗口X轴坐标 ;top:窗口Y轴坐标,
toolbar:是否显示浏览器工具栏(yes/no),
menubar:是否显示菜单栏(yes/no),
scrollbars:是否显示滚动条(yes/no),
location:是否显示地址字段,
status:是否添加状态栏,
(五)close关闭浏览器
语法:window.close();
功能:关闭浏览器窗口
(六)setTimeout超时调用
语法:setTimeout(code,millisec);
功能:在指定的毫秒数后调用函数或计算表达式
参数:code:要调用的函数名或要执行的js代码串
millisec:在执行代码前需等待的时间(毫秒)
PS:setTimeout()只执行code一次,如果要多次调用请使用setInterval()或者让code自己调用自己;
(七)clearTimeout清除超时调用
语法:clearTimeout(id_of_settimeout);
功能:取消由setTimeout()方法设置的超时调用;
参数:id_of_settimeout:由setTimeout()返回的ID值,该值标识要取消的延迟代码块
(八)setInterval间歇调用
语法:setInterval(code,millisec)
功能:每隔指定的时间执行一次代码
参数:code:要调用的函数名或要执行的js代码串
millisec:在执行代码前需要等待的时间(毫秒)
(九)clearInterval清除间歇调用
语法:clearInterval(id_of_setinterval)
二.location对象
location对象提供了与当前窗口中加载的文档有关的信息,还提供了功能,它既是window对象的属性,也是document对象的属性
(一)location.href获取url
1.获取url
语法:location.href
功能:返回当前加载页面完整url
说明:location.href()与window.location.href()等价
2.设置url
语法:location.href = "url"
功能:使网页加载到指定的url地址上
(二)location.hash获取锚点链接
1.获取锚点
语法:location.hash
功能:返回url中的hash(#以及后面的字符),如果不包含,返回空字符串
2.设置锚点
语法:location.hash = "param";
功能:为url添上指定的锚点,实现页面上的锚点位置跳转
(三)location对象其他常用属性
# TODO 待补充
(四)location.replace重新定向url
语法:location.replace(url)
功能:重新定向url
PS:使用location.replace不会在历史记录中生产新记录(没有后退按钮)
(五)location.reload重新加载当前显示的页面
语法:location.reload()
功能:重新加载当前显示的页面
说明:location.reload()有可能从浏览器缓存中加载
location.reload(true)强制从服务器重新加载
三,history对象
history对象保存了用户在浏览器中访问页面的历史记录
(一)history.back()
语法:history.back()
功能:回到历史记录的上一步
PS:相当于使用了history.go(-1)
(二)history.forward()
语法:history.forward()
功能:回到历史记录的下一步
PS:相当于使用了history.go(1)
(三)history.go(-n)
语法:history.go(-n)
功能:回到历史记录的前n步
(四)history.go(n)
语法:history.go(n)
功能:去到历史记录的后n步
四,screen对象
screen对象包含有关客户端显示屏幕的信息
(一)screen.availWidth(可用屏幕宽度)和screen.availHeight(可用屏幕高度)
(二)screen.innerWidth(窗口文档显示宽度);screen.innerHeight(窗口文档显示高度)
五,navigator对象
提供了用户的浏览器,操作系统等信息,可通过当前对象得知用户所用浏览器类型,版本等
(一)navigator.userAgent用来识别浏览器名称,版本,引擎以及操作系统等信息
语法:navigator.userAgent
例子:

JS之BOMBOM!的更多相关文章
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- js学习笔记:操作iframe
iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- JS调用Android、Ios原生控件
在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- 利用snowfall.jquery.js实现爱心满屏飞
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
- node.js学习(三)简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理
一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...
- JS正则表达式常用总结
正则表达式的创建 JS正则表达式的创建有两种方式: new RegExp() 和 直接字面量. //使用RegExp对象创建 var regObj = new RegExp("(^\\s+) ...
- 干货分享:让你分分钟学会 JS 闭包
闭包,是 Javascript 比较重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述 ...
随机推荐
- 前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS)
前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS) 一.百度统计的代码: UV PV 统计方式可能存在问题 在 SPA 的前端项目中 数据统计,往往就是一个比较麻烦的事情,Re ...
- Webpack系列-第一篇基础杂记
前言 公司的前端项目基本都是用Webpack来做工程化的,而Webpack虽然只是一个工具,但内部涉及到非常多的知识,之前一直靠CV来解决问题,之知其然不知其所以然,希望这次能整理一下相关的知识点. ...
- layui,返回的数据不符合规范,正确的成功状态码 (code) 应为:0
在使用layui的数据表格绑定数据的时候,出现的一些问题, "返回的数据不符合规范,正确的成功状态码 (code) 应为:0" 之后在网上也查找的了许多的资料,也去看了官网的文档 ...
- Oracle数据库常用SQL函数
1.SQL函数的概念: 函数一般是在数据上执行的,它给数据的转换和处理提供了方便.只是将取出的数据进行处理,不会改变数据库中的值.(类似于java中的方法但函数只是将数据库中的数据取出(复制)到函数中 ...
- C# 设置Excel中的数字字符串格式
在Excel中,数字字符串用不同格式表示,可代表不同数据意义.例如在财务报表里需要用特定的数字字符串格式来反映金额信息.货币币种.数据精确程度.增减趋势等等.下面分享如何通过C#编程来设置Excel表 ...
- 结合JDK源码看设计模式——单例模式
定义: 保证一个类仅有一个实例,并提供一个全局访问点 适用场景: 确保任何情况下这个对象只有一个实例 详解: 私有构造器 单利模式中的线程安全+延时加载 序列化和反序列化安全, 防止反射攻击 结合JD ...
- crontab常用
--crontab检查是否安装[oracle@rac1 ~]$ rpm -qa | grep crontabcrontabs-1.10-8启动与关闭[oracle@rac1 ~]$ /etc/init ...
- 为什么腾讯有QQ,还要推出微信?
在微信刚出现时候,很多人奇怪,为什么腾讯有QQ,还要推出微信? 一开始,我也认为它与QQ没有什么区别.有这种看法,是因为绝大多数时候,我都仅仅只使用即时聊天功能,微信上有的语音.视频.文字等等,这些在 ...
- 一份.NET 容器化的调查小结
小编在上个月在微信公众号"dotnet跨平台" 做了一个针对.NET 容器化的调查:https://mp.weixin.qq.com/s/oszbuIORT0G8XLLgMZzkn ...
- WebGL绘制有端头的线
关于WebGL绘制线原理不明白的小伙伴,可以看看我之前的文章WebGL绘制有宽度的线.这一篇我们主要来介绍端头的绘制,先看效果图. 端头一般被称为lineCap,主要有以下三种形式: butt最简单等 ...