《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,分享給團隊開發者一起使用。