ASPNET程序設(shè)計(jì)教程第8章--使用jQuery課件

1、第8章 使用jQuery本章講述的主要內(nèi)容8.1 jQuery概述8.2 jQuery語(yǔ)法基礎(chǔ)8.3 通過(guò)jQuery操作DOM8.4 實(shí)訓(xùn) 使用jQuery特效8.1 jQuery概述 jQuery是一個(gè)快速的，簡(jiǎn)潔的JavaScript庫(kù)，它使用戶能更方便地處理DOM（Document Object Model，文檔對(duì)象模型）、Events（事件）、實(shí)現(xiàn)動(dòng)畫效果等，并且能方便地為網(wǎng)站提供Ajax交互。 概括的說(shuō)，jQuery是基于JavaScript語(yǔ)言的框架編程，根據(jù)實(shí)際應(yīng)用中的常見需求對(duì)JavaScript的功能進(jìn)行了封裝，提供函數(shù)接口，簡(jiǎn)化了JavaScript的操作，提倡“以更少的

2、代碼，做更多的事情”（Write Less, Do More）。8.1 jQuery概述8.1.1 使用NuGet NuGet是VS中默認(rèn)的添加第三方庫(kù)的方法，使用NuGet不但可以向項(xiàng)目中添加jQuery，也可以添加其它一些第三方庫(kù)。8.1 jQuery概述8.1.2 在.aspx和.html中引用jQuery 通過(guò)NuGet將jQuery添加到網(wǎng)站后，還需要在希望使用jQuery功能的.aspx或.html頁(yè)面中添加相關(guān)引用語(yǔ)句。其語(yǔ)法格式與向頁(yè)面中添加普通.js文件引用完全相同。 例如：8.2 jQuery語(yǔ)法基礎(chǔ)8.2.1 jQuery代碼的書寫位置要求1. 使用ready()函數(shù) r

3、eady()的函數(shù)可以將包括在其中的代碼推遲至DOM對(duì)象加載完畢再執(zhí)行。8.2 jQuery語(yǔ)法基礎(chǔ)8.2.1 jQuery代碼的書寫位置要求2. 在引用了母版頁(yè)的內(nèi)容中書寫jQuery代碼 如果使用該母版頁(yè)的所有或絕大多數(shù)內(nèi)容頁(yè)都需要使用jQuery，則可將jQuery引用語(yǔ)句書寫在母版頁(yè)的和之間。將jQuery功能實(shí)現(xiàn)代碼書寫在內(nèi)容頁(yè)的和標(biāo)記區(qū)域的最下方。 使用該母版頁(yè)的內(nèi)容頁(yè)中只有個(gè)別內(nèi)容頁(yè)需要使用jQuery，則可將引用語(yǔ)句書寫在內(nèi)容頁(yè)的asp:Content ID=Content1和標(biāo)記之間。將jQuery功能實(shí)現(xiàn)代碼書寫在內(nèi)容頁(yè)的和標(biāo)記區(qū)域的最下方。8.2 jQuery語(yǔ)法基礎(chǔ)8.

4、2.2 jQuery選擇器基本選擇器(1) 通用選擇器：通用選擇器$(*)用于返回頁(yè)面中所有元素。(2) 元素選擇器：元素選擇器$(元素名)用于返回指定類型的所有元素。(3) ID選擇器：ID選擇器$(#元素ID)用于返回指定元素ID值代表的單一元素。(4) 類選擇器：類選擇器$(.類名稱)用于返回使用指定類名稱的所有元素。(5) 組合選擇器：組合選擇器可以將多種選擇器組合在一起，返回所有符合條件的元素。8.2 jQuery語(yǔ)法基礎(chǔ)8.2.2 jQuery選擇器3. 過(guò)濾選擇器 使用過(guò)濾選擇器可以按照預(yù)設(shè)過(guò)濾規(guī)則（條件）篩選出所需要的頁(yè)面元素。參閱源代碼：ex8-28.3 通過(guò)jQuery操作

5、DOM8.3.1 屬性操作attr()和removeAttr()方法 attr()方法用于獲取所匹配元素集合中第一個(gè)元素的屬性，也可以用來(lái)設(shè)置所匹配元素的一個(gè)或多個(gè)屬性值，attr()方法有如下所示的4種語(yǔ)法格式。8.3 通過(guò)jQuery操作DOM8.3.1 屬性操作2. prop()和removeProp()方法 prop()方法用于獲取所匹配元素集合中第一個(gè)元素的屬性，也可以用來(lái)設(shè)置所匹配元素的一個(gè)或多個(gè)屬性值。 參閱源代碼：ex8-38.3 通過(guò)jQuery操作DOM8.3.2 樣式操作 jQuery提供了一些用于控制、修改頁(yè)面元素外觀樣式的方法，如addClass()、removeCl

6、ass()、toggleClass()和前面使用過(guò)的css()方法。此外，使用上節(jié)介紹的attr()方法，也可以實(shí)現(xiàn)對(duì)元素外觀的控制和修改。1. addClass()和removeClass()方法8.3 通過(guò)jQuery操作DOM8.3.2 樣式操作2. toggleClass()方法 toggleClass()方法用于實(shí)現(xiàn)元素樣式的添加或移除。當(dāng)元素的指定樣式存在時(shí)，移除該樣式，否則添加該樣式。toggleClass(classname); 其中，classname表示css類名，toggleClass()方法被調(diào)用時(shí)首先判斷指定的CSS類是否已被應(yīng)用，若是則移除，否則應(yīng)用該CSS類。8.

7、3 通過(guò)jQuery操作DOM8.3.2 樣式操作3. css()方法 css()方法是jQuery 1.9以上版本新增內(nèi)容，用于獲取或設(shè)置匹配元素的CSS樣式，其語(yǔ)法格式有如下4種形式。參閱源代碼：ex8-48.3 通過(guò)jQuery操作DOM8.3.3 內(nèi)容操作 內(nèi)容操作是指使用jQuery提供的方法獲取或修改元素或表單的內(nèi)容。jQuery常用的內(nèi)容操作方法有，html()、text()和val()方法。1. html()方法 html()方法用于獲取或設(shè)置第一個(gè)匹配元素的HTML內(nèi)容，該方法僅對(duì)HTML和XHTML文檔有效，不能用于XML文檔。8.3 通過(guò)jQuery操作DOM8.3.3

8、內(nèi)容操作2. text()方法 text()方法用于讀取或設(shè)置匹配元素的文本內(nèi)容，其語(yǔ)法格式及使用方法與html()方法相同。 text()方法與html()方法的區(qū)別在于，text()方法只能返回或設(shè)置匹配元素的純文本內(nèi)容，不能包含HTML標(biāo)記。3. val()方法 val()方法用于獲取或設(shè)置表單元素的值，包括文本框、下拉列表框、單選和復(fù)選框等元素。當(dāng)元素允許多選時(shí)，返回一個(gè)包含被選項(xiàng)的數(shù)組。 參閱源代碼：ex8-58.3 通過(guò)jQuery操作DOM8.3.4 jQuery常用特效方法show()和hide()方法 show()方法和hide()方法可以通過(guò)遞增或遞減元素的width、he

9、ight和opacity（透明度）屬性值實(shí)現(xiàn)元素的顯示和隱藏，其語(yǔ)法格式如下所示。8.3 通過(guò)jQuery操作DOM8.3.4 jQuery常用特效方法2. slideDown()、slideUp()和slideToggle()方法 slideDown()和slideUp()方法，以向下或向上滑動(dòng)的動(dòng)畫效果隱藏或顯示匹配的元素。這樣的動(dòng)畫效果實(shí)際上是通過(guò)改變匹配元素的height屬性值來(lái)實(shí)現(xiàn)的。slideToggle()方法可將匹配元素隱藏的顯示出來(lái)，將顯示的隱藏起來(lái)。8.3 通過(guò)jQuery操作DOM8.3.4 jQuery常用特效方法3. fadeIn()、fadeOut()和fadeTo

10、()方法 fadeIn()、fadeOut()和fadeTo()方法通過(guò)修改匹配元素的不透明度來(lái)顯示或隱藏它們。 fadeOut()方法將不透明度設(shè)置為0，使元素完全透明，然后將CSS display屬性設(shè)置為“none”來(lái)實(shí)現(xiàn)完全隱藏元素； fadeTo()方法允許指定一個(gè)0到1之間的不透明度值，來(lái)控制元素的透明程度；fadeIn()與fadeOut()相反，它將匹配元素的不透明度設(shè)置為1，使元素完全不透明（正常顯示）。8.3 通過(guò)jQuery操作DOM8.3.4 jQuery常用特效方法4. animate()方法 animate()方法是一個(gè)功能強(qiáng)大的動(dòng)畫效果設(shè)計(jì)方法，它可以在動(dòng)畫實(shí)現(xiàn)的

11、過(guò)程中指定眾多完善動(dòng)畫效果的屬性。8.3 通過(guò)jQuery操作DOM8.3.5 jQuery事件處理和事件綁定 “事件處理”是指某一時(shí)刻頁(yè)面元素對(duì)某種由系統(tǒng)或用戶引發(fā)的操作的響應(yīng)及處理，是系統(tǒng)與用戶進(jìn)行交換的主要途徑。如，前面已經(jīng)使用過(guò)的頁(yè)面加載、按鈕被單擊、文本框得到或失去焦點(diǎn)等事件發(fā)生時(shí)，自動(dòng)調(diào)用對(duì)應(yīng)的函數(shù)。jQuery中的事件處理是在JavaScript的基礎(chǔ)上擴(kuò)充、完善而構(gòu)成的，功能更加強(qiáng)大，使用更加便利。 所謂“事件綁定”是指將頁(yè)面元素的事件類型與事件處理函數(shù)關(guān)聯(lián)起來(lái)。當(dāng)事件觸發(fā)時(shí)調(diào)用事先綁定的函數(shù)進(jìn)行處理。在JavaScript中通常采用在元素標(biāo)記中添加屬性的方式綁定事件處理函數(shù)8

12、.3 通過(guò)jQuery操作DOM8.3.5 jQuery事件處理和事件綁定1. on()方法 on()方法用于將事件處理函數(shù)綁定到元素的某個(gè)事件，其語(yǔ)法格式如下所示。 對(duì)于常用事件（如，click、mouseover、mouseout等）jQuery允許省略on關(guān)鍵字，將事件綁定代碼簡(jiǎn)化為類似如下的形式。8.3 通過(guò)jQuery操作DOM8.3.5 jQuery事件處理和事件綁定2. one()方法 one()方法用于將元素的某個(gè)事件綁定到一個(gè)一次性（只被執(zhí)行一次）的事件處理函數(shù)。3. hover()方法 hover()方法用于處理鼠標(biāo)指向事件。當(dāng)鼠標(biāo)指針進(jìn)入元素區(qū)域時(shí)觸發(fā)第一個(gè)函數(shù)，離開時(shí)觸發(fā)第二個(gè)函數(shù)，第二個(gè)函數(shù)為可選項(xiàng)，省略時(shí)表示鼠標(biāo)離開時(shí)不執(zhí)行任何操作。8.4 實(shí)訓(xùn) 使用jQuery特效8.4.1 實(shí)訓(xùn)目的 通過(guò)實(shí)訓(xùn)進(jìn)一步理解使用jQuery實(shí)現(xiàn)頁(yè)面效果的常用方法和手段；掌握通過(guò)jQuery