盤點(diǎn)JavaScript中那些進(jìn)階操作知識(shí)(下篇)
點(diǎn)擊上方“IT共享之家”,進(jìn)行關(guān)注
回復(fù)“資料”可獲贈(zèng)Python學(xué)習(xí)福利
仰天大笑出門去,我輩豈是蓬蒿人。
大家好,我是IT共享者,人稱皮皮。上篇文章給大家分享了盤點(diǎn)JavaScript中那些進(jìn)階操作知識(shí)(上篇),這篇文章繼續(xù)來看看趴!
前言
相信做網(wǎng)站對(duì)JavaScript再熟悉不過了,它是一門腳本語言,不同于Python的是,它是一門瀏覽器腳本語言,而Python則是服務(wù)器腳本語言,我們不光要會(huì)Python,還要會(huì)JavaScript,因?yàn)樗鼘?duì)做網(wǎng)頁方面是有很大作用的。
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).瀏覽器事件監(jiān)聽
function addEventhandler(target,type,fn,cap){if(target.addEventListener) /*添加監(jiān)聽事件*/{target.addEventListener(type,fn,cap)}else{target.attachEvent('on'+type,fn) /*IE添加監(jiān)聽事件*/}}function removeEventhandler(target,type,fn,cap){if(target.removeEventListener) /*刪除監(jiān)聽事件*/{target.removeEventListener(type,fn,cap)}else{target.detachEvent('on'+type,fn) /*IE刪除監(jiān)聽事件*/}}
2).鼠標(biāo)鍵判斷
function bu(event){var bt= window.button || event.button;if (bt==2){x=event.clientXy=event.clientYalert("您點(diǎn)擊了鼠標(biāo)右鍵!坐標(biāo)為:"+x+','+y)}else if(bt==0){a=event.screenXb=event.screenYalert("您點(diǎn)擊了鼠標(biāo)左鍵!坐標(biāo)為:"+a+','+b)}else if(bt==1){alert("您點(diǎn)擊了鼠標(biāo)中鍵!");}}
3).判斷是否按下某鍵
function k(event){var ke=event.keyCode || event.whichif(event.shiftKey==1){alert('您點(diǎn)擊了shift');}alert(ke)alert(event.type)}
4).網(wǎng)頁內(nèi)容節(jié)點(diǎn)兼容性
1)).網(wǎng)頁可視區(qū)域?qū)捀?/span>
var w=document.body.offsetWidth|| document.documentElement.clientWidth|| document.body.clientWidth;var h=document.body.offsetHeight|| document.documentElement.clientHeight || document.body.clientHeight;
2)).窗體寬度高度 比可視區(qū)域要大
window.innerHeight - 瀏覽器窗口的內(nèi)高度(以像素計(jì))window.innerWidth - 瀏覽器窗口的內(nèi)寬度(以像素計(jì))
3)).頁面滾動(dòng)條距離頂部的距離
var t=document.documentElement.scrollTop || document.body.scrollTop4)).頁面滾動(dòng)條距離左邊的距離
var s=document.documentElement.scrollLeft || document.body.scrollLeft5)).元素到瀏覽器邊緣的距離
function off(o){ #元素內(nèi)容距離瀏覽器邊框的距離(含邊框)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)).獲取滾動(dòng)條高度
// 滾動(dòng)條的高度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節(jié)點(diǎn)操作
function next(o){//獲取下一個(gè)兄弟節(jié)點(diǎn)if (o.nextElementSibling) {return o.nextElementSibling;} else{return o.nextSibling;};}function pre(o){//獲取上一個(gè)兄弟節(jié)點(diǎn)if (o.previousElementSibling) {return o.previousElementSibling;} else{return o.previousSibling;};}function first(o){//獲取第一個(gè)子節(jié)點(diǎn)if (o.firstElementChild) {return o.firstElementChild;//非IE678支持} else{return o.firstChild;//IE678支持};}function last(o){//獲取最后一個(gè)子節(jié)點(diǎn)if (o.lastElementChild) {return o.lastElementChild;//非IE678支持} else{return o.lastChild;//IE678支持};}
8)).窗口的寬高
document.body.scrollWidth||document.docuemntElement.scrollWidth;//整個(gè)網(wǎng)頁的寬document.body.scrollHeight||document.docuemntElement.scrollHeight;//整個(gè)網(wǎng)頁的高
9)).屏幕分辨率的寬高
window.screen.height;//屏幕分辨率的高window.screen.width;//屏幕分辨率的寬
10)).坐標(biāo)
window.screenLeft;//x坐標(biāo)window.screenX;//X坐標(biāo)window.screenTop;//y坐標(biāo)window.screenY;//y坐標(biāo)
11)).屏幕可用工作區(qū)寬高
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).阻止事件冒泡函數(shù)封裝
function pre(event){var e = event || window.event;if(e.stopPropagation){ // 通用方式阻止冒泡行為e.stopPropagation();}else{ //IE瀏覽器event.cancelBubble = true;}
8).阻止瀏覽器默認(rèn)行為(例如點(diǎn)擊右鍵出來菜單欄)
function stop(event) {var e = event || window.event;if (e.preventDefault){e.preventDefault(); // 標(biāo)準(zhǔn)瀏覽器}else{e.returnValue = false; // IE瀏覽器}}
3.嚴(yán)格模式
4.判斷變量類型
typeof variableinstance instanceof objectinstance.constructor== objectObject.prototype.toString.call(instance)
5.下載服務(wù)器端文件
<a href="http://somehost/somefile.zip" download="myfile.zip">Download file</a>總結(jié)
這篇文章主要介紹了JavaScript的進(jìn)階操作命令!希望對(duì)大家的學(xué)習(xí)有所幫助。
看完本文有收獲?請(qǐng)轉(zhuǎn)發(fā)分享給更多的人
IT共享之家
入群請(qǐng)?jiān)谖⑿藕笈_(tái)回復(fù)【入群】
------------------- End -------------------
往期精彩文章推薦:
評(píng)論
圖片
表情
