本文共 3030 字,大约阅读时间需要 10 分钟。
一、认识BOM
JS是由ECMAScript(ECMA)、DOM(W3C)和BOM(无规范)。BOM(Browser Object Model:浏览器对象模型),提供了独立于内容而与浏览器进行交互的对象,用它来实现窗口与窗口之间的通信。BOM的核心对象是window。
1、BOM组成
window - frames history location navigator screen
2、BOM与DOM的区别
(1)DOM通过脚本动态地访问和更新文档内容、结构和样式的接口。
(2)BOM通过脚本操作浏览器的各个功能组件的接口。区别:
(1)DOM提供了处理网页内容的接口,而BOM提供了与浏览器交互的接口; (2)DOM的核心是document,BOM的核心是window。二、window对象
打开一个浏览器,就自动创建了一个window对象。window就是浏览器打开的窗口。
1、常用属性
1.1、document 文档结构
Document
1.2、history 跳转的历史记录
Document
1.3、location 操作地址栏
1.4、navigator 浏览器
Document
1.5、opener 引用创建的这个新窗口的窗口
Document
1.6、screen 屏幕
1.7、screenX 窗口位于屏幕的x坐标
1.8、screenY 窗口位于屏幕的y坐标
Document
1.9、name 窗口名
Document
1.10、status 状态栏(目前主要是欧朋支持,其它浏览器都不支持。大多数浏览器都关闭这一功能,目的是为了避免被钓鱼攻击)
2、常用方法
2.1、alert() 显示一个警告框
Document
2.2、confirm() 显示带有确认按钮和取消按钮的对话框
Document
2.3、prompt() 显示可接受用户输入的对话框
Document
2.4、open() 打开一个新的浏览器窗口或查找一个已命名的窗口
open(url,name,attr,replace) url: 要跳转的网址或要打开的文件或创建一个窗口(url为空时) name: 窗口名或_blank _self _parent _top attr: 窗口设置 replace: true/false true表示添加到历史记录中,false则反Document 百度
2.5、close() 关闭浏览器窗口
2.6、scrollTo() 把内容滚动到指定的坐标 设置滚动条的位置
Document
2.7、setInterval() 按照指定的毫秒周期来调用函数或计算表达式
Document
2.8、setTimeout() 在指定的毫秒数后调用函数或计算表达式
Document
clearInterval() 取消由 setInterval() 方法设置的 timeout 无
clearTimeout() 取消由 setTimeout() 方法设置的 timeout 无
setTimeout与setInterval的区别:
相同点: 都是计时(定时)器,都是在指定的时间重复(一次)执行对应的代码。 都是异步执行的。不同点:
setTimeout在指定时间到了之后只执行一次对应的代码。(只执行一次) setInterval在指定时间到来之前重复执行对应的代码。(不停地循环)计时如果不需要时,一定要做清除处理。定义计时器时,最好初值设置为null(垃圾回收机制)
三、location对象
用来获取或设置url。 获取或设置url地址信息、页面跳转(重定向)、页面刷新等。1、常用属性
location.hash 设置或取得 URL 中的锚 location.host 设置或取得 URL 中主机(包括端口号) location.hostname 设置或取得 URL 中的主机名 location.href 设置或取得完整 URL(页面重定向应用) location.pathname 设置或取得 URL 中的路径 location.port 设置或取得 URL 中的端口号 location.protocol 设置或取得 URL 使用的协议 location.search 设置或取得 URL 中的查询字串(一般是 ? 符号后面的内容) ?username=张三&sex=男Document
2、常用方法
2.1、location.assign():加载新页面文档与location.href功能一样,用法一样,只是href是属性,而assign是一个方法
Document
2.2、location.reload():重新加载(刷新)当前页面,reload(true/false):默认为false。true表示重新从服务器下载,实现刷新;而false表示从缓存中获取刷新页面。
Document
2.3、location.replace():用新的文档替代当前文档,与location.assign()和location.href的区别是:replace不能将跳转的路径写到历史记录中,也是即是跳转后不能返回
Document
四、navigator
通过navigator对象获取浏览器相关信息,用于判断该浏览器是哪个浏览器,以及厂商等。
常用属性:
navigator.appName 取得浏览器的名称 navigator.appVersion 取得浏览器的平台和版本信息 navigator.userAgent 得到浏览器相关信息Document
五、Screen对象
用于获取客户端屏幕相关信息。
常用属性:
availHeight: 屏幕高度(不包含任务栏) availWidth: 屏幕宽度(不包含任务栏) colorDepth: 颜色深度 height: 显示屏幕的高度(包含任务栏) width: 显示屏幕的宽度(包含任务栏)Document
6.history对象
用来记录用户在客户端访问的url。
属性:length:返回历史记录的条数。
方法:
6.1、forward():跳转到下一个history中的url,如果history中没有url,将停留在当前页面
6.2、back():返回到上一个history中的url,如果history中没有url,将停留在当前页面
6.3、go(num|url): go(-1)相当于back(),go(1)相当于forward(),go(0)刷新当前页面
Document 这是首页
转载地址:http://tfvrn.baihongyu.com/