JQuery

4,263 views
4,189 views

Published on

taiwan java user group
JQuery

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,263
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
102
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

JQuery

  1. 1. Jiayun Zhou 2008.11.22 TWJUG
  2. 2. JavaScript Library
  3. 3. Query
  4. 4. Database?
  5. 5. SQL?
  6. 6. Select...
  7. 7. document.getElementById(quot;idquot;)
  8. 8. document.getElementById(quot;idquot;) jQuery: $(quot;#idquot;)
  9. 9. The jQuery function $(...) = jQuery(...)
  10. 10. document.getElementsByTagName (quot;divquot;)
  11. 11. document.getElementsByTagName (quot;divquot;) jQuery: $(quot;divquot;)
  12. 12. <input name=quot;mailquot; type=quot;textquot; /> document.getElementsByName (quot;mailquot;)
  13. 13. <input name=quot;mailquot; type=quot;textquot; /> document.getElementsByName (quot;mailquot;) jQuery: $(quot;input[name='mail']quot;)
  14. 14. <input name=quot;mailquot; type=quot;textquot; /> document.getElementsByName (quot;mailquot;) jQuery: $(quot;*[name='mail']quot;)
  15. 15. The power of Selectors
  16. 16. $(quot;*[name='mail']quot;)
  17. 17. $(...)
  18. 18. jQuery Object
  19. 19. All the magic
  20. 20. Attributes API
  21. 21. $(quot;imgquot;).attr(quot;srcquot;) $(quot;imgquot;).attr(quot;srcquot;, quot;/new/icon.pngquot;)
  22. 22. Traversing API
  23. 23. Manipulation API
  24. 24. $(quot;divquot;).html() $(quot;divquot;).html(quot;<span class='red'>Hello <b>World</b></span>quot;)
  25. 25. CSS API
  26. 26. $(quot;divquot;).css(quot;colorquot;) $(quot;divquot;).css(quot;colorquot;,quot;redquot;)
  27. 27. Events API
  28. 28. $(quot;pquot;).click(fn) $(quot;pquot;).click(function() { // do something }); $(quot;pquot;).click()
  29. 29. Effects API
  30. 30. $(quot;pquot;).show() $(quot;pquot;).hide()
  31. 31. Ajax API
  32. 32. $(quot;pquot;).load( url, [data], [callback] ) $(quot;pquot;).load(quot;another.htmlquot;)
  33. 33. Chaining
  34. 34. $(quot;aquot;).attr(quot;hrefquot;, quot;foo.htmlquot;).show().html(quot;fooquot;);
  35. 35. Ex. 1 – Mousedown
  36. 36. $(document).ready(function(){ $(quot;aquot;).mousedown( function() { $(this).click(function () { return false; }); goURL($(this).attr(quot;hrefquot;)); }); });
  37. 37. $(document).ready(function(){ $(quot;a[target='middlearea']quot;).mousedown( function() { $(this).click(function () { return false; }); goIframeURL($(this).attr(quot;hrefquot;)); }); });
  38. 38. $(document).ready(function(){ $(quot;a[target!='middlearea']quot;).mousedown( function() { $(this).click(function () { return false; }); goURL($(this).attr(quot;hrefquot;)); }); });
  39. 39. Try it yourself
  40. 40. Demo 1
  41. 41. Ex. 2 – Marquee
  42. 42. $(document).ready(function(){ $.ajaxSetup({ cache: false }); setTimeout(quot;loadInfo()quot;, 60000); setTimeout(quot;loadMar()quot;, 60000); });
  43. 43. function loadInfo() { $(quot;#infoULquot;).load(quot;header.do?method=infoquot;, null, infoCallback); } function loadMar() { $(quot;#marquot;).load(quot;header.do?method=marqueequot;, null, marCallback); }
  44. 44. function infoCallback(responseText, textStatus, XMLHttpRequest) { setTimeout(quot;loadInfo()quot;, 60000); } function marCallback(responseText, textStatus, XMLHttpRequest) { setTimeout(quot;loadMar()quot;, 60000); }
  45. 45. Demo 2
  46. 46. Ex. 3 – On Idle Action
  47. 47. include.jsp $(document).ready(function(){ $(quot;iframequot;).load(function(){ $.cookie('lastAction', new Date().getTime()); }); });
  48. 48. index.jsp $(document).ready(function(){ setTimeout(quot;checkLastAction()quot;, 60000); });
  49. 49. function checkLastAction() { var interval = new Date().getTime() - $.cookie('lastAction'); if (interval > (20 * 60 * 1000)) { $(quot;iframe[name='bodyFrame']quot;) .attr(quot;contentWindowquot;).location.href = $(quot;iframe[name='bodyFrame']quot;).attr(quot;srcquot;); $.cookie('lastAction', new Date().getTime()); } setTimeout(quot;checkLastAction()quot;, 60000); }
  50. 50. Thanks

×