Web前端開發(fā) 課件 第13章 JavaScript進(jìn)階_第1頁
Web前端開發(fā) 課件 第13章 JavaScript進(jìn)階_第2頁
Web前端開發(fā) 課件 第13章 JavaScript進(jìn)階_第3頁
Web前端開發(fā) 課件 第13章 JavaScript進(jìn)階_第4頁
Web前端開發(fā) 課件 第13章 JavaScript進(jìn)階_第5頁
已閱讀5頁，還剩33頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

第13章JavaScript進(jìn)階主講教師：朱鐵櫻《Web前端開發(fā)》

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

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

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

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

Window對象方法

13.1BOM對象任務(wù)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引用當(dāng)前窗口中的DOM文檔location引用當(dāng)前窗口的location對象navigator引用當(dāng)前窗口的navigator對象history引用當(dāng)前窗口的history對象screen引用當(dāng)前窗口的screen對象

Window對象屬性

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

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

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

13.1BOM對象任務(wù)2實(shí)現(xiàn)頁面間數(shù)據(jù)傳遞什么是DOM？文檔對象模型（DocumentObjectModel）通過DOM可以動態(tài)改變文檔內(nèi)容動態(tài)改變文檔內(nèi)容的原理解析文檔（如HTML）并生成DOM樹通過DOM標(biāo)準(zhǔn)接口+編程語言改變文檔內(nèi)容

13.2DOM對象DOM模型的相關(guān)概念解析文檔生成DOM樹的過程<html><head><title>DOM節(jié)點(diǎn)</title></head><body>

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

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

<p>DOM應(yīng)用</p></body></html>生成的DOM樹結(jié)構(gòu)是什么？DOM模型的相關(guān)概念

13.2DOM對象DOM樹中的節(jié)點(diǎn)類型和節(jié)點(diǎn)關(guān)系文檔節(jié)點(diǎn)document元素節(jié)點(diǎn)文本節(jié)點(diǎn)…..屬性節(jié)點(diǎn)父子關(guān)系同級關(guān)系

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

13.2DOM對象DOM是DocumentObjectModel的縮寫，即文檔對象模型，DOM提供了網(wǎng)頁編程的接口，可以利用DOM對網(wǎng)頁上的元素進(jìn)行管理，從而實(shí)現(xiàn)動態(tài)交互效果。

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

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

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

13.2DOM對象

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

13.2DOM對象任務(wù)5選擇喜歡的水果練習(xí)

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

13.2DOM對象訪問節(jié)點(diǎn)

13.2DOM對象訪問節(jié)點(diǎn)：使用querySelector訪問節(jié)點(diǎn)DOM節(jié)點(diǎn)屬性

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

13.2DOM對象任務(wù)6創(chuàng)建和增加節(jié)點(diǎn)刪除和替換節(jié)點(diǎn)的方法removeChild（）：刪除節(jié)點(diǎn)replaceChild()：替換節(jié)點(diǎn)刪除和替換節(jié)點(diǎn)id屬性：sixty1先創(chuàng)建一個節(jié)點(diǎn)，然后替換原節(jié)點(diǎn)

13.2DOM對象

下拉菜單下拉菜單效果

13.2DOM對象簡易留言版

13.2DOM對象添加留言排他思想，簡單理解就是排除掉其他的（包括自己），然后再給自己設(shè)置想要實(shí)現(xiàn)的效果?？偠灾潘枷氲膶?shí)現(xiàn)步驟就是所有元素全部清除，

設(shè)置當(dāng)前元素。

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

鼠標(biāo)指針經(jīng)過時背景變色

13.2DOM對象背景變色效果Tab欄切換標(biāo)簽欄在網(wǎng)站中的使用非常普遍，它的優(yōu)勢在于可以在有限的空間內(nèi)展示多塊的內(nèi)容，用戶可以通過單擊標(biāo)簽在多個內(nèi)容塊之間進(jìn)行切換。

13.2DOM對象標(biāo)簽欄默認(rèn)效果標(biāo)簽欄切換效果HTMLDOM對象的屬性訪問HTMLDOM的特有對象和操作

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

]

ta

溫馨提示

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

評論

0/150

提交評論