Your SlideShare is downloading. ×
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
jQuery Tutorial
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQuery Tutorial

7,981

Published on

I teach jQuery in my company

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
7,981
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
125
Comments
1
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×