分享更有价值
被信任是一种快乐

JavaScript常见的BOM操作实例分析

文章页正文上

这篇文章主要讲解了“JavaScript常见的BOM操作实例分析”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript常见的BOM操作实例分析”吧!窗口加载事件:window.onload:页面加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等)就调用的处理函数。document.addEventListener(‘DOMContentLoaded’, function(){}):仅当DOM加载完成,不包括样式表、图片,flash的的,兼容性调整窗口大小的事件:window.onresize:调整窗口大小加载事件window.open()方法可以用于导航到指定 URL,也可以用于打开新浏览器窗口这个方法接收 4 个参数:要加载的 URL、目标窗口、特性字符串和表示新窗口在浏览器历史记录中是否代当前加载页面的布尔值window.open("http://www.wrox.com/", "wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");计时器:setInterval(handler: any, timeout?: long, arguments…: any):循环调用clearInterval(handle?: long):取消setIntervalsetTimeout(handler: any, timeout?: long, arguments…: any):一次性clearTimeout(handle?: long):取消setTimeoutwindow.scroll(x, y)window.scrollTo(x, y):两者是一样的用法 改变横向和垂直的滚动条的位置,前提是必须有滚动条在页面中window.scrollBy(x, y):滚动条的累加滚动,正数向下 ,负数向上 window.scrollBy(0, 10):每100毫秒调用一次的时候,滚动条运动10个像素window.getComputedStyle(elem, 伪类)对话框prompt(“提示字符串”,“默认值”)显示一个输入框,在输入框内显示提示字符串,等待用户输入当用户单击”确认”按钮返回用户输入,单击”取消”返回null值confirm(“提示字符串”)显示一个确认框,在确认框内显示提示字符串当用户单击”确认”按钮返回true,单击”取消”返回falsealert(“提示字符串”)弹出一个警告框,在警告框内显示提示字符串文本alertconfirmprompt运行js脚本,将js代码以同步执行方式放入执行栈,运行执行栈过程中遇见JS异步代码(事件、计时器、ajax、资源加载load、error)放入web APIs(任务队列),当执行栈里的代码运行完成以后,去任务队列里拿第一个进行执行,执行外以后在去任务队列拿一个过来执行,反复执行(事件循环)直到任务队列里的执行完成window.history 用于获取当前页面的地址URL,并把浏览器重定向到新的页面对象属性:href*:获取或者设置整个URLhost:返回主机名(域名)hostname:设置或返回当前URL的主机名post:返回端口号pathname:返回路径search*:返回参数hash:返回片段(#后面的内容)protocol:设置或返回当前URL的协议对象方法:assign:和href一样,可以跳转页面(也称为重定向页面)replace:替换当前页面,因为不记录历史,所以不能后退页面reload:重新加载页面,相当于刷新功能
navigator:封装浏览器配置信息的对象cookieEnabled 当前浏览器是否开启了cookiecookie:在客户端的存储空间,且容量较小根据不同的浏览器有不同的大小,可以做到永久保存 密匙缺点:特别容易泄露个人信息plugins 封装了浏览器安装的所有插件信息userAgent 浏览器的名称,内核 版本号 等一些列的字符onLine 电脑是否处于脱机状态 电脑联网了吗?platform 返回运行浏览器的操作系统平台appCodeName 返回浏览器的代码名appName 返回浏览器的名称appVersion 返回浏览器的平台和版本信息window.history 对象包括浏览器的历史(url)集合浏览器的后退功能:history.back()浏览器的向前功能:history.forward()进入历史中的某一个页面:history.go()window.screen 对象包含有关用户的信息
可用屏幕宽度:screen.availWidth可用屏幕高度:screen.availHeight屏幕高度:screen.Height屏幕宽度:screen.Width屏幕的颜色的位数:colorDepth可以动态得到该元素的位置(偏移)、大小等获取元素距离定位父元素的位置获取元素自身大大小ps:返回的数值不带单位offset系列常用属性:element.offseParent:返回作为该元素带有定位的父级元素,如果父级元素都没有定位则返回bodyelement.offsetTop*:返回元素相对带有定位父元素上方的偏移element.offsetLeft*:返回元素相对带有定位父元素左方的偏移element.offsetWidth:返回自身包括padding、边框、内容的宽度,不带单位element.offsetHeight:返回自身包括padding、边框、内容的高度,不带单位动态获取元素的边框大小、元素大小等常用属性:element.clientTop:元素上边框的大小element.clientLeft:元素左边框的大小element.clientWidth*:返回自身包括padding、内容区的宽度,不含边框,不带单位element.clientHeight*:返回自身包括padding、内容区的高度,不含边框,不带单位动态获取元素的大小、滚动距离常用属性element.srcollTop*:返回被卷去的上侧距离,不带单位element.srcollLeft*:返回被卷去的左侧距离,不带单位element.srcollWidth:返回自身实际的宽度,不含边框,不带单位element.srcollHeight:返回自身实际的高度,不含边框,不带单位滚动条在滚动的时候会触发onscroll事件window.pageXOffset/pageYOffset IE8 及IE8以下不兼容 document.body/documentElement.scrollLeft/scrollTop兼容性比较混乱,用时取两个值相加,因为不可能存在两个值同时有值 封装兼容性方法,求滚动条滚轮滚动距离getScrollOffet()window.innerWidth/innerHeightIE8及IE8以下不兼容(注意:这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度) document.documentElement.clientWidth/clientHeight标准模式下,任意浏览器都兼容 document.body.clientWidth/clientHeight适用于怪异某事下的浏览器 封装兼容性方法,返回浏览器视口尺寸getViewportOffset()domElement.getBoundingClientRect() 兼容性很好;返回一个对象,该对象中有left、top、right、bottom等属性,left、top代表元素左免费云主机、域名上角的X和Y坐标, right和bottom表示元素右下角的X和Y坐标height 和 width属性老版本IE未实现 返回的结果并不是’实时的’状态栏defaultStatus 改变浏览器状态栏的默认显示status 临时改变浏览器状态的显示窗口位置IEscreenLeft 声明窗口的左上角的x坐标screenTop 声明窗口的左上角的y坐标document.body.screenLeftdocument.documentElement.screenLeft 声明当前文档向右滚动过的像素数document.body.screenTopdocument.documentElement.screenTop 声明当前文档向右滚动过的像素数!IEscreenX 声明窗口的左上角的x坐标screenY 声明窗口的左上角的y坐标pageXOffset 声明当前文档向右滚动过的像素数pageYOffset 声明当前文档向右滚动过的像素数FFinnerHeight 返回窗口的文档显示区的高度innerWidth 返回窗口的文档显示区的宽度outerWidth 返回窗口外部宽度outerHeight 返回窗口外部高度其他属性opener 可以实现同域名下跨窗体之间的通讯 一个窗体要包含另一个窗体的openerclosed 当前窗口关闭时返回truename 设置或返回窗口的名称self 返回对当前窗口的引用感谢各位的阅读,以上就是“JavaScript常见的BOM操作实例分析”的内容了,经过本文的学习后,相信大家对JavaScript常见的BOM操作实例分析这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是云技术,小编将为大家推送更多相关知识点的文章,欢迎关注!

相关推荐: jquery使用的协议是哪个

这篇文章主要介绍“jquery使用的协议是哪个”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“jquery使用的协议是哪个”文章能帮助大家解决问题。 jquery使用的是MIT许可协议;MIT许可协议是一种开源软件许可协…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册