网站主机教程,wordpress5.1更新,网站建设公司推荐5788,网站建设前言和背景1.1、BOM概述
1.1.1、BOM简介
BOM#xff08;browser Object#xff09;即浏览器对象模型#xff0c;它提供了独立于内容而与浏览器窗口进行交互的对象#xff0c;其核心对象是window。 BOM由一系列的对象构成#xff0c;并且每个对象都提供了很多方法与属性 BOM缺乏标准…1.1、BOM概述
1.1.1、BOM简介
BOMbrowser Object即浏览器对象模型它提供了独立于内容而与浏览器窗口进行交互的对象其核心对象是window。 BOM由一系列的对象构成并且每个对象都提供了很多方法与属性 BOM缺乏标准JS语法的标准化组织是ECMADOM的标准化组织是W3CBOM最初是Netscape浏览器标准的一部分
1.1.2、DOM与BOM的区别 类别 DOM BOM 1 文档对象模型 浏览器对象模型 2 DOM是把文档当做一个对象来看待 把浏览器当做一个对象来看待 3 顶级对象是document 顶级对象是window 4 主要学习操作页面元素 学习浏览器窗口交互的一些对象 5 W3C标准规范 各浏览器厂商在各自浏览器上定义的标准兼容性较差
1.1.3、BOM的构成(对象)
BOM比DOM更大它包含DOM window document location navigation screen history
Window
代表的是整个浏览器的窗口同时windonw也是网页的全局对象
window 对象是浏览器的顶级对象它具有双重角色 它是js访问浏览器窗口的一个接口 它是一个全局对象。定义在全局作用域中的变量函数都会变成window对象的属性和方法在调用的时候可以省略window前面学习的对话框都属于window对象方法如alertprompt等
注意window下的一个特殊属性window.name所以定义变量时尽量不用name这个变量名
Navigator浏览器的意思
-代表的当前浏览器的信息通过该对象可以来识别不同的浏览器
Location
-代表浏览器的地址栏信息通过location可以获取地址栏信息或者跳转页面
History
-代表浏览器的历史记录可以通过该对象操作浏览器的历史记录
由于隐私的原因该对象不能获取到具体的历史记录只能操作浏览器向前或者向后翻页
而且该操作只在当次访问有效
Screen
-代表用户的屏幕的信息通过该对象可以获取到用户的显示器的相关信息
注意这些BOM对象在浏览器中都是作为window对象的属性来保存的可以通过window对象来使用也可以直接使用
1.2、window对象的
1.2.1、onload窗口加载事件
1、window.οnlοadfunction(){} 传统注册事件方式只能写一次如果有多个会以最后一个为准
2、window.addEventListener(load,function(){} )
当文档内容完全加载完成会触发该事件包括图像脚本文件、css文件等就调用的处理函数
1.2.2、DOMContentLoaded窗口加载事件
document.addEventListener(DOMContentLoaded,function(){} )
bodyscript//1、 onload写法// window.onload function () {// var box document.querySelector(.box);// box.addEventListener(click, function () {// this.style.backgroundColor pink;// });// };//2、addEventListener 写法// document.addEventListener(load, function () {// var box document.querySelector(.box);// box.addEventListener(click, function () {// this.style.backgroundColor pink;// });// });//3、DOMContentLoaded写法document.addEventListener(DOMContentLoaded, function () {var box document.querySelector(.box);box.addEventListener(click, function () {this.style.backgroundColor pink;});});/script!-- 需求点击boxbox背景色变化js交互可以放在任意位置 --div classboxbox/div/body
1.2.3、调整窗口大小事件
window.οnresizefunction(){}
window.addEventListener(resize,function(){} )
调整窗口大小像素就会触发调用内部处理函数可以用来完成响应式效果
!--需求当前屏幕大小在800以内的时候box消失否则显示 --
divbox/div
scriptvar box document.querySelector(div);window.addEventListener(resize, function () {if (window.innerWidth 800) {box.style.display none;} else {box.style.display block;}});
/script
1.3、定时器
1.3.1、 setInterval() 定时调用
js的程序的执行速度是非常非常快的如果希望一段程序可以每间隔一段时间执行一次可以使用定时调用
语法
setInterval(回调函数间隔时间) 定时调用可以将一个函数每隔一段时间执行一次
参数
第一个回调函数该函数会每隔一段时间调用一次
第二个每次调用间隔时间单位是毫秒
返回值
返回一个Number类型的值这个数字用来作为定时器的唯一标识
关闭定时器
clearInterval(number)
方法中需要一个定时器的标识作为参数这样将关闭标识对应的定时器
body!-- 需求页面出现出现数字每秒自增1 --h1 idcount/h1scriptvar count document.getElementById(count);var num 1;var timer setInterval(function () {count.innerHTML num;if (num 5) {clearInterval(timer);}}, 1000);console.log(timer);//1/script/body
1.3.2、 setTimeoutl() 延时调用
概念延时调用,一个函数不马上执行而是隔一段时间以后再执行 而且只会执行一次
语法
window.setTimeout(回调函数延迟秒数)
参数
1、回调函数直接写函数或者写函数名皆可
2、延迟秒数若省略默认是0单位是毫秒
返回值数字标识
关闭定时器clearTimeout(timer)
区别定时调用会执行多次而延时调用只会调用一次延时调用和定时调用可以互相代替在开发中可根据自己的需要去选择
scriptvar num 0;var timer setTimeout(function () {console.log(num);}, 1000);//使用clearTimeout()来关闭一个延时调用clearTimeout(timer);/script
1.4、JS执行机制
1.4.1、JS是单线程
JS语言的一大特点就是单线程也就是说同一个时间只能做一件事。这是JS这门脚本语言诞生的使命所致——用来处理页面中用户的交互以及操作DOM而诞生的。
单线程就意味着所有任务需要排队前一个任务结束才会执行后一个任务。这样所导致的问题是如果JS执行的时间过长这样会造成页面的渲染不连贯导致页面渲染加载阻塞的感觉
1.4.2、同步和异步
为了解决这个问题利用多核CPU的计算能力HTML5提出了Web Worker标准允许JS脚本创建多个线程于是jS中出现了同步和异步
同步前一个任务结束后再执行后一个任务程序的执行顺序与任务的排列顺序是一致的同步的。比如我们要烧水煮饭等水开了10分钟后再去切菜炒菜
异步你在做一件事情时因为这件事会花费很长时间在做这件事的同时你还可以去处理其他事情。比如烧水的10分钟内去切菜炒菜
同步任务在主线程上排队执行任务只有前一个任务执行完毕才能执行后一个任务
异步任务不进入主线程而是进入任务队列的任务只有任务队列通知主线程某个异步任务可以执行了该任务才会进入主线程执行。
一般而言异步任务有以下三种类型 setTimeout和setlnterval DOM事件 普通事件如click、resize资源加载事件onload等 ES6中的Promise Ajax异步请求
异步任务相关回调函数添加到任务队列中消息队列
1.4.3、JS执行机制 先执行执行栈中的同步任务 异步任务回调函数放入任务队列中 一旦执行栈中的所有同步任务执行完毕系统就会按次序读取任务队列中的异步任务于是被读取的异步任务结束等待状态进入执行栈开始执行
1.4.4、事件循环 首先执行栈开始顺序执行 判断是否为同步异步则进入异步线程最终事件回调给事件触发线程的任务队列等待执行同步继续执行 执行栈为空询问任务队列中是否有事件回调 任务队列中有事件回调则把回调加入执行栈末尾继续从第一步开始执行 任务队列中没有事件回调则不停发起询问
javascriptbodybutton点击/buttonscriptvar setTimeoutCallBack function () {console.log(我是定时器回调);};var btn document.querySelector(button);btn.onclick function () {console.log(我是点击事件);};// 同步任务console.log(我是同步任务1);// 异步定时任务setTimeout(setTimeoutCallBack, 1000);// 同步任务console.log(我是同步任务2);/script/bodyJS引擎线程 只会执行执行栈中的事件执行栈中的代码执行完毕就会读取事件队列中的事件并添加到执行栈中继续执行这样反反复复就是我们所谓的事件循环(Event Loop)
1.5、location对象
1.5.1、location对象初识
window对象给我们提供了一个location属性用户获取或设置窗体的URL并且可以用于解析URL。因为这个对象返回的是一个对象所以我们称为location对象
1.5.2、URL
统一资源定位符Uniform Resource Locator简称URL是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL它包含的信息支出文件的位置以及浏览器应该如何处理它。简单地说URL就是web地址俗称“网址”。
URL由三部分组成资源类型、存放资源的主机域名、资源文件名。
URL的一般语法格式为
protocol :// hostname[:port] / path / [;parameters][?query]#fragment
京东家电
格式说明:
1、protocol协议
指定使用的传输协议最常用的HTTP协议它是目前WWW中应用最广的协议。 http 通过 HTTP 访问该资源。 格式 HTTP:// https 通过安全的 HTTPS 访问该资源。 格式 HTTPS:// ftp 通过 FTP访问资源。格式 FTP://
一般来说https开头的URL要比http开头的更安全因为这样的URL传输信息是采用了加密技术。
2、hostname主机名
是指存放资源的服务器的域名系统(DNS) 主机名或 IP 地址。有时在主机名前也可以包含连接到服务器所需的用户名和密码格式username:passwordhostname。
3、port端口号
HTTP缺省工作在TCP协议80端口用户访问网站http:// 打头的都是标准HTTP服务。
HTTPS缺省工作在TCP协议443端口。
4、path路径
由零或多个“/”符号隔开的字符串一般用来表示主机上的一个目录或文件地址。
5、parameters参数
这是用于指定特殊参数的可选项。
6、query(查询)
可选用于给动态网页如使用CGI、ISAPI、PHP/JSP/ASP/ASP。NET等技术制作的网页传递参数可有多个参数用“”符号隔开每个参数的名和值用“”符号隔开。
7、fragment信息片断
信息片断字符串用于指定网络资源中的片断。例如一个网页中有多个名词解释可使用fragment直接定位到某一名词解释。
1.5.3、location对象的属性 location对象属性 返回值 location.href 返回当前加载页面的完整URL location.hash 返回URL中的hash#号后 跟零或多个字符如果不包含则返回空字符串 location.host 返回服务器名称和端口号 location.hostname 返回不带端口号的服务器名称 location.pathname 返回URL中的目录和或文件名 location.port 返回URL中指定的端口号如果没有返回空字符串 location.protocal 返回页面使用的协议 location.search 返回URL的查询字符串查询开头的的字符串 location对象方法 功能 location.assign() 用来跳转到其他的页面作用和直接修改location一样,有历史记录也称重定向页面 location.replace() 重新定向URL不会在历史记录中生成新纪录没有后退按钮 location.reload() 重新加载当前显示的页面如果在方法中传递一个true作为参数则会强制刷新缓存
1.6、navigator对象
navigator代表的当前浏览器的信息通过该对象可以来识别不同的浏览器由于历史原因navigator对象中的大部分属性都已经不能帮助我们识别浏览器了一般我们只会用userAgent 来判断浏览器的信息userAgent是一个字符串这个字符串中包含有用来描述浏览器信息的内容不同的浏览器会有不同的userAgent
1.7、history对象
window对象给我们提供了一个history对象与浏览器历史记录进行交互该对象包含用户在浏览器窗口中访问过的URL history对象属性 作用 length 可以获取当前访问的网页的链接数量 history对象方法 作用 back() 可以用来退到上一个页面作用和浏览器的回退按钮一样 forward() 可以跳转到下一个页面作用和浏览器的前进按钮一样 go() 可以跳转到指定的页面它需要一个整数作为参数
