Web 前端開(kāi)發(fā)技術(shù)（HTML5+CSS3+JavaScript+jQuery） 課件 項(xiàng)目十　 jQuery 基礎(chǔ)

jQuery基礎(chǔ)Web前端開(kāi)發(fā)技術(shù)篇4：jQuery技術(shù)

本項(xiàng)目介紹jQuery的特點(diǎn)和語(yǔ)法基礎(chǔ),以及各種選擇器、過(guò)濾器、遍歷方法。在下載jQuery函數(shù)庫(kù)文件的過(guò)程中,培養(yǎng)學(xué)生互幫互助、樂(lè)于奉獻(xiàn)的價(jià)值觀念,幫助學(xué)生樹(shù)立正確的價(jià)值觀與合作共贏的觀念,促進(jìn)學(xué)生在共同合作中成長(zhǎng)。俗話說(shuō):“眾人拾柴火焰高”,個(gè)人的力量是微小的,而一群人形成的集體力量是強(qiáng)大的,發(fā)揮集體力量可以實(shí)現(xiàn)個(gè)人無(wú)法實(shí)現(xiàn)的目標(biāo)。在學(xué)習(xí)和生活中,我們要樹(shù)立集體意識(shí),通過(guò)集體合作實(shí)現(xiàn)最終目標(biāo)。序言目錄CONTENTSjQuery語(yǔ)法基礎(chǔ)jQuery選擇元素對(duì)象010201jQuery語(yǔ)法基礎(chǔ)Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.jQuery函數(shù)庫(kù)文件jQuery是免費(fèi)的、開(kāi)源的JavaScript函數(shù)庫(kù),可以到j(luò)Query官網(wǎng)中下載。jQuery函數(shù)庫(kù)里有兩種版本的文件,即擴(kuò)展名為.js的完整版文件和擴(kuò)展名為.min.js的壓縮版文件。完整版文件稱為開(kāi)發(fā)者文件,包含所有函數(shù)庫(kù)和空格符、換行符、注釋等內(nèi)容,文件較大,常用于開(kāi)發(fā)和調(diào)試;壓縮版文件稱為部署文件,是保留了所有jQuery函數(shù)庫(kù)的精簡(jiǎn)版本,文件較小,在部署時(shí)使用可以降低網(wǎng)絡(luò)流量,減少Web服務(wù)器負(fù)載。jQuery函數(shù)庫(kù)的版本分為1.x、2.x和3.x系列。1.x系列兼容低版本的瀏覽器,而2.x、3.x系列放棄支持低版本的瀏覽器。3.x系列的最新版本是jquery-3.7.1。本書(shū)示例代碼中使用的是jquery-3.5.1.min.js文件。在設(shè)計(jì)項(xiàng)目時(shí),要根據(jù)項(xiàng)目需求使用合適的jQuery函數(shù)庫(kù)版本。jQuery語(yǔ)法基礎(chǔ)jQuery使用方式在網(wǎng)頁(yè)設(shè)計(jì)中使用jQuery函數(shù)庫(kù)文件和引用其他JavaScript文件一樣,只需要在網(wǎng)頁(yè)代碼的<script>……</script>標(biāo)記中添加jQuery函數(shù)庫(kù)文件的引用聲明即可,其基本語(yǔ)法格式如下。<scriptsrc=“路徑/jQuery文件.js”></script>jQuery函數(shù)庫(kù)文件路徑有相對(duì)路徑和絕對(duì)路徑兩種。1.相對(duì)路徑相對(duì)路徑是指jQuery函數(shù)庫(kù)文件和網(wǎng)頁(yè)文件在同一服務(wù)器上,需要在網(wǎng)頁(yè)文件所在的服務(wù)器上存儲(chǔ)jQuery函數(shù)庫(kù)文件。2.絕對(duì)路徑在一些網(wǎng)絡(luò)服務(wù)器上有jQuery函數(shù)庫(kù)的網(wǎng)絡(luò)分發(fā)文件,可以直接免費(fèi)引用。采用絕對(duì)路徑時(shí),給出具有jQuery網(wǎng)絡(luò)分發(fā)文件的服務(wù)器的完整路徑URL即可。但要注意的是,這種引用還是有一定風(fēng)險(xiǎn)的,jQuery語(yǔ)法基礎(chǔ)jQuery使用方式如果網(wǎng)絡(luò)服務(wù)器不再提供該引用文件,則有可能導(dǎo)致網(wǎng)頁(yè)功能失效。引用jQuery官網(wǎng)服務(wù)器上的jquery-3.5.1.min.js文件時(shí),引用聲明如下。<scriptsrc="https:///jquery-3.5.1.min.js"></script>引用Microsoft官網(wǎng)服務(wù)器上的jquery-3.5.1.min.js文件時(shí),引用聲明如下。<scriptsrc="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>jQuery語(yǔ)法基礎(chǔ)jQuery語(yǔ)法規(guī)則jQuery語(yǔ)法是指通過(guò)選取HTML元素,并對(duì)選取的元素執(zhí)行某些操作,其基本語(yǔ)法格式如下。$("元素對(duì)象").方法();1.jQuery符號(hào)“$”jQuery語(yǔ)句以“$”開(kāi)始,“$”符號(hào)是一個(gè)常用的簡(jiǎn)寫(xiě),它實(shí)際上是jQuery對(duì)象的別稱。因此,當(dāng)看到以“$”開(kāi)始的語(yǔ)句時(shí),通常意味著正在使用jQuery。在同時(shí)使用多個(gè)JavaScript函數(shù)庫(kù)的HTML文檔中,jQuery可能會(huì)和其他使用“$”的函數(shù)沖突,因此可以使用jQuery的noConflict()方法自定義jQuery的別稱符號(hào),noConflict()方法的基本語(yǔ)法格式如下。新的別稱符號(hào)=jQuery.noConflict();jQuery語(yǔ)法基礎(chǔ)jQuery語(yǔ)法規(guī)則2.元素對(duì)象元素對(duì)象是jQuery語(yǔ)句中操作的對(duì)象,可以使用選擇器或過(guò)濾器的方式選擇文檔中的HTML元素對(duì)象。3.方法方法是對(duì)所選對(duì)象進(jìn)行的操作。有些方法不需要設(shè)置參數(shù),而有些方法需要設(shè)置參數(shù)。4.document對(duì)象的ready()方法為了避免HTML文檔在元素加載完成前就執(zhí)行jQuery語(yǔ)句,從而導(dǎo)致潛在的錯(cuò)誤出現(xiàn),因此所有的jQuery語(yǔ)句都需要寫(xiě)在document對(duì)象的ready()方法中,ready()方法的基本語(yǔ)法格式如下。jQuery語(yǔ)法基礎(chǔ)jQuery語(yǔ)法規(guī)則$(document).ready(function(){jQuery語(yǔ)句;……});jQuery語(yǔ)法基礎(chǔ)02jQuery選擇元素對(duì)象Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.jQuery基本選擇器1.全局選擇器全局選擇器用于選擇文檔中的所有元素,其基本語(yǔ)法格式如下。$("*").方法();2.標(biāo)記選擇器標(biāo)記選擇器用于選擇指定標(biāo)記名稱的所有元素,其基本語(yǔ)法格式如下。$("標(biāo)記名稱").方法();3.id選擇器id選擇器用于選擇指定id名稱的單個(gè)元素,其基本語(yǔ)法格式如下。$("#id名稱").方法();jQuery選擇元素對(duì)象jQuery基本選擇器4.類選擇器類選擇器用于選擇具有同一個(gè)類名稱的所有元素,其基本語(yǔ)法格式如下。$(".類名稱").方法();例如,下面的語(yǔ)句表示將類名稱為a的所有元素隱藏起來(lái)。$(".a").hide();jQuery選擇元素對(duì)象jQuery復(fù)合選擇器jQuery復(fù)合選擇器就是將多個(gè)選擇器組合在一起,選擇器之間以逗號(hào)分隔,只要符合其中的任何一個(gè)篩選條件就會(huì)被匹配,返回的是一個(gè)集合形式的jQuery包裝集,利用jQuery索引器可以取得集合中的jQuery對(duì)象。1.多重選擇器多重選擇器用逗號(hào)分隔多個(gè)選擇器,用于同時(shí)選擇多個(gè)元素對(duì)象。多個(gè)選擇器可以是基礎(chǔ)選擇器中的任意一種或幾種,如果元素對(duì)象匹配其中任意一種選擇器,則表示元素對(duì)象被選中,其基本語(yǔ)法格式如下。$("選擇器1,選擇器2……").方法();jQuery選擇元素對(duì)象jQuery復(fù)合選擇器2.屬性選擇器屬性選擇器用于選擇具有某種屬性或?qū)傩灾堤卣鞯乃性貙?duì)象。常用的屬性選擇器及說(shuō)明如表10-1所示。jQuery選擇元素對(duì)象jQuery復(fù)合選擇器在選擇器前加上基本選擇器,可以更準(zhǔn)確地匹配選擇。3.表單選擇器表單選擇器用于匹配表單中的表單元素對(duì)象。在表單選擇器中,有兩種選擇方式:一種是根jQuery選擇元素對(duì)象jQuery復(fù)合選擇器據(jù)表單元素的類型進(jìn)行選擇,另一種是根據(jù)表單元素的狀態(tài)進(jìn)行選擇。常用的表單選擇器及說(shuō)明如表10-2所示。jQuery選擇元素對(duì)象jQuery復(fù)合選擇器4.層次選擇器層次選擇器根據(jù)元素在網(wǎng)頁(yè)中的位置關(guān)系進(jìn)行選擇。常用的層次選擇器及說(shuō)明如表10-3所示。jQuery選擇元素對(duì)象件采購(gòu)匯總表jQuery選擇元素對(duì)象jQuery過(guò)濾器過(guò)濾器是在元素選擇時(shí)設(shè)置的篩選條件,可以單獨(dú)使用,也可以和選擇器配合使用。1.基礎(chǔ)過(guò)濾器常用的基礎(chǔ)過(guò)濾器及說(shuō)明如表10-4所示。件采購(gòu)匯總表jQuery選擇元素對(duì)象jQuery過(guò)濾器2.子元素過(guò)濾器常用的子元素過(guò)濾器及說(shuō)明如表10-5所示。件采購(gòu)匯總表jQuery選擇元素對(duì)象jQuery過(guò)濾器在過(guò)濾器nth-child(n的表達(dá)式)中,n的表達(dá)式是數(shù)字與字母n的組合。n的取值從0開(kāi)始,計(jì)算出表達(dá)式的值作為序號(hào)。3.內(nèi)容過(guò)濾器內(nèi)容過(guò)濾器可以根據(jù)元素包含的子元素或內(nèi)容進(jìn)行過(guò)濾。常用的內(nèi)容過(guò)濾器及說(shuō)明如表10-6所示。件采購(gòu)匯總表jQuery選擇元素對(duì)象jQuery過(guò)濾器4.可見(jiàn)性過(guò)濾器可見(jiàn)性過(guò)濾器根據(jù)元素當(dāng)前的狀態(tài)是否可見(jiàn)進(jìn)行過(guò)濾。常用的可見(jiàn)性過(guò)濾器及說(shuō)明如表10-7所示。件采購(gòu)匯總表jQuery選擇元素對(duì)象jQuery過(guò)濾器元素在網(wǎng)頁(yè)上處于隱藏狀態(tài),包括以下5種情況。(1)元素的高度和寬度明確設(shè)置為0。(2)元素的CSS中屬性display的值為none。(3)表單元素type的屬性值為hidden。(4)如果元素的父元素處于隱藏狀態(tài),那么子元素也處于隱藏狀態(tài)。件采購(gòu)匯總表jQuery選擇元素對(duì)象jQuery過(guò)濾器(5)下拉列表中的option選項(xiàng)無(wú)論是否選中都處于隱藏狀態(tài)。元素在網(wǎng)頁(yè)上不顯示,但以下4種情況認(rèn)為是處于可見(jiàn)狀態(tài)的。(1)元素的透明度opacity屬性為0,此時(shí)元素仍占據(jù)原來(lái)的位置。(2)元素的visibility屬性為hidden,此時(shí)元素仍占據(jù)原來(lái)的位置。(3)在元素處于逐漸隱藏的動(dòng)畫(huà)效果中,在動(dòng)畫(huà)結(jié)束之前認(rèn)為都是可見(jiàn)的。(4)在元素處于逐漸顯現(xiàn)的動(dòng)畫(huà)效果中,從動(dòng)畫(huà)開(kāi)始認(rèn)為都是可見(jiàn)的。實(shí)訓(xùn)工單問(wèn)答題：(4)jQuery選擇器和過(guò)濾器的作用是什么?(5)jQuery的遍歷方法是基于什么結(jié)構(gòu)查找元素的?(6)哪個(gè)jQuery方法用于添加或刪除被選元素的一個(gè)或多個(gè)類?(7)哪個(gè)內(nèi)置方法用于將一個(gè)或多個(gè)元素添加到數(shù)組末尾,并返回?cái)?shù)組的新長(zhǎng)度?操作題設(shè)計(jì)網(wǎng)頁(yè),用jQuery實(shí)現(xiàn)表格中第一行文字加粗,背