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

下載本文檔

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

文檔簡介

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

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

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

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

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

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

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

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

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

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

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

<div></div>

<script>

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

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

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

});

</script></body>>>接上頁代碼1.自定義動畫知識儲備2.元素刪除操作

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

<divid="target">

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

<p>這是一個段落</p>

<ahref="#">這是一個鏈接</a>

</div>

<script>

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

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

先定一個小目標(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ī)抽獎任務(wù)4.2任務(wù)需求小徐是某公司研發(fā)部門的一名前端開發(fā)工程師，主要負(fù)責(zé)公司電商網(wǎng)站的前端頁面開發(fā)。在“雙十一”來臨之際，為了吸引更多的用戶參與電商網(wǎng)站的活動，小徐需要在該電商網(wǎng)站的活動頁面開發(fā)一個隨機(jī)抽獎的功能。隨機(jī)抽獎可以提高用戶的參與度和互動頻率，并吸引更多的潛在用戶了解和關(guān)注網(wǎng)站。任務(wù)需求隨機(jī)抽獎功能的開發(fā)需求如下。參與抽獎方式：用戶通過訪問網(wǎng)站的“雙十一”預(yù)熱活動頁面參與抽獎活動。獎品設(shè)置：抽獎活動設(shè)定的獎品數(shù)量為8件，每件獎品通過圖像展示。抽獎方式：用戶單擊“開始抽獎”按鈕后，網(wǎng)站在設(shè)定的獎品中隨機(jī)抽取一件。為了使抽獎過程更有吸引力，需要顯示抽獎動畫，動畫效果為：以先慢后快的速度隨機(jī)切換8件商品，以最終停留的獎品作為最終抽獎結(jié)果。任務(wù)需求隨機(jī)抽獎的效果如下圖所示。

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

先定一個小目標(biāo)！掌握元素屬性操作，能夠靈活應(yīng)用元素屬性操作方法元素屬性操作知識儲備在網(wǎng)頁開發(fā)中，使用元素屬性操作可以動態(tài)地更新頁面內(nèi)容。例如，通過修改某個元素的屬性，可以控制該元素的可見性或改變元素的大小、形狀、顏色等屬性。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è)置屬性值知識儲備為了更好地掌握元素屬性操作，下面分別演示prop()和attr()方法的使用方法，示例代碼如下。<body><inputtype="checkbox"id="my_checkbox">

<ahref="#"id="my_Link">請單擊此處</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>元素屬性操作知識儲備元素屬性操作示例代碼運(yùn)行后，運(yùn)行結(jié)果如下圖所示。

先定一個小目標(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文件，首先單擊“開始”按鈕，然后單擊“停止”按鈕，單擊“停止”按鈕后頁面會隨機(jī)選擇一張圖并將其放大顯示，隨機(jī)選圖并放大的運(yùn)行結(jié)果如下圖所示。向上滾動課程更新日志任務(wù)4.4任務(wù)需求向上滾動文字的效果在網(wǎng)頁設(shè)計(jì)中十分常見，在頁面中設(shè)計(jì)向上滾動文字的效果，可以使文字信息以滾動的方式展示，以節(jié)省頁面空間，提升頁面的視覺效果。某公司正在對網(wǎng)站的頁面設(shè)計(jì)進(jìn)行優(yōu)化，該公司的負(fù)責(zé)人提出要求：當(dāng)鼠標(biāo)指針未移入課程更新日志時，課程更新日志以2秒的間隔自動向上滾動，并且每次向上滾動1條；當(dāng)鼠標(biāo)指針移入課程更新日志時，課程更新日志停止向上滾動。任務(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ù)需求向上滾動課程更新日志的效果如下圖所示。任務(wù)實(shí)現(xiàn)

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

溫馨提示

  • 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

提交評論