盘点JavaScript中那些进阶操作知识(下篇)
点击上方“IT共享之家”,进行关注
回复“资料”可获赠Python学习福利
仰天大笑出门去,我辈岂是蓬蒿人。
大家好,我是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.href
2.Js浏览器兼容问题
1).浏览器事件监听
function addEventhandler(target,type,fn,cap){if(target.addEventListener) /*添加监听事件*/{target.addEventListener(type,fn,cap)}else{target.attachEvent('on'+type,fn) /*IE添加监听事件*/}}function removeEventhandler(target,type,fn,cap){if(target.removeEventListener) /*删除监听事件*/{target.removeEventListener(type,fn,cap)}else{target.detachEvent('on'+type,fn) /*IE删除监听事件*/}}
2).鼠标键判断
function bu(event){var bt= window.button || event.button;if (bt==2){x=event.clientXy=event.clientYalert("您点击了鼠标右键!坐标为:"+x+','+y)}else if(bt==0){a=event.screenXb=event.screenYalert("您点击了鼠标左键!坐标为:"+a+','+b)}else if(bt==1){alert("您点击了鼠标中键!");}}
3).判断是否按下某键
function k(event){var ke=event.keyCode || event.whichif(event.shiftKey==1){alert('您点击了shift');}alert(ke)alert(event.type)}
4).网页内容节点兼容性
1)).网页可视区域宽高
var w=document.body.offsetWidth|| document.documentElement.clientWidth|| document.body.clientWidth;var h=document.body.offsetHeight|| document.documentElement.clientHeight || document.body.clientHeight;
2)).窗体宽度高度 比可视区域要大
window.innerHeight - 浏览器窗口的内高度(以像素计)window.innerWidth - 浏览器窗口的内宽度(以像素计)
3)).页面滚动条距离顶部的距离
var t=document.documentElement.scrollTop || document.body.scrollTop4)).页面滚动条距离左边的距离
var s=document.documentElement.scrollLeft || document.body.scrollLeft5)).元素到浏览器边缘的距离
function off(o){ #元素内容距离浏览器边框的距离(含边框)var l=0,r=0;while(o){l+=o.offsetLeft+o.clientLeft;r+=o.offsetTop+o.clientTop;o=o.offsetParent;}return {left:l,top:r};}
6)).获取滚动条高度
// 滚动条的高度function getScrollTop() {var scrollTop = 0;if (document.documentElement && document.documentElement.scrollTop) {scrollTop = document.documentElement.scrollTop;}else if (document.body) {scrollTop = document.body.scrollTop;}return scrollTop;}
7)).DOM节点操作
function next(o){//获取下一个兄弟节点if (o.nextElementSibling) {return o.nextElementSibling;} else{return o.nextSibling;};}function pre(o){//获取上一个兄弟节点if (o.previousElementSibling) {return o.previousElementSibling;} else{return o.previousSibling;};}function first(o){//获取第一个子节点if (o.firstElementChild) {return o.firstElementChild;//非IE678支持} else{return o.firstChild;//IE678支持};}function last(o){//获取最后一个子节点if (o.lastElementChild) {return o.lastElementChild;//非IE678支持} else{return o.lastChild;//IE678支持};}
8)).窗口的宽高
document.body.scrollWidth||document.docuemntElement.scrollWidth;//整个网页的宽document.body.scrollHeight||document.docuemntElement.scrollHeight;//整个网页的高
9)).屏幕分辨率的宽高
window.screen.height;//屏幕分辨率的高window.screen.width;//屏幕分辨率的宽
10)).坐标
window.screenLeft;//x坐标window.screenX;//X坐标window.screenTop;//y坐标window.screenY;//y坐标
11)).屏幕可用工作区宽高
window.screen.availHeightwindow.screen.availWidth
5).事件源获取
e.target || e.srcElement6).行外样式
funtion getStyle(obj,name){if(obj.currentStyle){//IEreturn obj.currentStyle[name];}else{//Chrom,FFreturn getComputedStyle(obj,false)[name];}}
7).阻止事件冒泡函数封装
function pre(event){var e = event || window.event;if(e.stopPropagation){ // 通用方式阻止冒泡行为e.stopPropagation();}else{ //IE浏览器event.cancelBubble = true;}
8).阻止浏览器默认行为(例如点击右键出来菜单栏)
function stop(event) {var e = event || window.event;if (e.preventDefault){e.preventDefault(); // 标准浏览器}else{e.returnValue = false; // IE浏览器}}
3.严格模式
4.判断变量类型
typeof variableinstance instanceof objectinstance.constructor== objectObject.prototype.toString.call(instance)
5.下载服务器端文件
<a href="http://somehost/somefile.zip" download="myfile.zip">Download file</a>总结
这篇文章主要介绍了JavaScript的进阶操作命令!希望对大家的学习有所帮助。
看完本文有收获?请转发分享给更多的人
IT共享之家
入群请在微信后台回复【入群】
------------------- End -------------------
往期精彩文章推荐:
评论
