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. strcpy.strcmp.strlen.strcat函数的实现

    #include <stdio.h> #include <string.h>   char *copy(char *a,char *b);//声明一个复制函数 char *ca ...

  2. tps 与 事务平均响应时间关系对答

    在网上看到一篇文章,tps 与 事务平均响应时间关系对答.可以帮助能更清楚的了解二者之间的关系. 问者:每秒处理的事务数和事务的平均响应时间 怎么个关系,有关系吗 kaku21:举个例子:一个高速路 ...

  3. RabbitMQ入门与使用篇

    介绍 RabbitMQ是一个由erlang开发的基于AMQP(Advanced Message Queue)协议的开源实现.用于在分布式系统中存储转发消息,在易用性.扩展性.高可用性等方面都非常的优秀 ...

  4. 乐卡上海网点地图制作心得 | 百度地图API使用心得

    前言 事情的起因是我的爱人喜欢收集一些美丽的乐卡(明信片的一种,正面是美丽壮阔的风景照).作为一个坚实的后盾自然要支持她!于是我经常借着午休穿梭在大街小巷,凭借乐卡官方提供的乐卡网点地址进行寻找并取卡 ...

  5. 前端到后台ThinkPHP开发整站(1)

    1.前言: 我个人从来没有写过博客文章,作为一个程序员没有自己的博客算是一个合格的程序员,所以我地想想也要经营起一个的博客,做一个小项目,写这博客算就做这个项目的一个项目笔记吧!现在自学着ThinkP ...

  6. webgl自学笔记——矩阵变换

    这章主要探讨矩阵,这些矩阵代表了应用在我们场景上的变换,允许我们移动物体.然而在webGL api中并没有一个专门的camera对象,只有矩阵.好消息是使用矩阵来取代相机对象能让webgl在很多复杂动 ...

  7. SVProgressHUD源码解读(2.0.3)

    SVProgressHUD是iOS开发中比较常用的一个三方库,用来在执行耗时操作或者指示用户操作结果的场合,由于使用简单,功能丰富,交互友好,被广泛应用.本文从源码的角度,解读一下实现的过程,希望能起 ...

  8. 你有没有忽略TextField的leftView这个属性

    你如果想实现类似有的App注册登陆界面的特殊的TextField的左边有个小图片的效果,可以试试下边的几行代码 UIImageView *imageViewUser = [[UIImageView a ...

  9. SQL实现 模糊查询(转)

    在进行数据库查询时,有完整查询和模糊查询之分. 一般模糊查询语句如下: SELECT 字段 FROM 表 WHERE 某字段 Like 条件 其中关于条件,SQL提供了四种匹配模式: 1,% :表示任 ...

  10. G++与VS2015在变量作用域上的差异性

    前段时间,发现同一段C++代码在windows .Linux下的运行结果居然不一样,于是测试了一把. 我们都知道,C++中不同作用域中不同的变量是互不干扰的,可以在全局作用域.函数作用域声明同样名字的 ...