[[420301]]

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

前言

相信做網站對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).瀏覽器事件監(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).鼠標鍵判斷

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.which 
if(event.shiftKey==1) 
  { 
  alert('您點擊了shift'); 
  } 
 alert(ke) 
 alert(event.type) 
} 

4).網頁內容節(jié)點兼容性

1)).網頁可視區(qū)域寬高

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 - 瀏覽器窗口的內高度（以像素計）  
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節(jié)點操作

function next(o){//獲取下一個兄弟節(jié)點 
        if (o.nextElementSibling) { 
            return o.nextElementSibling; 
        } else{ 
            return o.nextSibling; 
        }; 
    } 
    function pre(o){//獲取上一個兄弟節(jié)點 
        if (o.previousElementSibling) { 
            return o.previousElementSibling; 
        } else{ 
            return o.previousSibling; 
        }; 
    } 
    function first(o){//獲取第一個子節(jié)點 
        if (o.firstElementChild) { 
            return o.firstElementChild;//非IE678支持 
        } else{ 
            return o.firstChild;//IE678支持 
        }; 
    } 
    function last(o){//獲取最后一個子節(jié)點 
        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)).屏幕可用工作區(qū)寬高

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  variable 
instance  instanceof  object 
instance.constructor== object 
Object.prototype.toString.call(instance) 

5.下載服務器端文件

<a href="http://somehost/somefile.zip" download="myfile.zip">Download file</a> 

總結

這篇文章主要介紹了JavaScript的進階操作命令!希望對大家的學習有所幫助。