1.1BOM概述
1.浏览器对象模型，核心是window，它提供了独立于内容而与浏览器窗口进行交互的对象
2.BOM由一系列相关对象构成，并且每个对象都提供了很多方法和属性
3.bom顶级对象是window，dom顶级对象是document
4.bom包含dom
5.它是全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法，在调用时常省略window
1.2窗口加载事件
1.window.οnlοad=function(){}–只能写一次；
2.btn.addEventListener(‘load’,function(){})–次数无限制，load等页面内容全部加载完毕，包含页面dom元素 图片 flash css等等
<script>
window.onload=function(){
var btn=document.querySelector('button')
btn.addEventListener('click',function(){
alert('点击我')
})
}
</script>
1.3调整窗口大小事件
注：只要页面窗口发生变化，就会触发该事件调用处理函数
<script>
window.addEventListener('resize',function(){
})
window.onresize=function(){}
</script>
1.4定时器
setTimeout()定时器
1.在定时器到期后执行
2.window.setTimeout(调用函数,延时时间)–回调函数（时间到了再返回去调用该函数）
3.window可以省略
4.延时时间单位是毫秒。可以省略
5.调用函数可以直接写函数，还可以写 函数名 或者 ‘函数名()’
6.常给定时器赋值一个标识符
<script>
window.setTimeout(function(){},2000)
</script>
停止setTimeout()定时器
window.clearTimeout(time id);
<script>
var time1= window.setTimeout(function(){
console.log('爆炸')
},2000)
btn.addEventListener('click',function(){
clearTimeout(time1);
})
</script>
setInterval()定时器
1.window.setTimeout(回调函数,延迟时间)–每隔这个延迟时间，就调用一次，重复调用
停止setInterval()定时器
window.clearInterval(interval Id)
注：1.this指向的是调用它的对象
2.全局作用域或者普通函数中this指向全局对象window（定时器里面的this指向window）
3.构造函数中this指向构造函数的实例
方法调用中谁调用this指向谁
1.5JS执行
js执行队列
js是单线程，同一时间只能做一件事，所有的任务都要排队，于是出现了同步和异步
同步：程序的执行顺序与任务的排列顺序是一致同步的
异步：在做这件事的同时去处理其他任务
本质区别：流水线上各个任务执行顺序不同
js执行顺序
同步任务：都在主线程上执行，形成一个执行栈
异步任务：js的异步是通过回调函数实现的
异步任务：1.普通事件：如click，resize等
2，资源加载：如load，error等
3.定时器：包含setInterval，setTimeout等
js执行机制
1.先执行执行栈中的同步任务
2.异步任务（回调函数）放入任务队列中
3.一旦执行栈中的所有同步任务执行完毕，系统会按次序读取任务队列中的异步任务，于是被读取的
异步任务结束等待状态，进入执行栈，开始执行
1.6location对象
1.location.href获取url
<script>
btn.addEventListener('click',function(){
location.href='http://www.itcast.cn'
})
</script>
2.location.assign()–跳转页面（重定向页面）
3.location.replace()–替换当前页面，因为不记录历史，所以不能后退页面
4.location.reload()–重新加载页面，即直接刷新
1.7navigator对象
包含有关浏览器的信息，他有很多属性，最常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值
1.8history对象方法
1.back()–后退功能
2.forword()–前进功能
3.go(参数)–前进后退功能，参数如果是1前进一个页面；如果是-1后退一个页面
2.操作实例
2.1页面跳转
<title>页面跳转</title>
</head>
<body>
<button>点击</button>
<div>在5秒后跳转</div>
<script>
var btn=document.querySelector("button")
btn.addEventListener('click',function(){
location.href='http://'
})
var timer=5
setInterval(function(){
if(timer==0)
{
location.href='http://'
}
div.innerHTML='您将在'+timer+'秒钟后跳转页面'
timer--;
},5000)
</script>
2.2分时问候
<title>分时问候</title>
</head>
<body>
<img src="../js操作实例/上午好.webp" alt="">
<script>
var img=document.querySelector('img')
var div=document.querySelector('div')
var date=new Date();
var h=date.getHours();
if(h<12)
{
img.src='../js操作实例/上午好.webp'
}else
{
img.src='../js操作实例/下午好.webp'
}
</script>
2.3关闭广告
<title>关闭广告</title>
<style>
.box {
display: block;
position: relative;
width: 74px;
height: 88px;
}
.box img {
width: 60px;
margin-top: 5px;
}
.close-btn {
position: absolute;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
二维码
<img src="../js操作实例/二维码.webp" alt="" />
<i class="close-btn">×</i>
</div>
<script>
var btn = document.querySelector(".close-btn");
var box = document.querySelector(".box");
btn.onclick = function () {
box.style.display = "none";
};
</script>
2.4密码提示信息
<title>密码提示</title>
<style>
.message {
display: inline-block;
font-size: 12px;
color: #999;
}
.wrong {
color: red;
/* background-image: url(); */
}
.right {
color: green;
}
</style>
</head>
<body>
<div class="box">
<input type="password" class="ipt">
<p class="message">请输入6-16位密码</p>
</div>
<script>
var ipt=document.querySelector('.ipt')
var message=document.querySelector('.message')
ipt.onblur=function(){
if(this.value.length<6||this.value.length>16){
message.className='message wrong'
message.innerHTML='您输入的位数不对'
}
else
{
message.className='message right'
message.innerHTML='您输入的位数正确'
}
}
</script>
运行结果：
2.5下拉菜单
<title>下拉菜单</title>
</head>
<body>
<ul class="nav">
<li>
<a href="">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li><a href="">评论</a></li>
</ul>
</li>
</ul>
<script>
var nav = document.querySelector(".nav");
var lis = nav.children; //获取li
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
this.children[1].style.display = "block";
};
lis[i].onmouseout = function () {
this.children[1].style.display = "none";
};
}
</script>
2.6密码显示
<title>显示密码</title>
<style>
.box {
width: 400px;
border: 1px red solid;
margin: 100px auto;
position: relative;
}
.box input {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box img {
width: 24px;
position: absolute;
top: 2px;
right: 2px;
}
</style>
</head>
<body>
<div class="box">
<label for="../js操作实例/睁眼.webp">
<img src="../js操作实例/闭眼.webp" alt="" id="eye" />
</label>
<input type="password" id="=pwd" />
</div>
<script>
var eye = document.getElementById("eye");
var pwd = document.getElementById("pwd");
var flag=0;
eye.onclick = function () {
if(flag==0){
flag=1;
pwd.type = "text";
eye.src='../js操作实例/睁眼.webp'
}
else {
pwd.type='password';
eye.src="../js操作实例/闭眼.webp";
flag=0;
}
};
</script>
</body>
</html>
2.7消除广告
<title>消除广告</title>
</head>
<body>
<img src="../js操作实例/上午好.webp" alt="" class="ad">
<script>
var ad=document.querySelector('.ad')
setTimeout(function(){
ad.style.display='none'
},3000)
</script>
扫一扫
1066
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
