RIA應用開發(fā)：1-初識Jquery

1、第一章 初識jQuery學習目標了解jQueryjQuery的功能jQuery的優(yōu)勢掌握jQuery開發(fā)環(huán)境的配置jQuery庫文件的下載jQuery文檔的使用jQuery環(huán)境的配置jQuery應用的創(chuàng)建1.1 jQuery概述隨著富客戶端技術的興起和Ajax技術的廣泛應用，陸續(xù)出現了一些優(yōu)秀的JS框架。例如：prototype、ExtJS、 JQuery、mootools。JQuery是一個輕量級的JavaScript框架。由John Resig于2006年創(chuàng)建。憑借其簡潔的語法和跨平臺的兼容性，極大地簡化了HTML文檔遍歷、DOM操作、事件處理、動畫特效和Ajax交互等編程任務，可用于快速

2、的web開發(fā)。1.1.1 jQuery的功能jQuery的目標：Write Less，Do MorejQuery的功能：獲取網頁元素：選擇器與工廠函數結合，選取文檔元素設置網頁外觀：跨瀏覽器，保持相同的外觀更改網頁內容：使用方法，動態(tài)改變網頁內容響應用戶操作：可靠的事件處理機制添加動畫效果：支持動畫效果實現Ajax交互：支持AJAX1.1.2 jQuery的優(yōu)勢輕量級 ：體積小跨瀏覽器兼容性：支持所有流行的瀏覽器基于css選擇器：HTML標記、#、.、,、空格等鏈式操作：許多操作針對同一個對象（集合）面向集合：選擇器產生的對象是集合詳細的文檔：chm文件(離線)豐富的UI控件：jQuery U

3、I與其他JavaScript庫共存免費開源：自由下載、免費使用1.2.1 配置開發(fā)環(huán)境下載jQuery庫。（http:/）1.2.1 配置開發(fā)環(huán)境下載jQuery庫jQuery-1.4.2.min.js:壓縮版本，主要用于產品和項目。jQuery-1.4.2.js:未壓縮版本，可用于學習、測試和開發(fā)。jQuery庫不需要安裝，將JS庫文件復制到站點中的某個文件夾中即可。1.2.1 配置開發(fā)環(huán)境jQuery幫助文檔1.2.1 配置開發(fā)環(huán)境jQuery幫助文檔1.2.1 配置開發(fā)環(huán)境jQuery開發(fā)工具和插件DreamWeaver要使Dreamweaver支持jQuery自動提示代碼的功能，需要下

4、載一個插件jQuery_API.mxp，下載地址：http:/xtnd.us/dreamweaver/jQuery 在Dreamweaver中依次選擇“命令”擴展管理”安裝擴展”jQuery_API.mxp”命令后安裝插件。Visual Stdio 20081.2.2 JQuery應用1.在頁面代碼中標簽內引入jQuery庫。 2.在頁面加載完成時運行代碼 $(document).ready(function() alert(hello world!); ); 例1可以在同一個頁面中無限次地使用$(document).ready()事件。其中注冊的函數會按照（代碼中的）先后順序依次執(zhí)行。$(f

5、unction() alert(hello world!);); 1.2.2 JQuery應用創(chuàng)建jQuery對象jQuery對象是指使用jQuery工廠函數包裝DOM元素所產生的對象。jQuery工廠函數是jQuery的核心函數，其名稱為jQuery，簡寫形式為$()。使用工廠函數$()可以將DOM元素轉化為jQuery對象。在例1中，使用$(document)將DOM元素document轉化為jQuery對象，并調用ready方法指定DOM加載就緒時執(zhí)行的函數。 $(document).ready(function() ); 1.2.2 JQuery應用例2：$(document).rea

6、dy(function() / 在DOM加載就緒時綁定一個匿名函數 $(#txtUserName).blur(function() if ($(this).val() = ) / 若用戶名為空 / 設置span的內容和文本顏色 $(#msg1).html(用戶名不能為空！).css(color, red); / 將焦點轉換到txtUserName文本框 $(this).focus(); return; );1.2.2 JQuery應用鏈式操作使用jQuery工廠函數創(chuàng)建jQuery對象之后，即可使用jquery提供的各種方法對其進行操作。在對jQuery對象執(zhí)行所需操作后仍然返回此對象本身，從而允許調用另一個jQuery方法對它進行操作。在這種操作鏈條中可以包含任意數目的方法調用，因此使用一個語句就可以完成對同一個對象的多種操作。 $(“#msg1”).html(“用戶名不能為空！”) /設置spa