当前位置: 首页> 汽车> 报价 > 网站建站什么目录_b2b采购平台网站_网络营销的六大功能_高级seo

网站建站什么目录_b2b采购平台网站_网络营销的六大功能_高级seo

时间:2025/7/11 10:48:27来源:https://blog.csdn.net/weixin_74085818/article/details/143663877 浏览次数: 0次
网站建站什么目录_b2b采购平台网站_网络营销的六大功能_高级seo

前言

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

文章目录

    • BOM
      • 1、BOM概述
      • 2、window对象的常见事件
        • 2.1、窗口加载事件
          • 2.1.1、区别
        • 2.2、调整窗口大小事件
      • 3、定时器
        • 3.1、setTimeout()定时器
        • 3.2、clearTimeout()停止定时器
        • 3.3、setInterval() 定时器
        • 3.4、clearInterval()停止定时器
        • 3.5、this指向
        • 发送信息案例
      • 4、JS执行机制
        • 4.1、JS是单线程
        • 4.2、一个问题
        • 4.3、同步与异步
      • 5、location对象
        • 5.1、url
        • 5.2、location对象属性
        • 5.3、location对象方法
      • 6、navigation对象
      • 7、history对象

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]#fragmenthttp://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返回片段,#后面内容常见于链接

重点记住:hrefsearch

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>
关键字:网站建站什么目录_b2b采购平台网站_网络营销的六大功能_高级seo

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: