Web前端開發 課件 第13章 JavaScript進階_第1頁
Web前端開發 課件 第13章 JavaScript進階_第2頁
Web前端開發 課件 第13章 JavaScript進階_第3頁
Web前端開發 課件 第13章 JavaScript進階_第4頁
Web前端開發 課件 第13章 JavaScript進階_第5頁
已閱讀5頁，還剩33頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第13章JavaScript進階主講教師：朱鐵櫻《Web前端開發》

13.1BOM對象瀏覽器對象模型（BrowserObjectModel，簡稱BOM）提供了與瀏覽器交互的對象和接口，允許開發者操作瀏覽器窗口、導航、歷史記錄、定位等。用戶在瀏覽器中打開一個頁面時，瀏覽器就會自動創建一些對象這些對象存放了瀏覽器窗口的屬性和其他相關信息，被稱為瀏覽器對象瀏覽器對象模型BOM的分層結構Window是BOM的頂級對象每個層次上的對象都是其父對象的屬性，可以通過“父對象.子對象”的方式訪問，例如window.document特殊：document對象既是BOM頂級對象window的一個屬性，也是DOM模型中的頂級對象；

location對象既是window對象的屬性，同時也是document對象的屬性

13.1BOM對象屬性描述及作用window窗體對象。表示瀏覽器中打開的窗口。若html文檔包含框架(frame)，瀏覽器會為每個框架創建一個額外的window對象。是BOM的頂層對象。document也稱為DOM對象，是HTML頁面當前窗體的內容，同時也是JavaScript重要組成部分之一。navigator用于獲取瀏覽器的相關數據，例如瀏覽器的名稱、版本等，也稱為瀏覽器的嗅探器。screen可獲取與屏幕相關的數據，例如屏幕的分辨率等。history主要用于記錄瀏覽器的訪問歷史記錄，也就是瀏覽網頁的前進與后退功能。location用于獲取當前瀏覽器中URL地址欄內的相關數據frames窗口中所有命名的框架。是window對象的數組BOM的主要對象描述

13.1BOM對象方法說明alert(message)顯示一個包含指定消息和OK按鈕的警告框。confirm(message)顯示一個包含指定消息和OK及取消按鈕的確認框。prompt(message,default)顯示一個包含指定消息、文本輸入字段和OK及取消按鈕的提示框。open(URL,name,specs,replace)打開一個新的瀏覽器窗口或查找一個已命名的窗口。close()關閉當前窗口。setTimeout(function,delay)和setInterval(function,delay)用于在指定的毫秒數后執行函數，或定期執行函數。clearTimeout(id)和clearInterval(id)取消由setTimeout()或setInterval()設置的延遲或間隔。

Window對象方法

13.1BOM對象任務1：打開新窗口functionopenwindow(){ window.open(“http：//"，""，"toolbars=0，scrollbars=0，location=0，statusbars=0，menubars=0，resizable=0，width=780，height=248"); }示例<bodyonload="openwindow()">

13.1BOM對象屬性說明document引用當前窗口中的DOM文檔location引用當前窗口的location對象navigator引用當前窗口的navigator對象history引用當前窗口的history對象screen引用當前窗口的screen對象

Window對象屬性

13.1BOM對象window的常用方法-對話框alert()：彈出警告框。方法只接收一個參數，即要顯示給用戶的文本，瀏覽器將創建一個具有確定按鈕的系統消息框confirm()：彈出確認框。方法只接收一個參數，即要顯示的文本，瀏覽器創建一個具有“確定”按鈕和“取消”按鈕的系統消息框prompt()：彈出提示輸入框。提示用戶輸入某些信息，接受兩個參數，即要顯示給用戶的文本和文本框中的默認文本。如果單擊“確定”按鈕，將文本框中的值作為函數值返回；如果單擊“取消”按鈕，返回空值以上3種都是模態對話框(也稱模式對話框)，彈出后用戶必須響應，單擊【確定】或【取消】按鈕將其關閉，否則不能操作瀏覽器其他對象

13.1BOM對象Location對象：提供了與當前窗口加載文檔相關的URL信息及URL解析和重定向方法。Location對象用于獲取或設置當前文檔的URL，并提供了與URL相關的屬性和方法。方法說明assign(URL)加載新的文檔。reload([forceReload])重新加載當前文檔。replace(URL)用新的文檔替換當前文檔，不會在歷史記錄中生成新的條目。屬性說明href獲取或設置完整的URL。protocol獲取或設置URL的協議部分（如"http："）。hostname獲取或設置URL的主機名部分（如http：//"）。port獲取或設置URL的端口號（默認為空字符串）。pathname獲取或設置URL的路徑名部分（如"/page.html"）。search獲取或設置URL的查詢字符串部分（如"?key=value"）。hash獲取或設置URL的片段標識符部分（如"#section"）。

13.1BOM對象Location對象屬性Location對象方法在頁面中如圖1所示，單擊“點擊選擇”，彈出一個寬100像素，高200像素的頁面，如圖2所示，選擇其中的一個內容，相應的值會返回到前一個頁面，如圖3所示練習圖1初始頁面圖2彈出頁面圖3返回值頁面

13.1BOM對象任務2實現頁面間數據傳遞什么是DOM？文檔對象模型（DocumentObjectModel）通過DOM可以動態改變文檔內容動態改變文檔內容的原理解析文檔（如HTML）并生成DOM樹通過DOM標準接口+編程語言改變文檔內容

13.2DOM對象DOM模型的相關概念解析文檔生成DOM樹的過程<html><head><title>DOM節點</title></head><body>

<imgsrc="images/fruit.jpg"alt="圖片"id="s1"/>

<h1>喜歡的水果</h1>

<p>DOM應用</p></body></html>生成的DOM樹結構是什么？DOM模型的相關概念

13.2DOM對象DOM樹中的節點類型和節點關系文檔節點document元素節點文本節點…..屬性節點父子關系同級關系

13.2DOM對象DOM模型的相關概念src屬性W3C規定的三類DOM標準接口CoreDOM（核心DOM），適用于各種結構化文檔XMLDOM，專用于XML文檔HTMLDOM，專用于HTML文檔選用DOM標準接口，結合支持的編程語言訪問DOM樹，如Java、JavaScript、C#等

13.2DOM對象DOM是DocumentObjectModel的縮寫，即文檔對象模型，DOM提供了網頁編程的接口，可以利用DOM對網頁上的元素進行管理，從而實現動態交互效果。

13.2DOM對象屬性描述body提供對<body>元素的直接訪問。對于定義了框架集的文檔，該屬性引用最外層的<frameset>cookie設置或返回與當前文檔有關的所有cookiedomain返回當前文檔的域名lastModified返回文檔被左后修改的日期和時間referrer返回載入當前文檔的文檔的URLtitle返回當前文檔的標題URL返回當前文檔的URLdocument對象的常用屬性每隔兩秒鐘切換網頁標題練習

13.2DOM對象任務3：網頁標題交替顯示不同效果方法說明close()關閉用document.open()方法打開的輸出流，并顯示選定的數據getElementById()返回對擁有指定id的第一個對象的引用getElementsByName返回帶有指定名稱的對象集合getElementsByTagName返回帶有指定標簽名的對象集合querySelector用于返回指定CSS選擇器的元素，當滿足條件的有多個時，只返回第一個元素querySelectorAll返回指定CSS選擇器的元素集合open打開一個流，以收集來自任何document.write()或document.write()方法的輸出write向文檔寫HTML表達式或JavaScript代碼writeLn()等同于write()方法，不同的是在每個表達式之后寫一個換行符document對象的常用方法

13.2DOM對象訪問節點（1）訪問指定節點的方法getElementById()：返回一個節點對象getElementsByName()：返回多個（節點數組）getElementsByTagName()：返回多個（節點數組）

13.2DOM對象

13.2DOM對象任務4制作復選框全選效果查看/修改屬性節點（2）查看/修改屬性節點getAttribute(“屬性名”)：用來獲取屬性的值setAttribute(“屬性名”,“屬性值”)：用來設置屬性的值removeAttribute('屬性')”：移除屬性值

13.2DOM對象任務5選擇喜歡的水果練習

13.2DOM對象訪問節點：使用getAttribute讀取節點querySelector方法用于返回指定CSS選擇器的元素，當滿足條件的有多個時，只返回第一個元素例如：varbtn=document.querySelector(“#btnId”);querySelectorAll方法返回指定CSS選擇器的元素集合例如：varspan=document.querySelectorAll(“.base”);

13.2DOM對象訪問節點

13.2DOM對象訪問節點：使用querySelector訪問節點DOM節點屬性

13.2DOM對象DOM節點分為：文檔節點、元素節點、屬性節點和文本節點。節點屬性：nodeName：節點名稱。nodeValue：節點的值。parentNode：節點的父節點。每個元素、屬性和文本都有一個父節點。childNodes：節點的孩子節點列表。對于HTML，該列表僅對元素有意義，文本節點和屬性節點都沒有孩子。firstChild：childNodes列表中第一個節點的快捷方式。lastChild：childNodes列表中最后一個節點的快捷方式。previousSibling：獲得上一個兄弟節點。nextSibling：類似于previousSibling屬性，返回下一個兄弟節點。attributes：僅用于元素節點，返回元素的屬性列表。創建和增加節點的方法createElement（）：創建節點appendChild（）：末尾追加方式插入節點insertBefore（）：在指定節點前插入新節點cloneNode（）：克隆節點創建和增加節點先創建個節點，然后設置屬性，最后插入節點克隆圖片節點，然后追加插入到文檔id屬性：sixty1

13.2DOM對象任務6創建和增加節點刪除和替換節點的方法removeChild（）：刪除節點replaceChild()：替換節點刪除和替換節點id屬性：sixty1先創建一個節點，然后替換原節點

13.2DOM對象

下拉菜單下拉菜單效果

13.2DOM對象簡易留言版

13.2DOM對象添加留言排他思想，簡單理解就是排除掉其他的（包括自己），然后再給自己設置想要實現的效果?？偠灾?，排他思想的實現步驟就是所有元素全部清除，

設置當前元素。

13.2DOM對象排他操作排他思想當表格中的單元格比較多時，可以在用戶鼠標指針經過時把當前行添加背景色，使表格內容顯得清晰和一目了然，容易閱讀。使用鼠標指針經過事件onmouseover和鼠標指針離開事件onmouseout實現案例效果。

鼠標指針經過時背景變色

13.2DOM對象背景變色效果Tab欄切換標簽欄在網站中的使用非常普遍，它的優勢在于可以在有限的空間內展示多塊的內容，用戶可以通過單擊標簽在多個內容塊之間進行切換。

13.2DOM對象標簽欄默認效果標簽欄切換效果HTMLDOM對象的屬性訪問HTMLDOM的特有對象和操作

13.2DOM對象思路分析1、使用CoreDOM標準操作獲取表格對象2、使用HTMLDOM的table相關對象的屬性、方法、事件操作表格使用HTMLDOM如何實現？類別名稱描述屬性rows[]返回包含表格中所有行的一個數組方法insertRow()在表格中插入一個新行deleteRow()從表格中刪除一行……代碼片段……tableObject.rows[

]

ta

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論