<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> window家族 </title>
<!-- 1.window对象它代表浏览器
2.window也是JS中的顶级对象：
声明的所有全局变量和函数，相当于是window的属性和方法,反过来也可以说window的属性相当于是全局变量，window方法相当于是函数
3.window其实比较低调，只要是window的属性和方法，window其实可以省略
4.window有两个属性叫 name 和 top，不管给它赋任何值，都会转成字符串，所以全局变量避免取名叫name 和 top，否则可能会有问题
6.window既包含BOM也包含DOM
DOM：操作页面
BOM: 操作浏览器 -->
<!-- window对象的两个事件 -->
<!-- window.onload ：页面加载完毕触发
window.onunload： 页面关闭时触发 -->
<!-- window的两个方法 -->
<!-- 打开网页: window.open('')
关闭网页:window.close() -->
<style>
.box {
width: 500px;
height: 300px;
background: url('../images/01.jpg') no-repeat;
background-size: 500px;
margin: 20px;
}
</style>
</head>
<body>
<!-- 1.命名问题 -->
<input type="text" id="name">
<!-- 2.触发事件 -->
<div class="box"></div>
<!-- 3.window的两个方法 -->
<input type="button" value="打开网页" id="btn1">
<input type="button" value="关闭网页" id="btn2">
<script>
// 1.命名问题
// 命名错误,避免取名叫name 和 top，否则可能会有问题
var name = document.getElementById('name');
name.onfocus = function () {
console.log('我是谁,我在哪?'); // 毛都没有;
}
var add = document.getElementById('name');
add.onfocus = function () {
console.log('我可以显示'); // 我可以显示;
}
// 2.触发事件
// 当页面加载完毕触发
console.log('我在onload前面'); // 1
window.onload = function () {
console.log('我在onload里面'); // 3
console.log('不要怂,你们先上,我断后'); // 4
var box = document.querySelector('.box');
console.log(box);
}
console.log('我在onload后面'); // 2
// 当页面关闭时触发
window.onunload = function () {
// 关闭时保存重要数据到本地存储
console.log('页面关闭了');
}
// 3.window的两个方法
// 打开网页
document.getElementById('btn1').onclick = function () {
window.open('https://www.baidu.com');
};
// 关闭网页
document.getElementById('btn2').onclick = function () {
window.close();
};
</script>
</body>
</html>
网友评论