javascript
javascript中BOM介绍、屏幕尺寸、历史记录、URL解析、计算机信息获取、定时器、三大系列及兼容代码、封装动画函数、同步和异步
BOM介紹：
BOM指的是瀏覽器對象模型，是用來操作瀏覽器的，例如瀏覽器彈窗、地址欄、滾動條等，瀏覽器頂級對象：window；頁面中的所有內容都是屬于window的，window可以省略；confirm(‘帶有取消功能的彈框’)和alert相似，但是它有返回值，點擊確定是true，點擊取消是false；
window.οnlοad=function(){};頁面加載完后觸發事件執行，onload指頁面上dom和圖片及CSS等加載完；onDOMContentLoad指頁面中的dom加載完觸發事件執行，注意僅僅指dom;都用于解決js代碼放在頁面中元素之前帶來的報錯。
window.οnunlοad=function(){};窗口關閉后觸發事件執行；window.οnbefοreunlοad=function(){};窗口關閉之前觸發事件執行，它們只有IE8支持。
獲取屏幕路尺寸：
window.innerWidth獲取屏幕的寬度；window.innerHeight獲取屏幕的高度；
location地址欄對象：
location是一個對象，它有對應的方法和屬性，如下：
URL組成：
以scheme://host:port/path?query#fragment為例：
history對象：
history是歷史記錄，用于操作頁面歷史記錄進行頁面的前進或者后退，其屬性和方法如下：
HTML5新增歷史記錄操作方法：history.pushState(null,null,url)在URL中追加歷史記錄,第一個參數是存數據的，第二個參數是存標題的，第三個參數是追加URL地址的。
history.replaceState(null,null,url)替換URL中歷史記錄，第一個參數表示存的數據，第二個參數表示存的標題，第三個參數表示替換的URL地址。
window.onpopstate事件：當歷史發生改變時觸發事件函數。
通過哈希值或者歷史記錄改變網頁不利于性能優化，通過ajax改變網頁又不利于seo優化，因此在實際開發中常把兩者結合起來使用，這樣既可以提高性能又可以提高SEO優化，即通過ajax加載頁面的同時更改地址欄URL。
navigator對象：
用于獲取計算機硬件及軟件信息，其相關屬性和方法如下：
setInterval()定時器：
setInterval()是window的一個方法，里面可以傳入兩個參數，第一個參數是一個函數，第二個參數是一個毫秒值，它是用來控制函數在多久執行一次的，window可以省略，如下：
<script>setInterval(function() {console.log('hello');}, 500);</script>clearInterval()清除定時器：
setInterval()定時器返回一個值，被稱為定時器的id值，clearInterval()方法是用來清除定時器(停止定時器)的，里面傳入某個定時器的id值，則這個定時器就會被停止，如：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><input type="button" value="停止" id='btn'></body><script>function hello() {console.log('hello');};function stop() {clearInterval(times);};var times = setInterval(hello, 500);document.getElementById('btn').onclick = stop;</script></html>setTimeout和clearTimeout一次性定時器：
setTimeout()定時器和setInterval()傳的參數一樣，其返回值也是一個id值，不同的是此定時器只執行一次回調函數，被稱為一次性定時器；
clearTimeout()是用來清除一次性定時器setTimeout()的，其使用和clearInterval()方法一樣，如下案例：
<script>var times = setTimeout(function() {console.log('setTimeout是一個一次性的定時器');}, 2000);setTimeout(function() {clearTimeout(times);console.log('clearTimeout清除里一次性定時器setTimeout');}, 1000);</script>offset-系列：
在CSS樣式表中設置元素的left、top、width、height等屬性值，這個值在js中是無法通過style.屬性獲取的，但是設置在行內的樣式是可以被style.屬性獲取到的；為了解決這個問題，可以通過offset-系列來獲取元素的left和top屬性值，兩種方式都可以獲取到，其相關屬性有：offsetLeft、offsetTop、offsetWidth、offsetHeight、offsetParent等，得到的值時包含border的；返回值沒有單位，是只讀屬性；它們都是相對有定位的父級元素判斷距離的，若父級沒有定位則以body元素進行判斷距離。
client-系列：
client-系列是用來獲取可視區域的信息的，其屬性有：clientTop返回元素上邊框的大小、clientLeft返回元素左邊框的大小、clientWidth返回自身內容區域寬度(不含border，含padding)、clientHeight返回自身內容區域的高度(不含border，含padding)、clientX和clientY返回距離瀏覽器邊緣的距離，所有屬性返回值都是不帶單位的。
scroll-滾動系列：
用于獲取元素內容的大小、滾動距離等，其屬性有：scrollTop返回上側卷去的距離、scrollLeft返回左側卷去的距離、scrollWidth返回自身內容實際寬度（不包含border）、scrollHeight返回自身內容 實際高度（不包含border）;它們都不帶單位，scroll還是一個滾動事件，當滾動滾動條時觸發事件函數。
pageYOffset和pageXOffset:
window.pageYOffset獲取瀏覽器（文檔頁面）向上卷去的距離，window.pageXOffset獲取瀏覽器（文檔頁面）向左卷去的距離。
getComputedStyle()和currentStyle：
getComputedStyle(element)返回element元素的所有CSS屬性，并將這些屬性以對象的方式存在一個對象中，若要的到element元素的某個屬性值則可：getComputedStyle(element).屬性，但是IE8不支持；為了兼容IE瀏覽器，可以使用.currentStyle屬性,IE支持它，谷歌火狐不支持，其兼容代碼如下：
<script>function getStyleCss(element, styles) {if (element.currentStyle) {return element.currentStyle[styles];} else {return getComputedStyle(element)[styles];};};// 注意后面參數實參要傳字符串形式：var divsWidth = getStyleCss(divs, 'width');console.log(divsWidth);</script>頁面滾動出去距離兼容代碼：
同樣，上面頁面滾動距離獲取的屬性各自有自己的兼容問題，因此封裝兼容代碼如下：
<script>function getScrollValue() {var scrollTops = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;var scrollLefts = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;// 下面對象的屬性值可以直接拿上面的兼容代碼，可以省略兩個變量但是為了便于理解，這里使用兩個變量接收：var scorllObj = {left: scrollLefts,top: scrollTops};return scorllObj;};var scrollValues = getScrollValue();console.log(scrollValues.top + '----' + scrollValues.left);</script>鼠標距離頁面距離的兼容代碼：
pageX(pageY)可以獲得鼠標距離頁面的距離，但是它有兼容問題,因此可以結合clientX(clientY) + scrollLeft(scrollTop)來編寫兼容代碼：
<script>// 調用時參數E是事件函數中的參數e(事件對象)或window.event對象：function getPageValue(E) {return {y: E.pageY ? E.pageY : E.clientY + E.scrollTop,x: E.pageX ? E.pageX : E.clientX + E.scrollLeft};};// 獲取鼠標點擊時觸點距離頁面的距離：document.onclick = function(event) {event = window.event || event;console.log(getPageValue(event).y);};</script>將所有系列的兼容代碼裝入一個對象：
<script>//把代碼放在一個對象中var compatible = {//window.event和事件參數對象e的兼容getEvent: function(E) {return window.event || E;},//可視區域的橫坐標的兼容代碼getClientX: function(E) {return this.getEvent(E).clientX;},//可視區域的縱坐標的兼容代碼getClientY: function(E) {return this.getEvent(E).clientY;},//頁面向左卷曲出去的橫坐標getScrollLeft: function() {return window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0;},//頁面向上卷曲出去的縱坐標getScrollTop: function() {return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0;},//相對于頁面的橫坐標(pageX或者是clientX+scrollLeft)getPageX: function(E) {return this.getEvent(E).pageX ? this.getEvent(E).pageX : this.getClientX(E) + this.getScrollLeft();},//相對于頁面的縱坐標(pageY或者是clientY+scrollTop)getPageY: function(E) {return this.getEvent(E).pageY ? this.getEvent(E).pageY : this.getClientY(E) + this.getScrollTop();}};//使用：document.onclick = function(e) {console.log(compatible.getPageX(e));console.log(compatible.getPageY(e));};</script>動畫函數封裝：
其參數element表示要設置動畫的元素；target表示元素要移動到某位置的目標，傳入數字；directions表示方向是沿x或y軸移動，可傳入‘x’或’y’:
<script>function animation(element, target, directions) {clearInterval(element.timeId);var direction = directions == 'x' ? 'Left' : 'Top';element.timeId = setInterval(function() {var current = element['offset' + direction];var temp = 1;temp = current < target ? temp : -temp;element.style[direction.toLowerCase()] = current + temp + 'px';if (current == target) {clearInterval(element.timeId);};temp += 1;}, 1);};animation(divs, 1000, 'x');</script>同步和異步：
js是單線程工作原理，按照任務的的順序依次執行，這是同步;但是js在執行某一項任務時，還可以允許執行其它任務，這個就是異步，回調函數是一個異步任務。js中執行機制：先執行主棧上的任務，再執行任務隊列中的任務，如回調函數就是任務隊列中的任務。
提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者 刪除。
筆者：苦海
總結
以上是生活随笔為你收集整理的javascript中BOM介绍、屏幕尺寸、历史记录、URL解析、计算机信息获取、定时器、三大系列及兼容代码、封装动画函数、同步和异步的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Bootstrap简介、下载bootst
- 下一篇： javascript中本地储存、离线缓存