web api 網(wǎng)頁應(yīng)用編程（DOM BOM）
時間：2023-09-28 02:30:01 | 來源：網(wǎng)站運營
時間：2023-09-28 02:30:01 來源：網(wǎng)站運營
web api 網(wǎng)頁應(yīng)用編程（DOM BOM）：
DOM
web api的概念
瀏覽器提供了一套操作瀏覽器功能和頁面元素的api（bom和dom）
此處的web api 特指瀏覽器提供的api（一組方法），web api在后面的課程中有其他含義
學習目標：掌握常見瀏覽器提供的api的調(diào)用方式
ECMAscript-js的核心
定義了js的語法規(guī)范
js的核心，描述了語言的基本語法和數(shù)據(jù)類型，ECMAscript是一套標準，定義了一種語言的標準與具體實現(xiàn)無關(guān)
BOM - 瀏覽器對象模型
browser object model，一套操作瀏覽器功能的 API。
通過 BOM 可以操作瀏覽器窗口，比如：彈出框、控制瀏覽器跳轉(zhuǎn)、獲取分辨率等 。
DOM - 文檔對象模型
document object model，一套操作頁面元素的 API。
DOM 可以把 HTML 看做是文檔樹，通過 DOM 提供的 API 可以對樹上的節(jié)點進行操作。
DOM 的概念
文檔對象模型（Document Object Model，簡稱 DOM），是 W3C 組織推薦的處理可擴展標
記語言的標準編程接口。它是一種與平臺和語言無關(guān)的應(yīng)用程序接口(API),它可以動態(tài)地
訪問程序和腳本，更新其內(nèi)容、結(jié)構(gòu)和 www 文檔的風格(目前，HTML 和 XML 文檔是通過
說明部分定義的)。文檔可以進一步被處理，處理的結(jié)果可以加入到當前的頁面。DOM 是一
種基于樹的 API 文檔，它要求在處理過程中整個文檔都表示在存儲器中。
DOM 經(jīng)常進行的操作
獲取元素
對元素進行操作(設(shè)置其屬性或調(diào)用其方法)
動態(tài)創(chuàng)建元素
事件(什么時機做相應(yīng)的操作)
根據(jù)id獲取元素
方法，調(diào)用document 對象的getElementById方法
參數(shù)：字符串類型的id的屬性值
返回值：對應(yīng)id名的元素對象
注意1：由于id名具有唯一性，部分瀏覽器支持直接使用id名訪問元素，但不是標準方式，不推薦使用
注意2：代碼執(zhí)行順序，如果js在html結(jié)構(gòu)之前，會導致結(jié)構(gòu)未加載，不能獲取對應(yīng)id的元素
根據(jù)標簽名獲取元素
方法：調(diào)用 document 對象的 getElementsByTagName 方法。
參數(shù)：字符串類型的標簽名。
返回值：同名的元素對象組成的數(shù)組。
注意1：操作數(shù)據(jù)時需要按照操作數(shù)組的方法進行。
注意2：getElementsByTagName 方法內(nèi)部獲取的元素是動態(tài)增加的。
元素對象內(nèi)部獲取標簽元素
獲取的元素對象內(nèi)部，本身也可以調(diào)用根據(jù)標簽獲取元素方法，例如 div 元素對象也可以調(diào)用 getElementsByTagName 方法。
目的：縮小選擇元素的范圍，類似 css 中的后代選擇器。
根據(jù) name 獲取元素
? 方法：調(diào)用 document 對象的 getElementsByName 方法。
? 參數(shù)：字符串類型的 name 屬性值。
? 返回值：name 屬性值相同的元素對象組成的數(shù)組。
? 不建議使用：在 IE 和 Opera 中有兼容問題，會多選中 id 屬性值相同的元素。
根據(jù)類名獲取元素
? 方法：調(diào)用 document 對象的 getElementsByClassName 方法。
? 參數(shù)：字符串類型的 class 屬性值。
? 返回值：class 屬性值相同的元素對象組成的數(shù)組。
? 瀏覽器兼容問題：不支持 IE8 及以下的瀏覽器
根據(jù)選擇器獲取元素
? 方法1：調(diào)用 document 對象的 querySelector 方法，通過 css 中的選擇器去選取第一個
符合條件的標簽元素。
? 方法2：調(diào)用 document 對象的 querySelectorAll 方法，通過 css 中的選擇器去選取所
有符合條件的標簽元素。
? 參數(shù)：字符串類型的 css 中的選擇器。
? 瀏覽器兼容問題：不支持 IE8 以下的瀏覽器
事件
? 事件：在什么時候做什么事
? 執(zhí)行機制：觸發(fā)--響應(yīng)機制
? 綁定事件(注冊事件)三要素：
1、事件源：給誰綁定事件
2、事件類型：綁定什么類型的事件 click 單擊
3、事件函數(shù)：事件發(fā)生后執(zhí)行什么內(nèi)容，寫在函數(shù)內(nèi)部
常用事件監(jiān)聽方法：
? 方法1：綁定 HTML 元素屬性。
? 方法2：綁定 DOM 對象屬性。
常用的鼠標事件類型：
非表單元素的屬性
? 例如：href、title、id、src 等。
? 調(diào)用方式：元素對象打點調(diào)用屬性名，例如 obj.href。
? 注意：部分的屬性名跟關(guān)鍵字和保留字沖突，會更換寫法。
class → className
for → htmlFor
rowspan → rowSpan
? 屬性賦值：給元素屬性賦值,等號右側(cè)的賦值都是字符串格式。
應(yīng)用1：圖片案例切換
應(yīng)用2：元素的顯示隱藏
獲取標簽內(nèi)部內(nèi)容的屬性
? 獲取標簽內(nèi)部內(nèi)容的屬性有兩個：innerHTML 和 innerText
? innerHTML屬性，在獲取標簽內(nèi)部內(nèi)容時，如果包含標簽，獲取的內(nèi)容會包含標簽，獲取的
內(nèi)容包括空白換行等。
? innerText屬性，在獲取標簽內(nèi)部內(nèi)容時，如果包含標簽，獲取的內(nèi)容會過濾標簽，獲取的
內(nèi)容會去掉換行和縮進等空白。
更改標簽內(nèi)容：
還可以通過兩個屬性給雙標簽內(nèi)部去更改內(nèi)容：
? innerHTML 設(shè)置屬性值，有標簽的字符串，會按照 HTML 語法中的標簽加載。
? innerText 設(shè)置屬性值，有標簽的字符串，會按照普通的字符加載。
對比使用場景
? innerText：在設(shè)置純字符串時使用。
? innerHTML：在設(shè)置有內(nèi)部子標簽結(jié)構(gòu)時使用。
表單元素屬性
? value 用于大部分表單元素的內(nèi)容獲取(option除外)
? type 可以獲取input標簽的類型(輸入框或復(fù)選框等)
? disabled 禁用屬性
? checked 復(fù)選框選中屬性
? selected 下拉菜單選中屬性
? 注意：在 DOM 中元素對象的屬性值只有一個時，會被轉(zhuǎn)成布爾值顯示。
例如：txt.disabled = true;
應(yīng)用：表單校驗
應(yīng)用2：下拉隨機選中
應(yīng)用3：全選、單選、反選
<style> * { padding: 0; margin: 0; } .box { margin: 20px 200px auto; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; } th,td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { color: #fff; font-size: 14px; background-color: skyblue; } td { font-size: 14px; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { background-color: #fafafa; } </style></head><body> <div class="box"> <table> <thead> <tr> <th><input type="checkbox" id="all"></th> <th>商品</th> <th>價錢</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox"></td> <td>iphone8</td> <td>8000</td> </tr> <tr> <td><input type="checkbox"></td> <td>iphone8</td> <td>8000</td> </tr> <tr> <td><input type="checkbox"></td> <td>iphone8</td> <td>8000</td> </tr> <tr> <td><input type="checkbox"></td> <td>iphone8</td> <td>8000</td> </tr> <tr> <td><input type="checkbox"></td> <td>iphone8</td> <td>8000</td> </tr> <tr> <td><input type="checkbox"></td> <td>iphone8</td> <td>8000</td> </tr> </tbody> </table> <input type="button" value="反選" id="btn"> </div> <script> // 點擊全選按鈕 選擇全部 var all = document.getElementById('all'); var tb = document.getElementById('tb'); var inpts = tb.getElementsByTagName('input'); var btn = document.getElementById('btn') all.onclick = function () { for (var i = 0; i < inpts.length; i++) { inpts[i].checked = all.checked } } // 點擊單個選項控制全選按鈕 for (var i = 0; i < inpts.length; i++) { inpts[i].onclick = function () { var allChecked = true; for (var i = 0; i < inpts.length; i++) { if (inpts[i].checked === false) { allChecked = false; } } all.checked = allChecked; } } // 反選按鈕的控制 btn.onclick = function () { for (var i = 0; i < inpts.length; i++) { inpts[i].checked = !inpts[i].checked } // 單個控制全選 var allChecked = true; for (var i = 0; i < inpts.length; i++) { if (inpts[i].checked === false) { allChecked = false; } } all.checked = allChecked; } </script></body></html>自定義屬性操作
? getAttribute(name) 獲取標簽行內(nèi)屬性
? setAttribute(name，value) 設(shè)置標簽行內(nèi)屬性
? removeAttribute(name) 移除標簽行內(nèi)屬性
? 與element.屬性的區(qū)別: 上述三個方法用于獲取任意的行內(nèi)屬性，包括自定義的屬性。
style 樣式屬性操作
? 使用 style 屬性方式設(shè)置的樣式顯示在標簽行內(nèi)。
? element.style 屬性的值，是所有 行內(nèi)樣式組成的一個樣式對象。
? 樣式對象可以繼續(xù)點語法調(diào)用或更改 css 的行內(nèi)樣式屬性，例如 width、height 等屬性。
? 注意1：類似 background-color 這種復(fù)合屬性的單一屬性寫法，是由多個單詞組成的，要
修改為駝峰命名方式書寫 backgroundColor。
? 注意2：通過樣式屬性設(shè)置寬高、位置的屬性類型是字符串，需要加上 px 等單位。
className 類名屬性操作
? 修改元素的 className 屬性相當于直接修改標簽的類名。
? 如果需要修改多條 css 樣式，可以提前將修改后的樣式設(shè)置到一個類選擇器中，后續(xù)通過
修改類名的方式，批量修改 css 樣式。
應(yīng)用1：開關(guān)燈
應(yīng)用2：顯示隱藏
應(yīng)用3：輸入框高亮顯示
應(yīng)用4：表格隔行變色
應(yīng)用4：tab欄效果
<style> * {margin:0; padding: 0;} ul { list-style-type: none; } .box { width: 400px; height: 300px; border: 1px solid #ccc; margin: 100px auto; overflow: hidden; } .hd { height: 45px; } .hd span { display:inline-block; width: 90px; background-color: pink; line-height: 45px; text-align: center; cursor: pointer; } .hd span.current { background-color: skyblue; } .bd div { height: 255px; background-color: skyblue; display: none; } .bd div.current { display: block; } </style></head><body> <div class="box"> <div class="hd" id="hd"> <span class="current">體育</span> <span>娛樂</span> <span>新聞</span> <span>綜合</span> </div> <div class="bd" id="bd"> <div class="current">我是體育模塊</div> <div>我是娛樂模塊</div> <div>我是新聞模塊</div> <div>我是綜合模塊</div> </div> </div> <script src="common.js"></script> <script> // 獲取元素 var hd = my$("hd"); var spans = hd.getElementsByTagName("span"); var bd = my$("bd"); var divs = bd.getElementsByTagName("div"); // 鼠標移上某個 span 讓它添加一個類名，其他的失去類名 for (var i = 0 ; i < spans.length ; i++) { // 給每一個 span 元素添加一個新的屬性，記錄自己在數(shù)組中的下標 spans[i].index = i; spans[i].onmouseover = function () { // console.dir(this); // 1.讓 span 自己進行切換 // 排他思想： // 排除其他 for (var j = 0; j < spans.length ; j++) { spans[j].className = ""; // 由于 divs 中數(shù)據(jù)個數(shù)與 spans 一樣，所以可以再同一個遍歷循環(huán)中，進行排他操作 divs[j].className = ""; } // 保留自己 this.className = "current"; // console.log(this.index); // 2.讓 bd 中的 div 也對應(yīng)進行切換 // 對應(yīng)控制思想：有兩組數(shù)據(jù)中存儲了相同個數(shù)的元素對象，一組對象的變化，會引起另外一組的變化 // 實現(xiàn)方法：找兩個數(shù)據(jù)中的共同點，兩個數(shù)組中元素對象的下標是一樣的 // 對應(yīng)控制中也會涉及到排他的操作 // 保留 div 自己的類名 divs[this.index].className = "current"; }; } </script>節(jié)點屬性
? nodeType 節(jié)點的類型，屬性值為數(shù)字，表示不同的節(jié)點類型，共 12 種，只讀
1 元素節(jié)點
2 屬性節(jié)點
3 文本節(jié)點
? nodeName 節(jié)點的名稱(標簽名稱)，只讀
? nodeValue 節(jié)點值，返回或設(shè)置當前節(jié)點的值
元素節(jié)點的 nodeValue 始終是 null
父子節(jié)點常用屬性
? childNodes 只讀屬性，獲取一個節(jié)點所有子節(jié)點的實時的集合，集合是動態(tài)變化的。
? children 只讀屬性，返回一個節(jié)點所有的子元素節(jié)點集合，是一個動態(tài)更新的 HTML 元素
集合。
? firstChild 只讀屬性，返回該節(jié)點的第一個子節(jié)點，如果該節(jié)點沒有子節(jié)點則返回 null。
? lastChild 只讀屬性，返回該節(jié)點的最后一個子節(jié)點，如果該節(jié)點沒有子節(jié)點則返回 null。
? parentNode 返回一個當前節(jié)點的父節(jié)點，如果沒有這樣的節(jié)點，比如說像這個節(jié)點是樹結(jié)構(gòu)
的頂端或者沒有插入一棵樹中，這個屬性返回 null。
? parentElement 返回當前節(jié)點的父元素節(jié)點，如果該元素沒有父節(jié)點，或者父節(jié)點不是一個 DOM
元素，則返回 null。
兄弟節(jié)點常用屬性
? nextSibling 只讀屬性，返回與該節(jié)點同級的下一個節(jié)點，如果沒有返回null。
? previousSibling 只讀屬性，返回與該節(jié)點同級的上一個節(jié)點，如果沒有返回null。
? nextElementSibling 只讀屬性，返回與該節(jié)點同級的下一個元素節(jié)點，如果沒有返回null。
? previousElementSibling 只讀屬性，返回與該節(jié)點同級的上一個元素節(jié)點，如果沒有返回null。
? 注意：nextElementSibling 和 previousElementSibling 有兼容性問題，IE9以后才支持。
創(chuàng)建新節(jié)點的方法
? document.createElement("div") 創(chuàng)建元素節(jié)點
? document.createAttribute("id") 創(chuàng)建屬性節(jié)點
? document.createTextNode("hello") 創(chuàng)建文本節(jié)點
? 一般將創(chuàng)建的新節(jié)點存在變量中，方便使用。
節(jié)點常用操作方法 1
? parentNode.appendChild(child)：將一個節(jié)點添加到指定父節(jié)點的子節(jié)點列表末尾。
? parentNode.replaceChild(newChild, oldChild)：用指定的節(jié)點替換當前節(jié)點的一個子節(jié)
點，并返回被替換掉的節(jié)點。
? parentNode.insertBefore(newNode, referenceNode)：在參考節(jié)點之前插入一個擁有指定
父節(jié)點的子節(jié)點，referenceNode 必須設(shè)置，如果 referenceElement 為 null 則 newNode
將被插入到子節(jié)點的末尾。
? parentNode.removeChild(child)：移除當前節(jié)點的一個子節(jié)點。這個子節(jié)點必須存在于當
前節(jié)點中。
節(jié)點常用操作方法 2
? Node.cloneNode()：克隆一個節(jié)點，并且可以選擇是否克隆這個節(jié)點下的所有內(nèi)容。參數(shù)為
Boolean 布爾值，表示是否采用深度克隆,如果為 true,則該節(jié)點的所有后代節(jié)點也都會被
克隆,如果為 false,則只克隆該節(jié)點本身，默認值為 true，節(jié)點下的內(nèi)容會被克隆。
? 注意：克隆時，標簽上的屬性和屬性值也會被復(fù)制，寫在標簽行內(nèi)的綁定事件可以被復(fù)制，
但是通過 JavaScript 動態(tài)綁定的事件不會被復(fù)制。
節(jié)點常用操作方法 3
? Node.hasChildNodes()：沒有參數(shù)，返回一個 Boolean 布爾值，來表示該元素是否包含有
子節(jié)點。
? Node.contains(child)：返回一個 Boolean 布爾值，來表示傳入的節(jié)點是否為該節(jié)點的后
代節(jié)點。
判斷方法總結(jié)
? 有三種方法可以判斷當前節(jié)點是否有子節(jié)點。
? node.firstChild !== null
? node.childNodes.length > 0
? node.hasChildNodes()
注冊事件的其他方法1
? element.addEventListener() 方法。
? 參數(shù)：
第一個參數(shù)：事件類型的字符串（直接書寫”click”，不需要加 on）
第二個參數(shù)：事件函數(shù)
? 同一個元素可以多次綁定事件監(jiān)聽，同一個事件類型可以注冊多個事件函數(shù)
? 兼容性問題：不支持 IE9 以下的瀏覽器
注冊事件的其他方法2
? element.attachEvent() 方法。
? 參數(shù)：
第一個參數(shù)：事件類型的字符串（需要加 on）
第二個參數(shù)：事件函數(shù)
? 同一個元素可以多次綁定事件監(jiān)聽，同一個事件類型可以注冊多個事件函數(shù)
? 兼容性問題：只支持 IE10 及以下的瀏覽器
移除事件的其他方法1
? element.removeEventListener() 方法。
? 參數(shù)：
第一個參數(shù)：事件類型的字符串（直接書寫”click”，不需要加 on）
第二個參數(shù)：事件函數(shù)引用名
? 注意：沒有辦法移除一個匿名函數(shù)，所以在注冊事件時需要單獨聲明一個有函數(shù)名的事件函數(shù)。
? 兼容性問題：不支持 IE9 以下的瀏覽器
移除事件的其他方法2
? element.detachEvent() 方法。
? 參數(shù)：
第一個參數(shù)：事件類型的字符串（需要加 on）
第二個參數(shù)：事件函數(shù)
? 注意：沒有辦法移除一個匿名函數(shù)，所以在注冊事件時需要單獨聲明一個有函數(shù)名的事件函數(shù)。
兼容性問題：只支持 IE10 及以下的瀏覽器
DOM 事件流
事件流的三個階段：
? 第一個階段：事件捕獲
? 第二個階段：事件執(zhí)行過程
? 第三個階段：事件冒泡
? addEventListener() 第三個參數(shù)為 false 時，事件冒泡
? addEventListener() 第三個參數(shù)為 true 時，事件捕獲
? onclick 類型：只能進行事件冒泡過程，沒有捕獲階段
? attachEvent() 方法：只能進行事件冒泡過程，沒有捕獲階段
事件委托
? 利用事件冒泡，將子級的事件委托給父級加載
? 同時，需要利用事件函數(shù)的一個 e 參數(shù)，內(nèi)部存儲的是事件對象
事件對象：
? 只要觸發(fā)事件，就會有一個對象，內(nèi)部存儲了與事件相關(guān)的數(shù)據(jù)。
? e 在低版本瀏覽器中有兼容問題，低版本瀏覽器使用的是 window.event
? 事件對象常用的屬性：
e.eventPhase 查看事件觸發(fā)時所處的階段
e.target 用于獲取觸發(fā)事件的元素
e.srcElement 用于獲取觸發(fā)事件的元素，低版本瀏覽器使用
e.currentTarget 用于獲取綁定事件的事件源元素
e.type 獲取事件類型
e.clientX/e.clientY 所有瀏覽器都支持，鼠標距離瀏覽器窗口左上角的距離
e.pageX/e.pageY IE8 以前不支持，鼠標距離整個HTML頁面左上頂點的距離
應(yīng)用：圖片跟隨鼠標移動案例
取消默認行為和阻止事件傳播的方式
? e.preventDefault() 取消默認行為
? e.returnValue 取消默認行為，低版本瀏覽器使用
? e.stopPropagation(); 阻止冒泡，標準方式
? e.cancelBubble = true; 阻止冒泡，IE 低版本，標準中已廢棄
偏移量屬性
? offsetParent 偏移參考父級，距離自己最近的有定位的父級，如果都沒有定位參考body(html)
? offsetLeft/offsetTop 偏移位置 參考父級border以內(nèi)
? offsetWidth/offsetHeight 偏移大小 自身border以內(nèi)的大小
偏移量屬性：
客戶端大小
? client 系列沒有參考父級元素。
? clientLeft/clientTop 邊框區(qū)域尺寸，不常用
? clientWidth/clientHeight 邊框內(nèi)部大小
客戶端大?。?br>
滾動偏移屬性
? scrollLeft/scrollTop 盒子內(nèi)部滾動出去的尺寸
? scrollWidth/scrollHeight 盒子內(nèi)容的寬度和高度
滾動偏移屬性：
BOM
BOM 的概念：
? BOM(Browser Object Model) 是指瀏覽器對象模型，瀏覽器對象模型提供了獨立于內(nèi)容的、可
以與瀏覽器窗口進行互動的對象結(jié)構(gòu)。BOM 由多個對象組成，其中代表瀏覽器窗口的 Window
對象是 BOM 的頂層對象，其他對象都是該對象的子對象。
? 我們在瀏覽器中的一些操作都可以使用BOM的方式進行編程處理，比如：刷新瀏覽器、后退、前
進、在瀏覽器中輸入URL等。
window 對象：
? window 是瀏覽器的頂級對象，當調(diào)用 window 下的屬性和方法時，可以省略 window。
? 注意：window下兩個特殊的屬性 window.name、window.top。
對話框
alert()
prompt()
confirm()
onload 事件
? 我們可以給 window 對象或者 <img> 等元素添加 onload 加載事件，表示只有綁定事件的元
素加載完畢才能觸發(fā)事件，才能執(zhí)行事件函數(shù)。如果有多張圖片直接去打印輸出box盒子的高度是零，因為元素沒有加載完，box盒子就沒有實際撐開的高度，所以直接獲取高度就是零
我們通過onload來實現(xiàn)獲取box盒子高度（一張圖片時）：
我們通過onload來實現(xiàn)獲取box盒子高度（多張圖片時）：
? 其中 window 對象加載完畢：指的是所有HTML結(jié)構(gòu)加載完（如果文檔多會有效率問題），并且外部引入資源（js、css、img、
視頻）也加載完畢。
應(yīng)用：
? 利用 window.onload 事件，可以將 js 代碼提前到 html 結(jié)構(gòu)之前。
? 注意：一個頁面中只能有一個 window.onload 事件。
延時器
? 延時器是 window 對象的一個方法，類似于定時炸彈
? 語法：window.setTimeout(func,time);
? 第一個參數(shù)：延時執(zhí)行的函數(shù)，可以是匿名函數(shù)定義，或者是一個函數(shù)名的引用，注意不要
加 () 。
? 第二個參數(shù)：延時的時間，以毫秒計數(shù)，1000 毫秒等于 1 秒。
? 功能：在指定的時間后，延遲執(zhí)行一個函數(shù)。
清除延時器
? window 對象的一個方法
? 語法：window.clearTimeout(timeout);
? 參數(shù)：指定的延時器變量名引用。
? 功能：清除指定的延時器。
? 注意：清除的延時器需要存儲到一個變量中，便于后期清除調(diào)用。
延時器-函數(shù)節(jié)流：
定時器
? 定時器是 window 對象的一個方法，相當于定時鬧鐘，每隔固定的時間響一次
? 語法：window.setInterval(func,interval);
? 第一個參數(shù)：每次執(zhí)行的函數(shù)，可以是匿名函數(shù)定義，或者是一個函數(shù)名的引用，注意不要
加 () 。
? 第二個參數(shù)：時間間隔，以毫秒計數(shù)，1000 毫秒等于 1 秒。
? 功能：每隔一個指定的時間，周期性的執(zhí)行一個函數(shù)。
清除定時器
? window 對象的一個方法
? 語法：window.clearInterval(timer);
? 參數(shù)：指定的定時器變量名引用。
? 功能：清除指定的定時器。
? 注意：清除的定時器需要存儲到一個變量中，便于后期清除調(diào)用。
簡單運動
? 簡單運動：是一種視覺暫留效果，只要元素變化過程時間夠短，給人眼造成的效果就是一個
運動的效果，人眼的視覺殘留的時間 0.1-0.4 秒之間。
? 制作方法：通過定時器，實現(xiàn)每隔一個極短的時間（50-100 毫秒左右），執(zhí)行函數(shù)，函數(shù)
內(nèi)部讓運動的屬性值發(fā)生變化。
提高運動速度的方法：
? 1、縮短時間間隔，增加了每秒移動的次數(shù)。
? 2、加大步長，讓每一次走的步長增加。
清除定時器的問題
問題 1
? 將定時器的開始和停止過程書寫在不同的事件函數(shù)內(nèi)部，容易出現(xiàn)用戶錯誤點擊情況
1、多次點擊開始，會造成加速
2、多次點擊開始，不能夠再停止
解決方法：
? 設(shè)表先關(guān)
? 每次開啟新定時器之前，都清除一次前面的定時器
問題 2：
? 需求：要求元素走到指定位置停止，例如讓元素停止在 500px 的位置.
? 問題：如果步長設(shè)置的不合理，停止的位置可能不是正好在 500 處。
解決方法：
? 拉終停表
? 在定時器內(nèi)部每次都要判斷是否走到了終點，要不要停止定時器
? 如果走到或超過了終點，強行拉到重點，并停止定時器
問題 3:
? 需求：在規(guī)定時間內(nèi)讓元素走到規(guī)定的結(jié)束位置，時間間隔可以更改
? 例如：讓元素在 2 秒鐘內(nèi)，left 屬性從 0 走到 500px.
解決方法:
? 步標整除
? 總距離 = 步長 * 次數(shù)；
? 時間間隔自定義，總時長固定
? 求出總次數(shù) = 總時間 / 時間間隔
? 定義計數(shù)器變量，每執(zhí)行一次定時器函數(shù)增加計數(shù) 1，直到執(zhí)行達到總次數(shù)，停止定時器
location 對象的成員
? 使用 chrome 的控制臺查看
? 成員：
? assign()/reload()/replace()
? hash/host/hostname/search/href……
URL
? 統(tǒng)一資源定位符 (Uniform Resource Locator, URL)
? URL的組成：scheme://host:port/path?query#fragment
? 例如：
http://www.lagou.com:80/a/b/index.html?name=zs&age=18#bottom? scheme:通信協(xié)議，常用的http,ftp,maito等
? host:主機，服務(wù)器(計算機)域名系統(tǒng) (DNS) 主機名或 IP 地址。
? port:端口號，整數(shù)，可選，省略時使用方案的默認端口，如http的默認端口為80。
? path:路徑，由零或多個'/'符號隔開的字符串，一般用來表示主機上的一個目錄或文件地址。
? query:查詢，可選，用于給動態(tài)網(wǎng)頁傳遞參數(shù)，可有多個參數(shù)，用'&'符號隔開，每個參數(shù)
的名和值用'='符號隔開。例如：name=zs
? fragment:信息片斷，字符串，錨點.
history 對象
? history 對象是 window 對象下的一個屬性，使用的時候可以省略 window 對象
? history 對象可以與瀏覽器歷史記錄進行交互，瀏覽器歷史記錄是對用戶所訪問的頁面按時
間順序進行的記錄和保存。
? back()
? forward()
? go()
在線咨詢
