ASP.NET程序設計教程（C#版）第4版 課件 第8、9章 使用jQuery、數(shù)據(jù)庫基礎和數(shù)據(jù)訪問控件_第1頁
ASP.NET程序設計教程（C#版）第4版 課件 第8、9章 使用jQuery、數(shù)據(jù)庫基礎和數(shù)據(jù)訪問控件_第2頁
ASP.NET程序設計教程（C#版）第4版 課件 第8、9章 使用jQuery、數(shù)據(jù)庫基礎和數(shù)據(jù)訪問控件_第3頁
ASP.NET程序設計教程（C#版）第4版 課件 第8、9章 使用jQuery、數(shù)據(jù)庫基礎和數(shù)據(jù)訪問控件_第4頁
ASP.NET程序設計教程（C#版）第4版 課件 第8、9章 使用jQuery、數(shù)據(jù)庫基礎和數(shù)據(jù)訪問控件_第5頁
已閱讀5頁，還剩36頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

第8章使用jQuery本章講述的主要內(nèi)容8.1jQuery概述8.2jQuery語法基礎8.3通過jQuery操作DOM8.4實訓

使用jQuery特效

8.1jQuery概述

jQuery是一個快速的，簡潔的JavaScript庫，它使用戶能更方便地處理DOM（DocumentObjectModel，文檔對象模型）、Events（事件）、實現(xiàn)動畫效果等，并且能方便地為網(wǎng)站提供Ajax交互。

概括的說，jQuery是基于JavaScript語言的框架編程，根據(jù)實際應用中的常見需求對JavaScript的功能進行了封裝，提供函數(shù)接口，簡化了JavaScript的操作，提倡“以更少的代碼，做更多的事情”（WriteLess,DoMore）。8.1jQuery概述8.1.1使用NuGet

NuGet是VS中默認的添加第三方庫的方法，使用NuGet不但可以向項目中添加jQuery，也可以添加其它一些第三方庫。8.1jQuery概述8.1.2在.aspx和.html中引用jQuery通過NuGet將jQuery添加到網(wǎng)站后，還需要在希望使用jQuery功能的.aspx或.html頁面中添加相關引用語句。其語法格式與向頁面中添加普通.js文件引用完全相同。

例如：8.2jQuery語法基礎8.2.1jQuery代碼的書寫位置要求1.使用ready()函數(shù)ready()的函數(shù)可以將包括在其中的代碼推遲至DOM對象加載完畢再執(zhí)行。8.2jQuery語法基礎8.2.1jQuery代碼的書寫位置要求2.在引用了母版頁的內(nèi)容中書寫jQuery代碼①如果使用該母版頁的所有或絕大多數(shù)內(nèi)容頁都需要使用jQuery，則可將jQuery引用語句書寫在母版頁的<head>和</head>之間。將jQuery功能實現(xiàn)代碼書寫在內(nèi)容頁的<asp:ContentID="Content2"……>和</asp:Content>標記區(qū)域的最下方。②使用該母版頁的內(nèi)容頁中只有個別內(nèi)容頁需要使用jQuery，則可將引用語句書寫在內(nèi)容頁的asp:ContentID="Content1"……>和</asp:Content>標記之間。將jQuery功能實現(xiàn)代碼書寫在內(nèi)容頁的<asp:ContentID="Content2"……>和</asp:Content>標記區(qū)域的最下方。8.2jQuery語法基礎8.2.2jQuery選擇器基本選擇器(1)通用選擇器：通用選擇器$(*)用于返回頁面中所有元素。(2)元素選擇器：元素選擇器$("元素名")用于返回指定類型的所有元素。(3)ID選擇器：ID選擇器$("#元素ID")用于返回指定元素ID值代表的單一元素。(4)類選擇器：類選擇器$(".類名稱")用于返回使用指定類名稱的所有元素。(5)組合選擇器：組合選擇器可以將多種選擇器組合在一起，返回所有符合條件的元素。8.2jQuery語法基礎8.2.2jQuery選擇器3.過濾選擇器使用過濾選擇器可以按照預設過濾規(guī)則（條件）篩選出所需要的頁面元素。參閱源代碼：ex8-28.3通過jQuery操作DOM8.3.1屬性操作attr()和removeAttr()方法

attr()方法用于獲取所匹配元素集合中第一個元素的屬性，也可以用來設置所匹配元素的一個或多個屬性值，attr()方法有如下所示的4種語法格式。8.3通過jQuery操作DOM8.3.1屬性操作2.prop()和removeProp()方法prop()方法用于獲取所匹配元素集合中第一個元素的屬性，也可以用來設置所匹配元素的一個或多個屬性值。

參閱源代碼：ex8-38.3通過jQuery操作DOM8.3.2樣式操作jQuery提供了一些用于控制、修改頁面元素外觀樣式的方法，如addClass()、removeClass()、toggleClass()和前面使用過的css()方法。此外，使用上節(jié)介紹的attr()方法，也可以實現(xiàn)對元素外觀的控制和修改。1.addClass()和removeClass()方法8.3通過jQuery操作DOM8.3.2樣式操作2.toggleClass()方法

toggleClass()方法用于實現(xiàn)元素樣式的添加或移除。當元素的指定樣式存在時，移除該樣式，否則添加該樣式。

toggleClass(classname);

其中，classname表示css類名，toggleClass()方法被調用時首先判斷指定的CSS類是否已被應用，若是則移除，否則應用該CSS類。8.3通過jQuery操作DOM8.3.2樣式操作3.css()方法

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

text()方法與html()方法的區(qū)別在于，text()方法只能返回或設置匹配元素的純文本內(nèi)容，不能包含HTML標記。3.val()方法

val()方法用于獲取或設置表單元素的值，包括文本框、下拉列表框、單選和復選框等元素。當元素允許多選時，返回一個包含被選項的數(shù)組。

參閱源代碼：ex8-58.3通過jQuery操作DOM8.3.4jQuery常用特效方法show()和hide()方法show()方法和hide()方法可以通過遞增或遞減元素的width、height和opacity（透明度）屬性值實現(xiàn)元素的顯示和隱藏，其語法格式如下所示。8.3通過jQuery操作DOM8.3.4jQuery常用特效方法2.slideDown()、slideUp()和slideToggle()方法

slideDown()和slideUp()方法，以向下或向上滑動的動畫效果隱藏或顯示匹配的元素。這樣的動畫效果實際上是通過改變匹配元素的height屬性值來實現(xiàn)的。slideToggle()方法可將匹配元素隱藏的顯示出來，將顯示的隱藏起來。8.3通過jQuery操作DOM8.3.4jQuery常用特效方法3.fadeIn()、fadeOut()和fadeTo()方法

fadeIn()、fadeOut()和fadeTo()方法通過修改匹配元素的不透明度來顯示或隱藏它們。

fadeOut()方法將不透明度設置為0，使元素完全透明，然后將CSSdisplay屬性設置為“none”來實現(xiàn)完全隱藏元素；

fadeTo()方法允許指定一個0到1之間的不透明度值，來控制元素的透明程度；fadeIn()與fadeOut()相反，它將匹配元素的不透明度設置為1，使元素完全不透明（正常顯示）。8.3通過jQuery操作DOM8.3.4jQuery常用特效方法4.animate()方法animate()方法是一個功能強大的動畫效果設計方法，它可以在動畫實現(xiàn)的過程中指定眾多完善動畫效果的屬性。8.3通過jQuery操作DOM8.3.5jQuery事件處理和事件綁定“事件處理”是指某一時刻頁面元素對某種由系統(tǒng)或用戶引發(fā)的操作的響應及處理，是系統(tǒng)與用戶進行交換的主要途徑。如，前面已經(jīng)使用過的頁面加載、按鈕被單擊、文本框得到或失去焦點等事件發(fā)生時，自動調用對應的函數(shù)。jQuery中的事件處理是在JavaScript的基礎上擴充、完善而構成的，功能更加強大，使用更加便利。所謂“事件綁定”是指將頁面元素的事件類型與事件處理函數(shù)關聯(lián)起來。當事件觸發(fā)時調用事先綁定的函數(shù)進行處理。在JavaScript中通常采用在元素標記中添加屬性的方式綁定事件處理函數(shù)8.3通過jQuery操作DOM8.3.5jQuery事件處理和事件綁定1.on()方法on()方法用于將事件處理函數(shù)綁定到元素的某個事件，其語法格式如下所示。對于常用事件（如，click、mouseover、mouseout等）jQuery允許省略on關鍵字，將事件綁定代碼簡化為類似如下的形式。8.3通過jQuery操作DOM8.3.5jQuery事件處理和事件綁定2.one()方法one()方法用于將元素的某個事件綁定到一個一次性（只被執(zhí)行一次）的事件處理函數(shù)。3.hover()方法hover()方法用于處理鼠標指向事件。當鼠標指針進入元素區(qū)域時觸發(fā)第一個函數(shù)，離開時觸發(fā)第二個函數(shù)，第二個函數(shù)為可選項，省略時表示鼠標離開時不執(zhí)行任何操作。8.4實訓使用jQuery特效8.4.1實訓目的通過實訓進一步理解使用jQuery實現(xiàn)頁面效果的常用方法和手段；掌握通過jQuery處理客戶端事件的代碼編寫方法。8.4.2實訓要求

在.aspx頁面中設計一個用于顯示職工信息的HTML表格，初次打開頁面時顯示圖8-10所示的奇偶行背景色不同的效果。

當用戶通過單擊行首單選按鈕選擇某行時，單選按鈕呈選中狀態(tài)，選中行的文本和背景色也呈高亮色顯示，如圖8-11所示。

如果用戶單擊了表格中某行而未單擊單選按鈕，則只改變該行文本和背景色呈高亮色顯示，不改變該行單選按鈕的狀態(tài)。第9章數(shù)據(jù)庫基礎和數(shù)據(jù)訪問控件本章講述的主要內(nèi)容9.1使用數(shù)據(jù)庫系統(tǒng)9.2使用數(shù)據(jù)控件訪問數(shù)據(jù)庫9.3實訓使用數(shù)據(jù)訪問控件查詢數(shù)據(jù)庫

9.1使用數(shù)據(jù)庫系統(tǒng)9.1.1創(chuàng)建MicrosoftSQLSever數(shù)據(jù)庫在VS2015中內(nèi)置了SQLServer2014ExpressLocalDB版（安裝升級包后，可自動更新為LocalDB2016），LocalDB是SQLServerExpress的一種運行模式，也可以理解為超輕量級的SQLServer，特別適合在開發(fā)環(huán)境使用。1.新建數(shù)據(jù)庫和數(shù)據(jù)表在VisualStudio中提供了一個簡單的，操作遠程SQLServer數(shù)據(jù)庫的“服務器資源管理器”。

9.1使用數(shù)據(jù)庫系統(tǒng)9.1.1創(chuàng)建MicrosoftSQLSever數(shù)據(jù)庫1.新建數(shù)據(jù)庫和數(shù)據(jù)表

新建數(shù)據(jù)庫9.1使用數(shù)據(jù)庫系統(tǒng)9.1.1創(chuàng)建MicrosoftSQLSever數(shù)據(jù)庫1.新建數(shù)據(jù)庫和數(shù)據(jù)表

新建表9.1使用數(shù)據(jù)庫系統(tǒng)9.1.1創(chuàng)建MicrosoftSQLSever數(shù)據(jù)庫2.SQLServer中常用數(shù)據(jù)類型

(1)char(n)(2)varchar(n)(3)text和varchar(MAX)(4)int(5)real和float(6)datetime9.1使用數(shù)據(jù)庫系統(tǒng)9.1.2常用SQL語句1.查詢語句（Select）SELECT語句主要用于從數(shù)據(jù)庫中返回需要的數(shù)據(jù)集，其語法格式為：SELECTselect_list[INTOnew_table_name]FROMtable_list[WHEREsearch_conditions][GROUPBYgroup_by_list][HAVINGsearch_conditions][ORDERBYorder_list[ASC|DESC]]9.1使用數(shù)據(jù)庫系統(tǒng)9.1.2常用SQL語句2.插入記錄語句（Insert）

使用Insert語句可以向表中插入記錄，該語句的語法格式為：INSERTINTO表名稱(字段名)VALUE(字段值)3.修改記錄語句（Update）使用Update語句可更新（修改）表中的數(shù)據(jù)，其語法格式為：UPDATE表名稱SET字段名=值WHERE條件4.刪除記錄語句（Delete）使用DELETE語句可以刪除數(shù)據(jù)表中指定行，其語法格式為：DELETEFROM表名稱WHERE條件9.1使用數(shù)據(jù)庫系統(tǒng)9.1.3MicrosoftSQLServer常用操作1.創(chuàng)建存儲過程9.1使用數(shù)據(jù)庫系統(tǒng)9.1.3MicrosoftSQLServer常用操作2.分離和附加數(shù)據(jù)庫(1)分離數(shù)據(jù)庫

9.1使用數(shù)據(jù)庫系統(tǒng)9.1.3MicrosoftSQLServer常用操作3.分離和附加數(shù)據(jù)庫(2)附加數(shù)據(jù)庫首先需要將從其他計算機分離復制過來或從Internet中下載的數(shù)據(jù)庫文件復制到安裝有SQLServerExpressLocalDB的計算機中（通常需要復制到網(wǎng)站下的App_Data文件夾中）。啟動VS，在服務器資源管理器中右鍵單擊“數(shù)據(jù)連接”，在彈出的快捷菜單中執(zhí)行“新建連接”命令，按向導提示即可完成操作。9.1

使用數(shù)據(jù)庫系統(tǒng)9.1.4

MicrosoftAccess

Access數(shù)據(jù)庫管理系統(tǒng)是MicrosoftOffice的一個組件，是最常用的本地數(shù)據(jù)庫之一。在C#中可以方便地使用數(shù)據(jù)庫對象，操作Access數(shù)據(jù)庫。

1.創(chuàng)建數(shù)據(jù)庫

2.創(chuàng)建數(shù)據(jù)表9.2使用數(shù)據(jù)控件訪問數(shù)據(jù)庫9.2.1使用數(shù)據(jù)源控件1.AccessDataSource

AccessDataSource數(shù)據(jù)源控件是專門為連接Access數(shù)據(jù)庫而設計的。2.SqlDataSource

SqlDataSource數(shù)據(jù)源控件是專門為連接MicrosoftSQLServer數(shù)據(jù)庫而設計的。使用SqlDataSource控件還能建立與Oracle、ODBC、OLEDB、等數(shù)據(jù)庫的連接，并對這些數(shù)據(jù)庫執(zhí)行查詢、插入、編輯或刪除操作。3.LinqDataSource4.XmlDataSource5.SiteMapDataSource9.2使用數(shù)據(jù)控件訪問數(shù)據(jù)庫9.2.2使用GridView控件

GridView控件用于配合數(shù)據(jù)源控件實現(xiàn)對數(shù)據(jù)庫進行瀏覽、編輯、刪除等操作。數(shù)據(jù)源控件主要包括用于連接Access數(shù)據(jù)庫的AccessDataSource和用于連接SQLServer數(shù)據(jù)庫的SqlDataSource。1.添加數(shù)據(jù)源控件2.添加GridView控件3.設置GridView控件的屬性參閱源代碼：ex9-19.2使用數(shù)據(jù)控件訪問數(shù)據(jù)庫9.2.3

使用FormView數(shù)據(jù)控件

FormView控件與前面介紹過的GridView控件相似，也是用于瀏覽或操作數(shù)據(jù)庫的數(shù)據(jù)控件。它與GridView相比主要的不同在于顯示在FormView中的數(shù)據(jù)記錄是分頁的，即每頁只顯示一條記錄。9.2使用數(shù)據(jù)控件訪問數(shù)據(jù)庫9.2.3

使用FormView數(shù)據(jù)控件9.2

使用數(shù)據(jù)控件訪問數(shù)據(jù)庫9.2.4

使用Repeater控件

Repeater控件是一個數(shù)據(jù)綁定列表控件（數(shù)據(jù)瀏覽控件），它允許通過為列表中顯示的

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論