jQuery前端開發(fā)任務(wù)驅(qū)動教程 課件 第6章 jQuery實現(xiàn)圖像效果_第1頁
jQuery前端開發(fā)任務(wù)驅(qū)動教程 課件 第6章 jQuery實現(xiàn)圖像效果_第2頁
jQuery前端開發(fā)任務(wù)驅(qū)動教程 課件 第6章 jQuery實現(xiàn)圖像效果_第3頁
jQuery前端開發(fā)任務(wù)驅(qū)動教程 課件 第6章 jQuery實現(xiàn)圖像效果_第4頁
jQuery前端開發(fā)任務(wù)驅(qū)動教程 課件 第6章 jQuery實現(xiàn)圖像效果_第5頁
已閱讀5頁，還剩51頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第6章jQuery實現(xiàn)圖像效果《jQuery前端開發(fā)任務(wù)驅(qū)動教程》學(xué)習目標/Target掌握removeAttr()方法的使用方法，能夠使用removeAttr()方法刪除

指定元素的一個或多個屬性掌握nextAll()方法的使用方法，能夠使用nextAll()方法獲取指定元素

之后的所有同級元素掌握prevAll()方法的使用方法，能夠使用prevAll()方法獲取指定元素

之前的所有同級元素掌握鼠標指針的位置坐標的獲取方法，能夠使用事件對象中的offsetX、

offsetY、clientX和clientY屬性來獲取鼠標指針的位置學(xué)習目標/Target掌握星級評價的實現(xiàn)方法，能夠完成星級評價功能的開發(fā)掌握圖像拖曳的實現(xiàn)方法，能夠完成圖像拖曳功能的開發(fā)

掌握圖像切換的實現(xiàn)方法，能夠完成圖像切換功能的開發(fā)章節(jié)概述/Summary在網(wǎng)頁設(shè)計中，合理運用圖像可以提升用戶體驗。圖像不僅能夠美化頁面，還能幫助用戶更好地理解和記憶所呈現(xiàn)的信息。因此，在網(wǎng)頁設(shè)計中，合理選擇和運用圖像至關(guān)重要。本章將詳細講解如何使用jQuery實現(xiàn)圖像效果。目錄/Contents任務(wù)6.1星級評價任務(wù)6.2圖像拖曳任務(wù)6.3圖像切換星級評價任務(wù)6.1任務(wù)需求隨著網(wǎng)購的普及，用戶在完成訂單后，通?？梢允褂迷u價功能對購買的商品或服務(wù)進行評價。這種評價方式可以幫助商家獲得用戶的反饋，以便改善用戶體驗和提高服務(wù)質(zhì)量。星級評價是一種常見的評價方式，用戶可以通過點亮特定數(shù)量的星星來表示他們的滿意度。這種評價方式簡單明了，星星的數(shù)量越多，代表用戶越滿意，同時商家也會因此獲得更高的信譽度。星級評價的開發(fā)需求如下。任務(wù)需求①初始頁面中顯示5個灰色的星星，表示未評價，如下圖所示。②當鼠標指針移入某個星星時，該星星及前面的星星都會被點亮。當鼠標指針移出所有星星（即鼠標指針不在任意一個星星上）時，所有星星都恢復(fù)成灰色。鼠標指針移入第3個星星和移出所有星星的效果如下圖所示。任務(wù)需求③單擊某個星星即可完成評價，該星星及前面的星星都被點亮。單擊某個星星后移出鼠標指針（即鼠標指針不在任意星星上），該星星及前面的星星保持被點亮的狀態(tài)。鼠標指針單擊第4個星星并移出所有星星的效果如下圖所示。任務(wù)需求知識儲備1.removeAttr()方法

先定一個小目標！掌握removeAttr()方法的使用方法，能夠使用removeAttr()方法刪除指定元素的一個或多個屬性知識儲備1.removeAttr()方法在HTML中，每個元素都可以具有多個屬性，例如id、class、href等。有時候可能需要刪除指定元素的一個或多個屬性，如何實現(xiàn)呢？知識儲備1.removeAttr()方法可以通過jQuery中的removeAttr()方法來實現(xiàn)。removeAttr()方法的語法格式如下。removeAttr(attributeName)attributeName表示屬性名，多個屬性名用空格分隔例如，$('.box').removeAttr('id')可以刪除.box類的元素的id屬性；$('p').removeAttr('idclass')可以刪除所有p元素的id和class屬性。知識儲備1.removeAttr()方法下面通過代碼演示如何使用removeAttr()方法實現(xiàn)單擊“刪除屬性”按鈕時，刪除所有p元素的style屬性，示例代碼如下。<body><pstyle="font-weight:bold">白日依山盡，黃河入海流。</p><pstyle="font-weight:bold">欲窮千里目，更上一層樓。</p><button>刪除屬性</button><script>$('button').on('click',function(){$('p').removeAttr('style');});</script></body>知識儲備1.removeAttr()方法上述示例代碼運行后，使用removeAttr()方法實現(xiàn)的頁面效果如下圖所示。知識儲備1.removeAttr()方法單擊“刪除屬性”按鈕后的頁面效果如下圖所示。知識儲備2.nextAll()方法

先定一個小目標！掌握nextAll()方法的使用方法，能夠使用nextAll()方法獲取指定元素之后的所有同級元素知識儲備2.nextAll()方法在網(wǎng)頁中，如果選擇了某個特定元素，可能會對其后面的元素執(zhí)行特定的操作。在jQuery中，可以通過使用nextAll()方法獲取指定元素之后的所有同級元素，但不包括該元素本身，其語法格式如下。nextAll([selector])可選參數(shù)selector表示選擇器，用于匹配指定的元素知識儲備2.nextAll()方法當省略selector參數(shù)時，nextAll()方法會返回指定元素之后的所有同級元素。例如，$('li.start').nextAll()會返回每個.start類的li元素之后的所有同級元素。當不省略selector參數(shù)時，nextAll()方法會返回指定元素之后的所有同級元素中符合選擇器條件的元素。例如，$('div').nextAll('p')會返回每個div元素之后的所有同級p元素，$('div').nextAll('.class1,.class2')會返回每個div元素之后的所有.class1類和.class2類的元素。知識儲備2.nextAll()方法下面通過代碼演示如何使用nextAll()方法實現(xiàn)更改指定元素之后所有同級元素的CSS樣式，示例代碼如下。<body><ul><li>學(xué)而時習之，不亦說乎？</li><li>學(xué)而不思則罔，思而不學(xué)則殆。</li><liclass="item">學(xué)而不厭，誨人不倦。</li><li>敏而好學(xué)，不恥下問。</li><li>篤信好學(xué)，守死善道。</li></ul>知識儲備2.nextAll()方法>>接上頁代碼<script>

$('li.item').nextAll().css('font-weight','bold');</script></body>知識儲備2.nextAll()方法上述示例代碼運行后，使用nextAll()方法實現(xiàn)的頁面效果如下圖所示。知識儲備3.prevAll()方法

先定一個小目標！掌握prevAll()方法的使用方法，能夠使用prevAll()方法獲取指定元素之前的所有同級元素知識儲備假設(shè)有一個文章頁面，頁面上有一系列的文章卡片。現(xiàn)在想找到選定文章卡片之前的所有文章卡片，以便對它們進行一些操作，比如高亮顯示，這時便可以使用jQuery中的prevAll()方法。prevAll()方法用于獲取指定元素之前的所有同級元素，但不包括該元素本身，其語法格式如下。prevAll([selector])可選參數(shù)selector表示選擇器，用于匹配指定的元素3.prevAll()方法知識儲備當省略selector參數(shù)時，prevAll()方法會返回指定元素之前的所有同級元素。例如，$('li.start').prevAll()會返回每個.start類的li元素之前的所有同級元素。當不省略selector參數(shù)時，prevAll()方法會返回指定元素之前的所有同級元素中符合選擇器條件的元素。例如，$('div').prevAll('p')會返回每個div元素之前的所有同級p元素，$('p').prevAll('.class1,.class2')會返回每個p元素之前的所有.class1類和.class2類的元素。3.prevAll()方法知識儲備下面通過代碼演示如何使用prevAll()方法實現(xiàn)更改指定元素之前所有同級元素的CSS樣式，示例代碼如下。<body><p>二十四節(jié)氣歌</p><ul><li>春雨驚春清谷天，夏滿芒夏暑相連。</li><li>秋處露秋寒霜降，冬雪雪冬小大寒。</li><liclass="item">每月兩節(jié)不變更，最多相差一兩天。</li><li>上半年來六廿一，下半年是八廿三。</li></ul>3.prevAll()方法知識儲備>>接上頁代碼<script>$('li.item').prevAll().css('font-weight','bold');</script></body>3.prevAll()方法知識儲備上述示例代碼運行后，使用prevAll()方法實現(xiàn)的頁面效果如下圖所示。3.prevAll()方法任務(wù)實現(xiàn)

先定一個小目標！掌握星級評價的實現(xiàn)方法，能夠完成星級評價功能的開發(fā)任務(wù)實現(xiàn)創(chuàng)建D:\jQuery\chapter06目錄，將jquery-3.6.4.min.js文件和本章配套源代碼中的images文件夾復(fù)制到該目錄，并使用VSCode編輯器打開該目錄。創(chuàng)建star.html文件，編寫星級評價頁面的結(jié)構(gòu)并引入jquery-3.6.4.min.js文件。步驟1步驟2編寫星級評價的樣式代碼。編寫邏輯代碼，實現(xiàn)鼠標指針移入、鼠標指針移出、單擊星星時的頁面效果。步驟3步驟4實現(xiàn)星級評價的開發(fā)任務(wù)實現(xiàn)在瀏覽器中打開star.html文件，星級評價的初始頁面效果如下圖所示。任務(wù)實現(xiàn)當鼠標指針移入第2個星星時，頁面效果如下圖所示。任務(wù)實現(xiàn)單擊第5個星星進行星級評價，完成星級評價的頁面效果如下圖所示。圖像拖曳任務(wù)6.2任務(wù)需求小冬是負責開發(fā)在線相冊的前端開發(fā)人員。為了提升用戶的使用體驗，他決定在相冊中引入一個新的功能——圖像拖曳。這個功能將使用戶能夠通過簡單的拖曳操作來調(diào)整收藏的圖像的順序，從而更個性化地組織和展示照片。圖像拖曳的開發(fā)需求如下。任務(wù)需求頁面中包含“圖像拖曳”文本和圖像。將鼠標指針移到頁面中的“圖像拖曳”文本上，按住鼠標左鍵，拖曳操作開始。按住鼠標左鍵并拖動鼠標指針，文本和圖像會跟隨鼠標指針移動。釋放鼠標左鍵，拖曳操作結(jié)束，文本和圖像停止跟隨鼠標指針移動。圖像拖曳的初始效果如下圖所示。任務(wù)需求知識儲備鼠標指針的位置坐標

先定一個小目標！掌握鼠標指針的位置坐標的獲取方法，能夠使用事件對象中的offsetX、offsetY、clientX和clientY屬性來獲取鼠標指針的位置知識儲備鼠標指針的位置坐標在網(wǎng)頁開發(fā)中，可以利用鼠標指針的位置坐標來實現(xiàn)一些交互效果，比如鼠標懸停提示和拖曳元素等。鼠標指針的位置坐標是指鼠標指針相對于事件觸發(fā)元素或在瀏覽器當前視口中的x軸、y軸坐標。知識儲備鼠標指針的位置坐標當事件被觸發(fā)時，就會產(chǎn)生事件對象。通過事件對象的offsetX、offsetY、clientX和clientY屬性可以獲取鼠標指針的位置坐標。offsetX和offsetY表示鼠標指針相對于事件觸發(fā)元素的x軸、y軸坐標。clientX和clientY表示鼠標指針在瀏覽器當前視口中的x軸、y軸坐標。知識儲備鼠標指針的位置坐標下面通過示意圖來展示事件對象的offsetX、offsetY、clientX和clientY屬性，如下圖所示。知識儲備鼠標指針的位置坐標下面通過代碼演示如何使用事件對象的屬性來獲取鼠標指針的位置坐標，示例代碼如下。<body><divid="box">獲取鼠標指針的位置坐標</div><script>$('#box').on('click',function(e){console.log(e.offsetX,e.offsetY,e.clientX,e.clientY);});</script></body>知識儲備鼠標指針的位置坐標上述示例代碼運行后，單擊“獲取鼠標指針的位置坐標”文本的某處，控制臺的輸出結(jié)果如下圖所示。76、9分別表示鼠標指針相對于事件觸發(fā)元素的x軸、y軸坐標84、17分別表示鼠標指針在瀏覽器當前視口中的x軸、y軸坐標任務(wù)實現(xiàn)

先定一個小目標！掌握圖像拖曳的實現(xiàn)方法，能夠完成圖像拖曳功能的開發(fā)任務(wù)實現(xiàn)將本章配套源代碼中的css文件夾復(fù)制到chapter06目錄。創(chuàng)建pictureDrag.html文件，編寫圖像拖曳的相關(guān)代碼，并引入jquery-3.6.4.min.js文件，以及css目錄下的pictureDrag.css文件。步驟1步驟2編寫邏輯代碼，定義所需的變量。編寫邏輯代碼，實現(xiàn)按住鼠標左鍵時開始拖曳操作的功能。步驟3步驟4實現(xiàn)圖像拖曳功能的開發(fā)編寫邏輯代碼，實現(xiàn)按住鼠標左鍵并拖動鼠標時元素跟隨鼠標指針移動的功能。步驟5編寫邏輯代碼，實現(xiàn)抬起鼠標左鍵時結(jié)束拖曳的功能。步驟6任務(wù)實現(xiàn)在瀏覽器中打開pictureDrag.html文件，圖像拖曳的頁面效果如下圖所示。任務(wù)實現(xiàn)將鼠標指針移到頁面上的“圖像拖曳”文本上并按住鼠標左鍵，拖曳操作開始。將圖像拖曳到頁面中心位置的頁面效果如下圖所示。圖像切換任務(wù)6.3任務(wù)需求小夏是負責開發(fā)風景網(wǎng)站首頁的前端開發(fā)人員。為了增加網(wǎng)站的吸引力，小夏需要在首頁中添加圖像切換功能。這個功能可以吸引用戶的注意力，提供動態(tài)效果和增加視覺吸引力，從而提升用戶的興趣。圖像切換的開發(fā)需求是：當用戶單

溫馨提示

  • 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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論