jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程 課件全套 第1-10章 初識(shí)jQuery -項(xiàng)目實(shí)戰(zhàn) 在線商城

第1章初識(shí)jQuery《jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程》學(xué)習(xí)目標(biāo)/Target

了解什么是jQuery，能夠描述jQuery的特點(diǎn)

掌握VisualStudioCode編輯器的下載和安裝方法，能夠獨(dú)立完成Visual

StudioCode編輯器的下載和安裝

熟悉jQuery的主要功能，能夠歸納jQuery的主要功能

掌握$()函數(shù)的使用方法，能夠靈活運(yùn)用$()函數(shù)創(chuàng)建jQuery對(duì)象

掌握jQuery對(duì)象的使用方法，能夠取出jQuery對(duì)象中的元素學(xué)習(xí)目標(biāo)/Target

掌握選擇器的使用方法，能夠靈活應(yīng)用選擇器獲取元素

掌握on()方法的使用方法，能夠使用on()方法實(shí)現(xiàn)事件的注冊(cè)

掌握鼠標(biāo)事件，能夠注冊(cè)鼠標(biāo)事件學(xué)習(xí)目標(biāo)/Target

掌握css()方法的使用方法，能夠使用css()方法設(shè)置或獲取元素樣式

掌握jQuery的下載和引入，能夠獨(dú)立完成jQuery的下載和引入

掌握jQuery的簡(jiǎn)單使用，能夠使用jQuery實(shí)現(xiàn)單擊按鈕改變?cè)娋湮谋绢伾?/p>

效果章節(jié)概述/SummaryjQuery提供了豐富的方法，使用這些方法可以簡(jiǎn)化JavaScript中常見的操作，如元素操作、事件操作、動(dòng)畫操作等。使用jQuery可以快速地實(shí)現(xiàn)網(wǎng)頁(yè)和Web應(yīng)用程序中的JavaScript交互效果，減少冗余代碼，解決瀏覽器兼容問題。本章將對(duì)下載和引入jQuery以及jQuery的簡(jiǎn)單使用進(jìn)行講解。目錄/Contents任務(wù)1.1任務(wù)1.2下載和引入jQueryjQuery的簡(jiǎn)單使用下載和引入jQuery任務(wù)1.1任務(wù)需求在某科技公司的網(wǎng)頁(yè)開發(fā)中，為了確保跨瀏覽器兼容性，并提高開發(fā)效率、簡(jiǎn)化DOM操作，該科技公司的前端開發(fā)實(shí)習(xí)生小洋需要使用jQuery進(jìn)行開發(fā)。在正式開發(fā)網(wǎng)頁(yè)之前，小洋需要先從jQuery官方網(wǎng)站下載jQuery，并將其引入項(xiàng)目。本任務(wù)將基于上述需求實(shí)現(xiàn)jQuery的下載和引入。知識(shí)儲(chǔ)備1.什么是jQuery

先定一個(gè)小目標(biāo)！了解什么是jQuery，能夠描述jQuery的特點(diǎn)知識(shí)儲(chǔ)備jQuery是一個(gè)簡(jiǎn)潔、開源、輕量級(jí)的JavaScript庫(kù)，它的設(shè)計(jì)宗旨是“writeless,domore”（使用更少的代碼，做更多的事情）。1.什么是jQuery知識(shí)儲(chǔ)備1.什么是jQueryjQuery具有以下6個(gè)特點(diǎn)。代碼可讀性強(qiáng)。語(yǔ)法簡(jiǎn)潔易懂，文檔豐富。支持CSS1~CSS3定義的屬性和選擇器。支持事件、樣式、動(dòng)畫和Ajax操作。支持多種瀏覽器，包括IE、Firefox和Chrome等?？蓴U(kuò)展性強(qiáng)，插件豐富，可以通過插件擴(kuò)展更多功能。知識(shí)儲(chǔ)備1.什么是jQueryjQuery1.x系列的版本兼容早期瀏覽器jQuery1.xjQuery2.x系列的版本不兼容IE6~IE8瀏覽器，更加輕量化jQuery2.xjQuery3.x系列的版本不兼容IE6~IE8瀏覽器，增加了一些新方法，并對(duì)一些方法進(jìn)行了優(yōu)化和改進(jìn)jQuery3.xjQuery3個(gè)版本的區(qū)別知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握VisualStudioCode編輯器的下載和安裝方法，能夠獨(dú)立完成VisualStudioCode編輯器的下載和安裝2.VisualStudioCode編輯器知識(shí)儲(chǔ)備2.VisualStudioCode編輯器VisualStudioCode（簡(jiǎn)稱VSCode）是由微軟（Microsoft）公司推出的一款免費(fèi)、開源的代碼編輯器，一經(jīng)推出便受到開發(fā)者的歡迎。對(duì)于Web前端開發(fā)人員來說，一個(gè)強(qiáng)大的編輯器可以使開發(fā)變得簡(jiǎn)單、便捷、高效。知識(shí)儲(chǔ)備VSCode編輯器具有如下特點(diǎn)。輕巧、極速，占用系統(tǒng)資源較少。具備代碼智能補(bǔ)全、語(yǔ)法高亮顯示、自定義快捷鍵和代碼匹配等功能?？缙脚_(tái)，可用于macOS、Windows和Linux操作系統(tǒng)。主題界面的設(shè)計(jì)比較人性化。例如，可以快速查找文件、分屏顯示代碼、自定義主題顏色、快速查看最近打開的項(xiàng)目文件以及查看項(xiàng)目文件結(jié)構(gòu)等。提供豐富的擴(kuò)展，用戶可根據(jù)需要自行下載和安裝擴(kuò)展。支持多種語(yǔ)言和文件格式的編寫，如HTML、JSON、TypeScript、JavaScript、CSS等。2.VisualStudioCode編輯器知識(shí)儲(chǔ)備（1）下載和安裝VSCode編輯器2.VisualStudioCode編輯器打開瀏覽器并訪問VSCode編輯器的官方網(wǎng)站，如下圖所示。知識(shí)儲(chǔ)備2.VisualStudioCode編輯器在VSCode的官方網(wǎng)站中單擊“DownloadforWindows”按鈕可以下載適用于Windows操作系統(tǒng)的VSCode安裝包。如果需要下載適用于其他操作系統(tǒng)的VSCode安裝包，單擊“”按鈕，即可看到其他操作系統(tǒng)版本的下載選項(xiàng)。知識(shí)儲(chǔ)備2.VisualStudioCode編輯器VSCode安裝包下載成功后，在下載目錄中找到該安裝包，雙擊啟動(dòng)安裝程序，按照程序的安裝向?qū)崾静僮?，直到安裝完成。VSCode編輯器安裝成功后，啟動(dòng)該編輯器，即可進(jìn)入VSCode初始界面，如下圖所示。知識(shí)儲(chǔ)備（2）安裝中文語(yǔ)言擴(kuò)展2.VisualStudioCode編輯器VSCode初始界面默認(rèn)的語(yǔ)言是英文。為了使VSCode編輯器顯示為中文，方便使用者開發(fā)和調(diào)試代碼，需要安裝中文語(yǔ)言擴(kuò)展。首先單擊VSCode初始界面左側(cè)邊欄中的“”按鈕進(jìn)入擴(kuò)展界面，然后在搜索框中輸入關(guān)鍵詞“Chinese”搜索到中文語(yǔ)言擴(kuò)展，單擊“Install”按鈕進(jìn)行安裝，如下圖所示。知識(shí)儲(chǔ)備2.VisualStudioCode編輯器安裝成功后，需要重新啟動(dòng)VSCode編輯器才可使中文語(yǔ)言擴(kuò)展生效。重新啟動(dòng)VSCode編輯器后，VSCode編輯器的中文界面如下圖所示。知識(shí)儲(chǔ)備（3）安裝LiveServer擴(kuò)展2.VisualStudioCode編輯器LiveServer擴(kuò)展用于搭建一個(gè)具有實(shí)時(shí)重新加載功能的本地服務(wù)器，可以實(shí)現(xiàn)保存代碼后瀏覽器自動(dòng)同步刷新，即時(shí)查看網(wǎng)頁(yè)效果。單擊VSCode初始界面左側(cè)的第5個(gè)按鈕“”進(jìn)入擴(kuò)展界面，在該界面的搜索框中輸入關(guān)鍵詞“LiveServer”找到LiveServer擴(kuò)展，單擊“安裝”按鈕進(jìn)行安裝即可。安裝LiveServer擴(kuò)展界面如下圖所示。知識(shí)儲(chǔ)備（4）VSCode編輯器的簡(jiǎn)單使用2.VisualStudioCode編輯器使用VSCode編輯器開發(fā)一個(gè)項(xiàng)目時(shí)，需要先創(chuàng)建項(xiàng)目文件夾，從而保存項(xiàng)目中的文件。下面將演示如何創(chuàng)建項(xiàng)目文件夾、如何使用VSCode編輯器打開項(xiàng)目文件夾，以及如何在項(xiàng)目文件夾中創(chuàng)建一個(gè)HTML5文檔。在D:\jQuery目錄下創(chuàng)建一個(gè)項(xiàng)目文件夾chapter01。知識(shí)儲(chǔ)備2.VisualStudioCode編輯器在VSCode編輯器的菜單欄中選擇“文件”-“打開文件夾…”，然后選擇chapter01文件夾。打開文件夾后的界面效果如下圖所示。知識(shí)儲(chǔ)備2.VisualStudioCode編輯器單擊“”按鈕并輸入要?jiǎng)?chuàng)建的文件的名稱index.html，即可創(chuàng)建文件。此時(shí)創(chuàng)建的index.html文件是空白的，在其中編寫一個(gè)簡(jiǎn)單的HTML5頁(yè)面，示例代碼如下。

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Document</title></head><body>HelloWorld</body></html>知識(shí)儲(chǔ)備2.VisualStudioCode編輯器保存前面的示例代碼，并在index.html文件中單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“OpenwithLiveServer”，在瀏覽器中打開index.html文件，該文件的運(yùn)行效果如下圖所示。

先定一個(gè)小目標(biāo)！掌握jQuery的下載和引入，能夠獨(dú)立完成jQuery的下載和引入任務(wù)實(shí)現(xiàn)任務(wù)實(shí)現(xiàn)根據(jù)任務(wù)需求下載和引入jQuery，具體實(shí)現(xiàn)步驟如下。創(chuàng)建D:\jQuery\chapter01目錄，并使用VSCode編輯器打開該目錄。在Chrome瀏覽器中訪問jQuery官方網(wǎng)站的下載頁(yè)面，如下圖所示。任務(wù)實(shí)現(xiàn)在jQuery官方網(wǎng)站的下載頁(yè)面中，單擊“jQueryCore3.6.4”右側(cè)的“minified”超鏈接，彈出“CodeIntegration”對(duì)話框，如下圖所示。任務(wù)實(shí)現(xiàn)雖然利用CodeIntegration對(duì)話框中提供的代碼可以完成jQuery的引入，但由于jQuery文件保存在國(guó)外服務(wù)器，下載速度比較慢，實(shí)際開發(fā)中一般是將jQuery文件下載到本地再進(jìn)行引入。任務(wù)實(shí)現(xiàn)復(fù)制jQuery文件的地址，然后在瀏覽器中訪問該地址。訪問后，按Ctrl+S組合鍵，將jquery-3.6.4.min.js文件保存到D:\jQuery\chapter01目錄。創(chuàng)建hello.html文件，在該文件中創(chuàng)建HTML5頁(yè)面并引入jquery-3.6.4.min.js文件，示例代碼如下。

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>下載和引入jQuery</title></head><body><scriptsrc="jquery-3.6.4.min.js"></script></body></html>jQuery的簡(jiǎn)單使用任務(wù)1.2任務(wù)需求前端開發(fā)實(shí)習(xí)生小洋想要運(yùn)用jQuery設(shè)計(jì)一個(gè)古詩(shī)詞網(wǎng)頁(yè)，具體需求如下。在網(wǎng)頁(yè)中顯示兩句詩(shī)句，詩(shī)句內(nèi)容為“壯志西行追古蹤，孤煙大漠夕陽(yáng)中。駝鈴古道絲綢路，胡馬猶聞唐漢風(fēng)?！薄Ｔ诰W(wǎng)頁(yè)中添加3個(gè)按鈕，按鈕文本分別為“紅色”“藍(lán)色”“綠色”。當(dāng)單擊網(wǎng)頁(yè)中按鈕文本為“紅色”的按鈕時(shí)，詩(shī)句文本顏色變?yōu)榧t色；當(dāng)單擊網(wǎng)頁(yè)中按鈕文本為“藍(lán)色”的按鈕時(shí)，詩(shī)句文本顏色變?yōu)樗{(lán)色；當(dāng)單擊網(wǎng)頁(yè)中按鈕文本為“綠色”的按鈕時(shí)，詩(shī)句文本顏色變?yōu)榫G色。任務(wù)需求單擊按鈕改變?cè)娋湮谋绢伾男Ч缦聢D所示。知識(shí)儲(chǔ)備1.jQuery的主要功能

先定一個(gè)小目標(biāo)！熟悉jQuery的主要功能，能夠歸納jQuery的主要功能知識(shí)儲(chǔ)備（1）選擇元素在開發(fā)中，經(jīng)常需要選擇頁(yè)面中的元素，從而對(duì)元素進(jìn)行特定的操作。為了方便開發(fā)人員選擇元素，jQuery提供了一種類似CSS選擇器的選擇器。jQuery中常用的選擇器如下表所示。1.jQuery的主要功能類型選擇器基本選擇器#id、*、.class、element、selector1,selector2,…層次選擇器parent>child、selectorselector1、prev+next、prev~siblings篩選選擇器:empty、:has(selector)、:parent等知識(shí)儲(chǔ)備>>續(xù)上表1.jQuery的主要功能類型選擇器屬性選擇器[attr]、[attr=value]、[attr!=value]、[attr^=value]等子元素選擇器:first-child、:last-child、:only-child、:first-of-type等表單選擇器:input、:next、:password、:radio、:checkbox、:submit等知識(shí)儲(chǔ)備（2）元素操作jQuery提供了一系列用于元素操作的方法，使用這些方法可以實(shí)現(xiàn)對(duì)頁(yè)面中元素的操作。jQuery中常用的元素操作方法如下表所示。1.jQuery的主要功能類型方法元素遍歷操作each()元素內(nèi)容操作html()、text()、val()元素樣式操作css()、width()、height()、outerWidth()、outerHeight()、offset()、scrollTop()、scrollLeft()元素屬性操作attr()、removeAttr()、prop()、removeProp()、addClass()、removeClass()、hasClass()、toggleClass()元素查找操作children()、find()、parents()、parent()、siblings()、next()、prev()知識(shí)儲(chǔ)備>>續(xù)上表1.jQuery的主要功能類型方法元素過濾操作eq()、filter()、is()、has()、first()、last()元素追加操作append()、prepend()、appendTo()、prependTo()、after()、before()、insertAfter()、insertBefore()元素替換操作replaceWidth()、replaceAll()元素刪除操作empty()、remove()元素復(fù)制操作clone()知識(shí)儲(chǔ)備（3）事件操作jQuery簡(jiǎn)化了JavaScript中的事件操作，調(diào)用事件操作方法即可實(shí)現(xiàn)事件的處理。jQuery中常用的事件操作方法有on()、off()、trigger()、triggerHandler()等。1.jQuery的主要功能知識(shí)儲(chǔ)備（4）動(dòng)畫操作在開發(fā)中，經(jīng)常需要為頁(yè)面添加一些動(dòng)畫效果，以提升頁(yè)面的視覺效果和實(shí)現(xiàn)交互體驗(yàn)。jQuery中常用的動(dòng)畫效果方法如下表所示。1.jQuery的主要功能類型方法顯示和隱藏show()、hide()、toggle()滑動(dòng)slideDown()、slideUp()、slideToggle()淡入和淡出fadeIn()、fadeOut()、fadeTo()、fadeToggle()自定義動(dòng)畫animate()停止動(dòng)畫stop()知識(shí)儲(chǔ)備（5）Ajax操作jQuery提供了一些方法用于簡(jiǎn)化JavaScript中的Ajax操作，常用的Ajax操作方法有$.ajax()、$.get()、$.post()等。1.jQuery的主要功能知識(shí)儲(chǔ)備2.$()函數(shù)

先定一個(gè)小目標(biāo)！掌握$()函數(shù)的使用方法，能夠靈活運(yùn)用$()函數(shù)創(chuàng)建jQuery對(duì)象知識(shí)儲(chǔ)備在頁(yè)面中引入jQuery后，JavaScript全局作用域中會(huì)新增兩個(gè)函數(shù)，分別是$()函數(shù)和jQuery()函數(shù)，這兩個(gè)函數(shù)本質(zhì)上是同一個(gè)函數(shù)。由于$()函數(shù)寫起來更簡(jiǎn)單，所以實(shí)際開發(fā)中一般使用$()函數(shù)。2.$()函數(shù)知識(shí)儲(chǔ)備$()函數(shù)類似構(gòu)造函數(shù)，用于創(chuàng)建jQuery對(duì)象。但使用$()函數(shù)時(shí)不需要使用new關(guān)鍵字進(jìn)行實(shí)例化，它的內(nèi)部會(huì)自動(dòng)進(jìn)行實(shí)例化，返回實(shí)例化后的對(duì)象。2.$()函數(shù)知識(shí)儲(chǔ)備$()函數(shù)的參數(shù)可以是選擇器、對(duì)象或HTML字符串，具體解釋如下。2.$()函數(shù)當(dāng)參數(shù)是選擇器時(shí)，$()函數(shù)會(huì)通過選擇器獲取元素，將元素封裝到j(luò)Query對(duì)象中返回。當(dāng)參數(shù)是對(duì)象時(shí)，$()函數(shù)會(huì)將對(duì)象封裝到j(luò)Query對(duì)象中返回。這里所說的對(duì)象主要包括window對(duì)象、document對(duì)象、元素和函數(shù)，傳入其他與頁(yè)面操作無關(guān)的對(duì)象則沒有實(shí)際意義。如果傳入的對(duì)象是一個(gè)函數(shù)，則該函數(shù)會(huì)在頁(yè)面加載完成時(shí)被調(diào)用。當(dāng)參數(shù)是HTML字符串時(shí)，$()函數(shù)會(huì)根據(jù)HTML字符串創(chuàng)建元素，并將創(chuàng)建的元素封裝到j(luò)Query對(duì)象中返回。知識(shí)儲(chǔ)備下面通過代碼演示$()函數(shù)的使用，示例代碼如下。2.$()函數(shù)//$()函數(shù)的參數(shù)為選擇器$('div');//$()函數(shù)的參數(shù)為對(duì)象$(document.body);//$()函數(shù)的參數(shù)為HTML字符串$('<div>test</div>');知識(shí)儲(chǔ)備3.jQuery對(duì)象

先定一個(gè)小目標(biāo)！掌握jQuery對(duì)象的使用方法，能夠取出jQuery對(duì)象中的元素知識(shí)儲(chǔ)備3.jQuery對(duì)象jQuery對(duì)象是由jQuery創(chuàng)建的對(duì)象，它可以用于封裝對(duì)象，并提供了一系列操作方法。一個(gè)jQuery對(duì)象可以封裝多個(gè)對(duì)象，每個(gè)對(duì)象都有一個(gè)索引，索引從0開始遞增。通過索引可以取出jQuery對(duì)象中封裝的對(duì)象，取出的語(yǔ)法有兩種，具體如下。//第1種語(yǔ)法jQuery對(duì)象[索引]//第2種語(yǔ)法jQuery對(duì)象.get(索引)知識(shí)儲(chǔ)備3.jQuery對(duì)象下面演示如何將body元素封裝到j(luò)Query對(duì)象中，再?gòu)膉Query對(duì)象中取出body元素，并獲取jQuery對(duì)象中封裝的對(duì)象數(shù)量，示例代碼如下。

//將body元素封裝到j(luò)Query對(duì)象中var$body=$(document.body);//從jQuery對(duì)象中取出body元素，并判斷它是否為原來的body元素console.log($body[0]===document.body);

//輸出結(jié)果：trueconsole.log($body.get(0)===document.body);//輸出結(jié)果：true//獲取jQuery對(duì)象中封裝的對(duì)象數(shù)量console.log($body.length); //輸出結(jié)果：1知識(shí)儲(chǔ)備3.jQuery對(duì)象下面演示jQuery對(duì)象的使用方法，利用jQuery對(duì)象實(shí)現(xiàn)將頁(yè)面中所有的div元素隱藏，示例代碼如下。JavaScript支持鏈?zhǔn)秸{(diào)用，因此可以將上述代碼簡(jiǎn)寫成一行代碼，如下所示。var$div=$('div');$div.hide();$('div').hide();知識(shí)儲(chǔ)備4.選擇器

先定一個(gè)小目標(biāo)！掌握選擇器的使用方法，能夠靈活應(yīng)用選擇器獲取元素知識(shí)儲(chǔ)備4.選擇器在jQuery中，利用選擇器可以很方便地獲取頁(yè)面中的元素。使用jQuery的選擇器獲取元素的語(yǔ)法格式如下。$(選擇器)知識(shí)儲(chǔ)備4.選擇器基本選擇器的功能比較簡(jiǎn)單，主要是通過id、class等獲取元素。下面列舉jQuery中常用的基本選擇器，具體如下表所示。（1）基本選擇器選擇器功能描述示例#id獲取指定id的元素$('#btn')表示獲取id屬性值為btn的元素*獲取所有元素$('*')表示獲取頁(yè)面中的所有元素.class獲取同一class的元素$('.tab')表示獲取所有.tab類元素element獲取具有相同標(biāo)簽名的所有元素$('div')表示獲取所有div元素selector1,selector2,…同時(shí)獲取多個(gè)元素$('div,p,li')表示同時(shí)獲取div元素、p元素和li元素知識(shí)儲(chǔ)備4.選擇器下面演示基本選擇器的使用方法。利用.class選擇器獲取所有.menu類元素，并將獲取結(jié)果輸出到控制臺(tái)，示例代碼如下。<body><divclass="menu">菜單</div><script>console.log($('.menu'));//獲取所有.menu類元素</script></body>知識(shí)儲(chǔ)備4.選擇器示例代碼運(yùn)行后，在控制臺(tái)中可以看到輸出的元素信息，如下圖所示。知識(shí)儲(chǔ)備4.選擇器當(dāng)需要獲取某個(gè)元素的子元素、后代元素或兄弟元素時(shí)，可以使用jQuery的層次選擇器。下面列舉jQuery中常用的層次選擇器，具體如下表所示。（2）層次選擇器選擇器功能描述示例parent>child獲取所有子元素$('ul>li')表示獲取ul元素的所有l(wèi)i子元素selectorselector1獲取所有后代元素$('ulli')表示獲取ul元素的所有l(wèi)i后代元素prev+next獲取后面緊鄰的兄弟元素$('div+.title')表示獲取div元素后面緊鄰的.title類兄弟元素prev~siblings獲取后面的所有兄弟元素$('.bar~li')表示獲取.bar類元素后的所有l(wèi)i兄弟元素知識(shí)儲(chǔ)備4.選擇器下面演示層次選擇器的使用方法。利用selectorselector1選擇器獲取ul元素的所有l(wèi)i后代元素，示例代碼如下。

<body><ul><li>美食</li><li>服飾</li><li>數(shù)碼</li><li>家居</li></ul><script>console.log($('ulli')); //獲取ul元素的所有l(wèi)i后代元素</script></body>知識(shí)儲(chǔ)備4.選擇器示例代碼運(yùn)行后，在控制臺(tái)中可以看到輸出的元素信息，如下圖所示。知識(shí)儲(chǔ)備5.on()方法

先定一個(gè)小目標(biāo)！掌握on()方法的使用方法，能夠使用on()方法實(shí)現(xiàn)事件的注冊(cè)知識(shí)儲(chǔ)備5.on()方法在前端開發(fā)中，開發(fā)人員往往需要完成一些交互效果，例如，通過單擊頁(yè)面中的按鈕使頁(yè)面彈出一個(gè)警告框。想要讓頁(yè)面感知到按鈕被單擊，就需要通過事件實(shí)現(xiàn)。知識(shí)儲(chǔ)備5.on()方法事件是指可以被JavaScript偵測(cè)到的行為，例如鼠標(biāo)單擊頁(yè)面，鼠標(biāo)指針劃過某個(gè)區(qū)域等，不同行為對(duì)應(yīng)不同事件。若要在事件觸發(fā)時(shí)執(zhí)行特定的事件處理函數(shù)，則需要注冊(cè)事件，也就是為事件注冊(cè)事件處理函數(shù)。jQuery提供的on()方法用于注冊(cè)事件，其語(yǔ)法格式如下。.on(events[,selector][,data],handler)知識(shí)儲(chǔ)備5.on()方法下面對(duì)參數(shù)events、selector、data和handler進(jìn)行解釋。events表示事件類型，如click表示單擊事件，可以寫多個(gè)事件類型，用空格分隔即可。selector表示選擇器，省略時(shí)表示將事件處理函數(shù)綁定到已選擇的元素本身。data表示數(shù)據(jù)對(duì)象，省略時(shí)表示不需要將任何額外的數(shù)據(jù)傳遞給事件處理函數(shù)。handler表示事件處理函數(shù)。需要說明的是，on()方法允許為一個(gè)事件注冊(cè)多個(gè)事件處理函數(shù)，當(dāng)事件觸發(fā)時(shí)，這些事件處理函數(shù)將會(huì)按注冊(cè)時(shí)的順序被調(diào)用。知識(shí)儲(chǔ)備5.on()方法下面通過代碼演示如何使用on()方法注冊(cè)click事件，示例代碼如下。知識(shí)儲(chǔ)備5.on()方法<body>

<buttonid="btn">請(qǐng)單擊按鈕</button>

<script>

$('#btn').on('click',function(){

alert('按鈕被單擊了！');

});

</script></body>知識(shí)儲(chǔ)備6.鼠標(biāo)事件

先定一個(gè)小目標(biāo)！掌握鼠標(biāo)事件，能夠注冊(cè)鼠標(biāo)事件知識(shí)儲(chǔ)備6.鼠標(biāo)事件在網(wǎng)頁(yè)開發(fā)中，通過鼠標(biāo)事件可以捕捉用戶的動(dòng)作并提供反饋或提示，例如，當(dāng)鼠標(biāo)指針懸停在某個(gè)元素上時(shí)，顯示相關(guān)的信息或提示。下面列舉常用的鼠標(biāo)事件。事件類型說明mousemove當(dāng)鼠標(biāo)指針在特定元素內(nèi)移動(dòng)時(shí)觸發(fā)mouseover當(dāng)鼠標(biāo)指針移入元素或其子元素時(shí)觸發(fā)mouseout當(dāng)鼠標(biāo)指針移出元素或其子元素時(shí)觸發(fā)mouseenter當(dāng)鼠標(biāo)指針移入元素時(shí)觸發(fā)mouseleave當(dāng)鼠標(biāo)指針移出元素時(shí)觸發(fā)知識(shí)儲(chǔ)備6.鼠標(biāo)事件事件類型說明click當(dāng)單擊元素時(shí)觸發(fā)dblclick當(dāng)雙擊元素時(shí)觸發(fā)mousedown當(dāng)鼠標(biāo)指針移動(dòng)到元素上方，并按鼠標(biāo)按鍵時(shí)觸發(fā)mouseup當(dāng)在元素上釋放鼠標(biāo)按鍵時(shí)觸發(fā)>>續(xù)上表知識(shí)儲(chǔ)備6.鼠標(biāo)事件為了更好地掌握鼠標(biāo)事件，下面以click事件和mouseenter事件為例進(jìn)行演示，示例代碼如下。<body>

<div>請(qǐng)單擊此處</div>

<script>

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

alert('通過鼠標(biāo)事件實(shí)現(xiàn)注冊(cè)');

});</script></body>知識(shí)儲(chǔ)備7.css()方法

先定一個(gè)小目標(biāo)！掌握css()方法的使用方法，能夠使用css()方法設(shè)置或獲取元素樣式知識(shí)儲(chǔ)備7.css()方法在實(shí)際開發(fā)中，經(jīng)常需要通過設(shè)置元素樣式來美化頁(yè)面，從而為用戶提供更好的視覺體驗(yàn)。jQuery提供的css()方法可以獲取和設(shè)置元素的樣式。css()方法的具體用法和說明如下表所示。用法說明css(propertyName)獲取第一個(gè)匹配元素的樣式css(propertyName,value)為所有匹配元素設(shè)置樣式css(properties)傳遞以鍵值對(duì)形式表示的對(duì)象properties，用于一次性設(shè)置多個(gè)樣式屬性知識(shí)儲(chǔ)備7.css()方法下面通過代碼演示如何使用css()方法設(shè)置元素的樣式。首先定義div元素，然后使用css()方法設(shè)置div元素的寬度為200px，高度為200px，背景顏色為pink，示例代碼如下。<body>

<div></div><script>

$('div').css('width','200px');

$('div').css({height:'200px',backgroundColor:'pink'});</script></body>任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握jQuery的簡(jiǎn)單使用，能夠使用jQuery實(shí)現(xiàn)單擊按鈕改變?cè)娋湮谋绢伾男Ч蝿?wù)實(shí)現(xiàn)創(chuàng)建demo.html文件，編寫頁(yè)面結(jié)構(gòu)并引入jquery-3.6.4.min.js文件。編寫樣式代碼。步驟1步驟2編寫邏輯代碼，實(shí)現(xiàn)單擊按鈕改變?cè)娋湮谋绢伾?。步驟3實(shí)現(xiàn)單擊按鈕改變?cè)娋湮谋绢伾男Ч蝿?wù)實(shí)現(xiàn)在瀏覽器中打開demo.html文件，單擊按鈕改變?cè)娋湮谋绢伾某跏夹Ч缦聢D所示。本章小結(jié)本章主要講解jQuery的基礎(chǔ)知識(shí)，首先講解什么是jQuery和VisualStudioCode編輯器，然后講解jQuery的主要功能、$()函數(shù)、jQuery對(duì)象、選擇器、on()方法、鼠標(biāo)事件和css()方法。通過本章的學(xué)習(xí)，讀者能夠初步掌握jQuery的使用方法，為后續(xù)的學(xué)習(xí)奠定基礎(chǔ)。本章小結(jié)第2章jQuery實(shí)現(xiàn)多樣化菜單《jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程》學(xué)習(xí)目標(biāo)/Target

掌握顯示和隱藏元素的方法，能夠使用顯示和隱藏元素的方法實(shí)現(xiàn)頁(yè)面特效

掌握查找元素的方法，能夠靈活應(yīng)用查找元素的方法查找頁(yè)面元素

掌握元素索引的獲取方法，能夠使用index()方法獲取元素索引

掌握利用索引取出元素的方法，能夠使用eq()方法從元素集中取出指定索引

的元素

掌握停止動(dòng)畫的方法，能夠靈活應(yīng)用stop()方法停止元素的動(dòng)畫效果學(xué)習(xí)目標(biāo)/Target

掌握下拉菜單的實(shí)現(xiàn)方法，能夠完成下拉菜單的開發(fā)

掌握折疊式菜單的實(shí)現(xiàn)方法，能夠完成折疊式菜單的開發(fā)

掌握熱賣展示菜單的實(shí)現(xiàn)方法，能夠完成熱賣展示菜單的開發(fā)

掌握左進(jìn)左出導(dǎo)航菜單的實(shí)現(xiàn)方法，能夠完成左進(jìn)左出導(dǎo)航菜單的開發(fā)章節(jié)概述/Summary菜單是網(wǎng)站和應(yīng)用程序的重要組成部分，可以有效地呈現(xiàn)網(wǎng)站和應(yīng)用程序的信息結(jié)構(gòu)。合理地設(shè)計(jì)菜單的層次結(jié)構(gòu)和分類方式，可以清晰地展示不同頁(yè)面或功能模塊之間的關(guān)系，幫助用戶了解網(wǎng)站的整體布局，讓用戶快速地訪問不同的頁(yè)面，降低操作難度，提高用戶的使用體驗(yàn)。本章將詳細(xì)講解如何使用jQuery實(shí)現(xiàn)多樣化菜單。目錄/Contents任務(wù)2.1任務(wù)2.2下拉菜單折疊式菜單任務(wù)2.3任務(wù)2.4熱賣展示菜單左進(jìn)左出導(dǎo)航菜單下拉菜單任務(wù)2.1任務(wù)需求為了進(jìn)一步推廣傳統(tǒng)文化，某傳統(tǒng)文化研究院正在打造一個(gè)傳統(tǒng)文化精品展示網(wǎng)站，該網(wǎng)站將為專家、學(xué)者、傳統(tǒng)文化愛好者等提供一個(gè)學(xué)習(xí)和交流傳統(tǒng)文化的平臺(tái)。為了提升用戶體驗(yàn)，網(wǎng)站的產(chǎn)品經(jīng)理建議使用下拉菜單的形式來優(yōu)化導(dǎo)航欄，實(shí)現(xiàn)當(dāng)用戶將鼠標(biāo)指針移入一級(jí)菜單項(xiàng)后，在一級(jí)菜單項(xiàng)的下方展示二級(jí)菜單項(xiàng)，讓用戶獲得更多的選擇。任務(wù)需求一級(jí)菜單項(xiàng)二級(jí)菜單項(xiàng)傳統(tǒng)工藝剪紙、陶瓷、刺繡傳統(tǒng)戲劇京劇、川劇、粵劇傳統(tǒng)節(jié)日春節(jié)、端午節(jié)、重陽(yáng)節(jié)傳統(tǒng)樂器二胡、琵琶、編鐘一級(jí)菜單項(xiàng)以及相應(yīng)的二級(jí)菜單項(xiàng)具體如下表所示。任務(wù)需求下拉菜單的效果如下圖所示。知識(shí)儲(chǔ)備1.顯示和隱藏元素的方法

先定一個(gè)小目標(biāo)！掌握顯示和隱藏元素的方法，能夠使用顯示和隱藏元素的方法實(shí)現(xiàn)頁(yè)面特效知識(shí)儲(chǔ)備在網(wǎng)頁(yè)開發(fā)中，經(jīng)常會(huì)通過控制元素的顯示和隱藏來實(shí)現(xiàn)頁(yè)面特效。jQuery提供了用于顯示和隱藏元素的方法，這些方法都支持添加動(dòng)畫效果，添加動(dòng)畫效果可以使元素在顯示或隱藏時(shí)以動(dòng)畫的形式呈現(xiàn)。1.顯示和隱藏元素的方法知識(shí)儲(chǔ)備1.顯示和隱藏元素的方法方法說明show([duration][,easing][,complete])顯示匹配的元素hide([duration][,easing][,complete])隱藏匹配的元素toggle([duration][,easing][,complete])切換元素的顯示和隱藏jQuery中用于顯示和隱藏元素的方法如下表所示。知識(shí)儲(chǔ)備1.顯示和隱藏元素的方法下面對(duì)參數(shù)duration、easing和complete進(jìn)行講解。duration表示動(dòng)畫的持續(xù)時(shí)間，可設(shè)置為以毫秒為單位的動(dòng)畫時(shí)長(zhǎng)（如1000），或預(yù)定的3種速度（slow、fast和normal），默認(rèn)值為400。easing表示切換效果，默認(rèn)值為swing（開始和結(jié)束時(shí)速度慢，中間速度快），還可以設(shè)置為linear（勻速）。complete表示在動(dòng)畫完成后執(zhí)行的函數(shù)。知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握查找元素的方法，能夠靈活應(yīng)用查找元素的方法查找頁(yè)面元素2.查找元素的方法知識(shí)儲(chǔ)備在實(shí)際開發(fā)中，當(dāng)使用jQuery選擇器或其他方式獲取元素后，可能還需要進(jìn)一步查找與已獲取元素相關(guān)的元素，此時(shí)可以使用jQuery提供的查找元素的方法。2.查找元素的方法知識(shí)儲(chǔ)備2.查找元素的方法方法說明children([selector])獲取當(dāng)前元素集中每個(gè)元素的所有直接子元素find(selector|element)獲取當(dāng)前元素集中每個(gè)元素的后代元素parents([selector])獲取當(dāng)前元素集中每個(gè)元素的祖先元素（不包含根元素）parent([selector])獲取當(dāng)前元素集中每個(gè)元素的直接父元素siblings([selector])獲取當(dāng)前元素集中每個(gè)元素的所有兄弟元素（不分前后）next([selector])獲取當(dāng)前元素集中每個(gè)元素緊鄰的后一個(gè)兄弟元素prev([selector])獲取當(dāng)前元素集中每個(gè)元素緊鄰的前一個(gè)兄弟元素jQuery中常用的查找元素的方法具體如下表所示。知識(shí)儲(chǔ)備2.查找元素的方法下面通過代碼演示元素查找方法的使用方法，示例代碼如下。<body>

<divclass="parent">

<ul>

<liclass="list">第1個(gè)列表項(xiàng)</li>

<liclass="listsecond-list">第2個(gè)列表項(xiàng)</li>

<liclass="list">第3個(gè)列表項(xiàng)</li>

</ul>

<divclass="son">

<p>子元素</p>

</div>

</div>知識(shí)儲(chǔ)備2.查找元素的方法<script>

console.log($('.parent').find('p'));

console.log($('.second-list').parents('.parent'));

console.log($('.second-list').siblings());

console.log($('ul').next('.list'));

</script></body>>>接上頁(yè)代碼知識(shí)儲(chǔ)備2.查找元素的方法上述代碼執(zhí)行后，打開控制臺(tái)查看運(yùn)行結(jié)果，如下圖所示。任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握下拉菜單的實(shí)現(xiàn)方法，能夠完成下拉菜單的開發(fā)任務(wù)實(shí)現(xiàn)創(chuàng)建D:\jQuery\chapter02目錄，將jquery-3.6.4.min.js文件放入該目錄，并使用VSCode編輯器打開該目錄。創(chuàng)建dropDownMenu.html文件，編寫頁(yè)面結(jié)構(gòu)并引入jquery-3.6.4.min.js文件。步驟1步驟2實(shí)現(xiàn)下拉菜單的開發(fā)編寫下拉菜單頁(yè)面的樣式。編寫邏輯代碼，首先使用選擇器獲取元素，然后注冊(cè)mouseover事件和mouseout事件，實(shí)現(xiàn)當(dāng)鼠標(biāo)指針移入一級(jí)菜單項(xiàng)時(shí)顯示二級(jí)菜單項(xiàng)，當(dāng)鼠標(biāo)指針移出一級(jí)菜單項(xiàng)時(shí)隱藏二級(jí)菜單項(xiàng)。步驟3步驟4任務(wù)實(shí)現(xiàn)在瀏覽器中打開dropDownMenu.html文件，將鼠標(biāo)指針移至“傳統(tǒng)工藝”下的“陶瓷”菜單項(xiàng)上，下拉菜單的運(yùn)行結(jié)果如下圖所示。折疊式菜單任務(wù)2.2任務(wù)需求為了更好地管理公司各部門，某科技公司要對(duì)辦公系統(tǒng)進(jìn)行升級(jí)，幫助用戶可以快速地查看公司的各部門和子部門。項(xiàng)目經(jīng)理提出，需要在部門管理頁(yè)面中開發(fā)一個(gè)折疊式菜單，當(dāng)用戶單擊一級(jí)菜單項(xiàng)時(shí)，展開對(duì)應(yīng)的二級(jí)菜單項(xiàng)。任務(wù)需求一級(jí)菜單項(xiàng)二級(jí)菜單項(xiàng)行政部物資采購(gòu)部、后勤保障部、行政辦公室財(cái)務(wù)部財(cái)務(wù)核算部、稅務(wù)管理部、薪資管理部技術(shù)部Java研發(fā)部、Python研發(fā)部、PHP研發(fā)部市場(chǎng)部北京事業(yè)部、上海事業(yè)部、深圳事業(yè)部折疊式菜單的一級(jí)菜單項(xiàng)和二級(jí)菜單項(xiàng)如下表所示。任務(wù)需求折疊式菜單的效果如下圖所示。

先定一個(gè)小目標(biāo)！掌握折疊式菜單的實(shí)現(xiàn)方法，能夠完成折疊式菜單的開發(fā)任務(wù)實(shí)現(xiàn)任務(wù)實(shí)現(xiàn)創(chuàng)建foldingMenu.html文件，編寫折疊式菜單的頁(yè)面結(jié)構(gòu)并引入jquery-3.6.4.min.js文件。編寫折疊式菜單頁(yè)面的樣式。步驟1步驟2編寫邏輯代碼，實(shí)現(xiàn)菜單的折疊效果。步驟3實(shí)現(xiàn)折疊式菜單的開發(fā)任務(wù)實(shí)現(xiàn)在瀏覽器中打開foldingMenu.html文件，單擊一級(jí)菜單中的“財(cái)務(wù)部”，折疊式菜單的運(yùn)行結(jié)果如下圖所示。熱賣展示菜單任務(wù)2.3任務(wù)需求某電商公司是一家利用互聯(lián)網(wǎng)技術(shù)和電子商務(wù)模式進(jìn)行商品銷售的企業(yè)。為了提供更加便利的購(gòu)物渠道，該電商公司需要開發(fā)一個(gè)新的電商網(wǎng)站。在電商網(wǎng)站的開發(fā)過程中，需要設(shè)計(jì)一個(gè)熱賣展示菜單，該菜單用于展示熱賣的9種商品，并支持快速切換商品。當(dāng)鼠標(biāo)指針移動(dòng)到熱賣展示菜單左側(cè)的某個(gè)選項(xiàng)上時(shí)，右側(cè)的圖像區(qū)域顯示對(duì)應(yīng)的商品圖。其中，熱賣的商品包括茶具、文具、毛巾、羽絨服、靴子、耳機(jī)、收納盒、吉他和珠寶。任務(wù)需求熱賣展示菜單的效果如下圖所示。知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握元素索引的獲取方法，能夠使用index()方法獲取元素索引1.獲取元素索引知識(shí)儲(chǔ)備1.獲取元素索引當(dāng)需要獲取一個(gè)元素在其父元素中的位置索引時(shí)，可以使用index()方法。在jQuery中，index()方法用于獲取元素的索引，該方法的語(yǔ)法格式如下。index([selector|element])在上述語(yǔ)法格式中，selector表示選擇器，element表示元素，這兩個(gè)參數(shù)只能二選一。如果省略所有參數(shù)，則該方法返回當(dāng)前元素在其同級(jí)元素中的索引。索引從0開始遞增。知識(shí)儲(chǔ)備下面通過代碼演示index()方法的使用方法，示例代碼如下。<body>

<ul>

<li>美食</li>

<li>服飾</li>

<liclass="target">數(shù)碼</li>

<li>家居</li>

</ul>

<script>

varindex=$('.target').index();

console.log(index);

</script></body>1.獲取元素索引知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握利用索引取出元素的方法，能夠使用eq()方法從元素集中取出指定索引的元素2.根據(jù)索引取出元素知識(shí)儲(chǔ)備2.根據(jù)索引取出元素當(dāng)一個(gè)元素集合中存在多個(gè)元素時(shí)，如果需要在元素集合中選擇某個(gè)特定的元素進(jìn)行操作，可以使用eq()方法。在jQuery中，eq()方法用于從元素集合中取出指定索引的元素，該方法的語(yǔ)法格式如下。eq(index)在上述語(yǔ)法格式中，參數(shù)index表示元素在元素集中的索引。知識(shí)儲(chǔ)備下面通過代碼演示eq()方法的使用方法，示例代碼如下。<body>

<ulid="list">

<li>Item1</li>

<li>Item2</li>

<li>Item3</li>

</ul>

<script>

$('#listli').eq(0).css('color','blue');

</script></body>2.根據(jù)索引取出元素

先定一個(gè)小目標(biāo)！掌握熱賣展示菜單的實(shí)現(xiàn)方法，能夠完成熱賣展示菜單的開發(fā)任務(wù)實(shí)現(xiàn)任務(wù)實(shí)現(xiàn)創(chuàng)建directionMenu.html文件，編寫熱賣展示菜單的頁(yè)面結(jié)構(gòu)并引入jquery-3.6.4.min.js文件。編寫熱賣展示菜單頁(yè)面的樣式。步驟1步驟2編寫邏輯代碼，實(shí)現(xiàn)當(dāng)鼠標(biāo)指針懸停在菜單左側(cè)的某個(gè)選項(xiàng)上時(shí)，菜單右側(cè)顯示對(duì)應(yīng)圖片的效果。步驟3實(shí)現(xiàn)熱賣展示菜單的開發(fā)任務(wù)實(shí)現(xiàn)在瀏覽器中打開directionMenu.html文件，當(dāng)鼠標(biāo)指針懸停在菜單左側(cè)的“毛巾”上時(shí)，熱賣展示菜單的運(yùn)行結(jié)果如下圖所示。左進(jìn)左出導(dǎo)航菜單任務(wù)2.4任務(wù)需求隨著互聯(lián)網(wǎng)和移動(dòng)技術(shù)的快速發(fā)展，外賣行業(yè)呈現(xiàn)出快速增長(zhǎng)的趨勢(shì)。某外賣企業(yè)為了提高管理效率，決定開發(fā)一個(gè)外賣點(diǎn)餐后臺(tái)管理系統(tǒng)。在這個(gè)項(xiàng)目中，項(xiàng)目經(jīng)理提出需要開發(fā)一個(gè)帶有左進(jìn)左出效果的導(dǎo)航菜單頁(yè)面，具體要求是單擊一級(jí)菜單項(xiàng)時(shí)，一級(jí)菜單項(xiàng)下的二級(jí)菜單能夠以從屏幕左側(cè)滑入的方式顯示；再次單擊一級(jí)菜單項(xiàng)時(shí)，二級(jí)菜單能夠以從屏幕左側(cè)滑出的方式隱藏，從而實(shí)現(xiàn)左進(jìn)左出導(dǎo)航菜單效果。任務(wù)需求一級(jí)菜單項(xiàng)二級(jí)菜單項(xiàng)首頁(yè)管理無菜品管理菜品列表、添加菜品套餐管理套餐列表、添加套餐訂單管理訂單列表、添加訂單員工管理員工列表、添加員工左進(jìn)左出導(dǎo)航菜單的一級(jí)菜單項(xiàng)和二級(jí)菜單項(xiàng)具體如下表所示。任務(wù)需求左進(jìn)左出導(dǎo)航菜單的效果如下圖所示。知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握停止動(dòng)畫的方法，能夠靈活應(yīng)用stop()方法停止元素的動(dòng)畫效果停止動(dòng)畫的方法知識(shí)儲(chǔ)備如果在同一個(gè)元素上調(diào)用了一個(gè)以上的帶有動(dòng)畫效果的方法，則除了當(dāng)前正在播放的動(dòng)畫，其他動(dòng)畫將被放到一個(gè)隊(duì)列中，這樣就形成了動(dòng)畫隊(duì)列。動(dòng)畫隊(duì)列中的動(dòng)畫都是按照順序播放的，默認(rèn)只有當(dāng)?shù)?個(gè)動(dòng)畫播放完畢，才會(huì)播放下一個(gè)動(dòng)畫。如果想立即播放下一個(gè)動(dòng)畫，則需要停止當(dāng)前正在播放的動(dòng)畫。停止動(dòng)畫的方法知識(shí)儲(chǔ)備使用jQuery提供的stop()方法可以停止動(dòng)畫，該方法的語(yǔ)法格式如下。stop([clearQueue][,jumpToEnd])參數(shù)clearQueue是布爾值，表示是否刪除動(dòng)畫隊(duì)列中的動(dòng)畫，默認(rèn)值為false；參數(shù)jumpToEnd也是布爾值，表示是否立即完成當(dāng)前動(dòng)畫的播放，默認(rèn)值為false。停止動(dòng)畫的方法知識(shí)儲(chǔ)備在程序中調(diào)用stop()方法時(shí)，如果設(shè)置的參數(shù)不同，則實(shí)現(xiàn)的效果也不同。下面以div元素為例，演示stop()方法的3種常見使用方式，示例代碼如下。$('div').stop(); //第1種方式$('div').stop(true); //第2種方式$('div').stop(true,true); //第3種方式停止動(dòng)畫的方法任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握左進(jìn)左出導(dǎo)航菜單的實(shí)現(xiàn)方法，能夠完成左進(jìn)左出導(dǎo)航菜單的開發(fā)任務(wù)實(shí)現(xiàn)創(chuàng)建css目錄，并在該目錄中創(chuàng)建leftMenuBar.css文件。創(chuàng)建LeftMenu.html文件，編寫頁(yè)面結(jié)構(gòu)并引入jquery-3.6.4.min.js文件、leftMenuBar.css文件和FontAwesome圖標(biāo)庫(kù)的css文件。步驟1步驟2實(shí)現(xiàn)左進(jìn)左出導(dǎo)航菜單的開發(fā)在css目錄中的leftMenuBar.css文件中編寫樣式代碼。編寫邏輯代碼，實(shí)現(xiàn)外賣點(diǎn)餐后臺(tái)管理中導(dǎo)航菜單左進(jìn)左出的效果。步驟3步驟4任務(wù)實(shí)現(xiàn)在瀏覽器中打開LeftMenu.html文件，在導(dǎo)航菜單中單擊“訂單管理”的效果如下圖所示。本章小結(jié)本章主要講解如何利用jQuery實(shí)現(xiàn)多樣化菜單，通過任務(wù)講解jQuery中顯示和隱藏元素的方法、查找元素的方法、獲取元素索引的方法、根據(jù)索引取出元素的方法、停止動(dòng)畫的方法，并運(yùn)用這些知識(shí)完成下拉菜單、折疊式菜單、熱賣展示菜單和左進(jìn)左出導(dǎo)航菜單的開發(fā)。通過本章的學(xué)習(xí)，讀者應(yīng)能夠掌握如何使用jQuery開發(fā)多樣化菜單。本章小結(jié)第3章jQuery實(shí)現(xiàn)頁(yè)面交互（上）《jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程》學(xué)習(xí)目標(biāo)/Target

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

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

掌握瀏覽器事件，能夠靈活應(yīng)用常用的瀏覽器事件

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

掌握fadeTo()方法的使用方法，能夠使用fadeTo()方法調(diào)整元素的不透明度學(xué)習(xí)目標(biāo)/Target

掌握元素內(nèi)容操作，能夠靈活應(yīng)用元素內(nèi)容操作的方法

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

掌握Tab欄切換的實(shí)現(xiàn)方法，能夠完成Tab欄切換的開發(fā)學(xué)習(xí)目標(biāo)/Target

掌握返回頁(yè)面頂部的實(shí)現(xiàn)方法，能夠完成返回頁(yè)面頂部的開發(fā)

掌握高亮顯示圖像的實(shí)現(xiàn)方法，能夠完成高亮顯示圖像的開發(fā)

掌握留言板的實(shí)現(xiàn)方法，能夠完成留言板的開發(fā)章節(jié)概述/Summary在網(wǎng)頁(yè)開發(fā)中，開發(fā)具有交互效果的頁(yè)面可以提升用戶的使用體驗(yàn)，增強(qiáng)頁(yè)面的可用性、可視性和吸引力。jQuery為開發(fā)者提供了許多便捷的方法，使得頁(yè)面交互效果的開發(fā)更加簡(jiǎn)單和高效。本章將講解如何使用jQuery實(shí)現(xiàn)頁(yè)面交互。目錄/Contents任務(wù)3.1任務(wù)3.2Tab欄切換返回頁(yè)面頂部任務(wù)3.3任務(wù)3.4高亮顯示圖像留言板Tab欄切換任務(wù)3.1任務(wù)需求某在線教育公司正在開發(fā)一個(gè)IT教育網(wǎng)站，在開發(fā)過程中，需要實(shí)現(xiàn)Tab欄切換的頁(yè)面交互效果，當(dāng)用戶單擊Tab欄中的選項(xiàng)卡時(shí)，顯示選項(xiàng)卡對(duì)應(yīng)的內(nèi)容。其中，Tab欄中的選項(xiàng)卡為學(xué)科名稱，主要包括Java、大數(shù)據(jù)、Python、Web前端、Android、C/C++、PHP。任務(wù)需求Tab欄的效果如下圖所示。知識(shí)儲(chǔ)備1.元素class屬性操作

先定一個(gè)小目標(biāo)！掌握元素class屬性操作，能夠靈活應(yīng)用操作元素class屬性的方法知識(shí)儲(chǔ)備方法說明addClass(className)為所有匹配的元素添加指定類removeClass([className])從所有匹配的元素中刪除全部類或者指定類。如果省略className，刪除全部類；否則，刪除指定類hasClass(className)檢查當(dāng)前的元素中是否含有指定類，如果有，則返回true，否則返回falsetoggleClass(className)為所有匹配的元素切換指定類。在切換時(shí)，若類存在則刪除，不存在則添加在網(wǎng)頁(yè)開發(fā)中，若要改變?cè)氐臉邮剑酥苯釉O(shè)置元素的樣式，還可以通過class屬性改變樣式。jQuery提供了一些操作元素class屬性的方法，具體如下表所示。1.元素class屬性操作知識(shí)儲(chǔ)備為了更好地掌握元素class屬性的操作方法，下面通過代碼進(jìn)行演示。<body><divclass="menu">菜單</div><script>//為元素添加一個(gè)類$('.menu').addClass('first-class');//為元素添加多個(gè)類$('.menu').addClass('second-classthird-class');//為元素刪除一個(gè)類$('.menu').removeClass('first-class');1.元素class屬性操作知識(shí)儲(chǔ)備

//為元素刪除多個(gè)類$('.menu').removeClass('second-classthird-class');//為元素切換一個(gè)類$('.menu').toggleClass('first-class');//為元素切換多個(gè)類$('.menu').toggleClass('second-classthird-class');</script></body>>>接上頁(yè)代碼1.元素class屬性操作知識(shí)儲(chǔ)備2.元素過濾操作

先定一個(gè)小目標(biāo)！掌握元素過濾操作，能夠靈活應(yīng)用元素過濾方法知識(shí)儲(chǔ)備2.元素過濾操作方法說明eq(index)根據(jù)索引index取出元素filter(selector|obj|ele|fn)使用選擇器selector、jQuery對(duì)象obj、元素ele或函數(shù)fn完成指定元素的篩選is(selector|obj|ele|fn)根據(jù)選擇器selector、jQuery對(duì)象obj、元素ele或函數(shù)fn檢查當(dāng)前匹配的一組元素，如果這些元素中至少有一個(gè)與給定的參數(shù)匹配，則返回true在jQuery中使用選擇器可以獲取滿足某個(gè)條件的元素，jQuery還提供了一些過濾元素的方法，用于快速獲取元素。下面列舉jQuery中常用的元素過濾方法，如下表所示。知識(shí)儲(chǔ)備2.元素過濾操作方法說明has(selector|ele)根據(jù)選擇器selector、元素ele保留包含特定后代元素的元素，去掉不含有特定后代元素的元素slice(start[,end])根據(jù)索引范圍選擇元素集合中的子集，參數(shù)start表示開始索引，參數(shù)end表示結(jié)束索引，如果省略參數(shù)end，則表示從指定的索引位置開始，截取到最后一個(gè)元素first()獲取當(dāng)前元素集中的第一個(gè)元素last()獲取當(dāng)前元素集中的最后一個(gè)元素>>續(xù)上表知識(shí)儲(chǔ)備下面以filter()方法為例，演示如何在該方法中接收函數(shù)fn作為參數(shù)，示例代碼如下。<body>

<p>這是一個(gè)段落</p><pclass="my-class">這是一個(gè)段落</p>

<script>

$('p').filter(function(){

return$(this).hasClass('my-class');

}).css('background-color','pink');

</script></body>2.元素過濾操作知識(shí)儲(chǔ)備示例代碼運(yùn)行后，filter()方法實(shí)現(xiàn)的頁(yè)面效果如下圖所示。2.元素過濾操作任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握Tab欄切換的實(shí)現(xiàn)方法，能夠完成Tab欄切換的開發(fā)任務(wù)實(shí)現(xiàn)創(chuàng)建D:\jQuery\chapter03目錄，將jquery-3.6.4.min.js文件放入該目錄，并使用VSCode編輯器打開該目錄。創(chuàng)建tabSwitch.html文件，編寫Tab欄切換的頁(yè)面結(jié)構(gòu)并引入jquery-3.6.4.min.js文件。步驟1步驟2完成Tab欄切換的開發(fā)編寫Tab欄切換頁(yè)面的樣式。編寫邏輯代碼，首先使用on()方法注冊(cè)click事件，實(shí)現(xiàn)單擊元素時(shí)添加類，并移除其他兄弟元素的類，然后獲取被單擊元素在其兄弟元素中的索引，顯示具有相同索引的元素內(nèi)容，同時(shí)隱藏其他兄弟元素的內(nèi)容。步驟3步驟4任務(wù)實(shí)現(xiàn)在瀏覽器中打開tabSwitch.html文件，Tab欄切換的效果如下圖所示。任務(wù)實(shí)現(xiàn)在Tab欄切換的效果中默認(rèn)選中了Tab欄中的Java選項(xiàng)卡，該選項(xiàng)卡下方顯示對(duì)應(yīng)的內(nèi)容。當(dāng)單擊“Web前端”選項(xiàng)卡時(shí)，Tab欄切換的效果如下圖所示。返回頁(yè)面頂部任務(wù)3.2任務(wù)需求在網(wǎng)頁(yè)開發(fā)中，當(dāng)頁(yè)面需要顯示的內(nèi)容較多時(shí)，通常會(huì)設(shè)計(jì)返回頁(yè)面頂部的功能，該功能可以方便用戶快速回到頁(yè)面的頂部，從而使用戶更加輕松地瀏覽網(wǎng)頁(yè)。前端開發(fā)實(shí)習(xí)生小超發(fā)現(xiàn)他們團(tuán)隊(duì)中的某個(gè)項(xiàng)目頁(yè)面很長(zhǎng)，經(jīng)常需要上下滾動(dòng)，操作起來比較煩瑣，于是小超提出了項(xiàng)目頁(yè)面的優(yōu)化建議：在頁(yè)面右下角提供一個(gè)用于返回頁(yè)面頂部的超鏈接，當(dāng)向下滾動(dòng)頁(yè)面時(shí)，該超鏈接就會(huì)顯示。任務(wù)需求頁(yè)面右下角出現(xiàn)返回頁(yè)面頂部的超鏈接的效果如下圖所示。知識(shí)儲(chǔ)備1.瀏覽器事件

先定一個(gè)小目標(biāo)！掌握瀏覽器事件，能夠靈活應(yīng)用常用的瀏覽器事件知識(shí)儲(chǔ)備1.瀏覽器事件

在網(wǎng)頁(yè)中，滾動(dòng)條發(fā)生變化或調(diào)整瀏覽器窗口大小會(huì)觸發(fā)瀏覽器事件。使用瀏覽器事件可以捕捉用戶的操作，并觸發(fā)相應(yīng)的事件處理函數(shù)，以便處理瀏覽器之間的兼容問題，常用的瀏覽器事件如下表所示。事件類型說明scroll當(dāng)滾動(dòng)條發(fā)生變化時(shí)觸發(fā)resize當(dāng)調(diào)整瀏覽器窗口大小時(shí)被觸發(fā)知識(shí)儲(chǔ)備下面以resize事件為例進(jìn)行演示，示例代碼如下。<script>$(window).on('resize',function(){

console.log('當(dāng)調(diào)整瀏覽器窗口大小時(shí)觸發(fā)');

});</script>1.瀏覽器事件

知識(shí)儲(chǔ)備2.元素位置操作

先定一個(gè)小目標(biāo)！掌握元素位置操作，能夠靈活應(yīng)用元素位置操作知識(shí)儲(chǔ)備2.元素位置操作

元素位置操作本質(zhì)上屬于元素樣式操作。jQuery提供了一些簡(jiǎn)潔而高效的方法用于獲取和設(shè)置元素的位置，常用的元素位置操作方法如下表所示。方法說明offset([coordinates])設(shè)置或獲取元素的位置。當(dāng)省略參數(shù)coordinates時(shí)，該方法返回一個(gè)對(duì)象，該對(duì)象包含left屬性和top屬性；當(dāng)傳入?yún)?shù)coordinates時(shí)，表示使用coordinates對(duì)象設(shè)置元素的位置scrollTop([value])設(shè)置或獲取元素垂直方向滾動(dòng)的距離。當(dāng)省略參數(shù)value時(shí)，該方法將返回第一個(gè)匹配元素的滾動(dòng)條的垂直位置；當(dāng)傳入?yún)?shù)value時(shí)，表示設(shè)置所有匹配元素的滾動(dòng)條垂直位置為該參數(shù)scrollLeft([value])設(shè)置或獲取元素水平方向滾動(dòng)的距離。當(dāng)省略參數(shù)value時(shí)，該方法將返回第一個(gè)匹配元素的滾動(dòng)條的水平位置；當(dāng)傳入?yún)?shù)value時(shí)，表示設(shè)置所有匹配元素的滾動(dòng)條水平位置為該參數(shù)知識(shí)儲(chǔ)備為了更好地掌握jQuery中常用的位置操作方法，下面以scrollTop()方法和scrollLeft()方法為例，演示如何獲取和設(shè)置元素垂直和水平方向滾動(dòng)的距離，示例代碼如下。<head>

<style>

.container{

width:80px;

height:80px;

background-color:pink;

overflow:scroll;

}2.元素位置操作

知識(shí)儲(chǔ)備.son{

width:200px;

height:200px;

}

</style></head><body>

<divclass="container">

<divclass="son"></div>

</div>

<button>獲取</button>2.元素位置操作

>>接上頁(yè)代碼知識(shí)儲(chǔ)備<script>

$('button').on('click',function(){

//獲取元素水平方向滾動(dòng)的距離

console.log($('.container').scrollLeft());

//獲取元素垂直方向滾動(dòng)的距離

console.log($('.container').scrollTop());

});

//設(shè)置元素水平方向滾動(dòng)的距離

$('.container').scrollLeft(80);

//設(shè)置元素垂直方向滾動(dòng)的距離

$('.container').scrollTop(100);

</script></body>2.元素位置操作

>>接上頁(yè)代碼

先定一個(gè)小目標(biāo)！掌握返回頁(yè)面頂部的實(shí)現(xiàn)方法，能夠完成返回頁(yè)面頂部的開發(fā)任務(wù)實(shí)現(xiàn)任務(wù)實(shí)現(xiàn)創(chuàng)建returnTop.html文件，編寫返回頁(yè)面頂部的頁(yè)面結(jié)構(gòu)并引入jquery-3.6.4.min.js文件。編寫返回頁(yè)面頂部頁(yè)面的樣式。步驟1步驟2編寫邏輯代碼，實(shí)現(xiàn)返回頁(yè)面頂部的效果。步驟3實(shí)現(xiàn)返回頁(yè)面頂部的開發(fā)任務(wù)實(shí)現(xiàn)在瀏覽器中打開returnTop.html文件，返回頁(yè)面頂部的效果如下圖所示。高亮顯示圖像任務(wù)3.3任務(wù)需求世界環(huán)境日為每年的6月5日，設(shè)定這個(gè)特殊的日子旨在增強(qiáng)全球?qū)Νh(huán)境問題的認(rèn)識(shí)，鼓勵(lì)人們用實(shí)際行動(dòng)來保護(hù)地球上的自然資源和生態(tài)系統(tǒng)。為了提高學(xué)生的環(huán)保意識(shí)，倡導(dǎo)學(xué)生積極參與環(huán)境保護(hù)，某高校計(jì)劃在學(xué)校官網(wǎng)中增加一個(gè)校園環(huán)保頁(yè)面。在校園環(huán)保頁(yè)面的開發(fā)過程中，負(fù)責(zé)人提出了要求：設(shè)計(jì)一個(gè)顯示垃圾分類圖像的區(qū)域，該區(qū)域能夠同時(shí)顯示可回收物圖像、有害垃圾圖像、廚余垃圾圖像和其他垃圾圖像；當(dāng)鼠標(biāo)指針移入某張圖像時(shí)，其他圖像半透明顯示，從而使鼠標(biāo)指針移入的圖像高亮顯示。任務(wù)需求高亮顯示圖像的效果如下圖所示。知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握fadeTo()的使用方法，能夠使用fadeTo()調(diào)整元素的不透明度f(wàn)adeTo()知識(shí)儲(chǔ)備在jQuery中fadeTo()方法用于設(shè)置元素的不透明度，使用fadeTo()方法可以使元素的不透明度逐漸過渡到指定的值。fadeTo()方法的語(yǔ)法格式如下。fadeTo(duration,opacity[,complete])fadeTo()在上述語(yǔ)法格式中，參數(shù)duration可以是數(shù)字或字符串。當(dāng)是數(shù)字時(shí)，表示過渡的持續(xù)時(shí)間，單位為毫秒；當(dāng)是字符串時(shí)，表示預(yù)設(shè)的過渡效果，slow表示較慢的過渡效果，fast表示較快的過渡效果。參數(shù)opacity用于設(shè)置元素的不透明度，該參數(shù)的范圍是0~1，其中，0表示完全透明，0.5表示50%不透明，1表示完全不透明。參數(shù)complete為可選參數(shù)，表示在過渡效果完成后執(zhí)行的回調(diào)函數(shù)。知識(shí)儲(chǔ)備為了更好地掌握fadeTo()方法，下面通過代碼進(jìn)行演示，實(shí)現(xiàn)鼠標(biāo)指針移入第1個(gè)div元素時(shí)，該元素高亮顯示，第2個(gè)div元素以0.5的不透明度顯示的效果，示例代碼如下。<head><style>

div{width:100px;height:100px;float:left;margin-left:5px;}

.first-box{background-color:green;}

.second-box{background-color:red;}</style></head>fadeTo()知識(shí)儲(chǔ)備<body>

<divclass="first-box"></div>

<divclass="second-box"></div><script>

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

$(this).fadeTo('slow',1);

}).on('mouseout',function(){

$(this).fadeTo('slow',0.5);

});</script></body>fadeTo()>>接上頁(yè)代碼

先定一個(gè)小目標(biāo)！