BOM知识梳理
学过前端开发的地球人应该都了解,JavaScript分为三个部分:ECMAScript(JS语言本身基础语法),DOM(文档对象模型,应用程序编程接口),BOM(浏览器对象模型)。
BOM,实际上与浏览器有关系。因此浏览器厂商可以按照各自的想法随意去扩展(基于window对象的扩展)。不过,扩展归扩展,每个浏览器之间都遵循着一套标准。学习BOM对于理解JS这门语言仍然是很重要的,因此不能忽视。以下是我的一些总结,给出一些常用方法。并不会细说每个方法如何使用,这篇文章的主要目的,就是希望BOM在我们脑子里形成一个简单的框架。知道一些常用的方法,在遇到问题的时候可以追本溯源。
BOM中存在五个对象:
- window对象(核心对象)
- location对象(即是window对象的属性,又是document对象的属性)
- navigator对象
- history对象:浏览器前进后退
- screen对象:可以通过此对象获取移动端理想视口的宽度
其他四个对象都是window对象下的属性,每个对象下都存在一些属性和方法,下面列出几种常见和常使用的方法,同时给出简单的说明。
- window对象(核心对象)的常见方法
- 异步:XMLHttpRequest构造函数
- Number数据类型:Number, parseInt, parseFloat, isNaN, isFinite
- 定时器:setTimeout, setInterval。这里想说明一下的是,setTimeout中回调函数中的this会指向window对象,原因其实很简单。在回调函数作为参数传递给了setTimout, 此时发生this的隐式赋值丢失。还有一个需要注意的是setTimeout的执行顺序问题。
- url加密:encodeURI, encodeURIComponent方法
- url解密:decodeURI, decodeURIComponent方法
- 窗口尺寸:(innerWidth, innerHeight) (outerWidth, outerHeight),这里要与DOM中的client dimension和offset dimension区分开来,也就是clientWidth(Height) 和 offsetWidth(Height)
- 窗口位置:(screenLeft, screenTop) (screenX, screenY)
- 打开新窗口: open方法,此方法可接收三个参数
- 系统对话框:alert, confirm, prompt方法
- location对象
- href属性:获取url地址, (也可以通过此属性设置url地址)
- protocal属性:返回页面使用的协议, (也可以通过此属性设置protocal)
- host属性:返回服务器名称和端口号,既包括hostname + port. (也可以通过此属性设置host)
- hostname属性:返回不带端口号的服务器名称, (也可以通过此属性设置hostname)
- port属性:返回端口号, (也可以通过此属性设置port)
- pathname属性:返回url目录或文件名, (也可以通过此属性设置pathname)
- hash属性:返回url中的hash(#content), (也可以通过此属性设置hash)
- search属性:query string(如?name=keith&height=180), (也可以通过此属性设置search)
- reload方法:页面以最有效的方式加载。也就是说,如果页面自上次请求以来并没有改变过,页面就会从浏览器缓存中加载。如果要强制从浏览器重新加载,可以传递一个true的布尔值。
- navigator对象
- userAgent:用户代理,查询用户使用的浏览器信息。在移动端上可用于判断用户使用的是哪种类型的移动设备或浏览器
BOM知识梳理的更多相关文章
- [SQL] SQL 基础知识梳理(一)- 数据库与 SQL
SQL 基础知识梳理(一)- 数据库与 SQL [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5902856.html 目录 What's 数据库 ...
- [SQL] SQL 基础知识梳理(二) - 查询基础
SQL 基础知识梳理(二) - 查询基础 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5904824.html 序 这是<SQL 基础知识梳理( ...
- [SQL] SQL 基础知识梳理(三) - 聚合和排序
SQL 基础知识梳理(三) - 聚合和排序 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5926689.html 序 这是<SQL 基础知识梳理 ...
- [SQL] SQL 基础知识梳理(四) - 数据更新
SQL 基础知识梳理(四) - 数据更新 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5929786.html 序 这是<SQL 基础知识梳理( ...
- [SQL] SQL 基础知识梳理(五) - 复杂查询
SQL 基础知识梳理(五) - 复杂查询 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5939796.html 序 这是<SQL 基础知识梳理( ...
- solr DIH 知识梳理
solr DIH 知识梳理 web.xml中listener配置 <listener> <listener-class>org.apache.solr.handler.data ...
- Anliven - 基础知识梳理汇总 - 软件测试
基础知识梳理 - 软件测试 - 概念 基础知识梳理 - 软件测试 - 分类 基础知识梳理 - 软件测试 - 流程 基础知识梳理 - 软件测试 - 用例 基础知识梳理 - 软件测试 - 方法 基础知识梳 ...
- [C# 基础知识梳理系列]专题六:泛型基础篇——为什么引入泛型
引言: 前面专题主要介绍了C#1中的2个核心特性——委托和事件,然而在C# 2.0中又引入一个很重要的特性,它就是泛型,大家在平常的操作中肯定会经常碰到并使用它,如果你对于它的一些相关特性还不是很了解 ...
- java基础知识梳理
java基础知识梳理 1 基本数据类型
随机推荐
- MFC基于对话框风格按钮控件添加图片的方法(大神止步)
菜鸟还在研究这个东西,大神就不要看了.一直都在觉得用VC或VS建立的对话框总是全灰色感觉太单调了,如果可以在上面添加一些漂亮的图片就好了,今天终于实现了.其实挺简单的,下面就分几个步骤讲一下: 第一步 ...
- HDU 1074 Doing Homework (dp+状态压缩)
题目链接 Problem Description Ignatius has just come back school from the 30th ACM/ICPC. Now he has a lot ...
- HDU 1181 变形课 (深搜)
题目连接 Problem Description 呃......变形课上Harry碰到了一点小麻烦,因为他并不像Hermione那样能够记住所有的咒语而随意的将一个棒球变成刺猬什么的,但是他发现了变形 ...
- xampp + windows 配置 memcache流程
1.运行xampp服务,打开phpinfo查看信息,如下图: 从上到下,依次为 PHP版本:5.6: architecture:x86: TS:线程安全: vc11 2.牢记以上几个横线内容之后去下载 ...
- dubbox ExceptionMapper Filter request response 数据获取 数据传递
dubbx虽然是基于jboss的resteasy实现restfull,但是对resteasy原生的配置却不支持(可能是考虑到dubbo本事的设计模式及实现难度,但是和大部分framework的设计风格 ...
- Jetson TX1 安装Kinect驱动
1.添加Universe源 $ sudo apt-add-repository universe $ sudo apt-get update 2.安装编译工具和依赖项 $ sudo apt-get i ...
- java8中对lamdba表达式方法参数传递时,方法重载之后的类型推断
java8中可以向方法传递一个lamdba表达式,今天看书关于类型推断碰到一个问题: 这个问题我实际操作了一下:得出结论 如果是只有一个方法的情况下,方法参数使用lamdba表达式的时候是不需要写类型 ...
- mysql自增id归0
mysql自增id归0 ALTER TABLE table_name AUTO_INCREMENT=1;
- C++ 虚函数及重载、重定义、重写
#include<iostream> usingnamespace std; class BASE { public: BASE()=default; BASE(int publicVal ...
- MySQL学习笔记:Engine存储引擎
在使用Mysql建表过程中,有时候会遇到一些奇怪的现象.例如,如何插入数据就是查询不到数据,此时可能是建表的存储引擎设置成为engine=blackhole的原因. 1.engine=innodb 提 ...