(一)BOM:Browser Object Model(浏览器对象模型)
页面上所有的变量都是window的属性

一、方法:
1. open(,)
打开一个新窗口(页面)
一参为页面地址url,二参为打开方式
如果url为空,默认打开一个空白页面
如果打开方式为空,默认打开新窗口方式打开
返回值:发挥新打开的窗口的window对象

2. close(,)
关闭窗口,前边对象是谁关闭谁
兼容:(1)火狐ff:默认无法关闭
(2)Chorme:默认直接关闭
(3)ie:询问用户
可以关闭在本窗口中通过js方法打开的新窗口

二、属性:
1. window.navigator.userAgent ==>浏览器信息(可用于不同浏览器采取不同的措施)

2. window.location ==>浏览器地址信息,返回object对象
因此其下还有属性:
window.location.href ==>地址栏的地址
window.location.search ==>url中?之后的内容(包括?)
window.location.hash ==>url中#之后的内容(包括#)

(二)文档的宽高
1. document.documentElement.clientWidth[Height] ==>可视区宽高(因为document无宽高,所以加上documentElement

,其中document.documentElement可换成任何有宽高属性的元素,下同)
document.documentElement.scrollTop[Left] ==>滚动条滚动距离(有兼容chrome认为滚动按钮算作在body里)
兼容处理:
var ScrollTop=document.documentElement.scrollTop||document.body.scrollTop;

2. 盒子元素.scrollHeight[Width] ==>盒子内容宽高

3. document.documentElement.offsetWidth[Height] ==>文档可视宽高

(三)窗口事件
onscroll ==>当滚动条滚动时触发
onreset ==>当窗口大小发生改变时触发
注:这两个事件的触发是按时间间隔计算,改变速度快,触发次数少,改变速度慢,触发事件的次数多
eg:var i=0;
window.onscroll=function(){
document.title=i++;
}

BOM,文档宽高及窗口事件小析的更多相关文章

  1. JS中级 - 03:文档宽高及窗口事件(选)

    可视区尺寸 document.documentElement.clientWidth document.documentElement.clientHeight 滚动距离 document.body. ...

  2. JavaScript -获取屏窗与视窗、文档宽高

    实例:1920*1080的电脑屏幕 1.获取窗口中的文档显示区域宽高 clientw = window.innerWidth; //1920(包含滚动条) clienth = window.inner ...

  3. js实现字体和容器宽高随窗口改变

    用于字体大小和容器的宽高字体和宽高设为rem就可以了 var html = document.documentElement; function fonts(){ var hW = html.offs ...

  4. js学习笔记23----窗口尺寸及窗口事件

    窗口尺寸: 可视区的尺寸 document.documentElement.clientWidth document.documentElement.clientHeight 滚动距离 documen ...

  5. js、jQuery 获取文档、窗口、元素的各种值

    基于两年开发经验,总结了 javascript.jQuery 获取窗口.文档.元素的各种值 javascript: 文档:是整个document所有的内容 浏览器当前窗口文档body的宽度: docu ...

  6. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  7. ABP文档笔记 - 事件BUS

    文档: ABP框架 - 领域事件(EventBus) EventBus & Domain Events ABP源码分析二十五:EventBus EventBus(事件总线) EventBus是 ...

  8. ie低版本内核事件兼容问题(事件绑定,绑定事件自动执行,文档模式问题)

    问题情况 搜狗等,兼容模式下,以前前端写的点击事件的代码没有, 后来一看是因为兼容模式为9,导致点击事件失效 解决办法,步骤 1,处理绑定事件兼容问题 ie低版本绑定事件只支持attactevent, ...

  9. angularjs 监听 文档click 事件

    项目 上遇到  innHTML  放入 一大段的html 内容 中带有 click 事件 如onclick="callInMethod("http://www.crm.bmcc.c ...

随机推荐

  1. PHP数组

    PHP数组的遍历 使用for语句循环遍历数组 在PHP中,不仅可以指定非连续的数字索引值,而且还存在以字符串为下表的关联数组.所以在php中很少使用for语句循环来遍历数组.使用for语句遍历连续数字 ...

  2. Like与Instr模糊查询性能

    项目中用到like模糊查询,但是总觉的太小家子气,有没有高逼格的呢? instr(title,'手册')>0 相当于 title like '%手册%' instr(title,'手册')=1 ...

  3. BZOJ2007——[Noi2010]海拔

    1.题意:一个裸的最小割 2.分析:直接转成对偶图最短路就好了,水爆了!(雾) #include <queue> #include <cstdio> #include < ...

  4. 孙鑫C++教程留下来的作业--如何让工具栏在原来隐藏的位置出现

    --加油,不仅仅是口号! BEGIN---------------------------------- 将工具栏进行停靠.当隐藏后再次点击出现的时候它出现在工具栏顶部了,并没有停靠在原来的位置,如何 ...

  5. 1.从Node.js链接到MongoDB

    MongoDB采用了MongoDB Node.js驱动程序作为标准. 1.安装MongoDB驱动 npm install mongoDB npm install mongoose require('m ...

  6. Redis 复制、Sentinel的搭建和原理说明

    背景: Redis-Sentinel是Redis官方推荐的高可用性(HA)解决方案,当用Redis做Master-slave的高可用方案时,假如master宕机了,Redis本身(包括它的很多客户端) ...

  7. OC编程之道-创建对象之原型模式

    一 什么是原型模式?(what) 有些对象的创建代价过大或过于复杂,要是可以重建相同的对象并作轻微的改动,事情会容易的多(效率变高).典型的例子是复制组合结构(eg树形结构),从零开始构建一个树型组合 ...

  8. JS函数节流

    背景:在前端开发中,有时会为页面绑定resize事件,或为一个页面元素拖拽事件(其核心就是绑定mousemove)在一个正常操作中也有可能在一个短时间内触发非常多次事件绑定程序,而DOM操作是很消耗性 ...

  9. <s:property value=""/> 怎么截取返回值的固定长度的字符串

    ------背景-------------------- 列表中某一个字段的内容较长,显示不美观的情况下可以选择使用xxxxx....来显示,具体内容可见详情. ------解决方案--------- ...

  10. RAM和ROM总结

    RAM和ROM总结 一.在解释之前先备注一些缩写的全称便于记忆: 1.EPROM:(Electrically Programmable Read-Only-Memory)电可编程序只读存储器 2.EE ...