自学内容网 自学内容网
自学内容网 > 正文

前端入门一之BOM、window对象常见事件、定时器、JS执行机制、location对象、navigatior对象、history对象

🕗 发布于 2024-11-11 10:01 前端  javascript  开发语言  html  css  

前言

  • JS是前端三件套之一，也是核心，本人将会更新JS基础、JS对象、DOM、BOM、ES6等知识点，这篇是BOM;
  • 这篇文章是本人大一学习前端的笔记；
  • 欢迎点赞 + 收藏 + 关注，本人将会持续更新。

文章目录

BOM

在这里插入图片描述

1、BOM概述

  • BOM ：是浏览器对象模型
  • 对象核心是window
DOMBOM
文档对象模型浏览器对象模型
DOM就是把文档当中一个对象把浏览器当作一个对象
DOM的顶级对象是documentBOM的顶级对象是 window
DOM主要学习的是操作页面的元素BOM学习的是浏览器交互的一些对象
兼容性好兼容性较差
  • BOM包含DOM
  • window对象是浏览器的顶级对象，它具有双重角色

2、window对象的常见事件

2.1、窗口加载事件

window.onload 是窗口页面加载事件，把文档内容完全加载完全会出阿飞该事件（包括图像，脚本文件，css文件等），就调用函数

//1.
window.onload = function() {
    
};

//2.
window.addEventListener("load",function() {});
  • 有了window.onload 就可以把js代码写到元素的上方
  • 如果由多个window.onload，就以第一个为准
  • 如果使用addEventListener则没有限制
document.addEventListener('DOMContentLoaded',function() {});
  • DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等
  • 如果页面图片多的话，访问到onload触发可能较长时间
2.1.1、区别
  • load等页面内容全部加载完毕后，包括页面dom元素，图片，flash，css等
  • DOMContentLoaded是DOM加载图片，不包括页面dom元素，图片，flash，css等，加载速度比load快一点
window.addEventListener('load',function() {
    alert(22);
})
document.addEventListener('DOMContentLoaded',function() {
    alert(33);
})
2.2、调整窗口大小事件

window.onresize是调整窗口大小加载事件，当触发时就调用的函数

window.onresize = function() {
    
}
window.addEventListener('resize',function() {
    
})
  • 只要窗口大小发送像素变化，就会触发这个事件
  • 经常用这个事件完成响应布局。window.innerWidth 当前屏幕的速度
<body>
    <script>
        window.addEventListener('load',function() {
            var div = document.querySelector('div');
            window.addEventListener('resize',function() {
                if(window.innerWidth <= 800){
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }
            })
        })
    </script>
    <div>
    box
</div>
</body>

3、定时器

window 对象提供了两个定时器

  • setTimeout( )
  • setInterval( )
3.1、setTimeout()定时器

**setTimeout()**方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。

window.setTimeout(调用函数,延迟毫秒数)

注意：

  • window可以省略
  • 调用这个函数
    • 可以直接写函数名
  • 延迟的毫秒数省略默认的是0，如果写，必须是毫秒
  • 因为定时器很多，说以经常给定时器赋值一个标识符
  • setTimeout()这个调用函数也称为回调函数 callback
function callback() {
    console.log('爆炸了');
}
var time1 = setTimeout(callback,3000);
var time2 = steTimeout(callback,5000);
3.2、clearTimeout()停止定时器
  • clearTimeout方法取消了先前通过调用setTimeout()建立的定时器
window.clearTimeout(timeoutID)
//timeoutID 是定时器的标识符

注意：

  • window可以省略
3.3、setInterval() 定时器
  • setInterval方法重复调用一个函数，每隔这个时间，就去调用一次回调函数
window.setaInterval(回调函数,间隔的毫秒数);
  • window 可以省略
  • 注意：第一次执行也是间隔毫秒数之后
3.4、clearInterval()停止定时器
  • claerInterval( )方法取消了先前通过调用setInterval()建立的定时器

注意：

  • window可以省略
  • 里面参数就是标识符
3.5、this指向
  • this的指向在函数定义的时候确定不了的，只有函数执行的时候才能确定this指向谁
  • 全局变量或者普通函数中this指向全局对象window
发送信息案例
<body>
    <input type = 'number'> <button>发送</button>
    
    <script>
        var btn = document.querySetector('button');
var time = 60;
        btn.addEventListener('click',function() {
            this.disabled = 'true';
            var timer = setInterval(function() {
                if(time == 0) {
                    clearInterval(timer);
                    this.disabled = 'flase';
                    this.innerHTML = '发送';
                } else {
                    this.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            },1000);
        })
    </script>
</body>

4、JS执行机制

4.1、JS是单线程
  • 简单理解，同一时间只能做一件事情。
4.2、一个问题
//1.
console.log(1);
setTimeout(function(){
    console.log(3);
} ,1000);
console.log(2);

//2.
console.log(1);
setTimeout(function() {
    console.log(3);
},0);
console.log(2);

结果：1 2 3

4.3、同步与异步
  • 同步：
    • 前一个任务结束在执行下一个
  • 异步：
    • 在做这件事的同时，你还可以去处理其他事情

在这里插入图片描述

在这里插入图片描述

  • JS中的异步是通过回调函数实现的
  • 异步任务类型：
    • 普通事件，如：click,resize等
    • 资源加载，如：load,error等
    • 定时器，包括setTnterval,setTimeout等

5、location对象

  • window提供了location属性**用于获取或者设置窗体的url，并且解析url。
5.1、url

统一资源定位符

url语法一般为：

protocol://host[:port]/path/[?query]#fragment

http://www.itcast.cn/index.html?name=andy&age=18#link
组成说明
protocol通信协议，常用的http,ftp,maito等
host主机（域名）www.itheima.com
port端口号，可选
path路径由零或者多个’/'符号隔开的字符串
query参数以键值的形式，通过&符号分开
fragment片段#后面内容，常用于描点链接
5.2、location对象属性
location对象属性返回值
location.href获取或者设置整个url
location.host返回主机（域名）www.baidu.com
location.port返回端口号，如果未写就返回空字符串
location.pathname返回路径
location.search返回参数
loacation.hash返回片段，#后面内容常见于链接

重点记住：href和search

5.3、location对象方法
location对象方法返回值
location.assign()和href一样，可以跳转页面（也称为页面重启向页）
location.replace()替换当前页面
location.reload()重新加载页面

6、navigation对象

  • navigator对象包含有关浏览器，他有很多属性
  • 我们常用的是userAgent
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //手机
 } else {
    window.location.href = "";     //电脑
 }

7、history对象

  • window对象提供了一个history对象，与浏览器历史记录进行交互
history对象方法作用
back()可以后退功能
forward()前进功能
go(参数)前进后退功能，参数如果是1 前进1 ，
<body>
    <a href = "list.hrml">列表</a>
    <button>
        前进
    </button>
    <script>
    var btn = document.querySelector('button');
        btn.addEventListener('click',function() {
            history.go(1);
        })
    </script>
</body>

原文地址：https://blog.csdn.net/weixin_74085818/article/details/143663877

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024