Web前端開發技術教案設計項目課題jQuery基礎授課時間授課對象大學生學習目標1.了解jQuery的特點。2.掌握jQuery的使用方式和語法規則。3.掌握jQuery的選擇器、過濾器。學習重點掌握jQuery的使用方式和語法規則。學習難點掌握jQuery的選擇器、過濾器。教學方法講授法、課堂演示法教學用具多媒體課件教學流程教學環節教學內容教學過程任務一jQuery語法基礎一、jQuery函數庫文件jQuery是免費的、開源的JavaScript函數庫,可以到jQuery官網中下載。jQuery函數庫里有兩種版本的文件,即擴展名為.js的完整版文件和擴展名為.min.js的壓縮版文件。完整版文件稱為開發者文件,包含所有函數庫和空格符、換行符、注釋等內容,文件較大,常用于開發和調試;壓縮版文件稱為部署文件,是保留了所有jQuery函數庫的精簡版本,文件較小,在部署時使用可以降低網絡流量,減少Web服務器負載。jQuery函數庫的版本分為1.x、2.x和3.x系列。1.x系列兼容低版本的瀏覽器,而2.x、3.x系列放棄支持低版本的瀏覽器。3.x系列的最新版本是jquery-3.7.1。本書示例代碼中使用的是jquery-3.5.1.min.js文件。在設計項目時,要根據項目需求使用合適的jQuery函數庫版本。二、jQuery使用方式在網頁設計中使用jQuery函數庫文件和引用其他JavaScript文件一樣,只需要在網頁代碼的<script>……</script>標記中添加jQuery函數庫文件的引用聲明即可,其基本語法格式如下。<scriptsrc=“路徑/jQuery文件.js”></script>jQuery函數庫文件路徑有相對路徑和絕對路徑兩種。1.相對路徑相對路徑是指jQuery函數庫文件和網頁文件在同一服務器上,需要在網頁文件所在的服務器上存儲jQuery函數庫文件。2.絕對路徑在一些網絡服務器上有jQuery函數庫的網絡分發文件,可以直接免費引用。采用絕對路徑時,給出具有jQuery網絡分發文件的服務器的完整路徑URL即可。但要注意的是,這種引用還是有一定風險的,如果網絡服務器不再提供該引用文件,則有可能導致網頁功能失效。引用jQuery官網服務器上的jquery-3.5.1.min.js文件時,引用聲明如下。<scriptsrc="https:///jquery-3.5.1.min.js"></script>引用Microsoft官網服務器上的jquery-3.5.1.min.js文件時,引用聲明如下。<scriptsrc="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>三、jQuery語法規則jQuery語法是指通過選取HTML元素,并對選取的元素執行某些操作,其基本語法格式如下。$("元素對象").方法();1.jQuery符號“$”jQuery語句以“$”開始,“$”符號是一個常用的簡寫,它實際上是jQuery對象的別稱。因此,當看到以“$”開始的語句時,通常意味著正在使用jQuery。在同時使用多個JavaScript函數庫的HTML文檔中,jQuery可能會和其他使用“$”的函數沖突,因此可以使用jQuery的noConflict()方法自定義jQuery的別稱符號,noConflict()方法的基本語法格式如下。新的別稱符號=jQuery.noConflict();2.元素對象元素對象是jQuery語句中操作的對象,可以使用選擇器或過濾器的方式選擇文檔中的HTML元素對象。3.方法方法是對所選對象進行的操作。有些方法不需要設置參數,而有些方法需要設置參數。4.document對象的ready()方法為了避免HTML文檔在元素加載完成前就執行jQuery語句,從而導致潛在的錯誤出現,因此所有的jQuery語句都需要寫在document對象的ready()方法中,ready()方法的基本語法格式如下。$(document).ready(function(){jQuery語句;……});任務二jQuery選擇元素對象一、jQuery基本選擇器1.全局選擇器全局選擇器用于選擇文檔中的所有元素,其基本語法格式如下。$("*").方法();2.標記選擇器標記選擇器用于選擇指定標記名稱的所有元素,其基本語法格式如下。$("標記名稱").方法();3.id選擇器id選擇器用于選擇指定id名稱的單個元素,其基本語法格式如下。$("#id名稱").方法();4.類選擇器類選擇器用于選擇具有同一個類名稱的所有元素,其基本語法格式如下。$(".類名稱").方法();例如,下面的語句表示將類名稱為a的所有元素隱藏起來。$(".a").hide();二、jQuery復合選擇器jQuery復合選擇器就是將多個選擇器組合在一起,選擇器之間以逗號分隔,只要符合其中的任何一個篩選條件就會被匹配,返回的是一個集合形式的jQuery包裝集,利用jQuery索引器可以取得集合中的jQuery對象。1.多重選擇器多重選擇器用逗號分隔多個選擇器,用于同時選擇多個元素對象。多個選擇器可以是基礎選擇器中的任意一種或幾種,如果元素對象匹配其中任意一種選擇器,則表示元素對象被選中,其基本語法格式如下。$("選擇器1,選擇器2……").方法();2.屬性選擇器屬性選擇器用于選擇具有某種屬性或屬性值特征的所有元素對象。常用的屬性選擇器及說明如表10-1所示。在選擇器前加上基本選擇器,可以更準確地匹配選擇。3.表單選擇器表單選擇器用于匹配表單中的表單元素對象。在表單選擇器中,有兩種選擇方式:一種是根據表單元素的類型進行選擇,另一種是根據表單元素的狀態進行選擇。常用的表單選擇器及說明如表10-2所示。4.層次選擇器層次選擇器根據元素在網頁中的位置關系進行選擇。常用的層次選擇器及說明如表10-3所示。三、jQuery過濾器過濾器是在元素選擇時設置的篩選條件,可以單獨使用,也可以和選擇器配合使用。1.基礎過濾器常用的基礎過濾器及說明如表10-4所示。2.子元素過濾器常用的子元素過濾器及說明如表10-5所示。在過濾器nth-child(n的表達式)中,n的表達式是數字與字母n的組合。n的取值從0開始,計算出表達式的值作為序號。3.內容過濾器內容過濾器可以根據元素包含的子元素或內容進行過濾。常用的內容過濾器及說明如表10-6所示。4.可見性過濾器可見性過濾器根據元素當前的狀態是否可見進行過濾。常用的可見性過濾器及說明如表10-7所示。元素在網頁上處于隱藏狀態,包括以下5種情況。(1)元素的高度和寬度明確設置為0。(2)元素的CSS中屬性display的值為none。(3)表單元素type的屬性值為hidden。(4)如果元素的父元素處于隱藏狀態,那么子元素也處于隱藏狀態。(5)下拉列表中的option選項無論是否選中都處于隱藏狀態。元素在網頁上不顯示,但以下4種情況認為是處于可見狀態的。(1)元素的透明度opacity屬性為0,此時元素仍占據原來的位置。(2)元素的visibility屬性為hidden,此時元素仍占據原來的位置。(3)在元素處于逐漸隱藏的動畫效果中,在動畫結束之前認為都是可見的。(4)在元素處于逐漸顯現的動畫效果中,從動畫開始認為都是可見的。作業布置一、問答題(1)網頁中如何添加jQuery文件引用聲明?(2)jQuery語句中包含哪幾個要素?分別是什么含義?(3)為了避免文檔在元素加載完成前就執行jQuery語句而導致潛在的錯誤出現,必須使用什么辦法？(4)jQuery選擇器和過濾器的作用是什么?(5)jQuery