一篇文章彻底学会BOM
一、BOM
二、window对象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//window对象是顶级对象
//document
//window.document.getElementById("box");
//alert()
//prompt
//confirm()
//window.alert("哈哈");
//window.console.log("呵呵");
//定义的全局变量，函数也是window的
//var a = 11;
//console.log(a);
//console.log(window.a);
// function fn() {
// console.log("哈哈");
// }
//
// window.fn();
//关于this
//函数内部的this是window
//方法内部的this，指向当前的对象
//构造函数内部的this，新创建的对象
//事件里面的this，当前对象
// function fn() {
// console.log(this);
// }
//
// window.fn();
var num = 11;
function fn() {
var num = 22;
console.log(num);//22
this.num = 33;//window.num = 33;
console.log(num);//22
}
fn();
console.log(num);//33
</script>
</body>
</html>
1.window.onload（掌握）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//作用：等待页面加载完成后，才会开始执行。会等待页面所有的资源都加载完成，才会执行。
// window.onload = function () {
// var box = document.querySelector("#box");
// console.log(box);
// }
</script>
</head>
<body>
<div id="box"></div>
<img id="img" src="15.jpg" alt="">
<script>
//on:当..时候 load:加载
//加载完成的时候，会触发这个onload事件
// window.onload = function () {
// console.log("哈哈");
// }
//等页面加载完成，所有的资源都加载完成
window.onload = function () {
var img = document.querySelector("#img");
console.log(img.width);
console.log(img.height);
}
</script>
</body>
</html>
2.window.open与window.close(了解)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>打开</button>
<button>关闭</button>
<script>
//window.open:开启一个新的窗口
//window.close:关闭一个窗口
var button1 = document.querySelectorAll("button")[0];
var button2 = document.querySelectorAll("button")[1];
var newWin;
button1.onclick = function () {
//打开一个新的窗口
//参数1：新窗口载入的地址。
newWin = window.open("http://www.baidu.com", "_blank", "width=300,height=300");
}
button2.onclick = function () {
newWin.close();
}
</script>
</body>
</html>
三、延时器与定时器
1.setTimeout
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>开启</button>
<button>关闭</button>
<script>
var btn1 = document.querySelectorAll("button")[0];
var btn2 = document.querySelectorAll("button")[1];
var timeId;
btn1.onclick = function () {
//设置了延时器，能让一个函数延迟一段时间才执行。
//第一个参数：函数的名字
//第二个参数：延迟的时间,单位毫秒
//返回一个唯一的number类型的数值，定时器的id
timeId = setTimeout(function() {
console.log("boom shakalaka")
}, 5000);
console.log(timeId)
}
btn2.onclick = function () {
//清除延时器
clearTimeout(timeId);
}
</script>
</body>
</html>
2.setInterval
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>开启</button>
<button>关闭</button>
<script>
var btn1 = document.querySelectorAll("button")[0];
var btn2 = document.querySelectorAll("button")[1];
var timeId;
btn1.onclick = function () {
//开启定时器
//参数1：需要重复执行的函数
//参数2；间隔的事件
//返回值：定时器的id
timeId = setInterval(function(){
console.log("我没病，我真的没病");
}, 1000);
}
btn2.onclick = function () {
//清除定时器
console.log("吃药了")
clearInterval(timeId);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box {
width: 400px;
height: 50px;
background-color: #acffc2;
border: 5px solid black;
margin: 100px auto;
font: bold 24px/50px 楷体;
text-align: center;
color: red;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
//把时间显示到box中
var box = document.querySelector("#box");
function setTime() {
var date = new Date();
box.innerText = date.toLocaleString();
}
setTime();//手动调用一次
setInterval(setTime, 1000);
//倒计时案例
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//开启了一个定时器，每秒中执行一次function
var timeId = setInterval(function () {
console.log("1111");
}, 1000);
</script>
</body>
</html>
四、location对象
location对象也是window的一个属性，location其实对应的就是浏览器中的地址栏。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> console.log(window.location); console.log(location); console.log(navigator.userAgent); </script> </body> </html>
1.常用属性和方法
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="http://www.baidu.com">注册成功，3秒后跳转到首页</a>
<script>
//location.href:页面跳转
var count = 3;
var link = document.querySelector("a");
//使用定时器，修改a标签的内容
var timeId = setInterval(function () {
count--;
link.innerText = "注册成功，" + count + "秒后跳转到首页";
if(count == 0) {
//清除定时器
clearInterval(timeId);
location.href = link.href;
}
}, 1000);
</script>
</body>
</html>
五、其他对象
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="24-history对象-1.html">跳转</a> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div>哈哈哈</div> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> //获取屏幕分辨率 console.log(screen.width);//屏幕的宽度 console.log(screen.height);//屏幕的高度 console.log(screen.availWidth);//浏览器可占用的宽度 console.log(screen.availHeight);//浏览器可占用的高度 </script> </body> </html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="点击发送短信">
<script>
//1. 给按钮注册点击事件
//2. 禁用按钮
//3. 开始定时器，一秒钟修改一次按钮的内容
//4. 当时间变成0了，清除定时器， 启用按钮， 恢复按钮的内容
var btn = document.querySelector("input");
btn.onclick = function () {
var count = 5;
//禁用按钮
btn.disabled = true;
//开启定时器
var timeId = setInterval(function () {
//修改按钮的内容 5秒后在次发送
count--;
btn.value = count+"秒后在次发送";
//判断count是否是0
if(count == 0) {
//清除定时器
clearInterval(timeId);
//恢复按钮
btn.disabled = false;
btn.value = "点击发送短信";
}
}, 1000);
};
</script>
</body>
</html>
