當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript高级笔记
生活随笔
收集整理的這篇文章主要介紹了
JavaScript高级笔记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
今日內容:
1. JavaScript:1. ECMAScript:2. BOM:3. DOM:1. 事件DOM簡單學習:為了滿足案例要求
* 功能:控制html文檔的內容 * 獲取頁面標簽(元素)對象:Element* document.getElementById("id值"):通過元素的id獲取元素對象* 操作Element對象:1. 修改屬性值:1. 明確獲取的對象是哪一個?2. 查看API文檔,找其中有哪些屬性可以設置2. 修改標簽體內容:* 屬性:innerHTML1. 獲取元素對象2. 使用innerHTML屬性修改標簽體內容事件簡單學習
* 功能: 某些組件被執行了某些操作后,觸發某些代碼的執行。* 造句: xxx被xxx,我就xxx* 我方水晶被摧毀后,我就責備對友。* 敵方水晶被摧毀后,我就夸獎自己。* 如何綁定事件1. 直接在html標簽上,指定事件的屬性(操作),屬性值就是js代碼1. 事件:onclick--- 單擊事件2. 通過js獲取元素對象,指定事件屬性,設置一個函數* 代碼:<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:電燈開關<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>電燈開關</title></head><body><img id="light" src="img/off.gif"><script>/*分析:1.獲取圖片對象2.綁定單擊事件3.每次點擊切換圖片* 規則:* 如果燈是開的 on,切換圖片為 off* 如果燈是關的 off,切換圖片為 on* 使用標記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. 創建2. 方法1. 與彈出框有關的方法:alert() 顯示帶有一段消息和一個確認按鈕的警告框。confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。* 如果用戶點擊確定按鈕,則方法返回true* 如果用戶點擊取消按鈕,則方法返回falseprompt() 顯示可提示用戶輸入的對話框。* 返回值:獲取用戶輸入的值2. 與打開關閉有關的方法:close() 關閉瀏覽器窗口。* 誰調用我 ,我關誰open() 打開一個新的瀏覽器窗口* 返回新的Window對象3. 與定時器有關的方式setTimeout() 在指定的毫秒數后調用函數或計算表達式。* 參數:1. js代碼或者方法對象2. 毫秒值* 返回值:唯一標識,用于取消定時器clearTimeout() 取消由 setTimeout() 方法設置的 timeout。setInterval() 按照指定的周期(以毫秒計)來調用函數或計算表達式。clearInterval() 取消由 setInterval() 設置的 timeout。3. 屬性:1. 獲取其他BOM對象:historylocationNavigatorScreen:2. 獲取DOM對象document4. 特點* Window對象不需要創建可以直接使用 window使用。 window.方法名();* window引用可以省略。 方法名();4. Location:地址欄對象1. 創建(獲取):1. window.location2. location2. 方法:* reload() 重新加載當前文檔。刷新3. 屬性* href 設置或返回完整的 URL。5. History:歷史記錄對象1. 創建(獲取):1. window.history2. history2. 方法:* back() 加載 history 列表中的前一個 URL。* forward() 加載 history 列表中的下一個 URL。* go(參數) 加載 history 列表中的某個具體頁面。* 參數:* 正數:前進幾個歷史記錄* 負數:后退幾個歷史記錄3. 屬性:* length 返回當前窗口歷史列表中的 URL 數量。DOM:
* 概念: Document Object Model 文檔對象模型* 將標記語言文檔的各個組成部分,封裝為對象。可以使用這些對象,對標記語言文檔進行CRUD的動態操作* W3C DOM 標準被分為 3 個不同的部分:* 核心 DOM - 針對任何結構化文檔的標準模型* Document:文檔對象* Element:元素對象* Attribute:屬性對象* Text:文本對象* Comment:注釋對象* Node:節點對象,其他5個的父對象* XML DOM - 針對 XML 文檔的標準模型* HTML DOM - 針對 HTML 文檔的標準模型* 核心DOM模型:* Document:文檔對象1. 創建(獲取):在html dom模型中可以使用window對象來獲取1. window.document2. document2. 方法:1. 獲取Element對象:1. getElementById() : 根據id屬性值獲取元素對象。id屬性值一般唯一2. getElementsByTagName():根據元素名稱獲取元素對象們。返回值是一個數組3. getElementsByClassName():根據Class屬性值獲取元素對象們。返回值是一個數組4. getElementsByName(): 根據name屬性值獲取元素對象們。返回值是一個數組2. 創建其他DOM對象:createAttribute(name)createComment()createElement()createTextNode()3. 屬性* Element:元素對象1. 獲取/創建:通過document來獲取和創建2. 方法:1. removeAttribute():刪除屬性2. setAttribute():設置屬性* Node:節點對象,其他5個的父對象* 特點:所有dom對象都可以被認為是一個節點* 方法:* CRUD dom樹:* appendChild():向節點的子節點列表的結尾添加新的子節點。* removeChild() :刪除(并返回)當前節點的指定子節點。* replaceChild():用新節點替換一個子節點。* 屬性:* parentNode 返回節點的父節點。* HTML DOM1. 標簽體的設置和獲取:innerHTML2. 使用html元素對象的屬性3. 控制元素樣式1. 使用元素的style屬性來設置如://修改樣式方式1div1.style.border = "1px solid red";div1.style.width = "200px";//font-size--> fontSizediv1.style.fontSize = "20px";2. 提前定義好類選擇器的樣式,通過元素的className屬性來設置其class屬性值。事件監聽機制:
* 概念:某些組件被執行了某些操作后,觸發某些代碼的執行。 * 事件:某些操作。如: 單擊,雙擊,鍵盤按下了,鼠標移動了* 事件源:組件。如: 按鈕 文本輸入框...* 監聽器:代碼。* 注冊監聽:將事件,事件源,監聽器結合在一起。 當事件源上發生了某個事件,則觸發執行某個監聽器代碼。* 常見的事件:1. 點擊事件:1. onclick:單擊事件2. ondblclick:雙擊事件2. 焦點事件1. onblur:失去焦點2. onfocus:元素獲得焦點。3. 加載事件:1. onload:一張頁面或一幅圖像完成加載。4. 鼠標事件:1. onmousedown 鼠標按鈕被按下。2. onmouseup 鼠標按鍵被松開。3. onmousemove 鼠標被移動。4. onmouseover 鼠標移到某元素之上。5. onmouseout 鼠標從某元素移開。5. 鍵盤事件:1. onkeydown 某個鍵盤按鍵被按下。 2. onkeyup 某個鍵盤按鍵被松開。3. onkeypress 某個鍵盤按鍵被按下并松開。6. 選擇和改變1. onchange 域的內容被改變。2. onselect 文本被選中。7. 表單事件:1. onsubmit 確認按鈕被點擊。2. onreset 重置按鈕被點擊。總結
以上是生活随笔為你收集整理的JavaScript高级笔记的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: JavaScript基础笔记
- 下一篇: ASP.net试卷