大家好，这里是「 从零开始学 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实现支付宝支付

    一 去支付宝申请 - 正式:营业执照 - 测试: 沙箱测试环境    APPID:2016092000554391    买家: esnrce2727@sandbox.com    登录和支付密码: ...

  2. sql中with as测试实例

    一.使用场景 1.多处使用才有必要2.一方面减少代码数量便于理解维护3.一方面跟代码一样一次计算到处用 二.实例(本处示例仅为测试,实际用join比较好) 1.不使用with as 2.使用with ...

  3. A - ACboy needs your help again!

    ACboy was kidnapped!! he miss his mother very much and is very scare now.You can't image how dark th ...

  4. JavaScript：原生模拟$.ajax以及jsonp

    现实项目中,常常会用到请求,但是在考虑低版本的浏览器时,promise相关的axios,fetch这类第三方库的支持率就不那么好了,再考虑到最大的一个问题,跨域,更是让人头痛,虽然也有fetch-js ...

  5. JavaScript日历（es5版本）

    近期在知乎上看到这么一个帖子,题主说自己JavaScript都学完了,结果老师留的作业还是不会写,就是写一个日历的插件,结果楼下一堆大牛出现了,百度的阿里的纷纷站出来发表自己的看法,有人认为简单,有人 ...

  6. FastJSON基础

    对象的类型 json文本 json数组 json对象 java对象 类型的转换 json文本      转   json对象      JSON.parseObject(str) json文本     ...

  7. Eclipse中一些真正常用的快捷键

    F2 文件重命名(要使用某个过长的文件名或者不好打的文件名时,直接F2再Ctrl+C非常好用,比如:Validform_v5.3.2_min.js) Ctrl+S 保存当前文件 Ctrl+Shift+ ...

  8. linux下使用eclipse打开esp32工程文件，并进行编译下载。

    在之前的文章中,已经讲过将esp-idf 运用linux自带的工具下载,但是为了开发的系统性,这里运用eclipse来对idf进行整体的编译. 首先 cd /esp32 运行eclipse,将work ...

  9. 关不掉的小姐姐程序python tkinter实现 学习---打包教程

    首先,我们先准备两个.py文件,还要图片文件         代码//是我自己手写的,copy时记得删掉,不然有可能错误,比如中英文啥的    当然 一些语法的无问题就百度,都能给你答案 第一个.py ...

  10. Alpha代码规范、冲刺任务与计划

    Alpha代码规范.冲刺任务与计划 团队名称: 云打印 作业要求: Alpha代码规范.冲刺任务与计划 作业目标:代码规范.冲刺任务与计划. 团队队员 队员学号 队员姓名 个人博客地址 备注 2216 ...