1.1-BOM与DOM介绍
-
JavaScript语言由三部分组成
-
ECMAJavaScript:定义了js的语法规范
-
Dom:document object model文档对象模型:一个HTML文档中所有的一切都是dom对象
* Dom定义了一套操作HTML文档的API(节点的增删改查)
-
Bom:Browser object model浏览器对象模型 例如:一个浏览器的窗口就是一个window对象
* Bom定义了一套操作浏览器窗口的API
-
-
Bom主要由五大对象组成:
- window:浏览器核心对象
- location:包含当前页面的URL信息
- history:history对象主要用于记录你当前窗口的历史记录
- navigator:包含当前浏览器的信息,例如用的什么浏览器,操作系统版本等
- screen:获取用户电脑的屏幕分辨率
- 这个一般不用,因为对开发者没啥作用
1.2-location对象🎈
- 1.location对象:包含当前页面的URL信息
- url:全球统一资源定位符
- url = 协议名(http) + ip地址(域名) + 端口号 + 资源路径
- 暂时只需要知道location对象包含一个网页的网络url信息即可,具体的含义将在后面阶段学习网络的时候详细讲解
- 2.location对象有三个常用的方法
- (1)打开新网页:location.assign(‘你要打开的新网页的url’)
- (2)替换当前网页:location.replace(‘要替换的网页url’)
- (3) 刷新当前网页: location.reload()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BOM - location对象</title>
</head>
<body></body>
<script>
// location对象:管理整个地址栏(url)
console.log(location);
// host:主机+端口
// port:端口
// href:整个url
// search:搜索条件(数据)
// console.log(location.hash);
// 主机名 和 当前url的端口号
console.log(location.host); //127.0.0.1:5500
// 当前url的端口号
console.log(location.hostname); //127.0.0.1
// 完整的url
console.log(location.href); // http://127.0.0.1:5500/day03/code/01%20-%20BOM%20-%20location%E5%AF%B9%E8%B1%A1.html
// 当前url的路径
console.log(location.pathname); // /day03/code/01%20-%20BOM%20-%20location%E5%AF%B9%E8%B1%A1.html
// 当前url的端口号
console.log(location.port); // 5500
// 当前url的协议
console.log(location.protocol); // http:
// 从 ? 到 开始的url(查询部分)
// console.log(location.search);
</script>
</html>
1.3-location对象三个事件🎈🎈
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>location对象 - 页面跳转</title>
</head>
<body>
<button class="btn1">点我跳转 : 带历史,可以回来</button>
<button class="btn2">刷新</button>
<button class="btn3">点我跳转 : 不带历史,回不去</button>
</body>
<script>
// document.querySelector(".bnt1").onclick = function () {
// // 报错:元素没获取到!
// // Cannot set properties of null (setting 'onclick')
// location.assign("http://www.baidu.com");
// };
// 1. location.assign('新的url') === location.href = '新的url'
document.querySelector(".btn1").onclick = function () {
// Cannot set properties of null (setting 'onclick')
location.assign("http://www.baidu.com");
};
// 2.location.reload()
document.querySelector(".btn2").onclick = function () {
location.reload();
};
// 3.location.replace('新的url'):使用很少,替换(不会产生历史)
document.querySelector(".btn3").onclick = function () {
location.replace("http://www.baidu.com");
};
// 总结:使用较多的 location.assign('新的url') === location.href = '新的url' 和 location.reload()
</script>
</html>
1.3-navigator对象
navigator对象:包含当前浏览器的信息
- 工作中应用场景:用户信息统计(统计我这个网站平台的用户群体分布,什么浏览器,windows什么版本等)
navigator对象:获取浏览器信息
可以用于判定 用户的操作是否是window64位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BOM - navigator对象</title>
</head>
<body></body>
<script>
// navigator对象:获取浏览器信息
console.log(navigator.appVersion);
console.log(navigator.userAgent);
// 判定 用户的操作是否是window64位
// navigator.userAgent 有win64
if (navigator.userAgent.toLowerCase().indexOf("win64") != -1 || navigator.userAgent.toLowerCase().indexOf("wow64") != -1) {
console.log("windows 64操作系统");
}
</script>
</html>
1.4-history对象🎈
history对象主要用于记录你当前窗口的历史记录
- 主要作用就是前进和后退网页(相当于浏览器的左上角前进后退按钮功能)
- history.forward():前进
- history.back():后退
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BOM - history对象</title>
</head>
<body>
<button>回退</button>
</body>
<script>
document.querySelector("button").onclick = function () {
// 1.back():回退1步
// history.back()
// 2.go(负数):也可以回退
// history.go(-1);
// 刷新
history.go(); //history.go(0)
};
</script>
</html>
1.5-window对象
- 1.window对象:指的是当前浏览器窗口,它是JS中的顶级对象
- (1).所有的全局变量(var声明的)都是window对象的属性:最顶级的对象
- document对象
- bom对象
- 全局的方法:alert(),setInterval()…
- (2).只要是window的属性和方法,在使用的时候都可以省略window
- 例如:window.alert() 可以省略window写成alert()
- 例如:window.document 可以省略window写成document
- (3).window对象有一个特殊属性叫做name
- 它永远都是一个字符串,无论给他赋什么值
- (1).所有的全局变量(var声明的)都是window对象的属性:最顶级的对象
- 2.window对象有两个常用的方法:open()与close()
- open():打开一个窗口
- close():关闭一个窗口
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>window对象 - 基础</title>
</head>
<body>
<script>
// window对象: 是DOM和BOM的顶级对象
// 1. 顶级对象
// console.log(window)
// 2. 任何地方: 但凡没有关键字声明的变量, 都属于window
a_outer = 1
// 3. 所有有名函数: 都属于window对象
function fn() {
a_inner = 2
}
fn()
console.log(window)
// 注意: 使用变量必须加关键字
// 4. window下有一个特殊的属性: name,永远是字符串(var声明的name最终都会变成字符串)
var name = { name: '安琪拉', age: 18 }
console.log(name) // [object Object] 字符串
// var声明的全局变量name, 本质就是window.name
// window.name 保存的一定是字符串: 不是字符串也会变成字符串
// ES5开发,name只用来保存字符串
// ES6不受影响: ES6的全局变量属于script,ES5的全局变量就属于window对象
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>window对象 - 操作窗口</title>
</head>
<body>
<button class="open">打开</button>
<button class="close">关闭</button>
<script>
// 通过事件: 学习window对象控制窗口
// window.open()打开新窗口
// 窗口对象(window对象).close()关闭指定窗口
let w
document.querySelector('.open').onclick = function () {
// 1. 空白: open()
// open() // 新页签, 打开空白窗口
// 2. 指定url: open(url)
// open('http://www.baidu.com') // 打开指定窗口
// 3. 控制打开的位置(自己页面还是新页面(默认)): open(url,'位置:_blank || _self')
// open('http://www.baidu.com', '_self')
// 4. 控制窗口大小和停留(都是新窗口): open(url,'位置','大小控制: left,top,width,height')
// open('http://www.baidu.com', '_blank', 'width=200,height=200,left=200,top=200')
// 偏移是相对电脑屏幕左上角
// open()打开窗口后,会返回新窗口的window对象
w = open('http://www.baidu.com')
console.log(w)
}
// 关闭
document.querySelector('.close').onclick = function () {
// 1. 关闭自己: window.close()
// window.close()
// 谷歌:不允许自己关闭(只能关闭使用window.open()打开的窗口)
// 2. 关闭其他窗口: 其他窗口的window对象.close()
w.close()
}
// 总结
// 告知:是我的义务, 用不用是企业的选择(企业不用了), 用a链接完全可以搞定
</script>
</body>
</html>
window事件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>window - 事件</title>
<script>
// 获取元素
// const box = document.querySelector('.box')
// console.log(box)
// onload:加载事件(只针对window对象)
// window.onload = function(){}
window.onload = function () {
const box = document.querySelector('.box')
console.log(box)
}
// 优点1: 允许js写在html的上面(有利于代码分离管理)
// 优点2: onload是一个函数, 函数里面定义的变量: 局部变量(安全)
</script>
</head>
<body>
<div class="box">小马哥</div>
<img src="images/qingjieyongpin.jpg" alt="">
<!-- 实际开发中: 建议大家把js的引入放到body的关闭标签之上(所有结构都加载完毕) -->
<script>
// 阻止页面销毁事件: onbeforeunload 在页面被卸载之前触发
window.onbeforeunload = function () {
// console.log(1)
// 触发形式: 刷新\前进\后退\关闭
// 注意事项
// alert('滚')
// Blocked alert('滚') during beforeunload. // onbeforeunload里面不允许使用alert
// 如果真要阻止: 必须要有return
return '真的要离开我吗?'
// 不是return会必然触发: 一定需要用户交互
// onbeforeunload: 是因为用户可能写了数据,不小心误触了销毁操作, 是用来提示用户保存数据的
// 不交互: 没有数据, 不会触发(触发了,不会有效果)
// 以后浏览器: 估计不会再支持了
}
</script>
<!-- 总结
window.onload是有用的: 其他没用(现在不用了)
-->
</body>
</html>