BOM的核心对象就是window,这一章没什么好说的,总结一些比较常用的:

1,a未定义,
a; //报错
window.a; //undefined

不能用delete删除全局变量

2,html5不支持<frame>标签,但是支持<iframe>标签

3,js中window对象的top,opener,parent,self属性(虽然对于window来说,它们是一种属性,但是也可以直接用他们作为对象)的区别:

top:该变更永远指分割窗口最高层次的浏览器窗口。如果计划从分割窗口的最高层次开始执行命令,就可以用top变量。
opener:用于在window.open的页面引用执行该window.open方法的的页面的对象。如果a页面使用了window.open()了b页面,那么我们在b页面要引用a页面,就可以使用opener对象,前提是必须是用window.open()方法打开的才能用;
parent:在iframe,frame中生成的子页面中访问父页面的对象。例如:A页面中有一个iframe或frame,那么iframe或frame中的页面就可以通过parent对象来引用A页面中的对象。这样就可以获取或返回值到A页面中。(不要和jquery的parent()方法混淆)
self:指当前窗口

4,窗口位置

screenLeft,screenTop :  IE, Safari, Opera, Chrome

screenX, screenY : Firefox, Safari, Chrome

跨浏览器获取窗口左边上边位置:

var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;

var topPos =  (typeof window.screenTop == "number") ? window.screenTop : window.screenY;

window窗口位置移动(这两个方法可能浏览器禁用):

window.moveTo(200,200);  //将窗口向下移动到200像素,向右移动到200像素。(0,0)是屏幕左上角

window.moveBy(-50,100); //将窗口向下移动100像素,向左移动50像素

网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth

页面视口大小(跨浏览器):

var pageWidth = window.innerWidth;

var pageHeight = window.innerHeight;

if(typeof pageWidth != "number"){

  if(document.compatMode == "CSS1Compat"){

    pageWidth = document.documentElement.clientWidth;

    pageHeight = document.documentElement.clientHeight;

  }else {

    pageWidth = document.body.clientWidth;

    pageHeight = document.body.clientHeight;

  }

}

5,prompt(que,ans);
que: 对话框的问题
ans: 默认答案

6,location对象:
window.location === document.location; //true

location.hash; //URL中的hash
location.href; //返回的是完整的URL,如果等于一个URL,就相当于跳转到这个URL上
location.host; //返回的是服务器名称和端口号(如果有)
location.hostname; //不带端口号的服务器名称
location.port; //端口号
location.protocol; //页面使用的协议,”http:”或”https:”
location.search; //URL查询的字符串,以问好开头的,可以用location.search.substring(1),表示问号后面的所有字符串,这里的字符串是经过编码的,要用decodeURIComponent(str)来解码

7,URI三种解码与编码的对比:
decodeURI() & encodeURI():十六进制编码,如果url进行跳转,可以用它来编码,例如:Location.href=encodeURI(http://cang.baidu.com/do/s?word=百度&ct=21);

decodeURIComponent() & encodeURIComponent():也是十六进制编码,但是比上面的要更复杂,更细,特殊符号也会转码,所以适用于作为参数来使用,例如:<script language="javascript">document.write('<a href="http://passport.baidu.com/?logout&aid=7&u='+encodeURIComponent ("http://cang.baidu.com/bruce42")+'">退出</a>');</script>

escape() & unescape():不推荐使用

8,位置操作:
location.href= “url”; //推荐使用
location.assign= “url”; //等同于上面
location.replace(“url”); //跳转后不能后退,这个有点类似与vue-router里面,this.$router.push和this.$router.replace的区别
location.reload(); //重新加载

9,navigator对象:
主要是针对于客户端浏览器的一些属性,多的不说了,
navigator.onLine; //是否连网
navigator.appName; //浏览器完整名字

10,screen对象:
最常用的就是分辨率了:
window.screen.width/height

11,history对象:
history.go(-1); //后退一页
history.go(1); //前进一页
history.back(); //后退一页
history.forward(); //前进一页

JavaScript学习日志(四):BOM的更多相关文章

  1. JavaScript学习记录四

    title: JavaScript学习记录四 toc: true date: 2018-09-16 20:31:22 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  2. javascript学习日志:前言

    javascript学习日志系列的所有博客,主要理论依据是<javascript权威指南>(犀牛书第6版)以及<javascript高级程序设计第三版>(红色书),目前js行业 ...

  3. javascript学习笔记(四) Number 数字类型

    数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学 ...

  4. Javascript学习笔记四——操作表单

    Javascript学习笔记 大多网页比如腾讯,百度云之类的需要登陆,用户输入账号密码就可以登陆,那么浏览器是如何获取用户的输入的呢?今天就记录一下操作表单. 操作表单与操作DOM是差不多的,表单本身 ...

  5. JavaScript学习总结(四)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

  6. JavaScript学习笔记(四)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

  7. JavaScript学习笔记之BOM

    BOM的核心对象是window,它既表示浏览器窗口以及页面可见区域,同时也是ECMAScript中的Globe对象,所有的全局变量和函数都是它的属性,并且所有的原声函数以及其他函数也都存在于它的命名空 ...

  8. JavaScript学习日志(六):事件

    这篇随笔,深恶痛绝,敲到快结束的时候,凌晨00:19,突然闪退,也不知道是Mac的原因还是chrome的原因,重新打开的时候,以为自动保存有效果,心想没关系,结果他么的只保存了四分之一,WTF?!!! ...

  9. JavaScript学习日志(五):DOM

    一,基本定义 DOM是针对HTML和XML文档的API,根据W3C的HTML DOM标准,html文档中所以内容(无论是元素还是标签还是注释还是元素属性)都是节点. 二,Node类型:每一个节点都含有 ...

随机推荐

  1. equals()与 == 比较,hashCode方法

    1.Object类    Object类是java中一切类的父类,java中所有的类都直接或间接    继承自Object类        Object中定义的方法不多,原因在于,java的类多种多样 ...

  2. Python 装饰器总结

    装饰器总结 前提 使用装饰器的前提在于Python提供的特性: 函数即对象,可以进行传递: 函数可以被定义在另外一个函数中: 可以通过一个例子来了解: def get_animal(name='dog ...

  3. RMAN 备份异机恢复 并创建新DBID

    测试平台信息: Oracle:11gR2 操作系统:Redhat 5.5 Target DB:dave   几点说明: (1)RMAN 异机恢复的时候,db_name必须相同. 如果说要想改成其他的实 ...

  4. XP oracle32位客户端安装找不到orandce11.dll.dbl

    同事在XP上装oracle客户端,遇到下面的问题,mark一下. 提示找不到:orandce11.dll.dbl 点继续还会提示这个文件:orancds11.dll.dbl 网上找到解决方法: 删除注 ...

  5. 理清JS数组、json、js对象的区别与联系

    最近在敲代码时,遇上了一个关于JS数组的问题,由此引发了关于对象和json的联想,曾经觉得很畅顺的知识点突然模糊了.于是,为了理清这些东西,有了如下这篇文章.觉得没问题的猿们可以当复习,而那些带着疑问 ...

  6. java读取CSV文件添加到sqlserver数据库

    在直接将CSV文件导入sqlserver数据库时出现了错误,原因还未找到,初步怀疑是数据中含有特殊字符.于是只能用代码导数据了. java读取CSV文件的代码如下: package experimen ...

  7. EXT.NET复杂布局(二)——报表

    前面提到过工作台(<EXT.NET复杂布局(一)--工作台>)了,不知道各位看过之后有什么感想.这次就介绍介绍使用EXT.NET画几个报表. 看图写作从小学就开始了,如图: 图一 图二 图 ...

  8. JDBC在springMvc等框架中使用的方式

    连接池jar:c3p0 代码结构 ----------------------------------------------- 配置文件  config.properties #hibernate. ...

  9. tomcat 组件研究二--请求过程

    上一篇博客大概总结了tomcat 的组件以及其组织方式,对于tomcat 的启动过程也进行进行了简单的总结,下面这篇博客,继续研究tomcat 处理请求的相关组件,其实就是主要研究Connectors ...

  10. 理解JavaScript的立即调用函数表达式(IIFE)

    首先这是js的一种函数调用写法,叫立即执行函数表达式(IIFE,即immediately-invoked function expression).顾名思义IIFE可以让你的函数立即得到执行(废话). ...