javascript中BOM介绍、屏幕尺寸、历史记录、URL解析、计算机信息获取、定时器、三大系列及兼容代码、封装动画函数、同步和异步

BOM介绍：

BOM指的是浏览器对象模型，是用来操作浏览器的，例如浏览器弹窗、地址栏、滚动条等，浏览器顶级对象：window；页面中的所有内容都是属于window的，window可以省略；confirm(‘带有取消功能的弹框’)和alert相似，但是它有返回值，点击确定是true，点击取消是false；

window.οnlοad=function(){};页面加载完后触发事件执行，onload指页面上dom和图片及CSS等加载完；onDOMContentLoad指页面中的dom加载完触发事件执行，注意仅仅指dom;都用于解决js代码放在页面中元素之前带来的报错。

window.οnunlοad=function(){};窗口关闭后触发事件执行；window.οnbefοreunlοad=function(){};窗口关闭之前触发事件执行，它们只有IE8支持。

获取屏幕路尺寸：

window.innerWidth获取屏幕的宽度；window.innerHeight获取屏幕的高度；

location地址栏对象：

location是一个对象，它有对应的方法和属性，如下：
在这里插入图片描述
在这里插入图片描述

URL组成：

以scheme://host:port/path?query#fragment为例：
在这里插入图片描述
history对象：

history是历史记录，用于操作页面历史记录进行页面的前进或者后退，其属性和方法如下：
在这里插入图片描述
HTML5新增历史记录操作方法：history.pushState(null,null,url)在URL中追加历史记录,第一个参数是存数据的，第二个参数是存标题的，第三个参数是追加URL地址的。

history.replaceState(null,null,url)替换URL中历史记录，第一个参数表示存的数据，第二个参数表示存的标题，第三个参数表示替换的URL地址。

window.onpopstate事件：当历史发生改变时触发事件函数。

通过哈希值或者历史记录改变网页不利于性能优化，通过ajax改变网页又不利于seo优化，因此在实际开发中常把两者结合起来使用，这样既可以提高性能又可以提高SEO优化，即通过ajax加载页面的同时更改地址栏URL。
navigator对象：

用于获取计算机硬件及软件信息，其相关属性和方法如下：
在这里插入图片描述

    <script>//定义一个函数判断是手机端还是pc端function isMobile(){if(window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {return true; // 移动端,这里省略函数分装可直接重定向到移动端网址，}else{return false; // PC端，也可直接重定向到pc端网址}}//    判断后的操作if(isMobile()){location.href="./mobile/index.html"//移动端的页面// 判断true跳转到这个主页}else{location.href="./pc/index.html"//电脑端的页面// 判断false跳转到这个主页}</script>

setInterval()定时器：

setInterval()是window的一个方法，里面可以传入两个参数，第一个参数是一个函数，第二个参数是一个毫秒值，它是用来控制函数在多久执行一次的，window可以省略，如下：

	<script>setInterval(function() {console.log('hello');}, 500);</script>

clearInterval()清除定时器：

setInterval()定时器返回一个值，被称为定时器的id值，clearInterval()方法是用来清除定时器(停止定时器)的，里面传入某个定时器的id值，则这个定时器就会被停止，如：

	<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><input type="button" value="停止" id='btn'></body><script>function hello() {console.log('hello');};function stop() {clearInterval(times);};var times = setInterval(hello, 500);document.getElementById('btn').onclick = stop;</script></html>

setTimeout和clearTimeout一次性定时器：

setTimeout()定时器和setInterval()传的参数一样，其返回值也是一个id值，不同的是此定时器只执行一次回调函数，被称为一次性定时器；

clearTimeout()是用来清除一次性定时器setTimeout()的，其使用和clearInterval()方法一样，如下案例：

	<script>var times = setTimeout(function() {console.log('setTimeout是一个一次性的定时器');}, 2000);setTimeout(function() {clearTimeout(times);console.log('clearTimeout清除里一次性定时器setTimeout');}, 1000);</script>

offset-系列：

在CSS样式表中设置元素的left、top、width、height等属性值，这个值在js中是无法通过style.属性获取的，但是设置在行内的样式是可以被style.属性获取到的；为了解决这个问题，可以通过offset-系列来获取元素的left和top属性值，两种方式都可以获取到，其相关属性有：offsetLeft、offsetTop、offsetWidth、offsetHeight、offsetParent等，得到的值时包含border的；返回值没有单位，是只读属性；它们都是相对有定位的父级元素判断距离的，若父级没有定位则以body元素进行判断距离。

client-系列：

client-系列是用来获取可视区域的信息的，其属性有：clientTop返回元素上边框的大小、clientLeft返回元素左边框的大小、clientWidth返回自身内容区域宽度(不含border，含padding)、clientHeight返回自身内容区域的高度(不含border，含padding)、clientX和clientY返回距离浏览器边缘的距离，所有属性返回值都是不带单位的。

scroll-滚动系列：

用于获取元素内容的大小、滚动距离等，其属性有：scrollTop返回上侧卷去的距离、scrollLeft返回左侧卷去的距离、scrollWidth返回自身内容实际宽度（不包含border）、scrollHeight返回自身内容 实际高度（不包含border）;它们都不带单位，scroll还是一个滚动事件，当滚动滚动条时触发事件函数。

pageYOffset和pageXOffset:

window.pageYOffset获取浏览器（文档页面）向上卷去的距离，window.pageXOffset获取浏览器（文档页面）向左卷去的距离。

getComputedStyle()和currentStyle：

getComputedStyle(element)返回element元素的所有CSS属性，并将这些属性以对象的方式存在一个对象中，若要的到element元素的某个属性值则可：getComputedStyle(element).属性，但是IE8不支持；为了兼容IE浏览器，可以使用.currentStyle属性,IE支持它，谷歌火狐不支持，其兼容代码如下：

	<script>function getStyleCss(element, styles) {if (element.currentStyle) {return element.currentStyle[styles];} else {return getComputedStyle(element)[styles];};};// 注意后面参数实参要传字符串形式：var divsWidth = getStyleCss(divs, 'width');console.log(divsWidth);</script>

页面滚动出去距离兼容代码：

同样，上面页面滚动距离获取的属性各自有自己的兼容问题，因此封装兼容代码如下：

	<script>function getScrollValue() {var scrollTops = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;var scrollLefts = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;// 下面对象的属性值可以直接拿上面的兼容代码，可以省略两个变量但是为了便于理解，这里使用两个变量接收：var scorllObj = {left: scrollLefts,top: scrollTops};return scorllObj;};var scrollValues = getScrollValue();console.log(scrollValues.top + '----' + scrollValues.left);</script>

鼠标距离页面距离的兼容代码：

pageX(pageY)可以获得鼠标距离页面的距离，但是它有兼容问题,因此可以结合clientX(clientY) + scrollLeft(scrollTop)来编写兼容代码：

	<script>// 调用时参数E是事件函数中的参数e(事件对象)或window.event对象：function getPageValue(E) {return {y: E.pageY ? E.pageY : E.clientY + E.scrollTop,x: E.pageX ? E.pageX : E.clientX + E.scrollLeft};};// 获取鼠标点击时触点距离页面的距离：document.onclick = function(event) {event = window.event || event;console.log(getPageValue(event).y);};</script>

将所有系列的兼容代码装入一个对象：

	<script>//把代码放在一个对象中var compatible = {//window.event和事件参数对象e的兼容getEvent: function(E) {return window.event || E;},//可视区域的横坐标的兼容代码getClientX: function(E) {return this.getEvent(E).clientX;},//可视区域的纵坐标的兼容代码getClientY: function(E) {return this.getEvent(E).clientY;},//页面向左卷曲出去的横坐标getScrollLeft: function() {return window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0;},//页面向上卷曲出去的纵坐标getScrollTop: function() {return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0;},//相对于页面的横坐标(pageX或者是clientX+scrollLeft)getPageX: function(E) {return this.getEvent(E).pageX ? this.getEvent(E).pageX : this.getClientX(E) + this.getScrollLeft();},//相对于页面的纵坐标(pageY或者是clientY+scrollTop)getPageY: function(E) {return this.getEvent(E).pageY ? this.getEvent(E).pageY : this.getClientY(E) + this.getScrollTop();}};//使用：document.onclick = function(e) {console.log(compatible.getPageX(e));console.log(compatible.getPageY(e));};</script>

动画函数封装：

其参数element表示要设置动画的元素；target表示元素要移动到某位置的目标，传入数字；directions表示方向是沿x或y轴移动，可传入‘x’或’y’:

	<script>function animation(element, target, directions) {clearInterval(element.timeId);var direction = directions == 'x' ? 'Left' : 'Top';element.timeId = setInterval(function() {var current = element['offset' + direction];var temp = 1;temp = current < target ? temp : -temp;element.style[direction.toLowerCase()] = current + temp + 'px';if (current == target) {clearInterval(element.timeId);};temp += 1;}, 1);};animation(divs, 1000, 'x');</script>

同步和异步：

js是单线程工作原理，按照任务的的顺序依次执行，这是同步;但是js在执行某一项任务时，还可以允许执行其它任务，这个就是异步，回调函数是一个异步任务。js中执行机制：先执行主栈上的任务，再执行任务队列中的任务，如回调函数就是任务队列中的任务。

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者 删除。
笔者：苦海

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/575370.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

javascript中实例对象和构造函数关系、原型语法、原型链、call实现继承、apply调用函数、bind拷贝函数、拷贝继承、class类、super、严格模式、高阶函数、闭包、递归、es6简介

javascript中实例对象和构造函数关系、原型语法、原型链、call实现继承、apply调用函数、bind拷贝函数、拷贝继承、class类、super、严格模式、高阶函数、闭包、递归、es6简介

实例对象和构造函数的关系及原型&#xff1a; 实例对象是通过构造函数创建出来的&#xff0c;实例对象的构造器constructor就是指向构造函数的&#xff1b;每个实例对象中的同一方法的指向是各不相同的&#xff0c;但是其属性值相同的属性可以相同&#xff0c;这样会造成内存浪…
阅读更多...
移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)

移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)

移动端web现状&#xff1a; 移动端常见浏览器&#xff1a;UC浏览器&#xff0c;QQ浏览器&#xff0c;Opera浏览器&#xff0c;百度手机浏览器&#xff0c;360安全浏览器&#xff0c;谷歌浏览器&#xff0c;搜狗手机浏览器&#xff0c;猎豹浏览器及杂牌浏览器。移动端常见的浏览…
阅读更多...
jQuery中事件及常用事件总结、jQuery中常见效果、隐式迭代、链式编程、样式操作、动画队列、不同元素绑定同一个事件

jQuery中事件及常用事件总结、jQuery中常见效果、隐式迭代、链式编程、样式操作、动画队列、不同元素绑定同一个事件

jQuery事件&#xff1a; jQuery中的事件和javascript中的事件基本相似&#xff0c;不同的是jQuery中的事件处理函数写在事件后面的括号中&#xff0c;如&#xff1a; <script>$(input).click(function() {alert(hello word);});</script>jQuery中常见事件&#xf…
阅读更多...
BigQuery 分区表简介和使用

BigQuery 分区表简介和使用

大纲 什么是分区表 我们先看定义&#xff1a; 分区表是一种数据库表设计和管理技术&#xff0c;它将表中的数据划分为逻辑上的多个分区&#xff0c;每个分区包含一组特定的数据。每个分区都根据定义的分区键&#xff08;通常是一个列或字段&#xff09;的值进行分类&#xff…
阅读更多...
jQuery操作属性、设置文本、遍历元素、元素创建添加删除、操作元素尺寸、操作元素位置、注册事件、事件处理、解绑事件、拷贝、多库共存、jQuery插件

jQuery操作属性、设置文本、遍历元素、元素创建添加删除、操作元素尺寸、操作元素位置、注册事件、事件处理、解绑事件、拷贝、多库共存、jQuery插件

jQuery操作属性&#xff1a; jQuery中提供三种方法操作属性&#xff0c;分别是&#xff1a;prop()、arrt()、data(),具体如下&#xff1a; prop()操作自带属性&#xff1a;用来操作元素本身自带的属性&#xff08;包括没有显示在DOM上的自带属性&#xff09;&#xff0c;如:a…
阅读更多...
分享MYSQL中的各种高可用技术（源自姜承尧大牛）

分享MYSQL中的各种高可用技术（源自姜承尧大牛）

图片和资料来源于MYSQL大牛姜承尧老师&#xff08;MYSQL技术内幕作者&#xff09; 姜承尧&#xff1a; 网易杭州研究院 技术经理 主导INNOSQL的开发 mysql高可用各个技术的比较 数据库的可靠指的是数据可靠 数据库可用指的是数据库服务可用 可靠的是数据&#xff1a;例如工商银…
阅读更多...
数据库、MySQL介绍及安装流程、SQL语句中增删改查、SQL注入、通过php操作数据库，plugin ‘caching_sha2_password加密规则，分表查询

数据库、MySQL介绍及安装流程、SQL语句中增删改查、SQL注入、通过php操作数据库，plugin ‘caching_sha2_password加密规则，分表查询

MySQL数据库&#xff1a; 数据库&#xff1a; 存放数据的仓库&#xff0c;用来按照特定的结构去组织和管理我们的数据&#xff0c;有数据库就可以更加方便的储存数据&#xff1b; 数据库只是存储数据的一种手段&#xff0c;最终数据是存放在硬盘中的&#xff0c;只是存放的格…
阅读更多...
chartjs和echartsjs库简介

chartjs和echartsjs库简介

chart.js和echarts.js: 尽管我们已经掌握了canvas绘图和SVG矢量图&#xff0c;在实际开发中我们依旧不会使用canvas和SVG&#xff0c;因为考虑到开发成本&#xff0c;一般会采用相关的图表库进行辅助开发&#xff0c;市面上常用的图表库有chart.js和echarts.js&#xff1b;如果…
阅读更多...
弱智的我

弱智的我

【你能看到多少个人头? 】 0—4张: 弱智; 5—8张: 一般人; 9—11张: 特别感性; 11—13张: 精神分裂. 晕倒, 我是弱智的...就看到一个人头...转载于:https://www.cnblogs.com/zhangzujin/p/3877222.html
阅读更多...
typecho和wordpress模板了解、开发流程介绍、前台后台前端后端区分

typecho和wordpress模板了解、开发流程介绍、前台后台前端后端区分

网站模板搭建网站&#xff1a; 使用网站模板搭建网站很简单&#xff0c;只需要将相关文件放到你自己的服务器上面&#xff0c;之后在进行相关的配置即可。这里给大家介绍两款网站模板&#xff1a; typecho&#xff1a; 是一个轻量高效&#xff0c;简单操作就能搭建网站的模板…
阅读更多...
在浏览器端调试代码并直接修改原文件、移动端虚拟键盘中实现搜索按钮

在浏览器端调试代码并直接修改原文件、移动端虚拟键盘中实现搜索按钮

在浏览器端调试代码并直接修改原文件&#xff1a; 此调试方法可以避免在浏览器调试完代码后在到原文件手动修改代码的弊端&#xff0c;其具体方法如下&#xff1a; 1.先将要调试的页面在浏览器&#xff08;Google&#xff09;打开&#xff0c;这里小编打开桌面test文件夹中的…
阅读更多...
Bootstrap简介、下载bootstrap及引入文件说明、响应式容器和满屏容器、栅格系统

Bootstrap简介、下载bootstrap及引入文件说明、响应式容器和满屏容器、栅格系统

Bootstrap简介&#xff1a; Bootstrap是Twitter&#xff08;推特&#xff09;开发的&#xff0c;目前最受欢迎的前端开源框架&#xff0c;基于jQuery用于开发HTML、CSS、JavaScript&#xff0c;简洁灵活&#xff0c;常用于开发响应式布局及移动端开发。其中文官方文档&#xf…
阅读更多...
openerp child_of操作符深度解析

openerp child_of操作符深度解析

child_of 此操作符&#xff0c;从代码来看&#xff0c;等价于&#xff1a; [(x,child_of,id)] > x.prarent_left >id.parent_left && x.parent_left < id.parent_right , 求x&#xff08;的集合&#xff09;。 为了形象的说明&#xff0c;我们一步步来&…
阅读更多...
当ASP.NET Forms验证方式遭遇苹果IOS

当ASP.NET Forms验证方式遭遇苹果IOS

一、问题出现 我在用ASP.NET MVC4做微信开发的时候&#xff0c;用Forms验证方式做为authentication。 一般都是在web.config加&#xff1a; <authentication mode"Forms" ><forms loginUrl"~/Account/Login" name"webcookies" sliding…
阅读更多...
bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象

bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象

轮播图&#xff1a; bootstrap封装了轮播图的功能&#xff0c;其具体如下&#xff1a; 类名描述.carousel创建一个轮播图块的容器&#xff0c;实质是做布局用&#xff1b;且此容器应该有一个di属性&#xff0c;其属性值提供给下面左右按钮href锚点值&#xff0c;用于左右按钮…
阅读更多...
node简介及安装、下载及运行hexo

node简介及安装、下载及运行hexo

node简介&#xff1a; 1.node.js的可以打开服务端的黑盒子及高级前端(Vue、React 、Angular)的学习&#xff0c;例如&#xff1a;文件的读写、网络服务的构建、网络通信等。 2.node.js是操作服务器的一种工具&#xff0c;构建于Chrome的v8引擎之上&#xff0c;可以操作服务器…
阅读更多...
Repository 仓储，你的归宿究竟在哪？（一）－仓储的概念

Repository 仓储，你的归宿究竟在哪？（一）－仓储的概念

写在前面 写这篇博文的灵感来自《如何开始DDD(完)》&#xff0c;很感谢young.han兄这几天的坚持&#xff0c;陆陆续续写了几篇有关于领域驱动设计的博文&#xff0c;让园中再次刮了一阵“DDD探讨风”&#xff0c;我现在不像前段时间那样“疯狂”了&#xff0c;写博文需要灵感&a…
阅读更多...
浏览器基础知识

浏览器基础知识

Web浏览器的主要功能是展示网页资源&#xff0c;即请求服务器并将结果展示在窗口中。工作原理大概如下&#xff1a; 地址栏输入URL 浏览器根据输入的URL查找域名的IP地址&#xff0c;DNS查找过程如下&#xff1a; 浏览器缓存——浏览器会缓存DNS记录一段时间&#xff0c;不同浏…
阅读更多...
喜用神最正确的算法_各种电磁仿真算法的优缺点和适用范围（FDTD, FEM和MOM等）...

喜用神最正确的算法_各种电磁仿真算法的优缺点和适用范围（FDTD, FEM和MOM等）...

从实际工程应用的角度谈一下我对这几种算法的理解。先说结论&#xff0c;FDTD算的快但是不精确&#xff0c;可以用来算电大尺寸的物体&#xff0c;要是一个物体的尺寸大于10个波长&#xff0c;一般的服务站是跑不动FEM的&#xff0c;那必须得用FDTD了。FEM最经典的电磁仿真软件…
阅读更多...
护士资格证延续注册WEB服务调用失败_服务熔断

护士资格证延续注册WEB服务调用失败_服务熔断

熔断机制是应对服务雪崩效应的一种微服务链路保护机制&#xff0c;当扇出链路的某个微服务不可用或者响应时间太长时&#xff0c;会进行服务的降级&#xff0c;进而熔断该节点微服务的调用&#xff0c;快速返回”错误”的响应信息。当检测到该节点微服务响应正常后恢复调用链路…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023