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

下載本文檔

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

文檔簡介

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

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

掌握元素刪除操作，能夠靈活應用元素刪除操作方法

掌握元素屬性操作，能夠靈活應用元素屬性操作方法

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

的開發(fā)學習目標/Target

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

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

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

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

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

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

<divid="target">

<h2>這是一個標題</h2>

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

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

</div>

<script>

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

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

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

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

先定一個小目標！掌握元素屬性操作，能夠靈活應用元素屬性操作方法元素屬性操作知識儲備在網(wǎng)頁開發(fā)中，使用元素屬性操作可以動態(tài)地更新頁面內(nèi)容。例如，通過修改某個元素的屬性，可以控制該元素的可見性或改變元素的大小、形狀、顏色等屬性。jQuery提供了一些元素屬性操作方法，包括prop()方法、attr()方法，使用這些方法可以實現(xiàn)不同的元素屬性操作，如下表所示。元素屬性操作方法說明prop(propertyName[,value])獲取或設置元素的屬性值。如果只傳遞propertyName參數(shù)，則表示獲取屬性值；如果傳遞了value參數(shù)，則表示設置屬性值attr(propertyName[,value])獲取或設置標簽的屬性值。如果只傳遞propertyName參數(shù)，則表示獲取屬性值；如果傳遞了value參數(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>元素屬性操作知識儲備元素屬性操作示例代碼運行后，運行結(jié)果如下圖所示。

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

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

溫馨提示

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

評論

0/150

提交評論