大家好,这里是「 从零开始学 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. [leetcode]4. Median of Two Sorted Arrays俩有序数组的中位数

    There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the median of the two ...

  2. 微软Office Online服务安装部署(三)

    现在开始配置两台服务器,两台服务器的IP: Server: 10.1.3.89 Client:  10.1.3.92 1.在Client中,.打开网络属性,找到ipv4的配置,将dns 改成域控制器的 ...

  3. 通过Solrj实现对索引库中数据的局部更新操作

    for (UpdateIndexDTO updateIndexDTO : data) { // 局部更新 SolrInputDocument doc = new SolrInputDocument() ...

  4. 杨其菊201771010134《面向对象程序设计(java)》第六周学习总结

    <面向对象程序设计(java)>第六周学习总结 第一部分:理论知识 1)类.超类和子类2)Object:所有类的超类 3)泛型数组列表4)对象包装器和自动打包 5)参数数量可变的方法 6) ...

  5. mySQL安装与基础配置

    关系型数据库介绍 数据结构模型 数据结构模型主要有: 层次模型 网状结构 关系模型 关系模型: 二维关系:row,column 数据库管理系统:DBMS 关系:Relational,RDBMS RDB ...

  6. Springboot+Mybatis 显示sql语句

    在application.properties里添加 logging.level.com.xxx.service=debug com.xxx.service为包路径,一般可以将service层全加上 ...

  7. 深入C#的String类

  8. drf2 FBV和CBV

    FBV 基于函数的视图 CBV 基于类的视图 也就是说我们是用函数编写视图~还是类编写视图 urlpatterns = [ path('admin/', admin.site.urls), path( ...

  9. 【转】comparable Interface

    作者:gnuhpc 出处:http://www.cnblogs.com/gnuhpc/ 1.什么是Comparable接口 此接口强行对实现它的每个类的对象进行整体排序.此排序被称为该类的自然排序 , ...

  10. Latex命令

    .tex代码中 |   在pdf文档中 空一行  代表回车,下一行空两格 // 代表回车,下一行顶格