《jQuery Tutorial pdf_精编》由会员分享，可在线阅读，更多相关《jQuery Tutorial pdf_精编（46页珍藏版）》请在金锄头文库上搜索。
1、jQuery Tutorial 上官林傑 (ericsk) 2008/07/25 課程大綱 JavaScript Framework jQuery 設計概念 jQuery 選擇器及 DOM 基本操作 事件處理及 Ajax 特效與 UI 實作練習 “ If I have seen further, it is by standing on the shoulders of Giants. “ Issac Newton, 1676. Why JavaScript Framework? JavaScript 太難寫了！ 有 framework 可以減輕負擔，何樂而不為？ 各個瀏覽器各自為政（其實也就
2、 MSIE 比較不合群一點） 不要再浪費時間在處理跨瀏覽器的問題了。 站在巨人的肩膀上，讓專業的來 牛頓都跟你說了. 容易有範本可以抄（好工程師不要學.） 嗯，免得東抄西抄 code 更難維護 . Why jQuery? 好學好用，重點是它還很輕巧 以物件為中心，可以是主格也可以是受格。 e.g., 有 append 也可以 appendTo 完整的源碼大小（壓縮後傳輸）僅僅 16 Kb (版本1.2.6) 超棒超快速的選擇器 完全支援 CSS 3 及 XPath 選擇器，容易操作網頁上的物件。 一次呼叫便套用至所有被選擇到的元素。 Open Source 陣列 - 一個動作套用到全部 e.g
3、., $(.items).addClass(selected); 使用 jQuery 1. 在 下載最新的 jquery*.js 檔案，然後跟你的 project 擺在一起並且引入。 e.g., 2. 直接使用 Google host 的 jQuery jQuery Hello World $(Hello, world).appendTo($(body); 作了什麼事？ 1. 動態產生了一個 Hello, world，並且把它變成 jQuery 物件。 2. 使用 jQuery.appendTo API 將之插入到 body tag 的最後面。 jQuery 選擇器 jQuery 的選擇器包括
4、： 一段 HTML，如果沒有 match 到則會產生新的。 $(test) 標籤名 $(body) CSS 3 選擇器 $(ul li.selected) XPath $(ahref=http:/www.cht) jQuery 選擇器（續） 搭配選擇器一同服用的 filter $(ul li:even), $(ul li:first-child) 表單特殊的選擇器 $(:checked), $(:input) 除了直接選擇之外，也可以加入 context： $(div, #panel) jQuery 陣列 因為 jQuery 選擇後都是回傳陣列，所以可以用陣列長度是 否大於 0 來判斷是不是有
5、選到東西： if ($(.checked).length = 0) alert(您還沒有勾選); 針對每個選到的元素操作： 如果是 jQuery API，直接套用即可。 否則： $(.selected).each(function(index, domElem) ); jQuery 陣列（續） 雖然回傳的都是 jQuery 物件，但可以用 get(index) 取回 DOM Element。 $(#nick).get(0) = document.getElementById(nick) 也可以用 index() 來查該 DOM element/jQuery object 在 陣列中的位置。 1
6、.2.3以前只能查 DOM element，後來我發了一個 ticket 請 jQuery team 支援查 jQuery object 讀取、修改元素 內容 使用 html() 或 text() 來塞一段或讀取 HTML code 或 text 在選到的元素。 沒帶參數是讀出來： var content = $(#test).html(); 加了參數是修改： $(#test).html(modified content); 很多 jQuery 的 API 都有上述的設計（getter/setter） 讀取、修改元素 內容（續） abcdefg var c = $(#foo).html();
7、/ c 的值為 “abcdefg“ . . / 把 #foo 的內容改成 hij $(#foo).html(hij); hij 元素屬性 用 attr() 來處理元素中的屬性 一樣有前述 getter/setter 的設計，不過參數可以帶字串或是 JSON object： $(.).attr(id); / 取得 id 的 值 $(.).attr(id, foo); / 將 id 改成 foo 一次設定多個屬性 $(.foo).attr(rel: bar, title: show me); . . . . 元素樣式 用 css() 修改樣式 效果如同直接修改 style 屬性，所以要用 styl
8、e 的名稱 （backgroun-color - backgroundColor） $(.foo).css(textAlign: center, color: red); . . 元素的 class 利用 addClass() 或 removeClass() 來新增移除 class 若是直接修改 class 屬性，要自行處理字串。 . $(.foo).addClass(highlight); . $(.foo).removeClass(foo); . . DOM 操作 內部插入元素： append(), appendTo() - 插入最後 prepend(), prependTo() - 插入
9、最前 . $(.foo).append(hello); . hello $(test).prependTo($(#x); . test . DOM 操作（續） 外部插入元素： wrap() $(.foo).wrap(); . . DOM 操作（續） 前後插入 before(), insertBefore() after(), insertAfter() $(.foo).after(); . . 更多 jQuery DOM 操作請參考 DOM 走訪 (Traversing) 在選擇某元素後，再透過 traverse/filter 的 API 來再選擇其 它的元素。 前後一個 $(.).prev(
10、filter); $(.).next(filter); . $(.foo).next(); DOM 走訪 (Traversing) 親子關係 $(.).parent(filter); $(.).children(filter); $(.).siblings(filter); 篩選器 $(.).eq(index); $(.).filter(filter); 更多 DOM 走訪 操作請參考 事件（Event）處理 jQuery 的事件處理 jQuery Events API 除了可以用一致的方式註冊事件處理器之 外，也 統一了 event object 可以方便 trigger (自訂) 事件 可
11、以暫時開關事件處理器 . 類似其它 API 的 getter/setter 的方式，但是 傳入參數時，是傳入一個事件處理器 若沒傳參數，則是 trigger 該事件 註冊事件處理器 處理 click 事件： $(.).click(function(evt) alert(clicked); ); 或是 $(.).bind(click, function(evt) alert(clicked); ); 事件處理器（續） 只做一次： $(.).one(click, funciton(e) . ); 移除處理器： $(.).unbind(click); 觸發事件 對某元素觸發 mouseover 事件
12、： $(.).mouseover(); 或是 $(.).trigger(mouseover); 自訂事件 利用 bind 註冊自己的事件： $(.).bind(dlg-open, function(e) ); 利用 trigger 來觸發 $(.).trigger(dlg-open); 利用 unbind 來移除 $(.).unbind(dlg-open); onload shortcut 在整頁都讀取完才做事 處理 window.onload 的 event 在 jQuery 中可以直接寫: $(function() ); 即表示該 function 會在整頁讀完之後才運作。 AJAX jQ
13、uery AJAX API 專門用來處理 Ajax 的動作，可以直接使用 $.ajax() 來使用， 再依照需求修改參數。 有 $.get(), $.post(), $.load() 這些 shortcut 可以使用 會自動觸發 ajax* 事件，其它元素可以註冊這些事件的處 理器。 $.ajax $.ajax( / 用來指定要 request 的 URL url: /foo.php, / 是要用 GET/POST 的方式作 request type: post, / request 的資料 data: . , / 回傳的資料型態，會影響 success callback 的參數 dataTy
14、pe: json, / 是否要 cache 住 response cache: false, / 在 ajax 發起 request 前呼叫 beforeSend: function() , / ajax 發生錯誤時呼叫 error: function(xhr) . , / 成功完成 reuqest 時呼叫 success: function(resp) . , / 最後呼叫 complete: function(xhr) . ); 範例：送出需求後更改某區域 內容 $.ajax( url: foo.php, data: x: abc, y: 123, success: function(re
15、sp) $(#bar).html(resp); ); 或是 $(#bar).load(foo.php, x: abc, y: 123); jQuery 自訂 ajax 事件 透過註冊這些事件的處理器，當 ajax 在進行時，會依照進行的 狀況驅動適當的事件 有 ajaxStart, ajaxSend, ajaxStop, ajaxError, ajaxSuccess, ajaxComplete 這些自訂的 ajax 事件。 特效及 UI jQuery 預設的特效 預設在 jQuery 的函式庫中提供了基本常見的特效： 顯示或消失（show、hide） 向上或向下捲動（slideUp、slideDown） 淡入或淡出（fadeIn、fadeOut、fadeTo） 也可以自己設計特效。 使用 animates() jQuery UI 另外一組團隊基於 jQuery 所設計的 UI widget，網站上可以客 製化需求下載 javascript 檔案來使用。 也可以到 jQuery UI theme roller 網站選擇或設計自己的 theme (CSS) 來改善 UI 美觀。 自己寫 jQuery plugin 寫 jQuery plugin 好處：重覆利用自己的 code，分享給團隊開發者一起使用。
