jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第4章 jQuery實(shí)現(xiàn)頁面交互（下）_第1頁
jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第4章 jQuery實(shí)現(xiàn)頁面交互（下）_第2頁
jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第4章 jQuery實(shí)現(xiàn)頁面交互（下）_第3頁
jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第4章 jQuery實(shí)現(xiàn)頁面交互（下）_第4頁
jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第4章 jQuery實(shí)現(xiàn)頁面交互（下）_第5頁
已閱讀5頁，還剩40頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第4章jQuery實(shí)現(xiàn)頁面交互（下）《jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程》學(xué)習(xí)目標(biāo)/Target

掌握自定義動(dòng)畫的方法，能夠靈活應(yīng)用animate()方法自定義動(dòng)畫

掌握元素刪除操作，能夠靈活應(yīng)用元素刪除操作方法

掌握元素屬性操作，能夠靈活應(yīng)用元素屬性操作方法

掌握單擊頁面顯示不同詞語的實(shí)現(xiàn)方法，能夠完成單擊頁面顯示不同詞語功能

的開發(fā)學(xué)習(xí)目標(biāo)/Target

掌握隨機(jī)抽獎(jiǎng)的實(shí)現(xiàn)方法，能夠完成隨機(jī)抽獎(jiǎng)功能的開發(fā)

掌握隨機(jī)選圖并放大的實(shí)現(xiàn)方法，能夠完成隨機(jī)選圖并放大功能的開發(fā)

掌握向上滾動(dòng)課程更新日志的實(shí)現(xiàn)方法，能夠完成向上滾動(dòng)課程更新日志功能

的開發(fā)章節(jié)概述/Summary第3章講解了jQuery實(shí)現(xiàn)頁面交互，并完成了Tab欄切換、返回頁面頂部、高亮顯示圖像、留言板的開發(fā)。在實(shí)際開發(fā)中，使用jQuery還可以實(shí)現(xiàn)其他的頁面交互效果，例如單擊頁面顯示不同詞語、隨機(jī)抽獎(jiǎng)、隨機(jī)選圖并放大等。本章將繼續(xù)講解使用jQuery實(shí)現(xiàn)頁面交互。目錄/Contents任務(wù)4.1任務(wù)4.2單擊頁面顯示不同詞語隨機(jī)抽獎(jiǎng)任務(wù)4.3任務(wù)4.4隨機(jī)選圖并放大向上滾動(dòng)課程更新日志單擊頁面顯示不同詞語任務(wù)4.1任務(wù)需求某網(wǎng)站專為用戶提供了一個(gè)知識(shí)分享社區(qū)，用戶可以通過該網(wǎng)站學(xué)習(xí)和分享知識(shí)。為了增強(qiáng)網(wǎng)站的頁面交互效果，提升用戶的使用體驗(yàn)，該網(wǎng)站負(fù)責(zé)人想要對(duì)頁面進(jìn)行優(yōu)化。具體需求是：當(dāng)用戶單擊頁面時(shí)，頁面顯示不同的詞語，并且每次單擊頁面時(shí)，頁面只顯示一個(gè)詞語，顯示的詞語會(huì)向上移動(dòng)并逐漸消失?？梢燥@示的詞語包括“蘋果、香蕉、雪梨、菠蘿、芒果、櫻桃、石榴、西瓜、荔枝、檸檬、葡萄、草莓”。任務(wù)需求單擊頁面顯示不同詞語的效果圖如下圖所示。知識(shí)儲(chǔ)備1.自定義動(dòng)畫

先定一個(gè)小目標(biāo)！掌握自定義動(dòng)畫的方法，能夠靈活應(yīng)用animate()方法自定義動(dòng)畫知識(shí)儲(chǔ)備在開發(fā)過程中，當(dāng)內(nèi)置的動(dòng)畫效果無法滿足用戶的實(shí)際需求時(shí)，可以使用jQuery提供的animate()方法自定義動(dòng)畫，該方法的語法格式如下。1.自定義動(dòng)畫animate(properties[,duration][,easing][,complete])知識(shí)儲(chǔ)備在animate()方法的語法格式中，各參數(shù)的具體解釋如下。1.自定義動(dòng)畫參數(shù)properties是一個(gè)包含CSS屬性的對(duì)象，在執(zhí)行動(dòng)畫時(shí)，可以根據(jù)這些CSS屬性改變?cè)氐臉邮?。參?shù)duration用于指定動(dòng)畫的持續(xù)時(shí)間，單位為毫秒。參數(shù)easing表示切換效果，默認(rèn)值為swing（開始和結(jié)束時(shí)速度慢，中間速度快），還可以設(shè)置為linear（勻速）。參數(shù)complete表示在動(dòng)畫完成后執(zhí)行的回調(diào)函數(shù)。知識(shí)儲(chǔ)備為了更好地掌握自定義動(dòng)畫的方法，下面通過代碼進(jìn)行演示，示例代碼如下。<head><style>div{width:200px;height:200px;background-color:pink;position:relative;}</style></head>1.自定義動(dòng)畫知識(shí)儲(chǔ)備<body>

<div></div>

<script>

$('div').on('mouseover',function(){

//創(chuàng)建自定義動(dòng)畫

$('div').animate({left:'+=100'},500);

});

</script></body>>>接上頁代碼1.自定義動(dòng)畫知識(shí)儲(chǔ)備2.元素刪除操作

先定一個(gè)小目標(biāo)！掌握元素刪除操作，能夠靈活應(yīng)用元素刪除操作的方法知識(shí)儲(chǔ)備元素刪除是指將選中的元素或某個(gè)元素的子元素刪除。jQuery提供了empty()方法和remove()方法用于刪除元素。其中，empty()方法用于刪除元素下的子元素，但不刪除元素本身；remove()方法用于刪除元素下的子元素和元素本身，該方法中可以傳入可選參數(shù)selector，該參數(shù)表示選擇器，用于篩選元素。2.元素刪除操作知識(shí)儲(chǔ)備為了更好地掌握元素刪除操作，下面以empty()方法為例演示元素刪除操作，示例代碼如下。<body>

<divid="target">

<h2>這是一個(gè)標(biāo)題</h2>

<p>這是一個(gè)段落</p>

<ahref="#">這是一個(gè)鏈接</a>

</div>

<script>

$('#target').empty();

</script></body>2.元素刪除操作任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握單擊頁面顯示不同詞語的實(shí)現(xiàn)方法，能夠完成單擊頁面顯示不同詞語功能的開發(fā)任務(wù)實(shí)現(xiàn)創(chuàng)建D:\jQuery\chapter04目錄，將jquery-3.6.4.min.js文件放入該目錄，并使用VSCode編輯器打開該目錄。創(chuàng)建pageDisplay.html文件，編寫單擊頁面顯示不同詞語的頁面結(jié)構(gòu)并引入jquery-3.6.4.min.js文件。步驟1步驟2實(shí)現(xiàn)單擊頁面顯示不同詞語的開發(fā)編寫單擊頁面顯示不同詞語頁面的樣式。編寫邏輯代碼，實(shí)現(xiàn)單擊頁面顯示不同詞語的效果。步驟3步驟4任務(wù)實(shí)現(xiàn)在瀏覽器中打開pageDisplay.html文件，并連續(xù)單擊頁面兩次。單擊頁面顯示不同詞語的運(yùn)行結(jié)果如下圖所示。隨機(jī)抽獎(jiǎng)任務(wù)4.2任務(wù)需求小徐是某公司研發(fā)部門的一名前端開發(fā)工程師，主要負(fù)責(zé)公司電商網(wǎng)站的前端頁面開發(fā)。在“雙十一”來臨之際，為了吸引更多的用戶參與電商網(wǎng)站的活動(dòng)，小徐需要在該電商網(wǎng)站的活動(dòng)頁面開發(fā)一個(gè)隨機(jī)抽獎(jiǎng)的功能。隨機(jī)抽獎(jiǎng)可以提高用戶的參與度和互動(dòng)頻率，并吸引更多的潛在用戶了解和關(guān)注網(wǎng)站。任務(wù)需求隨機(jī)抽獎(jiǎng)功能的開發(fā)需求如下。參與抽獎(jiǎng)方式：用戶通過訪問網(wǎng)站的“雙十一”預(yù)熱活動(dòng)頁面參與抽獎(jiǎng)活動(dòng)。獎(jiǎng)品設(shè)置：抽獎(jiǎng)活動(dòng)設(shè)定的獎(jiǎng)品數(shù)量為8件，每件獎(jiǎng)品通過圖像展示。抽獎(jiǎng)方式：用戶單擊“開始抽獎(jiǎng)”按鈕后，網(wǎng)站在設(shè)定的獎(jiǎng)品中隨機(jī)抽取一件。為了使抽獎(jiǎng)過程更有吸引力，需要顯示抽獎(jiǎng)動(dòng)畫，動(dòng)畫效果為：以先慢后快的速度隨機(jī)切換8件商品，以最終停留的獎(jiǎng)品作為最終抽獎(jiǎng)結(jié)果。任務(wù)需求隨機(jī)抽獎(jiǎng)的效果如下圖所示。

先定一個(gè)小目標(biāo)！掌握隨機(jī)抽獎(jiǎng)的實(shí)現(xiàn)方法，能夠完成隨機(jī)抽獎(jiǎng)功能的開發(fā)任務(wù)實(shí)現(xiàn)任務(wù)實(shí)現(xiàn)創(chuàng)建randomDrawing.html文件，編寫隨機(jī)抽獎(jiǎng)的頁面結(jié)構(gòu)并引入jquery-3.6.4.min.js文件。編寫隨機(jī)抽獎(jiǎng)頁面的樣式。步驟1步驟2編寫邏輯代碼，實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)的效果。步驟3實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)的效果任務(wù)實(shí)現(xiàn)在瀏覽器中打開randomDrawing.html文件，并單擊“開始抽獎(jiǎng)”按鈕。隨機(jī)抽獎(jiǎng)的運(yùn)行結(jié)果如下圖所示。隨機(jī)選圖并放大任務(wù)4.3任務(wù)需求某公司開發(fā)了一個(gè)攝影門戶網(wǎng)站，該網(wǎng)站的主要功能是展示各種攝影圖片，用戶訪問該網(wǎng)站時(shí)不僅可以欣賞攝影圖片，還可以分享攝影圖片、學(xué)習(xí)攝影技巧等。為了使該網(wǎng)站的功能更加豐富，現(xiàn)需要增加一個(gè)隨機(jī)選圖并放大的功能，該功能的具體要求如下。當(dāng)用戶單擊頁面中的“開始”按鈕時(shí)，隨機(jī)選擇動(dòng)物圖像。當(dāng)用戶單擊頁面中的“停止”按鈕時(shí)，將隨機(jī)選擇的動(dòng)物圖像放大顯示。任務(wù)需求隨機(jī)選圖并放大的效果如下圖所示。知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握元素屬性操作，能夠靈活應(yīng)用元素屬性操作方法元素屬性操作知識(shí)儲(chǔ)備在網(wǎng)頁開發(fā)中，使用元素屬性操作可以動(dòng)態(tài)地更新頁面內(nèi)容。例如，通過修改某個(gè)元素的屬性，可以控制該元素的可見性或改變?cè)氐拇笮?、形狀、顏色等屬性。jQuery提供了一些元素屬性操作方法，包括prop()方法、attr()方法，使用這些方法可以實(shí)現(xiàn)不同的元素屬性操作，如下表所示。元素屬性操作方法說明prop(propertyName[,value])獲取或設(shè)置元素的屬性值。如果只傳遞propertyName參數(shù)，則表示獲取屬性值；如果傳遞了value參數(shù)，則表示設(shè)置屬性值attr(propertyName[,value])獲取或設(shè)置標(biāo)簽的屬性值。如果只傳遞propertyName參數(shù)，則表示獲取屬性值；如果傳遞了value參數(shù)，則表示設(shè)置屬性值知識(shí)儲(chǔ)備為了更好地掌握元素屬性操作，下面分別演示prop()和attr()方法的使用方法，示例代碼如下。<body><inputtype="checkbox"id="my_checkbox">

<ahref="#"id="my_Link">請(qǐng)單擊此處</a>

<script>

$('#my_checkbox').prop('checked',true);

console.log($('#my_checkbox').prop('checked'));$('#my_Link').attr('href','');

console.log($('#my_Link').attr('href'));

</script></body>元素屬性操作知識(shí)儲(chǔ)備元素屬性操作示例代碼運(yùn)行后，運(yùn)行結(jié)果如下圖所示。

先定一個(gè)小目標(biāo)！掌握隨機(jī)選圖并放大的實(shí)現(xiàn)方法，能夠完成隨機(jī)選圖并放大功能的開發(fā)任務(wù)實(shí)現(xiàn)任務(wù)實(shí)現(xiàn)創(chuàng)建selectImage.html文件，編寫隨機(jī)選圖并放大的頁面結(jié)構(gòu)并引入jquery-3.6.4.min.js文件。編寫隨機(jī)選圖并放大頁面的樣式。步驟1步驟2編寫邏輯代碼，實(shí)現(xiàn)隨機(jī)選圖并放大的效果。步驟3實(shí)現(xiàn)隨機(jī)選圖并放大的開發(fā)任務(wù)實(shí)現(xiàn)在瀏覽器中打開selectImage.html文件，首先單擊“開始”按鈕，然后單擊“停止”按鈕，單擊“停止”按鈕后頁面會(huì)隨機(jī)選擇一張圖并將其放大顯示，隨機(jī)選圖并放大的運(yùn)行結(jié)果如下圖所示。向上滾動(dòng)課程更新日志任務(wù)4.4任務(wù)需求向上滾動(dòng)文字的效果在網(wǎng)頁設(shè)計(jì)中十分常見，在頁面中設(shè)計(jì)向上滾動(dòng)文字的效果，可以使文字信息以滾動(dòng)的方式展示，以節(jié)省頁面空間，提升頁面的視覺效果。某公司正在對(duì)網(wǎng)站的頁面設(shè)計(jì)進(jìn)行優(yōu)化，該公司的負(fù)責(zé)人提出要求：當(dāng)鼠標(biāo)指針未移入課程更新日志時(shí)，課程更新日志以2秒的間隔自動(dòng)向上滾動(dòng)，并且每次向上滾動(dòng)1條；當(dāng)鼠標(biāo)指針移入課程更新日志時(shí)，課程更新日志停止向上滾動(dòng)。任務(wù)需求其中，需要更新的課程日志內(nèi)容如下。2023-12-12SpringBean生命周期。2023-12-10MyBatis執(zhí)行流程。2023-11-03Ribbon負(fù)載均衡策略。2023-10-25Spring事務(wù)失效問題。2023-09-15SpringMVC執(zhí)行流程。2023-08-10MyBatis延遲加載。任務(wù)需求向上滾動(dòng)課程更新日志的效果如下圖所示。任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握向上滾動(dòng)課程更新日志的實(shí)現(xiàn)方法，能夠完成向上滾動(dòng)課程更新日志功能的開發(fā)任務(wù)實(shí)現(xiàn)創(chuàng)建courseRenew.html文件，編寫向上滾動(dòng)課程更新日志的頁面結(jié)構(gòu)并引入jquery-3.6.4.min.js文件。編寫向上滾動(dòng)課程更新日志頁面的樣式。步驟1步驟2編寫邏輯代碼，實(shí)現(xiàn)向上滾動(dòng)課程更新日志的效果。步驟3實(shí)現(xiàn)向上滾動(dòng)課程更新日志的開發(fā)任務(wù)實(shí)現(xiàn)在瀏覽器中打開courseRenew.html文件，向上滾動(dòng)課程更

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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)論