从零开始学 Web 之 BOM(一)BOM的概念,一些BOM对象
大家好,这里是「 从零开始学 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对象的更多相关文章
- 从零开始学 Web 之 BOM(二)定时器
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 BOM(三)offset,scroll,变速动画函数
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 BOM(四)client系列
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 系列教程
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http:/ ...
- 从零开始学 Web 之 JavaScript(一)JavaScript概述
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 之 DOM(七)事件冒泡
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...
- 从零开始学Web之HTML(二)标签、超链接、特殊符号、列表、音乐、滚动、head等
大家好,这里是 Daotin 从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享 ...
- 从零开始学 Web 之 CSS(三)链接伪类、背景、行高、盒子模型、浮动
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 之 Vue.js(六)Vue的组件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
随机推荐
- stark组件开发之关键搜索
- 模糊搜索: 在页面生成一个表单. 以get 方式, 将数据提交到.当前查看页面. 后台接收数据,然后进行筛选过滤. 着个也需要,用户自定制! 定义一个 search_list 这个值,默 ...
- linux svnserver的安装使用备用
先说一下初弄者的误区,svn上传到svnserver的文件是变化了的,会被打包加入svn的版本库里边一般存在db 文件下 每次提交会生成0,1,2 这样排序的文件,在 /var/svn/apple/ ...
- mysql 的 select into 带来的错误数据问题
在写存储过程的时候,会有一个被忽视的问题: 比如 select user_name into @user_name from user where id = 1; 会出现 其实没有 id =1 这条数 ...
- 设计模式学习心得<汇总>
绝大部分程序员其实用不上设计模式. - 创建 结构 行为 描述 在软件工程中,创建型模式是处理对象创建的设计模式,试图根据实际情况使用合适的方式创建对象.基本的对象创建方式可能会导致设计上的问题,或增 ...
- 从 NCBI 批量下载基因组的方法
先下载 assembly summary files The assembly_summary files report metadata for the genome assemblies on t ...
- Laravel-nestedset that base left and right values tree package
This is a Laravel 4-5 package for working with trees in relational databases. Laravel 5.5, 5.6, 5.7, ...
- 可以用到的XSS跨站语句
我们常用的测试XSS跨站的语句一般是alert比如: <script>alert(“sex”)</script> <script>alert(/sex/)</ ...
- tensorflow学习之(二)Seesion的两种打开模式
#Seesion的两种打开模式 import tensorflow as tf matrix1 = tf.constant([[3,3]])#一行两列的一个矩阵 matrix2 = tf.consta ...
- 渗透测试的理论部分2——OSSTMM的详细描述
昨天休息了一天,今天我要连更两篇博客,作为补充,以下为正文 本章详细描述了OSSTMM内的RAV得分这一理论概念,对日后从事正规安全工作至关重要 OSSTMM为开源安全测试方法论,对OSSTMM不了解 ...
- spring与junit整合测试
1.导包4+2+aop+test 2.配置注解 3.测试