當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript高级笔记

發(fā)布時間：2024/1/23 javascript 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript高级笔记小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

今日內(nèi)容：

1. JavaScript：1. ECMAScript：2. BOM：3. DOM：1. 事件

DOM簡單學(xué)習(xí)：為了滿足案例要求

* 功能：控制html文檔的內(nèi)容 * 獲取頁面標(biāo)簽(元素)對象：Element* document.getElementById("id值"):通過元素的id獲取元素對象* 操作Element對象：1. 修改屬性值：1. 明確獲取的對象是哪一個？2. 查看API文檔，找其中有哪些屬性可以設(shè)置2. 修改標(biāo)簽體內(nèi)容：* 屬性：innerHTML1. 獲取元素對象2. 使用innerHTML屬性修改標(biāo)簽體內(nèi)容

事件簡單學(xué)習(xí)

* 功能：某些組件被執(zhí)行了某些操作后，觸發(fā)某些代碼的執(zhí)行。* 造句： xxx被xxx,我就xxx* 我方水晶被摧毀后，我就責(zé)備對友。* 敵方水晶被摧毀后，我就夸獎自己。* 如何綁定事件1. 直接在html標(biāo)簽上，指定事件的屬性(操作)，屬性值就是js代碼1. 事件：onclick--- 單擊事件2. 通過js獲取元素對象，指定事件屬性，設(shè)置一個函數(shù)* 代碼：<body><img id="light" src="img/off.gif" onclick="fun();"><img id="light2" src="img/off.gif"><script>function fun(){alert('我被點了');alert('我又被點了');}function fun2(){alert('咋老點我？');}//1.獲取light2對象var light2 = document.getElementById("light2");//2.綁定事件light2.onclick = fun2;</script></body>* 案例1：電燈開關(guān)<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>電燈開關(guān)</title></head><body><img id="light" src="img/off.gif"><script>/*分析：1.獲取圖片對象2.綁定單擊事件3.每次點擊切換圖片* 規(guī)則：* 如果燈是開的 on,切換圖片為 off* 如果燈是關(guān)的 off,切換圖片為 on* 使用標(biāo)記flag來完成*///1.獲取圖片對象var light = document.getElementById("light");var flag = false;//代表燈是滅的。 off圖片//2.綁定單擊事件light.onclick = function(){if(flag){//判斷如果燈是開的，則滅掉light.src = "img/off.gif";flag = false;}else{//如果燈是滅的，則打開light.src = "img/on.gif";flag = true;}}</script></body></html>

BOM:

1. 概念：Browser Object Model 瀏覽器對象模型* 將瀏覽器的各個組成部分封裝成對象。2. 組成：* Window：窗口對象* Navigator：瀏覽器對象* Screen：顯示器屏幕對象* History：歷史記錄對象* Location：地址欄對象3. Window：窗口對象1. 創(chuàng)建2. 方法1. 與彈出框有關(guān)的方法：alert() 顯示帶有一段消息和一個確認(rèn)按鈕的警告框。confirm() 顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對話框。* 如果用戶點擊確定按鈕，則方法返回true* 如果用戶點擊取消按鈕，則方法返回falseprompt() 顯示可提示用戶輸入的對話框。* 返回值：獲取用戶輸入的值2. 與打開關(guān)閉有關(guān)的方法：close() 關(guān)閉瀏覽器窗口。* 誰調(diào)用我，我關(guān)誰open() 打開一個新的瀏覽器窗口* 返回新的Window對象3. 與定時器有關(guān)的方式setTimeout() 在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達(dá)式。* 參數(shù)：1. js代碼或者方法對象2. 毫秒值* 返回值：唯一標(biāo)識，用于取消定時器clearTimeout() 取消由 setTimeout() 方法設(shè)置的 timeout。setInterval() 按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達(dá)式。clearInterval() 取消由 setInterval() 設(shè)置的 timeout。3. 屬性：1. 獲取其他BOM對象：historylocationNavigatorScreen:2. 獲取DOM對象document4. 特點* Window對象不需要創(chuàng)建可以直接使用 window使用。 window.方法名();* window引用可以省略。方法名();4. Location：地址欄對象1. 創(chuàng)建(獲取)：1. window.location2. location2. 方法：* reload() 重新加載當(dāng)前文檔。刷新3. 屬性* href 設(shè)置或返回完整的 URL。5. History：歷史記錄對象1. 創(chuàng)建(獲取)：1. window.history2. history2. 方法：* back() 加載 history 列表中的前一個 URL。* forward() 加載 history 列表中的下一個 URL。* go(參數(shù)) 加載 history 列表中的某個具體頁面。* 參數(shù)：* 正數(shù)：前進(jìn)幾個歷史記錄* 負(fù)數(shù)：后退幾個歷史記錄3. 屬性：* length 返回當(dāng)前窗口歷史列表中的 URL 數(shù)量。

DOM：

* 概念： Document Object Model 文檔對象模型* 將標(biāo)記語言文檔的各個組成部分，封裝為對象。可以使用這些對象，對標(biāo)記語言文檔進(jìn)行CRUD的動態(tài)操作* W3C DOM 標(biāo)準(zhǔn)被分為 3 個不同的部分：* 核心 DOM - 針對任何結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)模型* Document：文檔對象* Element：元素對象* Attribute：屬性對象* Text：文本對象* Comment:注釋對象* Node：節(jié)點對象，其他5個的父對象* XML DOM - 針對 XML 文檔的標(biāo)準(zhǔn)模型* HTML DOM - 針對 HTML 文檔的標(biāo)準(zhǔn)模型* 核心DOM模型：* Document：文檔對象1. 創(chuàng)建(獲取)：在html dom模型中可以使用window對象來獲取1. window.document2. document2. 方法：1. 獲取Element對象：1. getElementById() ：根據(jù)id屬性值獲取元素對象。id屬性值一般唯一2. getElementsByTagName()：根據(jù)元素名稱獲取元素對象們。返回值是一個數(shù)組3. getElementsByClassName():根據(jù)Class屬性值獲取元素對象們。返回值是一個數(shù)組4. getElementsByName(): 根據(jù)name屬性值獲取元素對象們。返回值是一個數(shù)組2. 創(chuàng)建其他DOM對象：createAttribute(name)createComment()createElement()createTextNode()3. 屬性* Element：元素對象1. 獲取/創(chuàng)建：通過document來獲取和創(chuàng)建2. 方法：1. removeAttribute()：刪除屬性2. setAttribute()：設(shè)置屬性* Node：節(jié)點對象，其他5個的父對象* 特點：所有dom對象都可以被認(rèn)為是一個節(jié)點* 方法：* CRUD dom樹：* appendChild()：向節(jié)點的子節(jié)點列表的結(jié)尾添加新的子節(jié)點。* removeChild() ：刪除（并返回）當(dāng)前節(jié)點的指定子節(jié)點。* replaceChild()：用新節(jié)點替換一個子節(jié)點。* 屬性：* parentNode 返回節(jié)點的父節(jié)點。* HTML DOM1. 標(biāo)簽體的設(shè)置和獲取：innerHTML2. 使用html元素對象的屬性3. 控制元素樣式1. 使用元素的style屬性來設(shè)置如：//修改樣式方式1div1.style.border = "1px solid red";div1.style.width = "200px";//font-size--> fontSizediv1.style.fontSize = "20px";2. 提前定義好類選擇器的樣式，通過元素的className屬性來設(shè)置其class屬性值。

事件監(jiān)聽機(jī)制：

* 概念：某些組件被執(zhí)行了某些操作后，觸發(fā)某些代碼的執(zhí)行。 * 事件：某些操作。如：單擊，雙擊，鍵盤按下了，鼠標(biāo)移動了* 事件源：組件。如：按鈕文本輸入框...* 監(jiān)聽器：代碼。* 注冊監(jiān)聽：將事件，事件源，監(jiān)聽器結(jié)合在一起。當(dāng)事件源上發(fā)生了某個事件，則觸發(fā)執(zhí)行某個監(jiān)聽器代碼。* 常見的事件：1. 點擊事件：1. onclick：單擊事件2. ondblclick：雙擊事件2. 焦點事件1. onblur：失去焦點2. onfocus:元素獲得焦點。3. 加載事件：1. onload：一張頁面或一幅圖像完成加載。4. 鼠標(biāo)事件：1. onmousedown 鼠標(biāo)按鈕被按下。2. onmouseup 鼠標(biāo)按鍵被松開。3. onmousemove 鼠標(biāo)被移動。4. onmouseover 鼠標(biāo)移到某元素之上。5. onmouseout 鼠標(biāo)從某元素移開。5. 鍵盤事件：1. onkeydown 某個鍵盤按鍵被按下。 2. onkeyup 某個鍵盤按鍵被松開。3. onkeypress 某個鍵盤按鍵被按下并松開。6. 選擇和改變1. onchange 域的內(nèi)容被改變。2. onselect 文本被選中。7. 表單事件：1. onsubmit 確認(rèn)按鈕被點擊。2. onreset 重置按鈕被點擊。

總結(jié)

以上是生活随笔為你收集整理的JavaScript高级笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。