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

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

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