Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Jiayun Zhou
2008.11.22
   TWJUG
JavaScript Library
Query
Database?
SQL?
Select...
document.getElementById(quot;idquot;)
document.getElementById(quot;idquot;)


jQuery:
            $(quot;#idquot;)
The jQuery function

 $(...) = jQuery(...)
document.getElementsByTagName
            (quot;divquot;)
document.getElementsByTagName
            (quot;divquot;)


jQuery:
           $(quot;divquot;)
<input name=quot;mailquot; type=quot;textquot; />




document.getElementsByName
              (quot;mailquot;)
<input name=quot;mailquot; type=quot;textquot; />




document.getElementsByName
               (quot;mailquot;)


jQuery:...
<input name=quot;mailquot; type=quot;textquot; />




document.getElementsByName
               (quot;mailquot;)


jQuery:...
The power of Selectors
$(quot;*[name='mail']quot;)
$(...)
jQuery Object
All the magic
Attributes API
$(quot;imgquot;).attr(quot;srcquot;)


$(quot;imgquot;).attr(quot;srcquot;,
quot;/new/icon.pngquot;)
Traversing API
Manipulation API
$(quot;divquot;).html()


$(quot;divquot;).html(quot;<span class='red'>Hello
      <b>World</b></span>quot;)
CSS API
$(quot;divquot;).css(quot;colorquot;)


$(quot;divquot;).css(quot;colorquot;,quot;redquot;)
Events API
$(quot;pquot;).click(fn)


$(quot;pquot;).click(function() {
 // do something
});


$(quot;pquot;).click()
Effects API
$(quot;pquot;).show()


$(quot;pquot;).hide()
Ajax API
$(quot;pquot;).load( url, [data], [callback] )


    $(quot;pquot;).load(quot;another.htmlquot;)
Chaining
$(quot;aquot;).attr(quot;hrefquot;,
quot;foo.htmlquot;).show().html(quot;fooquot;);
Ex. 1 – Mousedown
$(document).ready(function(){
 $(quot;aquot;).mousedown(
      function() {
       $(this).click(function () { return fals...
$(document).ready(function(){
 $(quot;a[target='middlearea']quot;).mousedown(
      function() {
       $(this).click(func...
$(document).ready(function(){
 $(quot;a[target!='middlearea']quot;).mousedown(
      function() {
       $(this).click(fun...
Try it yourself
Demo 1
Ex. 2 – Marquee
$(document).ready(function(){
 $.ajaxSetup({
      cache: false
 });
 setTimeout(quot;loadInfo()quot;, 60000);
 setTimeout...
function loadInfo() {
    $(quot;#infoULquot;).load(quot;header.do?method=infoquot;,
      null, infoCallback);
}
function...
function infoCallback(responseText, textStatus,
      XMLHttpRequest) {
    setTimeout(quot;loadInfo()quot;, 60000);
}
fun...
Demo 2
Ex. 3 – On Idle Action
include.jsp

$(document).ready(function(){
  $(quot;iframequot;).load(function(){
      $.cookie('lastAction', new Date()....
index.jsp

$(document).ready(function(){
  setTimeout(quot;checkLastAction()quot;, 60000);
});
function checkLastAction() {
 var interval = new Date().getTime() -
                                $.cookie('lastAction')...
Thanks
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
JQuery
Upcoming SlideShare
Loading in …5
×

JQuery

4,533 views

Published on

taiwan java user group
JQuery

Published in: Technology
  • Be the first to comment

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

×