大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......

+------------------------------------------------------------

github：https://github.com/Daotin/Web

微信公众号：Web前端之巅

博客园：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

+-----------------------------------------------------------

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

一、BOM

1、BOM的概念

BOM（Browser Object Model）：浏览器对象模型。

在浏览器中的一些操作都可以使用 BOM 的方法进行编程处理。

比如：刷新浏览器、前进、后退、在地址栏输入 URL 等。

2、BOM 顶级对象

BOM 的顶级对象是：window

window 是浏览器的顶级对象，当调用 window 下的属性和方法时，可以省略 window。

注意：

1、window 下的一个特殊属性：window.name，所以不要轻易定义 name 变量，会导致 window.name 被修改。

2、top 等同于 windows。

3、系统对话框

window.alert();

window.prompt();

window.confirm(); // 两个按钮，分别返回 true 和 false。

以上对话框都不建议使用。

1、弹框时页面无法加载；

2、各个浏览器的样式不相同，且样式不可自定义。

4、页面加载对象

提出问题：

我们知道，如果将 script 标签放在 head 里面的话，页面加载的时候是先加载的 script 标签，之后才加载 body 里面的标签。如果 script 特别大的话，就很影响用户体验。

解决办法：

1、将 script 标签放在 body 最后。

2、使用 window.onload 事件。

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        window.onload = function () {

            document.getElementById("btn").onclick = function () {

                alert("haha");

            }

        }

    </script>

</head>

<body>

<input type="button" value="BUTTON" id="btn">

</body>

1、如果不写 window.onload 的话，执行到 document.getElementById("btn") 会报错，因为程序是从上至下执行。

2、window.onload 事件会在页面加载完毕（页面中所有内容、标签、属性以及外部引入的 js文件）时触发。

3、window.onload 可以省略 window。

window.onunload = function () {

	alert("yes");

}

onunload： 页面关闭后才触发的事件

window.onbeforeunload = function () {

    alert("yes");

}

onbeforeunload：在页面关闭之前触发的事件

5、location 对象（地址栏）

学习一个对象主要是学习它里面的属性和方法。

5.1、属性

console.log(window.location.hash); // 地址栏上#及后面的内容

console.log(window.location.host); // localhost:63342 ---- 主机名及端口号

console.log(window.location.hostname); // localhost  ---- 主机名

console.log(window.location.port); //63342  ---- 端口号

console.log(window.location.pathname);// /JS/images/location.html --- 相对路径

console.log(window.location.protocol);// http:   --- 协议

console.log(window.location.search);//?_ijt=28855sggj8kcffva8q9bhc1eh0  --- 搜索的内容

5.2、方法

document.getElementById("btn").onclick = function () {

    location.href = "http://fengdaoting.com";

    location.assign("http://fengdaoting.com");

    location.reload();

	location.replace("http://fengdaoting.com");

};

location.href 和 location.assign()： 设置跳转的页面地址，这两个属性和方法作用相同，并且都保存跳转前的地址（在浏览器中可以点击返回按钮）。

location.reload() ： 刷新页面

location.replace() : 设置跳转的页面地址，但是不保存跳转前的地址。

6、history 对象

6.1、方法

window.history.forward(); // 前进

window.history.back() // 后退

window.history.go(number);  // number为正，前进；为负，后退。

7、navigator 对象

7.1、属性

window.navigator.platform; // 判断浏览器所在的系统平台

// win32

window.navigator.userAgent; // 判断浏览器的类型，是谷歌火狐还是IE

// chrome 下结果：Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36

从零开始学 Web 之 BOM（一）BOM的概念，一些BOM对象的更多相关文章

  1. 从零开始学 Web 之 BOM（二）定时器

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  2. 从零开始学 Web 之 BOM（三）offset，scroll，变速动画函数

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  3. 从零开始学 Web 之 BOM（四）client系列

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. 从零开始学 Web 系列教程

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http:/ ...

  5. 从零开始学 Web 之 JavaScript（一）JavaScript概述

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  6. 从零开始学 Web 之 DOM（七）事件冒泡

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...

  7. 从零开始学Web之HTML（二）标签、超链接、特殊符号、列表、音乐、滚动、head等

    大家好,这里是 Daotin 从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享 ...

  8. 从零开始学 Web 之 CSS（三）链接伪类、背景、行高、盒子模型、浮动

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  9. 从零开始学 Web 之 Vue.js（六）Vue的组件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. Django-ConttentType

    一 content-type 在django中,有一个记录了项目中所有model元数据的表,就是ContentType,表中一条记录对应着一个存在的model,所以可以通过一个ContentType表 ...

  2. stark组件开发之关键搜索

    - 模糊搜索: 在页面生成一个表单.  以get 方式, 将数据提交到.当前查看页面. 后台接收数据,然后进行筛选过滤. 着个也需要,用户自定制!   定义一个  search_list  这个值,默 ...

  3. 31.Mysql复制

    31.Mysql复制复制是指将主数据库的DDL和DML操作通过二进制日志传到从数据库上,然后在从数据库上对重做日志,从而使从库与主库保持同步.Mysql支持一台主库同时向多台从库复制,从库也可以作为其 ...

  4. Centos Firefox中文乱码

    解决CentOS Firefox 中文乱码问题,执行以下命令 Centos 6 # yum -y groupinstall chinese-support 重启电脑即可. Centos 7 yum - ...

  5. JavaScript 高阶函数

    高阶函数的英文叫Higher-order function ,什么是高阶函数呢>? JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接 ...

  6. java内存性能调优编码注意

    1.没有必要时请不用使用静态变量 使用Java的开发者都知道,当某个对象被定义为stataic变量所引用,这个对象所占有的内存将不会被回收.有时,开发者会将经常调用的对象或者变量定义为static,以 ...

  7. 加盟阿里！贾扬清被曝从Facebook离职，任阿里硅谷研究院VP

    3 月 2 日傍晚,知乎上爆出一则 AI 人事变动大消息——Caffe 作者贾扬清将从 Facebook 离职. 短短数小时,就有近 10 万人浏览这个问题.不仅如此,据 AI 前线爆料,贾扬清离开 ...

  8. left join on 和where中条件的放置位置

    转自:http://blog.csdn.net/muxiaoshan/article/details/7617533 select * from td  left join (select case_ ...

  9. freeRTOSConfig.h文件对FreeRTOS进行系统配置

    FreeRTOS内核是高度可定制的,使用配置文件FreeRTOSConfig.h进行定制.每个FreeRTOS应用都必须包含这个头文件,用户根据实际应用来裁剪定制FreeRTOS内核.这个配置文件是针 ...

  10. vscode调试angular

    之前在Asp.net MVC + Angular1 的项目中,要调试前台代码都是用浏览器的开发者工具,使用正常,也没有感觉太大的不方便. 后来接触Angular2项目,因为它是要经过编译的,所以在浏览 ...