盤點JavaScript中那些進階操作知識（下篇）

原創

2021-08-30 21:24

點擊上方“IT共享之家”，進行關注

回覆“資料”可獲贈Python學習福利

今

日

雞

湯

仰天大笑出門去，我輩豈是蓬蒿人。

大家好，我是IT共享者，人稱皮皮。上篇文章給大家分享了盤點JavaScript中那些進階操作知識（上篇），這篇文章繼續來看看趴！

前言

相信做網站對JavaScript再熟悉不過了，它是一門腳本語言，不同於Python的是，它是一門瀏覽器腳本語言，而Python則是服務器腳本語言，我們不光要會Python，還要會JavaScript，因爲它對做網頁方面是有很大作用的。

1.Javascript刷新頁面

history.go(0) location.reload() location=location location.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.clientX  y=event.clientY     alert("您點擊了鼠標右鍵！座標爲:"+x+','+y)  }else if(bt==0)  {    a=event.screenX    b=event.screenY  alert("您點擊了鼠標左鍵！座標爲:"+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.scrollTop

4)).頁面滾動條距離左邊的距離

var s=document.documentElement.scrollLeft || document.body.scrollLeft

5)).元素到瀏覽器邊緣的距離

  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.availHeight window.screen.availWidth

5).事件源獲取

e.target || e.srcElement

6).行外樣式

funtion getStyle(obj,name){   if(obj.currentStyle){      //IE    return obj.currentStyle[name];    }else{    //Chrom,FF   return 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.嚴格模式

"use strict"

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 -------------------

往期精彩文章推薦：

本文分享自微信公衆號 - IT共享之家（info-share）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.