Web前端技術(shù) 課件 模塊四 任務(wù)2 主頁(yè)榜單鼠標(biāo)滑過(guò)功能實(shí)現(xiàn)_第1頁(yè)
Web前端技術(shù) 課件 模塊四 任務(wù)2 主頁(yè)榜單鼠標(biāo)滑過(guò)功能實(shí)現(xiàn)_第2頁(yè)
Web前端技術(shù) 課件 模塊四 任務(wù)2 主頁(yè)榜單鼠標(biāo)滑過(guò)功能實(shí)現(xiàn)_第3頁(yè)
Web前端技術(shù) 課件 模塊四 任務(wù)2 主頁(yè)榜單鼠標(biāo)滑過(guò)功能實(shí)現(xiàn)_第4頁(yè)
Web前端技術(shù) 課件 模塊四 任務(wù)2 主頁(yè)榜單鼠標(biāo)滑過(guò)功能實(shí)現(xiàn)_第5頁(yè)
已閱讀5頁(yè)，還剩21頁(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)介

主頁(yè)榜單鼠標(biāo)滑過(guò)功能實(shí)現(xiàn)Web前端技術(shù)主講老師：***延時(shí)符CONTENTS目錄01任務(wù)描述03知識(shí)點(diǎn)導(dǎo)圖02學(xué)習(xí)目標(biāo)

04相關(guān)知識(shí)05任務(wù)實(shí)施延時(shí)符任務(wù)描述延時(shí)符任務(wù)描述在頁(yè)面瀏覽過(guò)程中，常常會(huì)遇到鏈接文字或者按鈕的滑動(dòng)動(dòng)畫。例如在下面的頁(yè)面中鼠標(biāo)滑過(guò)歌曲名稱時(shí)，對(duì)應(yīng)的播放，加入歌曲列表和收藏按鈕就會(huì)出現(xiàn)；當(dāng)鼠標(biāo)滑出后，按鈕又會(huì)再次隱藏。又比如，當(dāng)鼠標(biāo)滑過(guò)播放按鈕時(shí)，按鈕也會(huì)發(fā)生顏色等變化；當(dāng)鼠標(biāo)滑出后，按鈕又會(huì)恢復(fù)到原來(lái)的樣式。下面，我們將學(xué)習(xí)如何使用JavaScript相關(guān)知識(shí)完成鼠標(biāo)滑過(guò)動(dòng)畫任務(wù)。效果如圖4-2-1所示。延時(shí)符學(xué)習(xí)目標(biāo)延時(shí)符學(xué)習(xí)目標(biāo)掌握外部使用JavaScript的方法；掌握DOM基礎(chǔ)知識(shí)，以及DOM對(duì)象獲取和操作HTML元素的方法；掌握J(rèn)avaScript中常用事件的使用方法；知識(shí)目標(biāo)能夠根據(jù)要求編寫JavaScript代碼實(shí)現(xiàn)鼠標(biāo)滑過(guò)動(dòng)畫功能；能夠通過(guò)DOM對(duì)象對(duì)html元素進(jìn)行操作；能夠使用外部JavaScript代碼的方法；技能目標(biāo)延時(shí)符培養(yǎng)分析問(wèn)題能力；培養(yǎng)自主學(xué)習(xí)能力；素養(yǎng)目標(biāo)知識(shí)點(diǎn)導(dǎo)圖延時(shí)符知識(shí)點(diǎn)導(dǎo)圖延時(shí)符相關(guān)知識(shí)延時(shí)符外部使用jsfor語(yǔ)句DOM簡(jiǎn)介獲取DOM操作DOM元素常用事件通過(guò)在前一個(gè)任務(wù)的學(xué)習(xí)，我們掌握了內(nèi)部JavaScript代碼的使用方法，由<script>...</script>包含的代碼就是JavaScript代碼，它將直接被瀏覽器執(zhí)行?，F(xiàn)在我們將學(xué)習(xí)第二種JavaScript代碼的使用方法，把JavaScript代碼放到一個(gè)單獨(dú)的.js文件，然后在HTML中通過(guò)<scriptsrc="..."></script>引入這個(gè)文件：JavaScript的使用：外部使用延時(shí)符1.<html>

2.<head>

3.

<script

src="js/abc.js"></script>

//使用外部JavaScript文件

abc.js4.</head>

5.<body>

6.

...

7.</body>

8.</html>

注意：每個(gè)html文件中可以多次使用<script></script>來(lái)使用JavaScript代碼。每對(duì)<script></script>只能是內(nèi)部或者外部使用JavaScript，而不能同時(shí)內(nèi)部和外部使用。JavaScript的使用：DOM基礎(chǔ)延時(shí)符DOM(DocumentObjectModel)譯為文檔對(duì)象模型，是HTML和XML文檔的API（應(yīng)用程序編程接口）。其中HTMLDOM定義了訪問(wèn)和操作HTML文檔的標(biāo)準(zhǔn)方法。DOM的最小組成單位叫做節(jié)點(diǎn)（node）。文檔的樹(shù)形結(jié)構(gòu)（DOM樹(shù)），就是由各種不同類型的節(jié)點(diǎn)組成。每個(gè)節(jié)點(diǎn)可以看作是文檔樹(shù)的一片葉子。通過(guò)觀察html代碼和對(duì)應(yīng)的DOM結(jié)構(gòu)圖，不難發(fā)現(xiàn)每一個(gè)html元素就是一個(gè)DOM樹(shù)形結(jié)構(gòu)中的節(jié)點(diǎn)（DOMNode）。一個(gè)文檔的所有節(jié)點(diǎn)，按照所在的層級(jí)，可以抽象成一種樹(shù)狀結(jié)構(gòu)。這種樹(shù)狀結(jié)構(gòu)就是DOM樹(shù)。它有一個(gè)頂層節(jié)點(diǎn)，下一層都是頂層節(jié)點(diǎn)的子節(jié)點(diǎn)，然后子節(jié)點(diǎn)又有自己的子節(jié)點(diǎn)，就這樣層層衍生出一個(gè)金字塔結(jié)構(gòu)，又像一棵樹(shù)。1.<html>

2.<head>

3.<title>文檔標(biāo)題</title>

4.</head>

5.<body>

6.<a

href=’’>我的鏈接</a>

7.<h1>我的標(biāo)題</h1>

8.</body>

9.</html>

JavaScript的使用：DOM基礎(chǔ)延時(shí)符瀏覽器原生提供document節(jié)點(diǎn)，代表整個(gè)文檔。文檔的第一層有兩個(gè)節(jié)點(diǎn)，第一個(gè)是文檔類型節(jié)點(diǎn)（<!doctypehtml>），第二個(gè)是HTML網(wǎng)頁(yè)的頂層容器標(biāo)簽<html>。后者構(gòu)成了樹(shù)結(jié)構(gòu)的根節(jié)點(diǎn)（rootnode），其他HTML標(biāo)簽節(jié)點(diǎn)都是它的下級(jí)節(jié)點(diǎn)。除了根節(jié)點(diǎn)，其他節(jié)點(diǎn)都有三種層級(jí)關(guān)系。父節(jié)點(diǎn)關(guān)系（parentNode）：直接的那個(gè)上級(jí)節(jié)點(diǎn)。子節(jié)點(diǎn)關(guān)系（childNodes）：直接的下級(jí)節(jié)點(diǎn)。同級(jí)節(jié)點(diǎn)關(guān)系（sibling）：擁有同一個(gè)父節(jié)點(diǎn)的節(jié)點(diǎn)。DOM提供操作接口，用來(lái)獲取這三種關(guān)系的節(jié)點(diǎn)。比如，子節(jié)點(diǎn)接口包括firstChild（第一個(gè)子節(jié)點(diǎn)）和lastChild（最后一個(gè)子節(jié)點(diǎn)）等屬性，同級(jí)節(jié)點(diǎn)接口包括nextSibling（緊鄰在后的那個(gè)同級(jí)節(jié)點(diǎn)）和previousSibling（緊鄰在前的那個(gè)同級(jí)節(jié)點(diǎn)）屬性。在JavaScript中，將通過(guò)這些節(jié)點(diǎn)對(duì)html元素進(jìn)行各種操作，比如：更新，遍歷，添加和刪除。JavaScript的使用：DOM獲取延時(shí)符在操作一個(gè)DOM節(jié)點(diǎn)前，我們需要通過(guò)各種方法獲取DOM節(jié)點(diǎn)。最常用是獲取單個(gè)DOM節(jié)點(diǎn)的方法，比如：document.getElementById()，由于ID屬性值在HTML文檔中的唯一性的，所以document.getElementById()可以直接定位唯一的一個(gè)DOM節(jié)點(diǎn)。獲取多個(gè)DOM節(jié)點(diǎn)的方法，例如：document.getElementsByTagName()和document.getElementsByClassName()方法返回一組符合要求的DOM節(jié)點(diǎn)。要精確地選擇DOM，可以先定位父節(jié)點(diǎn)，再?gòu)母腹?jié)點(diǎn)開(kāi)始選擇，以縮小范圍。1.//

返回ID為'test'的節(jié)點(diǎn)：

2.var

test

=

document.getElementById('test');

3.//

先定位ID為'test-table'的節(jié)點(diǎn)，再返回其內(nèi)部所有tr節(jié)點(diǎn)：

4.var

trs

=

document.getElementById('test-table').getElementsByTagName('tr');

5.//

先定位ID為'test-div'的節(jié)點(diǎn)，再返回其內(nèi)部所有class包含red的節(jié)點(diǎn)：

6.var

reds

=

document.getElementById('test-div').getElementsByClassName('red');

7.//

獲取節(jié)點(diǎn)test下的所有直屬子節(jié)點(diǎn):

8.var

cs

=

test.children;

9.//

獲取節(jié)點(diǎn)test下第一個(gè)、最后一個(gè)子節(jié)點(diǎn)：

10.var

first

=

test.firstElementChild;

11.var

last

=

test.lastElementChild;

JavaScript的使用：DOM獲取延時(shí)符另外，第二類方法是使用querySelector()和querySelectorAll()，需要了解css語(yǔ)法中選擇器(selector)語(yǔ)法，然后使用條件來(lái)獲取節(jié)點(diǎn)，更加方便：1.//

通過(guò)querySelector獲取ID為q1的節(jié)點(diǎn)：

2.var

q1

=

document.querySelector('#q1');

3.//

通過(guò)querySelectorAll獲取q1節(jié)點(diǎn)內(nèi)的符合條件的所有節(jié)點(diǎn)：

4.var

ps

=

q1.querySelectorAll('div.highlighted

>

p');

注意：IE瀏覽器對(duì)querySelector的支持比較復(fù)雜，其中低版本的IE<8不支持querySelector和querySelectorAll。IE8有限支持，只支持ID屬性獲取。IE9和更高版本完全支持。JavaScript的使用：DOM操作延時(shí)符在獲取DOM節(jié)點(diǎn)后，可以直接修改對(duì)應(yīng)元素內(nèi)容，常用方法有兩種：修改節(jié)節(jié)點(diǎn)的innerHTML屬性或者修改節(jié)點(diǎn)的innerText屬性。（1）innerHTML屬性。innerHTML屬性這個(gè)方式非常強(qiáng)大，不但可以修改一個(gè)DOM節(jié)點(diǎn)的文本內(nèi)容，還可以直接通過(guò)HTML片段修改DOM節(jié)點(diǎn)內(nèi)部的子樹(shù)。例如：1.//

獲取<p

id="p-id">原來(lái)的段落文字</p>

2.var

p

=

document.getElementById('p-id');

3.//

設(shè)置文本為abc:

4.p.innerHTML

=

'修改后的段落文字';

//

<p

id="p-id">修改后的段落文字</p>

5.//

設(shè)置HTML:

6.p.innerHTML

=

'修改后的<span

style="color:red">段落</span>文字';

7.//

<p>...</p>的內(nèi)部結(jié)構(gòu)已修改

上面代碼運(yùn)行結(jié)果如圖4-2-5所示：JavaScript的使用：DOM操作延時(shí)符（2）innerText屬性。修改innerText屬性，這樣可以自動(dòng)對(duì)字符串進(jìn)行HTML編碼，保證無(wú)法設(shè)置任何HTML標(biāo)簽。1.//

獲取<p

id="p-id">...</p>

2.var

p

=

document.getElementById('p-id');

3.//

設(shè)置文本:

4.p.innerText

=

'<script>alert("Hi")</script>';

5.//

HTML被自動(dòng)編碼，無(wú)法設(shè)置一個(gè)<script>節(jié)點(diǎn):

6.//

<p

id="p-id"><script>alert("Hi")</script></p>

JavaScript的使用：常用事件延時(shí)符HTMLDOM允許JavaScript對(duì)HTML事件作出反應(yīng)。當(dāng)事件發(fā)生時(shí)，可以執(zhí)行JavaScript，比如當(dāng)用戶點(diǎn)擊一個(gè)HTML元素時(shí)。onchange事件。onload和onunload事件。onmouseover和onmouseout事件。onmousedown、onmouseup。onclick事件。JavaScript的使用：事件監(jiān)聽(tīng)延時(shí)符DOM的事件操作（監(jiān)聽(tīng)和觸發(fā)），都定義在EventTarget接口。所有節(jié)點(diǎn)對(duì)象都部署了這個(gè)接口，其他一些需要事件通信的瀏覽器內(nèi)置對(duì)象（比如，XMLHttpRequest、AudioNode、AudioContext）也部署了這個(gè)接口。該接口主要提供三個(gè)實(shí)例方法。addEventListener：綁定事件的監(jiān)聽(tīng)函數(shù)removeEventListener：移除事件的監(jiān)聽(tīng)函數(shù)JavaScript的使用：事件監(jiān)聽(tīng)

addEventListener()延時(shí)符1.EventTarget.addEventListener()。EventTarget.addEventListener()用于在當(dāng)前節(jié)點(diǎn)或?qū)ο笊?，定義一個(gè)特定事件的監(jiān)聽(tīng)函數(shù)。一旦這個(gè)事件發(fā)生，就會(huì)執(zhí)行監(jiān)聽(tīng)函數(shù)。該方法沒(méi)有返回值。該方法接受三個(gè)參數(shù)。type：事件名稱，大小寫敏感。listener：監(jiān)聽(tīng)函數(shù)。事件發(fā)生時(shí)，會(huì)調(diào)用該監(jiān)聽(tīng)函數(shù)。useCapture：布爾值，表示監(jiān)聽(tīng)函數(shù)是否在捕獲階段（capture）觸發(fā)（參見(jiàn)后文《事件的傳播》部分），默認(rèn)為false（監(jiān)聽(tīng)函數(shù)只在冒泡階段被觸發(fā)）。該參數(shù)可選。上面地案例中，button節(jié)點(diǎn)的addEventListener方法綁定click事件的監(jiān)聽(tīng)函數(shù)hello，該函數(shù)只在冒泡階段觸發(fā)。1.target.addEventListener(type,listener[,useCapture]);

1.functionhello(){2.console.log('Helloworld');3.}4.5.varbutton=document.getElementById('btn');6.button.addEventListener('click',hello,false);

JavaScript的使用：事件監(jiān)聽(tīng)

removeEventListener())延時(shí)符EventTarget.removeEventListener方法用來(lái)移除addEventListener方法添加的事件監(jiān)聽(tīng)函數(shù)。該方法沒(méi)有返回值。removeEventListener方法的參數(shù)，與addEventListener方法完全一致。它的第一個(gè)參數(shù)“事件類型”，大小寫敏感。注意：removeEventListener方法移除的監(jiān)聽(tīng)函數(shù)，必須是addEventListener方法添加的那個(gè)監(jiān)聽(tīng)函數(shù)，而且必須在同一個(gè)元素節(jié)點(diǎn)，否則無(wú)效。target.addEventListener('click',listener,false);target.removeEventListener('click',listener,false);

JavaScript的使用：for語(yǔ)句延時(shí)符例如，根據(jù)年齡顯示不同內(nèi)容，可以用if語(yǔ)句實(shí)現(xiàn)如下：注意：其中else語(yǔ)句是可選的。如果語(yǔ)句塊只包含一條語(yǔ)句，那么從JavaScript的語(yǔ)法規(guī)定而言，可以省略{}，但是強(qiáng)烈建議保留。1.varage=prompt(“輸入年齡”);2.if(age>=18){//如果age>=18為true，則執(zhí)行if語(yǔ)句塊3.alert('adult');4.}else{//否則執(zhí)行else語(yǔ)句塊5.alert('teenager');6.}任務(wù)實(shí)施延時(shí)符任務(wù)分析技術(shù)分析與實(shí)現(xiàn)完成代碼任務(wù)分析延時(shí)符實(shí)現(xiàn)鼠標(biāo)滑動(dòng)動(dòng)畫任務(wù)，由于需要在頁(yè)面加載時(shí)自動(dòng)運(yùn)行，所以可以使用window對(duì)象onload事件。本任務(wù)的實(shí)現(xiàn)，主要在window.onload的事件處理函數(shù)中，通過(guò)document.querySelectorAll()獲取所有播放、加入播放列表和收藏按鈕組成的對(duì)象。再對(duì)每個(gè)對(duì)象通過(guò)addEventListener()進(jìn)行mouseover和mouserout事件監(jiān)聽(tīng)，每當(dāng)mouseov

溫馨提示

  • 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)論