当前位置: 首页 > 科技观察

JavaScript高级操作知识盘点(下)

时间:2023-03-12 00:13:26 科技观察

大家好,我是IT分享达人,人称皮皮。上一篇文章给大家分享了JavaScript中的高级操作知识(上),本文继续往下看!前言相信JavaScript对于网站来说是非常熟悉的。它是一种脚本语言,不同于Python。更重要的是,它是一种浏览器脚本语言,而Python是一种服务器脚本语言。我们不仅要会Python,还要会JavaScript,因为它对制作网页有很大的作用。1.Javascript刷新页面history.go(0)location.reload()location=locationlocation.assign(location)document.execCommand('Refresh')window.navigate(location)location.replace(location)document.URL=location。href2.Js浏览器兼容性问题1).浏览器事件监听函数addEventhandler(target,type,fn,cap){if(target.addEventListener)/*添加监听事件*/{target.addEventListener(type,fn,cap)}else{target.attachEvent('on'+type,fn)/*IE添加监听事件*/}}functionremoveEventhandler(target,type,fn,cap){if(target.removeEventListener)/*删除监听事件*/{target.removeEventListener(type,fn,cap)}else{target.detachEvent('on'+type,fn)/*IE删除监听事件*/}}2).鼠标按键判断函数bu(event){varbt=window.button||event.button;if(bt==2){x=event.clientXy=event.clientYalert("您点击了鼠标右键!坐标为:"+x+','+y)}elseif(bt==0){a=event.screenXb=event.screenYalert("你点击了鼠标左键!坐标为:"+a+','+b)}elseif(bt==1){alert("你点击了鼠标中键!");}}3).判断一个键是否被按下type)}4).网页内容节点兼容性1)).网页可见区域宽高varw=document.body.offsetWidth||document.documentElement.clientWidth||document.body.clientWidth;varh=document.body.offsetHeight||document.documentElement.clientHeight||document.body.clientHeight;2))。窗体的宽度和高度大于可见区域window.innerHeight-浏览器窗口的内部高度(以像素为单位)window.innerWidth-浏览器窗口的内部宽度(以像素为单位)3))。页面滚动条到顶部的距离vart=document.documentElement.scrollTop||document.body.scrollTop4))。页面滚动条到左边的距离vars=document.documentElement。滚动左||document.body.scrollLeft5))。元素到浏览器边缘的距离functionoff(o){#元素内容到浏览器边框的距离(包括边框)varl=0,r=0;while(o){l+=o.offsetLeft+o.clientLeft;r+=o.offsetTop+o.clientTop;o=o.offsetParent;}return{left:l,top:r};}6)).获取滚动条高度//滚动条高度函数getScrollTop(){varscrollTop=0;if(document.documentElement&&document.documentElement.scrollTop){scrollTop=document.documentElement.scrollTop;}elseif(document.body){scrollTop=document.body.scrollTop;}returnscrollTop;}7)).DOM节点操作functionnext(o){//获取下一个兄弟节点if(o.nextElementSibling){returno.nextElementSibling;}else{returno.nextSibling;};}functionpre(o){//获取上一个兄弟节点if(o.previousElementSibling){returno.previousElementSibling;}else{returno.previousSibling;};}functionfirst(o){//获取第一个子节点if(o.firstElementChild){returno.firstElementChild;//非IE678支持}else{returno.firstChild;//IE678支持};}functionlast(o){//获取最后一个子节点if(o.lastElementChild){returno.lastElementChild;//非IE678支持}else{returno.lastChild;//IE678支持};}8)).窗口的宽高document.body.scrollWidth||document.docuemntElement.scrollWidth;//整个网页的宽度document.body.scrollHeight||document.docuemntElement.scrollHeight;//整个网页的高度9)).屏幕分辨率的宽高window.screen.height;//屏幕分辨率的高窗口.screen.width;//屏幕分辨率的宽度10)).Coordinatewindow.screenLeft;//X坐标window.screenX;//X坐标window.screenTop;//Y坐标窗户。screenY;//Y坐标11))。可用屏幕宽高window.screen.availHeightwindow.screen.availWidth5)。事件源获取e.target||e.srcElement6)。外线样式funtiongetStyle(obj,name){if(obj.currentStyle){//IEreturnobj.currentStyle[name];}else{//Chrom,FFreturngetComputedStyle(obj,false)[n我];}}7).防止事件冒泡函数封装functionpre(event){vare=event||window.event;if(e.stopPropagation){//防止冒泡行为的通用方法e.stopPropagation();}else{//IE浏览器event.cancelBubble=真;}8).阻止浏览器的默认行为(例如,单击右键退出菜单栏)//标准浏览器}else{e.returnValue=false;//IE浏览器}}3.严格模式“usestrict”4.判断变量类型typeofvariableinstanceinstanceofobjectinstance.constructor==objectObject.prototype.toString.call(instance)5.下载服务器-sidefiles下载文件总结本文主要介绍JavaScriptCommand的高级操作!希望对大家的学习有所帮助