文章目录
前言
提示:这里可以添加本文要记录的大概内容:
例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。
一、什么是BOM
BOM ,Browser Object Moudle 是浏览器对象模型,将使用的浏览器抽象为对象进行处理,其核心对象是window,并且BOM为其中的每个对象都提供了很多方法和属性。
与DOM不同,BOM缺乏标准,其最初是Netscape浏览器标准的一部分,现都是浏览器厂商各自在浏览器上定义,兼容器较差。
下图为BOM结构:
二、BOM常见对象
1.window对象
window对象是浏览器的顶级对象,它不仅是访问浏览器窗口的一个接口,也是一个全局对象,定义在全局作用域中的变量,函数等都会变成window对象的属性和方法。
代码如下(示例):
<script>
console.log(window);
</script>
<script>
var num = 10;
console.log(window.num);
function fun(){
console.log(13);
}
window.fun();
</script>
通常情况下,window都被省略
常见事件
1. 窗口加载事件
window.onload = function(){ } 或者 window.addEventListener(“load,funtion(){ });
window.onload为窗口加载事件,当文档内容完全加载完成就会触发该事件,进行调用。
使用window.onload可以将JS代码写在页面上方,但是window.onload一般只能用一次,如果有多个,则会以最后一个window.onload为准。但是使用addEventListener则没有限制
代码如下(示例):
<script>
// window.onload = function(){
// var btn = document.querySelector('button');
// btn.onclick = function(){
// alert('点击我干什么!')
// }
// }
window.addEventListener('load',function(){
var btn = document.querySelector('button');
btn.addEventListener('click',function(){
alert('点击我干什么!')
})
})
</script>
<button>click</button>
document.addEventListener(‘DOMContentLoaded’,function(){ })
仅当DOM加载完成,就可以触发该事件发生,适用于用户访问到onload事件较长的情况
2.调整窗口事件大小
window.onresize = function() { }
或者
window.addEventListener(”resize",function() { })
window.onresize可以调整窗口大小加载事件,只要窗口像素发生变化,就会触发这个事件,常和window.innerWidth用于完成响应式布局。
代码如下(示例):
<div>
@@@
</div>
<script>
window.addEventListener('resize',function(){
if(window.innerWidth <= 800){
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
})
})
</script>
2.location对象
location属性可以用于获取或设置窗体的URL,并且可以解析URL。
location对象属性:
location 对象属性 | 返回值 |
---|---|
location.href | 获取或设置整个URL |
location.host | 返回主机/域名 |
location.port | 返回端口号,如果没有返回空字符串 |
location.pathname | 返回路径 |
location.search | 返回参数 |
location.hash | 返回片段,#后面内容常见于锚点,链接 |
以location.href为例:
<button>dididi</button>
<script>
var button = document.querySelector('button');
button.addEventListener('click',function(){
location.href = 'http://www.baidu.com';
})
</script>
location对象方法:
location对象方法 | 返回值 |
---|---|
location.assign() | 可以跳转页面,可以后退页面 |
location.replace() | 替换当前页面,不能后退页面 |
location.reload() | 重新加载页面,相当于刷新 |
强制刷新: ctrl+f5 ;刷新:f5
3.navigator对象
navigator对象包含有关浏览器的信息,拥有很多属性,通过navigator可以使pc端和移动端同一个网站呈现不同的界面。
4.history对象
history对象和浏览器历史记录进行交互,该对象包含用户访问过的URL
history对象方法 | 作用 |
---|---|
back() | 可以使页面后退 |
forward() | 可以使页面前进 |
go() | 既可以前进,也可以后退,括号内为前进后退的页面数 |
三、定时器
1.setTimeout()
setTimeout()方法可在指定秒数后调用相应的函数,且只调用一次
setTimeout(要执行的代码,等待的毫秒数)
setTimeout(函数,等待的毫秒数)
代码如下(示例):
function set(){
console.log('开始计时');
}
setTimeout(set,3000);
setTimeout("alert('计时开始')",3000);
setTimeout()可以直接写函数,也可以写函数名或者采取字符串 '函数名()'三种形式
停止setTimeout()定时器
window.clearTimeout(timeout ID)
clearTimeout()可以取消setTimeout()方法,其中window可以省略
2.setInterval()
setInterval()方法可以每隔相同的时间,重复调用一个函数
window.setInterval(回调函数,等待毫秒数)
代码如下(示例):
setInterval(function(){
console.log('123')
},2000);
清除setInterval()定时器
window.clearInterval()
clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作
3.this指向
一般this的指向在函数执行时才能确定,指向调用函数的对象
全局作用域或普通函数中,this则指向全局对象window
代码如下(示例):
console.log(this);
function fn(){
console.log(this);
}
var Fun = fn();
四、同步和异步
JS执行机制
JS语言的一大特点就是单线程,即同时只能做一件事情。这就意味着所有任务都需要排队,使得JS执行时间过长,会使页面加载不连贯。
为了解决这个问题,就有了同步和异步的概念
同步
前一个任务结束后,再执行下一个任务。
JS中,同步任务都在主线程上进行,形成一个执行栈
异步
在做一件事的同时,还可以处理其他事情。
JS中异步通过回调函数来实现,一般异步任务有三种类型:
1.普通事件,click,resize
2.资源加载,load,error
3.定时器,setInterval,setTimeout
JS中,先执行栈中的同步任务,最后再执行任务队列中的异步任务
代码如下(示例):
<script>
console.log(1);
setTimeout(function(){
console.log(2);
},1000)
console.log(3);
</script>
示意图: