Your SlideShare is downloading. ×
0
jQuery Tutorial

  上官林傑 (ericsk)
   2008/07/25
課程大綱

JavaScript Framework
jQuery 設計概念
jQuery 選擇器及 DOM 基本操作
事件處理及 Ajax
特效與 UI
實作練習
quot; If I have seen further, it is
by standing on the shoulders
of Giants. quot;
Issac Newton , 1676.
Why JavaScript Framework?

 JavaScript 太難寫了!
    有 framework 可以減輕負擔,何樂而不為?
 各個瀏覽器各自為政 (其實也就 MSIE 比較不合群一點)
    不要再浪費時間在處理跨瀏...
Why jQuery?

 好學好用,重點是它還很輕巧
   以物件為中心,可以是主格也可以是受格。
         e.g., 有 append 也可以 appendTo
       完整的源碼大小(壓縮後傳輸)僅僅 16 Kb (版本1...
jQuery 的設計架構及使用
jQuery 能做的事...

 新增或移除 DOM 物件(網頁上的元素)
 更改網頁元素的樣式及內容
 處理事件
 產生特效或動畫
 Ajax
 ....
jQuery 的設計概念

 jQuery 是用來操作選擇器的物件,也是整套 framework 的
 prototype
    所有東西都是 jQuery,也可以簡單寫作 $。
 所有 API 的回傳值都是 jQuery 物件及陣列
   ...
使用 jQuery

1. 在 http://jquery.com/ 下載最新的 jquery*.js 檔案,然後跟你的
   project 擺在一起並且引入。
   e.g.,
  <script type=quot;text/javasc...
jQuery Hello World

$('<h1>Hello, world</h1>').appendTo($('body'));



作了什麼事?
 1. 動態產生了一個 <h1>Hello, world</h1>,並且把它變成 jQu...
jQuery 選擇器

jQuery 的選擇器包括:
  一段 HTML,如果沒有 match 到則會產生新的。
     $('<div>test</div>')

  標籤名
     $('body')
  CSS 3 選擇器
     ...
jQuery 選擇器(續)

 搭配選擇器一同服用的 filter
 $('ul > li:even'), $('ul > li:first-child')

 表單特殊的選擇器
 $(':checked'), $(':input')
 除了直...
jQuery 陣列

 因為 jQuery 選擇後都是回傳「陣列」,所以可以用陣列長度是
 否大於 0 來判斷是不是有選到東西:

 if ($('.checked').length == 0) {
   alert('您還沒有勾選');
 }...
jQuery 陣列(續)

 雖然回傳的都是 jQuery 物件,但可以用 get([index]) 取回
 DOM Element。

 $('#nick').get(0) == document.getElementById('nick')...
讀取、修改元素 內容

 使用 html() 或 text() 來塞一段或讀取 HTML code 或 text
 在選到的元素。
   沒帶參數是讀出來:
   var content = $('#test').html();

   加了參...
讀取、修改元素 內容(續)

<div id=quot;fooquot;>abcdefg</div>


var c = $('#foo').html();
// c 的值為 quot;abcdefgquot;
...
...
// 把 #fo...
元素屬性

用 attr() 來處理元素中的屬性
 一樣有前述 getter/setter 的設計,不過參數可以帶字串或是
 JSON object:
                           // 取得 id 的 值
 $(......
元素樣式

用 css() 修改樣式
  效果如同直接修改 style 屬性,所以要用 style 的名稱
  (backgroun-color -> backgroundColor)
  $('.foo').css({textAlign: '...
元素的 class

 利用 addClass() 或 removeClass() 來新增移除 class
   若是直接修改 class 屬性,要自行處理字串。

    $('.foo').addClass('highlight');

 ...
DOM 操作

 內部插入元素:
 append(), appendTo() -- 插入最後
 prepend(), prependTo() -- 插入最前

$('.foo').append('<b>hello</b>');   $('<em...
DOM 操作(續)

 外部插入元素:
   wrap()
   $('.foo').wrap('<p id=quot;panelquot;>');

   <div class=quot;fooquot;>...</div>



    <...
DOM 操作(續)

 前後插入
   before(), insertBefore()
   after(), insertAfter()

 $('.foo').after('<img src=quot;load.gifquot; alt=...
DOM 走訪 (Traversing)

 在選擇某元素後,再透過 traverse/filter 的 API 來「再選擇」其
 它的元素。
 前後一個
   $(...).prev([filter] );
   $(...).next([fi...
DOM 走訪 (Traversing)

 親子關係
   $(...).parent([filter] );
   $(...).children([filter] );
   $(...).siblings([filter] );
 篩選器...
事件(Event)處理
jQuery 的事件處理

 jQuery Events API 除了可以用一致的方式註冊事件處理器之
 外,也
   統一了 event object
   可以方便 trigger (自訂) 事件
   可以暫時開關事件處理器
   ......
註冊事件處理器

處理 click 事件:

  $(...).click(function(evt) {
      alert('clicked');
  });

或是

  $(...).bind('click', function(e...
事件處理器(續)

 只做一次:
 $(...).one('click', funciton(e) { ... });

 移除處理器:
 $(...).unbind('click');
觸發事件

對某元素觸發 mouseover 事件:
$(...).mouseover();

或是
$(...).trigger('mouseover');
自訂事件

利用 bind 註冊自己的事件:
$(...).bind('dlg-open', function(e) { .... });

利用 trigger 來觸發
$(...).trigger('dlg-open');

利用 unbi...
onload shortcut

  在整頁都讀取完才做事
    處理 window.onload 的 event
    在 jQuery 中可以直接寫:

    $(function() {
      ....
    });

  ...
AJAX
jQuery AJAX API

 專門用來處理 Ajax 的動作,可以直接使用 $.ajax() 來使用,
 再依照需求修改參數。
 有 $.get(), $.post(), $.load() 這些 shortcut 可以使用
 會自動觸發 ...
$.ajax
$.ajax({
 // 用來指定要 request 的 URL
 url: '/foo.php',
 // 是要用 GET/POST 的方式作 request
 type: 'post',
 // request 的資料
 da...
範例:送出需求後更改某區域 內容

 $.ajax({
     url: 'foo.php',
     data: {x: 'abc', y: 123},
     success: function(resp) {
          $...
jQuery 自訂 ajax 事件

 透過註冊這些事件的處理器,當 ajax 在進行時,會依照進行的
 狀況驅動適當的事件

 有 ajaxStart, ajaxSend, ajaxStop, ajaxError,
 ajaxSuccess,...
特效及 UI
jQuery 預設的特效

 預設在 jQuery 的函式庫中提供了基本常見的特效:
   顯示或消失(show、hide)
   向上或向下捲動(slideUp、slideDown)
   淡入或淡出(fadeIn、fadeOut、fadeT...
jQuery UI

 http://ui.jquery.com/
 另外一組團隊基於 jQuery 所設計的 UI widget,網站上可以客
 製化需求下載 javascript 檔案來使用。
 也可以到 jQuery UI theme r...
自己寫 jQuery plugin
寫 jQuery plugin

  好處:重覆利用自己的 code,分享給團隊開發者一起使用。
  方法:
    定義在 $.fn 下
    符合 jQuery-style 來寫作
      API 要套用到「所有」被選擇到的元素。
 ...
套用至「所有」被選擇到的元素

 利用 $.each

 $.fn.foo = function({
   return this.each(function() {
     // TODO: 你要做的事
   });
 });
包裝 plugin

 避免寫出與其它 js 檔案相衝 code
 (function($){

  ....

 })(jQuery);

 如果能用 JSMin 或 YUI Compressor 壓縮一下也不錯。
結論
請愛用 jQuery

 讓 JavaScript 變好寫了(咦?)
 解決了不少跨瀏覽器間的問題。
 用了公認好用的 framework,在維護上也比較輕鬆。
 code 小、速度快。
 ...
線上資源

官方網站 :  http://jquery.com/
專案網站 :  http://code.google.com/p/jqueryjs/
jQuery UI: http://ui.jquery.com/
中文 jQuery 討論群...
Upcoming SlideShare
Loading in...5
×

jQuery Tutorial

8,022

Published on

I teach jQuery in my company

Published in: Technology
1 Comment
6 Likes
Statistics
Notes
  • more here
    http://svsupham.com/zipper/page2.php?search=jQuery+Tutorial+ebooks
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
8,022
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
125
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "jQuery Tutorial"

  1. 1. jQuery Tutorial 上官林傑 (ericsk) 2008/07/25
  2. 2. 課程大綱 JavaScript Framework jQuery 設計概念 jQuery 選擇器及 DOM 基本操作 事件處理及 Ajax 特效與 UI 實作練習
  3. 3. quot; If I have seen further, it is by standing on the shoulders of Giants. quot; Issac Newton , 1676.
  4. 4. Why JavaScript Framework? JavaScript 太難寫了! 有 framework 可以減輕負擔,何樂而不為? 各個瀏覽器各自為政 (其實也就 MSIE 比較不合群一點) 不要再浪費時間在處理跨瀏覽器的問題了。 站在巨人的肩膀上,讓專業的來 牛頓都跟你說了... 容易有範本可以抄 (好工程師不要學...) 嗯,免得東抄西抄 code 更難維護 ...
  5. 5. Why jQuery? 好學好用,重點是它還很輕巧 以物件為中心,可以是主格也可以是受格。 e.g., 有 append 也可以 appendTo 完整的源碼大小(壓縮後傳輸)僅僅 16 Kb (版本1.2.6) 超棒超快速的選擇器 完全支援 CSS 3 及 XPath 選擇器,容易操作網頁上的物件。 一次呼叫便套用至所有被選擇到的元素。 Open Source & Google hosted 不用自己煩惱更換版本或是擺放 jQuery 的位址。 ...
  6. 6. jQuery 的設計架構及使用
  7. 7. jQuery 能做的事... 新增或移除 DOM 物件(網頁上的元素) 更改網頁元素的樣式及內容 處理事件 產生特效或動畫 Ajax ....
  8. 8. jQuery 的設計概念 jQuery 是用來操作選擇器的物件,也是整套 framework 的 prototype 所有東西都是 jQuery,也可以簡單寫作 $。 所有 API 的回傳值都是 jQuery 物件及陣列 jQuery 物件 -> 可以接 combo 技 e.g., $('<h1>test</h1>').css({color:'red'}).attr({id: 'title'}).appendTo($('body')); 陣列 -> 一個動作套用到全部 e.g., $('.items').addClass('selected');
  9. 9. 使用 jQuery 1. 在 http://jquery.com/ 下載最新的 jquery*.js 檔案,然後跟你的 project 擺在一起並且引入。 e.g., <script type=quot;text/javascriptquot; src=quot;jquery-1.2.6.min. jsquot;></script> 2. 直接使用 Google host 的 jQuery <script type=quot;text/javascriptquot; src=quot;http://ajax. googleapis.com/ajax/libs/jquery/1/jquery.min.jsquot; ></script>
  10. 10. jQuery Hello World $('<h1>Hello, world</h1>').appendTo($('body')); 作了什麼事? 1. 動態產生了一個 <h1>Hello, world</h1>,並且把它變成 jQuery 物件。 2. 使用 jQuery.appendTo API 將之插入到 body tag 的最後面。
  11. 11. jQuery 選擇器 jQuery 的選擇器包括: 一段 HTML,如果沒有 match 到則會產生新的。 $('<div>test</div>') 標籤名 $('body') CSS 3 選擇器 $('ul > li.selected') XPath $('a[@href^=http://www.cht]')
  12. 12. jQuery 選擇器(續) 搭配選擇器一同服用的 filter $('ul > li:even'), $('ul > li:first-child') 表單特殊的選擇器 $(':checked'), $(':input') 除了直接選擇之外,也可以加入 context: $('div', '#panel')
  13. 13. jQuery 陣列 因為 jQuery 選擇後都是回傳「陣列」,所以可以用陣列長度是 否大於 0 來判斷是不是有選到東西: if ($('.checked').length == 0) { alert('您還沒有勾選'); } 針對每個選到的元素操作: 如果是 jQuery API,直接套用即可。 否則: $('.selected').each(function(index , domElem ) { .... });
  14. 14. jQuery 陣列(續) 雖然回傳的都是 jQuery 物件,但可以用 get([index]) 取回 DOM Element。 $('#nick').get(0) == document.getElementById('nick') 也可以用 index() 來查該 DOM element/jQuery object 在 陣列中的位置。 1.2.3以前只能查 DOM element,後來我發了一個 ticket 請 jQuery team 支援查 jQuery object
  15. 15. 讀取、修改元素 內容 使用 html() 或 text() 來塞一段或讀取 HTML code 或 text 在選到的元素。 沒帶參數是讀出來: var content = $('#test').html(); 加了參數是修改: $('#test').html('modified content'); 很多 jQuery 的 API 都有上述的設計(getter/setter)
  16. 16. 讀取、修改元素 內容(續) <div id=quot;fooquot;>abcdefg</div> var c = $('#foo').html(); // c 的值為 quot;abcdefgquot; ... ... // 把 #foo 的內容改成 hij $('#foo').html('hij'); <div id=quot;fooquot;>hij</div>
  17. 17. 元素屬性 用 attr() 來處理元素中的屬性 一樣有前述 getter/setter 的設計,不過參數可以帶字串或是 JSON object: // 取得 id 的 值 $(...).attr('id'); $(...).attr('id', 'foo'); // 將 id 改成 foo 一次設定多個屬性 $('.foo').attr({rel: 'bar', title: 'show me'}); <div class=quot;fooquot;>...</div> <div class=quot;fooquot;>...</div> <div class=quot;fooquot; rel=quot;barquot; title=quot;show mequot;>...</div> <div class=quot;fooquot; rel=quot;barquot; title=quot;show mequot;>...</div>
  18. 18. 元素樣式 用 css() 修改樣式 效果如同直接修改 style 屬性,所以要用 style 的名稱 (backgroun-color -> backgroundColor) $('.foo').css({textAlign: 'center', color: 'red'}); <div class=quot;fooquot;>...</div> <div class=quot;fooquot; style=quot;text-align:center;color: red;quot;>...</div>
  19. 19. 元素的 class 利用 addClass() 或 removeClass() 來新增移除 class 若是直接修改 class 屬性,要自行處理字串。 $('.foo').addClass('highlight'); <div class=quot;fooquot;>...</div> <div class=quot;foo highlightquot;>...</div> $('.foo').removeClass('foo'); <div class=quot;foo highlightquot;>...</div> <div class=quot;highlightquot;>...</div>
  20. 20. DOM 操作 內部插入元素: append(), appendTo() -- 插入最後 prepend(), prependTo() -- 插入最前 $('.foo').append('<b>hello</b>'); $('<em>test</em>').prependTo($('#x')); <div id=quot;xquot;> <div class=quot;fooquot;> ... ... </div> </div> <div id=quot;xquot;> <div class=quot;fooquot;> <em>test</em> ... ... <b>hello</b> </div> </div>
  21. 21. DOM 操作(續) 外部插入元素: wrap() $('.foo').wrap('<p id=quot;panelquot;>'); <div class=quot;fooquot;>...</div> <p id=quot;panelquot;> <div class=quot;fooquot;>...</div> </p>
  22. 22. DOM 操作(續) 前後插入 before(), insertBefore() after(), insertAfter() $('.foo').after('<img src=quot;load.gifquot; alt=quot;loadingquot;/>'); <div class=quot;fooquot;>...</div> <div class=quot;fooquot;>...</div> <img src=quot;load.gifquot; alt=quot;loadingquot;/> 更多 jQuery DOM 操作請參考  http://docs.jquery.com/Manipulation
  23. 23. DOM 走訪 (Traversing) 在選擇某元素後,再透過 traverse/filter 的 API 來「再選擇」其 它的元素。 前後一個 $(...).prev([filter] ); $(...).next([filter] ); $('.foo').next(); <div class=quot;fooquot;>...</div> <img src=quot;load.gifquot; alt=quot;loadingquot;/>
  24. 24. DOM 走訪 (Traversing) 親子關係 $(...).parent([filter] ); $(...).children([filter] ); $(...).siblings([filter] ); 篩選器 $(...).eq(index ); $(...).filter([filter] ); 更多 DOM 走訪 操作請參考  http://docs.jquery.com/Traversing
  25. 25. 事件(Event)處理
  26. 26. jQuery 的事件處理 jQuery Events API 除了可以用一致的方式註冊事件處理器之 外,也 統一了 event object 可以方便 trigger (自訂) 事件 可以暫時開關事件處理器 ... 類似其它 API 的 getter/setter 的方式,但是 傳入參數時,是傳入一個事件處理器 若沒傳參數,則是 trigger 該事件
  27. 27. 註冊事件處理器 處理 click 事件: $(...).click(function(evt) { alert('clicked'); }); 或是 $(...).bind('click', function(evt) { alert('clicked'); });
  28. 28. 事件處理器(續) 只做一次: $(...).one('click', funciton(e) { ... }); 移除處理器: $(...).unbind('click');
  29. 29. 觸發事件 對某元素觸發 mouseover 事件: $(...).mouseover(); 或是 $(...).trigger('mouseover');
  30. 30. 自訂事件 利用 bind 註冊自己的事件: $(...).bind('dlg-open', function(e) { .... }); 利用 trigger 來觸發 $(...).trigger('dlg-open'); 利用 unbind 來移除 $(...).unbind('dlg-open');
  31. 31. onload shortcut 在整頁都讀取完才做事 處理 window.onload 的 event 在 jQuery 中可以直接寫: $(function() { .... }); 即表示該 function 會在整頁讀完之後才運作。
  32. 32. AJAX
  33. 33. jQuery AJAX API 專門用來處理 Ajax 的動作,可以直接使用 $.ajax() 來使用, 再依照需求修改參數。 有 $.get(), $.post(), $.load() 這些 shortcut 可以使用 會自動觸發 ajax**** 事件,其它元素可以註冊這些事件的處 理器。
  34. 34. $.ajax $.ajax({ // 用來指定要 request 的 URL url: '/foo.php', // 是要用 GET/POST 的方式作 request type: 'post', // request 的資料 data: { ... }, // 回傳的資料型態,會影響 success callback 的參數 dataType: 'json', // 是否要 cache 住 response cache: false, // 在 ajax 發起 request 前呼叫 beforeSend: function() { .... }, // ajax 發生錯誤時呼叫 error: function(xhr) { ... }, // 成功完成 reuqest 時呼叫 success: function(resp) { ... }, // 最後呼叫 complete: function(xhr) { ... } });
  35. 35. 範例:送出需求後更改某區域 內容 $.ajax({ url: 'foo.php', data: {x: 'abc', y: 123}, success: function(resp) { $('#bar').html(resp); } }); 或是 $('#bar').load('foo.php', {x: 'abc', y: 123});
  36. 36. jQuery 自訂 ajax 事件 透過註冊這些事件的處理器,當 ajax 在進行時,會依照進行的 狀況驅動適當的事件 有 ajaxStart, ajaxSend, ajaxStop, ajaxError, ajaxSuccess, ajaxComplete 這些自訂的 ajax 事件。
  37. 37. 特效及 UI
  38. 38. jQuery 預設的特效 預設在 jQuery 的函式庫中提供了基本常見的特效: 顯示或消失(show、hide) 向上或向下捲動(slideUp、slideDown) 淡入或淡出(fadeIn、fadeOut、fadeTo) 也可以自己設計特效。 使用 animates()
  39. 39. jQuery UI http://ui.jquery.com/ 另外一組團隊基於 jQuery 所設計的 UI widget,網站上可以客 製化需求下載 javascript 檔案來使用。 也可以到 jQuery UI theme roller 網站選擇或設計自己的 theme (CSS) 來改善 UI 美觀。 http://ui.jquery.com/themeroller
  40. 40. 自己寫 jQuery plugin
  41. 41. 寫 jQuery plugin 好處:重覆利用自己的 code,分享給團隊開發者一起使用。 方法: 定義在 $.fn 下 符合 jQuery-style 來寫作 API 要套用到「所有」被選擇到的元素。 記得傳回 jQuery 陣列。 注意儘量不要寫出會產生衝突的 code 避免定義容易重覆的名稱。 從別人的 code 中學習 http://plugins.jquery.com/
  42. 42. 套用至「所有」被選擇到的元素 利用 $.each $.fn.foo = function({ return this.each(function() { // TODO: 你要做的事 }); });
  43. 43. 包裝 plugin 避免寫出與其它 js 檔案相衝 code (function($){ .... })(jQuery); 如果能用 JSMin 或 YUI Compressor 壓縮一下也不錯。
  44. 44. 結論
  45. 45. 請愛用 jQuery 讓 JavaScript 變好寫了(咦?) 解決了不少跨瀏覽器間的問題。 用了公認好用的 framework,在維護上也比較輕鬆。 code 小、速度快。 ...
  46. 46. 線上資源 官方網站 :  http://jquery.com/ 專案網站 :  http://code.google.com/p/jqueryjs/ jQuery UI: http://ui.jquery.com/ 中文 jQuery 討論群組: http://groups.google.com/group/jquery-
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×