目录
Bom ： 浏览器对象模型 （bom 包含dom—— bom大一点）
1. 定时器-延时函数 （只执行一次）
setTimeout(回调函数，延迟时间)
<script>
// setTimeout(回调函数，延迟时间)
setTimeout(function(){
console.log(11)
},2000)
</script>
2. JS执行机制【内部执行顺序】
以上代码执行出来都是132，为什么这样子呢？
【js本身就是单线程语言，从上往下依次执行，但是当遇到，如点击事件，或定时器这种耗时的，如果一直等他执行会造成页面堵塞】 js是如何解决此问题的方法 ？
同步和异步，的执行过程
3. location 对象 【可以省略window】
console.log(window.location)
console.log(location)
使用场景多是：页面几秒后自动跳转至另一个页面
常用的属性和方法
- location.href
location.href = 'https://www.baidu.com'- location.search [拿到的是问号后面的部分]
<form action="">
<input type="text" name="name">
<input type="password" name="pwd">
<button>提交</button>
</form> console.log(location.search)
- location.hash [拿到的是问号后面的部分]
<a href="#/my">我的</a>
<a href="#/about">关于</a>
- reload（） 刷新方法
// 4. reload()
const btn = document.querySelector('button')
btn.addEventListener('click',function(){
// alert(1)
location.reload()//刷新页面
location.reload(true)//强制刷新页面 相当于 ctrl+f5
})总结
4. navigator 对象 [就是关于浏览器的一些相关信息]
- navigator.userAgent 检测是移动还是pc端
<body>
这是pc端
<script>
// 检测 userAgent（浏览器信息）
!(function () {
const userAgent = navigator.userAgent
// 验证是否为Android或iPhone
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
// 如果是Android或iPhone，则跳转至移动站点
if (android || iphone) {
location.href = 'http://baidu.com'
}
})()
//判断如果是移动或者iphone则显示移动端口
//立即调用函数写法
(function (){})()
!function(){}()
+function(){}()
~function(){}() //以上这些写法都可以
</script>
</body>
5. history 对象
go() 和 history 两者选择一个就好，go简单一点
<body>
<button>前进</button>
<button>后退</button>
<script>
const forward = document.querySelector('button:first-child')
const back = forward.nextElementSibling
// 添加前进和后退事件
forward.addEventListener('click',function(){
// 前进1 第一种写法
go(1)
// 前进 第二种写法
history.forward()
})
back.addEventListener('click',function(){
// 后退1 第二种写法
go(-1)
// 后退 第二种写法
history.back()
})
</script>
</body>
264
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
