小学生做电子小报的网站,wordpress 采集伪原创,做网站的科技公司,黑龙江省建设网写在前面#xff1a;本文仅包含BOM内容#xff0c;JavaScript传送门在这里#xff0c;DOM传送门在这里。 本文内容是假期中刷的黑马Pink老师视频#xff08;十分感谢Pink老师#xff09;#xff0c;原文保存在个人的GitLab中#xff0c;如果需要写的网页内容信息等可以评… 写在前面本文仅包含BOM内容JavaScript传送门在这里DOM传送门在这里。 本文内容是假期中刷的黑马Pink老师视频十分感谢Pink老师原文保存在个人的GitLab中如果需要写的网页内容信息等可以评论联系我若是编辑博文中出现了忘记上传的图片或者错位的图片欢迎评论区指正。写作不易欢迎点赞、收藏关注。 文章目录 BOM 导论什么是BOMDOM 与 BOM 对比一些描述 窗口加载事件使用window.onload来改变script标签的位置通过监听事件的方式写多个load通过DOMContentLoaded事件来获取窗口加载事件 窗口大小变化事件回调函数setTimeout 定时器定时器函数的使用通过匿名函数调用通过函数名调用通过函数名字符串调用 | 不推荐区分不同的定时器 清除定时器 setInterval() 定时器setInterval() 的使用清除定时器 setInterval() this指向问题location对象location相关属性与方法navigator对象获取浏览器信息 历史记录forward() 前进 与 back() 后退 页面偏移量 offsetLeft 与 offsetTopoffsetLeft 与 offsetTopoffsetWidth与offsetHeightoffsetParent client 系列scroll系列scroll 属性scroll 方法 移动端事件触摸时间对象本地存储sessionStoragelocalStorage BOM 导论
什么是BOM BOMBrowser Object Model是浏览器对象模型他提供了独立于内容而与浏览器窗口进行交互的对象其核心对象是window。 BOM 是由一系列相关的对象构成并且每个对象都提供了很多方法与属性。 BOM缺乏标准JavaScript语法的标准化组织室ECMADOM的标准化组织是W3CBOM最初是Netscape网景公司浏览器标准的一部分。 DOM 与 BOM 对比
DOMBOM文档对象模型浏览器对象模型DOM就是把「文档」当做一个「对象」来看待把「浏览器」当做是一个「对象」来看待DOM的顶级对象是documentBOM的顶级对象是windowDOM的主要学习是操作页面元素BOM学习的事浏览器窗口交互的一些对象DOM是W3C标准BOM是浏览器厂商在各自浏览器上定义的兼容性较差
BOM 与 DOM 的关系 一些描述 我们常用的document.xxx如document.quertSelector()举例在下面的代码段) 完整的写法是 window.documnt.xxx如果我们在script中定义了一个全局变量以num举例如下代码那么我们真正的调用方式其实是window.numwindow包含一些方法如我们常用的alert我们也可以在前面加上window.使用示例如下 bodydiv我是Jim.kk/divscript// 1. 方法调用的省略写法document.querySelector(div);// 2. 方法调用的完整写法window.document.querySelector(div);var num 10;// 3. 全局变量的省略写法console.log(num);// 4. 全局变量的完整写法console.log(window.num);// BOM的alert方法window.alert(我是Jim.kk);/script
/body窗口加载事件
使用window.onload来改变script标签的位置 window.onload是窗口页面加载事件当文档内容完全加载完成会触发该事件包括图像、脚本文件、css文件等就调用处理函数。 一般来说我们需要按照先写标签然后将script标签写在标签的下面的方式但是我们可以通过window.onload来改变script标签的位置因为这个方法会在页面加载完毕之后才执行所以执行这个方法的时候页面中的DOM元素已经全部被渲染了请看下面示例。
bodyscriptwindow.onload function () {var btn document.querySelector(button);btn.addEventListener(click,function () {alert(你点我);})}/scriptbutton点击/button
/body在以上代码中我们没有按照之前的标准将script标签写在button标签下面但是依旧是可用的。
通过监听事件的方式写多个load 如果页面中存在多个window.onload会以最后一个为准最后一个会覆盖前面的事件 这是传统事件存在的弊端为了解决这一问题我们可以使用监听事件替换window.onload请看下面示例。 !DOCTYPE html
html langen
headmeta charsetUTF-8title页面加载事件|侦听/titlescriptwindow.addEventListener(load,function () {var btn2 document.querySelector(#btn2);btn2.onclick function () {alert(点击了按钮2);}})/script
/head
bodyscriptwindow.addEventListener(load,function () {var btn1 document.querySelector(#btn1);btn1.onclick function () {alert(点击了按钮1);}})/scriptbutton idbtn1btn1/buttonbutton idbtn2btn2/button
/body
/html上面代码中我们添加了两个window的侦听事件验证得知两个侦听事件都生效了。 通过DOMContentLoaded事件来获取窗口加载事件
document.addEventListener(DOMContentLoaded,function () {})DOMContentLoaded 事件触发时仅当DOM加载完成不包括样式表、图片、flash等。IE9以上才支持。 若果页面的图片非常多那么推荐使用这种方式。 bodyscriptwindow.addEventListener(load,function () {alert(22);})document.addEventListener(DOMContentLoaded,function () {alert(33);})/script
/body以上代码一定是先弹出33再弹出22的因为DOMContentLoaded事件只需要DOM元素加载完毕就可以执行但是load需要加载完成图片等各种信息之后才执行。 窗口大小变化事件
window.onresize functoin(){}
window.addEventListener(resize,function () {} )只要窗口大小发生变化就会触发里面的处理函数。
bodybutton当宽度小于900px的时候我就消失啦/buttonscriptwindow.addEventListener(resize,function () {// console.log(变化了);// console.log(内高window.innerHeight\t内宽 window.innerWidth);var btn document.querySelector(button);if ( window.innerWidth 900 ) {btn.style.display none;} else {btn.style.display block;}})/script
/body以上代码的执行效果当我们改变浏览器框的大小的时候当宽度小于900px这个button按钮就会消失。
这种效果常用在一些页面元素渲染上比如原本有四个列的某种元素但是当页面较窄的时候我们会隐藏其中某个列以保证页面的正常显示。
回调函数 setTimeout()这个函数我们称为回调函数 callback 普通函数是按照顺序直接调用的但是回调函数不按顺序来比如定时器函数需要等待时间等其它事情干完或者到了调用条件才会调用这个函数。 之前学习的onclick函数或者element.addEventListener(xxx,fun)里面的函数也是回调函数。 setTimeout 定时器 setTimeout() 定时器 window.setTimeout(调用函数,[延迟的毫秒数]); window在调用的时候可以省略单位是毫秒省略是0秒也就是立马执行这个调用函数可以直接写函数还可以写函数名不需要带括号 当延迟的毫秒数到了就去执行函数。
定时器函数的使用
通过匿名函数调用
bodyscript// 单位是毫秒省略是0秒也就是立马执行setTimeout(function () {alert(我是Jim.kk);},2000);/script
/body以上代码在页面加载出来两秒后会跳出弹窗提示。
通过函数名调用
bodyscriptfunction fun() {alert(我是Jim.kk);}setTimeout(fun,2000);/script
/body通过函数名字符串调用 | 不推荐 函数名字符串必须要加括号 以下代码与上面两个代码段执行无异不多赘述
bodyscriptfunction fun2() {alert(我是Jim.kk);}setTimeout(fun2(),2000);/script
/body区分不同的定时器
以下代码会在页面加载出来后的两秒在控制台输出一句话页面加载好的5秒后又会输出一句话。
bodyscriptfunction fun3() {console.log(我是Jim.kk);}var timer1 setTimeout(fun3,2000);var timer2 setTimeout(fun3,5000);/script
/body清除定时器 使用clearTimeout(定时器名称)函数可以清除定时器请看如下代码 注意括号内是定时器的名称不是字符串 bodybutton点我清除定时器/buttonscriptvar btn document.querySelector(button);var timer1 setTimeout(function () {alert(我是Jim.kk);},5000);btn.onclick function () {clearTimeout(timer1);}/script
/body以上代码在弹窗出现之前若是点击了按钮弹窗则永远也不会跳出来。
setInterval() 定时器 window.setInterval(回调函数,[间隔毫秒数])与setTimeout()不同的是setTimeout只会执行一次但是setInterval会循环执行 setInterval() 的使用
bodyscriptsetInterval(function () {console.log(我是Jim.kk);},1000)/script
/body以上代码每过一秒就会输出一次我是Jim.kk; 清除定时器 setInterval()
以下代码点击开始后开始循环1秒1次输出当前时间戳点击停止后停止输出。
bodybutton idbegin开始/buttonbutton idstop停止/buttonscriptvar begin document.querySelector(#begin);var stop document.querySelector(#stop);var timer null;begin.addEventListener(click,function () {setInterval(function () {console.log(new Date());},1000);})stop.addEventListener(click,function () {clearInterval(timer);})/script
/bodythis指向问题 总结起来一句话谁调用就指向谁。 全局作用下指向window全局作用域的方法中指向window因为是window调用的方法在定时器中指向window因为定时器也是window调用的在对象中指向这个对象在事件中指向被触发事件如被点击的元素如按钮如果在按钮点击事件中调用计时器计时器中指向的还是window构造函数指向的是实例对象 全局作用域下指向window
bodyscriptconsole.log(this); // window/script
/body全局作用域的方法中指向window
bodyscriptfunction fun(){console.log(this);}fun(); // windowwindow.fun(); // 这行代码与上一行等效/script
/body在定时器中指向window
bodyscriptsetTimeout(function () {console.log(this); // window},1000);/script
/body在对象中指向这个对象
bodyscriptvar o {sayHi: function () {console.log(this); // o对象}}o.sayHi(); // o 对象/script
/body在事件中指向被触发事件如被点击的元素如按钮
bodybutton点我/buttonscriptvar btn document.querySelector(button);btn.onclick function () {console.log(this); // button点我/button}/script
/body如果在按钮点击事件中调用计时器计时器中指向的还是window
bodybutton点我/buttonscriptvar btn document.querySelector(button);btn.onclick function () {setTimeout(function () {console.log(this); // 指向 window},1000)}/script
/body构造函数指向的是实例对象
bodyscriptfunction Fun() {console.log(this); // 指向的是fun实例对象}var fun new Fun();/script
/bodylocation对象
location相关属性与方法 window对象给我们提供了一个location属性用于获取或设置窗体的URL并且可以用于解析URL。因为这个属性返回的是一个对象所以我们将这个属性称为location对象。 location对象属性返回值location.href获取或者设置整个URLlocation.host返回主机域名location.port返回端口号如果未写返回空字符串location.pathname返回路径location.search返回参数location.hash返回片段#后面内容常见于链接、锚点
location方法行为描述location.assign()记录历史并跳转location.replace()不记录历史并跳转location.reload()重载页面如果页面里参数是true则强制刷新强制刷新不会保留缓存CtrlF5 可以直接在控制台输入location点回车查看当前的location。 下面实现一个点击按钮后五秒钟倒计时跳转百度的示例
bodybutton点我跳转/buttondiv/divscriptvar btn document.querySelector(button);var div document.querySelector(div);btn.onclick function () {var timer 5;div.innerText 将在 timer 秒后跳转至百度;setInterval(function (){timer -- ;if(timer 0){location.href https://baidu.com;} else {div.innerText 将在 timer 秒后跳转至百度;}},1000);}/script
/body以上代码在点击按钮后会开始执行计时器然后div中每次显示倒计时的时间等时间到了就会跳转到百度。 navigator对象获取浏览器信息 navigator 对象包含有关浏览器的信息它有很多属性我们最常用的是userAgent该属性可以返回由客户机发送服务器的user-agent头部的值。 输出用户当前使用的客户端
alert(navigator.userAgent);历史记录
forward() 前进 与 back() 后退 可以在括号中写上数字控制前进后退的步数 要有历史记录或者前进记录的情况下才可以调用 以下写两个页面演示一下命名如下
index页home页_BOM_06.6-home.html
bodya href_BOM_07.2-home.html前往Home页/abutton点我下一步/buttonscriptvar btn document.querySelector(button);btn.onclick function (){history.forward();}/script
/bodybodya href_BOM_07.1-index.html前往首页/abutton点我返回/buttonscriptvar btn document.querySelector(button);btn.onclick function (){history.back();}/script
/body这样的话两个页面分别就有两个标签在首页点击a标签之后进入到home页面这时候就产生了历史记录可以点击返回按钮返回返回之后又可以点击下一步再次进入到首页。 可以在括号中写上数字控制前进后退的步数 页面偏移量 offsetLeft 与 offsetTop
与style的区别 offset系列的返回值都是没有单位的是一个纯数字style可以offset不可以被赋值style可以offset返回的宽度等信息包含padding、border、width的宽度和高度style不包含 offsetLeft 与 offsetTop 返回的都是距离可视窗口页面部分左上角的定位返回值是一个数字不可以进行赋值 offsetWidth与offsetHeight 返回的是宽度和高度包含padding、border、width的宽度和高度如果元素的宽度是xx%那么当浏览器大小发生变化时该值也会动态发生变化返回值是一个数字 offsetParent 返回的是父元素如果父亲不带有定位那么则会逐级向上找直到找到带定位的元素这是与fatherNode的区别 以下代码的页面显示效果与控制台输出效果如下图所示 headmeta charsetUTF-8title页面偏移量/titlestylebody {width: 100%;height: 100%;margin: 0;}#father {position: relative;margin-top: 400px;margin-left: 800px;background: antiquewhite;width: 200px;height: 200px;border: .1px solid red;}#son {background: aqua;width: 100px;height: 100px;margin: 50px;}/style
/head
bodydiv idfatherdiv idson/div/divscriptvar father document.querySelector(#father);var son document.querySelector(#son);console.log(father.offsetLeft); // 800console.log(father.offsetTop); // 400// 页面的宽度包含padding、border、width// 如果高度或者宽度是100%那么当浏览器窗口大小变化的时候这个值也会动态变化console.log(father.offsetWidth); // 200console.log(father.offsetHeight); // 200// 如果father带有定位(position: relative;)那么将会显示father如果直接的father不带有定位则逐级向上寻找直到找到带定位的console.log(son.offsetParent);/script
/bodyclient 系列 与offset最大的区别就是不包含边框 client系列属性说明element.clientTop返回元素上边框的大小element.clientLeft返回元素左边框大小element.clientWidth返回自身包含padding、内容区的宽度不包含边框返回一个数值element.clientHeight返回自身包含padding、内容区的高度不包含边框返回一个数值
headmeta charsetUTF-8titleclient | 系列页面偏移量/titlestylediv {width: 200px;height: 200px;background: pink;border: 3px solid red;margin: 200px auto;}/style/head
bodydiv/divscriptvar div document.querySelector(div);console.log(div.clientHeight); // 200console.log(div.clientWidth); // 200console.log(div.clientTop); // 3console.log(div.clientLeft); // 3/script
/body注意无法获取下边框与右边框大小 scroll系列
scroll 属性 scroll 系列与offset系列和client系列最大的区别在于如果元素内部的内容溢出了如文字长度溢出或者内部div高度比当前元素高那么scroll显示的实际的高度和宽度。 scorll系列属性说明备注element.scrollTop返回被卷去的上侧距离返回值不带参数element.scrollLeft返回被卷去的左侧距离返回值不带参数element.scrollWidth返回自身实际的宽度不含边框返回值不带参数element.scrollHeight返回自身实际的高度不含边框返回值不带参数 横向超出一样的道理 scroll 方法
div.addEventListener(scroll,function (){console.log(div.scrollTop)
})当滚动条发生变化时触发 注意:当调用对象是document的时候要使用window.pageYOffset如果要计算左侧则是window.pageXOffset 简单解释一下我们上面说的scroll系列应对的是页面内的元素比如页面内有一个小div内部又套了一个div这时候要使用scroll系列但是操作document的时候操作的是整个页面我们要使用windows.pageX/YOffset。 移动端事件
触屏touch事件说明touchstart手指触摸到一个DOM元素时触发touchmove手指在一个DOM元素上滑动时触发touchend手指离开一个DOM元素时触发
示例写一个DIV在移动端分别进行手指触摸、手指移动和手指离开操作
headmeta charsetUTF-8title移动端touchstart事件/titlestylediv {width: 300px;height: 300px;background: pink;}/style
/head
bodydiv/divscriptvar div document.querySelector(div);div.addEventListener(touchstart,function (e) {console.log(手指摸上去了);})div.addEventListener(touchmove,function (e) {console.log(手指正在移动);})div.addEventListener(touchend,function (e) {console.log(手指离开了);})/script
/body以上代码的测试结果如下图所示: 如果要自己测试记得F12并按照红色箭头方向打开移动端模式。
触摸时间对象 touchs正在触摸屏幕的所有手机的列表是一个列表由于可以多指触摸所以是一个列表targetTouches正在触摸当前DOM元素伤的手指列表changedTouches手指状态发生了改变的列表从无到有从有到无的变化 本地存储 sessionStorage生命周期为关闭浏览器窗口同页面下数据可以共享关闭页面或新建页面后失效以键值对存储存储空间约5MsessionStorage多页面同一浏览器内共享重启浏览器依旧生效不同页面的数据可以共享以键值对存储存储空间约20M sessionStorage
sessionStorage方法说明备注setItem(‘key’,value)存储一个数据存储空间约5MgetItem(‘key’)使用key获取一个数据removeItem(‘key’)删除一个数据clear()清空所有数据
localStorage
localStorage方法说明备注setItem(‘key’,value)存储一个数据存储空间约20MgetItem(‘key’)使用key获取一个数据removeItem(‘key’)删除一个数据clear()清空所有数据
