<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          盤點JavaScript中那些進階操作知識(下篇)

          共 4918字,需瀏覽 10分鐘

           ·

          2021-08-31 03:07

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

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

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

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

          前言

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

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

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

          1)).網(wǎng)頁可視區(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;//整個網(wǎng)頁的寬document.body.scrollHeight||document.docuemntElement.scrollHeight;//整個網(wǎng)頁的高
          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).阻止事件冒泡函數(shù)封裝

          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的進階操作命令!希望對大家的學習有所幫助。

          看完本文有收獲?請轉發(fā)分享給更多的人

          IT共享之家

          入群請在微信后臺回復【入群】

          ------------------- End -------------------

          往期精彩文章推薦:

          瀏覽 44
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          評論
          圖片
          表情
          推薦
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  爱搞在线观看 | 91麻豆一区二区 | 日批网站在线 | 伊人婷婷色| 婷婷色五月激情综合网 |