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

下載本文檔

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

文檔簡(jiǎn)介

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

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

location對(duì)象既是window對(duì)象的屬性，同時(shí)也是document對(duì)象的屬性

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

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

Window對(duì)象方法

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

13.1BOM對(duì)象屬性說(shuō)明document引用當(dāng)前窗口中的DOM文檔location引用當(dāng)前窗口的location對(duì)象navigator引用當(dāng)前窗口的navigator對(duì)象history引用當(dāng)前窗口的history對(duì)象screen引用當(dāng)前窗口的screen對(duì)象

Window對(duì)象屬性

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

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

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

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

13.2DOM對(duì)象DOM模型的相關(guān)概念解析文檔生成DOM樹(shù)的過(guò)程<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樹(shù)結(jié)構(gòu)是什么？DOM模型的相關(guān)概念

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

13.2DOM對(duì)象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é)合支持的編程語(yǔ)言訪問(wèn)DOM樹(shù)，如Java、JavaScript、C#等

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

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

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

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

13.2DOM對(duì)象

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

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

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

13.2DOM對(duì)象訪問(wèn)節(jié)點(diǎn)

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

13.2DOM對(duì)象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)。每個(gè)元素、屬性和文本都有一個(gè)父節(jié)點(diǎn)。childNodes：節(jié)點(diǎn)的孩子節(jié)點(diǎn)列表。對(duì)于HTML，該列表僅對(duì)元素有意義，文本節(jié)點(diǎn)和屬性節(jié)點(diǎn)都沒(méi)有孩子。firstChild：childNodes列表中第一個(gè)節(jié)點(diǎn)的快捷方式。lastChild：childNodes列表中最后一個(gè)節(jié)點(diǎn)的快捷方式。previousSibling：獲得上一個(gè)兄弟節(jié)點(diǎn)。nextSibling：類似于previousSibling屬性，返回下一個(gè)兄弟節(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)建個(gè)節(jié)點(diǎn)，然后設(shè)置屬性，最后插入節(jié)點(diǎn)克隆圖片節(jié)點(diǎn)，然后追加插入到文檔id屬性：sixty1

13.2DOM對(duì)象任務(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)建一個(gè)節(jié)點(diǎn)，然后替換原節(jié)點(diǎn)

13.2DOM對(duì)象

下拉菜單下拉菜單效果

13.2DOM對(duì)象簡(jiǎn)易留言版

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

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

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

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

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

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

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

]

ta

溫馨提示

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

評(píng)論

0/150

提交評(píng)論