网站怎么能快速备案,.name后缀的网站,wordpress淘宝联盟插件,网站做什么内容BOM介绍
浏览器对象模型#xff08;Brower Object Model#xff0c;BOM#xff09;提供了独立于内容而与浏览器窗口进行交互的对象#xff0c;其核心对象是window
BOM由一系列相关的对象构成#xff0c;并且每个对象都提供了很多方法和属性。
BOM与DOM区别
DOM是文档对…BOM介绍
浏览器对象模型Brower Object ModelBOM提供了独立于内容而与浏览器窗口进行交互的对象其核心对象是window
BOM由一系列相关的对象构成并且每个对象都提供了很多方法和属性。
BOM与DOM区别
DOM是文档对象模型把文档当做对象来看待它的顶级对象是document我们主要学习的是操作页面元素。DOM是W3C标准规范。 BOM是浏览器对象模型是把浏览器当做一个对象来看待它的顶级对象是window我们主要学习的是浏览器窗口交互的一些对象。BOM是浏览器厂商在各自浏览器上定义的兼容性较差 window对象
window 对象是一个全局对象也可以说是 JavaScript 中的顶级对象像 document、alert()、console.log()这些都是 window 的属性基本 BOM 的属性和方法都是 window 的所有通过 var 定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法window 对象下的属性和方法调用的时候可以省略 window
window对象常见事件
窗口加载事件
window.onload
window.onload是窗口(页面加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等),就调用的处理函数。 onload 页面加载事件有两种注册方式 //方式1 window.οnlοadfunction(){} //方式2 window. addEventListener(‘load’,function(){}) 演示案例
bodyinput typebutton name id value按钮scriptwindow.addEventListener(load, function() {// 当页面加载完成后执行的代码alert(kiss me);var btn document.querySelector(input);btn.addEventListener(click, function() {alert(hug me);});});/script/body 需要注意的是window.onload注册事件的方式只能写一次如果有多个会以最后一个window.onload为准。如果使用addEventListener则没有限制。
document.DOMContentLoaded
DOMContentLoaded事件触发时仅当DOM加载完成不包括样式表图片flash等等。le9以上才支持
如果页面的图片很多的话,从用户访问到onload触发可能需要较长的时间交互效果就不能实现必然影响用户的体验此时用DOMContentLoaded事件比较合适。 load 等页面内容全部加载完毕包含页面dom元素图片f1ash css等等 DOMContentLoaded是DOM加载完毕不包含图片falsh css 等就可以执行加载速度比load更快一些
bodyinput typebutton value按钮scriptwindow.addEventListener(load,function(){var btndocument.querySelector(input)btn.addEventListener(click,function(){alert(hug me)})})window.addEventListener(load,function(){alert(kiss me)})document.addEventListener(DOMContentLoaded,function(){alert(lalala)})//1oad 等页面内容全部加载完毕包含页面dom元素图片f1ash css等//DoMcontentLoaded是DOM加载完毕不包含图片falshcss等就可以执行加载速度比1oad更快一些/script/body
调整窗口大小事件
当调整window窗口大小时就会触发window.onload事件调用 事件处理函数该事件有两种注册方式 //方式1 window.οnresizefunction(){} //方式2 Window.addEventListener(‘resize’,function(){}) 利用页面加载事件和调整窗口大小事件完成响应式布局示例代码如下
stylediv{width: 200px;height: 100px;background-color: pink;}/style/headbodydiv/divscriptwindow.addEventListener(load,function(){var divdocument.querySelector(div)window.addEventListener(resize,function(){if(window.innerWidth800){div.style.displaynone}else{div.style.displayblock}})})/script/body
定时器
定时器方法
在JavaScript中提供了两组方法用于定时器的实现具体方法如下
定时器方法 方法 说明 setTimeout() 在指定的毫秒数后调用函数或执行一段代码 setInterval() 按指定的周期以毫秒计来调用函数或执行一段代码 clearTimeout() 取消由setTimeout()方法设置的定时器 clearInterval() 取消由setInterval设置的定时器
在实际开发中我们可以使用setTimeout方法实现函数的一次调用并且可以通过clearTimeout清除定时器
location对象
location对象比较特别它既是window对象的属性同时也而是document对象的属性window.location等同于document.location,它们是引用了同一个对象。Location对象不仅提供了与当前显示文档相关的信息而且还提供了用户获取和设置窗体的URL。
location URL的示例 示例1 protocol://host[:port]/path/[?query]#fragment 示例2 http//www.example.com:80/web/index.html?a3b4#res location URL的组成 各部分 说明 protocol 网络协议常用的如http、ftp、mailto等 host 服务器的主机名如www.example.com port 端口号可选省略时使用协议的默认端口如http默认端口为80 path 路径如“/web/index.html” query 参数为键值对的形式通过“”符号分割如“a3b4” fragment 锚点如“#res”表示页面内的锚点 案例获取URL参数
创建login.html登录页面搭建表格结构示例代码如下
bodyform actionindex.html用户名input typetext nameunameinput typesubmit value登录/form/body
上述代码中用action属性把表单提交到index.html页面
Index.html代码示例如下
body div/divscriptconsole.log(location.search)var paramslocation.search.substr(1)console.log(params)var arrparams.split()console.log(arr)var divdocument.querySelector(div)div.innerHTMLarr[1]欢迎您/script/body
location 的常用方法 方法 说明 assign() 载入一个新文档 reload() 重新加载当前文档 replace() 用新的文档替换当前文档覆盖浏览器当前文档
location.assign() 可以立即打开一个新的浏览器位置并生成一条新的历史记录接受的参数为URL地址
reload方法的唯一参数是一个布尔类型的值将其设置为true时它会绕过缓存从服务器上重新下载该文档类似于浏览器中的刷新按钮
replace方法的作用是使浏览器的位置发生改变并且禁止在浏览器历史记录中生成新的记录它只接受一个要导航到的URL参数而且在调用replace方法后用户不能返回到前一个页面
示例代码
bodyinput typebutton value按钮1 classoneinput typebutton value按钮2 classtwoinput typebutton value按钮3 classthreescriptconst btn1document.querySelector(.one)const btn2document.querySelector(.two)const btn3document.querySelector(.three)btn1.addEventListener(click,(){location.assign(https://blog.csdn.net/)})btn2.addEventListener(click,(){location.reload()})btn3.addEventListener(click,(){location.replace(https://www.baidu.com/)})/script/body
navigator 对象
navigator 是对象该对象下记录了浏览器自身的相关信息
常用属性和方法
• 通过 userAgent 检测浏览器的版本及平台
// 检测 userAgent浏览器信息(function () {const userAgent navigator.userAgent// 验证是否为 Android 或 iPhoneconst android userAgent.match(/(Android);?[\s\/]([\d.])?/)const iphone userAgent.match(/(iPhone\sOS)\s([\d_])/)// 如果是 Android 或 iPhone则跳转至移动站点if (android || iphone) {location.href http://m.itcast.cn}})();
histroy 对象
history (历史)是对象主要管理历史记录 该对象与浏览器地址栏的操作相对应如前进、后退等
使用场景
history 对象一般在实际开发中比较少用但是会在一些 OA 办公系统中见到。
history对象的属性和方法 分类 名称 说明 属性 length 返回历史列表中的网址数 方法 back 加载history列表中的前一个URL forward 加载history列表中的下一个URL go 加载history列表中的某一个具体页面
bodybutton classback←后退/buttonbutton classforward前进→/buttonscript// histroy 对象// 1.前进const forward document.querySelector(.forward)forward.addEventListener(click, function () {// history.forward()history.go(1)})// 2.后退const back document.querySelector(.back)back.addEventListener(click, function () {// history.back()history.go(-1)})/script
本地存储今日重点
本地存储将数据存储在本地浏览器中
常见的使用场景
https://todomvc.com/examples/vanilla-es6/ 页面刷新数据不丢失
好处
1、页面刷新或者关闭不丢失数据实现数据持久化
2、容量较大sessionStorage 和 localStorage 约 5M 左右
localStorage重点
作用: 数据可以长期保留在本地浏览器中刷新页面和关闭页面数据也不会丢失
特性以键值对的形式存储并且存储的是字符串 省略了 window bodyscript// 本地存储 - localstorage 存储的是字符串// 1. 存储localStorage.setItem(age, 18)// 2. 获取console.log(typeof localStorage.getItem(age))// 3. 删除localStorage.removeItem(age)/script/body
sessionStorage了解
特性
• 用法跟 localStorage 基本相同
• 区别是当页面浏览器被关闭时存储在 sessionStorage 的数据会被清除
存储sessionStorage.setItem(key,value)
获取sessionStorage.getItem(key)
删除sessionStorage.removeItem(key)
localStorage 存储复杂数据类型
问题本地只能存储字符串,无法存储复杂数据类型.
解决需要将复杂数据类型转换成 JSON 字符串,在存储到本地
语法JSON.stringify(复杂数据类型)
JSON 字符串
• 首先是 1 个字符串
• 属性名使用双引号引起来不能单引号
• 属性值如果是字符串型也必须双引号
bodyscript// 本地存储复杂数据类型const goods {name: 小米,price: 1999}// localStorage.setItem(goods, goods)// console.log(localStorage.getItem(goods))// 1. 把对象转换为 JSON 字符串 JSON.stringifylocalStorage.setItem(goods, JSON.stringify(goods))// console.log(typeof localStorage.getItem(goods))/script/body
问题因为本地存储里面取出来的是字符串不是对象无法直接使用
解决 把取出来的字符串转换为对象 语法JSON.parse(JSON 字符串)body script// 本地存储复杂数据类型const goods {name: 小米,price: 1999}// localStorage.setItem(goods, goods)// console.log(localStorage.getItem(goods))// 1. 把对象转换为 JSON 字符串 JSON.stringifylocalStorage.setItem(goods, JSON.stringify(goods))// console.log(typeof localStorage.getItem(goods))// 2. 把 JSON 字符串转换为对象 JSON.parseconsole.log(JSON.parse(localStorage.getItem(goods)))/script/body
综合案例
数组 map 方法
使用场景
map 可以遍历数组处理数据并且返回新的数组
语法
bodyscriptconst arr [red, blue, pink]// 1. 数组 map 方法 处理数据并且 返回一个数组const newArr arr.map(function (ele, index) {// console.log(ele) // 数组元素// console.log(index) // 索引号return ele 颜色})console.log(newArr)/script/body
map 也称为映射。映射是个术语指两个元素的集之间元素相互“对应”的关系。
map 重点在于有返回值forEach 没有返回值undefined
数组 join 方法
作用join() 方法用于把数组中的所有元素转换一个字符串
语法
bodyscriptconst arr [red, blue, pink]// 1. 数组 map 方法 处理数据并且 返回一个数组const newArr arr.map(function (ele, index) {// console.log(ele) // 数组元素// console.log(index) // 索引号return ele 颜色})console.log(newArr)// 2. 数组 join 方法 把数组转换为字符串// 小括号为空则逗号分割console.log(newArr.join()) // red 颜色,blue 颜色,pink 颜色// 小括号是空字符串则元素之间没有分隔符console.log(newArr.join()) //red 颜色 blue 颜色 pink 颜色console.log(newArr.join(|)) //red 颜色|blue 颜色|pink 颜色/script/body
