jQuery
jQuery• js           Ajax  jQuery           HTML  jQuery       2• $(   )  jQuery
jQuery
• jQuery• jQuery                  new           jQuery   prototype
$(                    )• $(        )   jQuery(          )• $(        )   jQuery•                     html   DOM           ...
$(DOM)•                   DOM       DOM jQuery• <div></div>     HTML                  DOM      jQuery
jQuery• Core                    • Effects• Attribute               • Ajax• Traversing              • Data• Manipulation   ...
jQuery•   Core/Misc    jQuery             DOM                                 •   Attribute                               ...
jQuery•   Core    HTML        jQuery                         •   Ajax                             AJax jsonp              ...
jQuery$(document).ready(function(){     $(       ).method(    );     $(       2).method(    );     $(       3).method(    ...
jQuery Plugin
(function($){})(jQuery)•   (function($){})(jQuery)•   function($){...}                 ,(jQuery)•   JS•   (function($){})()
••   $.extend   jQuery•   $.fn.
jQuery plugin•• return this.each   jQuery• this.each    DOM              DOM
Twitter API            Plugin•   Twitter API   jsonp            twitter•   jsonp•   API              js                   ...
Twitter API• https://dev.twitter.com/• API•                 API jsonp   timeline
timeline API• http://api.twitter.com/1/statuses/  user_timeline/twitter_id.json•         jsonp   url• twitter ID          ...
Twitter Plugin•              DIV   class="timeline"           DIV• $(.timeline).twitter()              div.timeline     tw...
•   <div class="timeline">    <div class="tweet">    <div class="icon"><img src="icon URL" /></div>    <p>              </...
twitter plugin
twitter api
$.getJSON()
$.getJSON()3
$.getJSON(url,data,callback)url:          urldata:url    paramcallback:                      datastatus 2
twitter
user_id
API      URL
URL   user_id
jsonp
[Object,Object,Object         …]
20
{    @twitter}
HTML
HTML
$()
$(<div></div>)DIV
•   append             •   prependTo                                   DOM•   appendTo           •   after         DOM•   ...
icon       icon
url@id
replace
Timeline
bind trigger
.bind•• bind(    ,                       ,               )       bind(    ,              )•                          click
• click• onMouse• blur• onload•
.trigger•• .trigger(       ,[data])
•••
• $(this).bind(twitter.timeline,function()  {$.getJSON(....)})  //• $(this).bind(twitter.reload,function(){})  //• $(this)...
•         0    API•
• .delay• .delay
•   jQuery   Effecto•   $("#logo").show("slow")    .animate({left:+200},1000)    .animate({left:-200},1000);•             ...
timeline• timeline• Queue      timeline                delary•                        Queue
$this.bind(twitter.reload,function(){  var $this = $(this);      $this.queue(function() {	   $this.trigger("twitter.timeli...
$.ajaxSetup({      timeout: 5000,      error: function() {          $this.bind("twitter.stop");      }});
• jQuery     jQuery  2• jQuery   prototype• jQuery plugin•            Queue     Ajax
Javascript4
Javascript4
Javascript4
Javascript4
Javascript4
Javascript4
Javascript4
Javascript4
Javascript4
Javascript4
Javascript4
Javascript4
Javascript4
Javascript4
Javascript4
Javascript4
Javascript4
Javascript4
Javascript4
Upcoming SlideShare
Loading in …5
×

Javascript4

1,502 views
1,455 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

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

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Javascript4

    1. 1. jQuery
    2. 2. jQuery• js Ajax jQuery HTML jQuery 2• $( ) jQuery
    3. 3. jQuery
    4. 4. • jQuery• jQuery new jQuery prototype
    5. 5. $( )• $( ) jQuery( )• $( ) jQuery• html DOM jQuery
    6. 6. $(DOM)• DOM DOM jQuery• <div></div> HTML DOM jQuery
    7. 7. jQuery• Core • Effects• Attribute • Ajax• Traversing • Data• Manipulation • Dferred• Css • Utilities• Event11 jQuery
    8. 8. jQuery• Core/Misc jQuery DOM • Attribute • Traversing• CSS CSS • Event• Effects ( )• Data Effect• Manipulation DOM /
    9. 9. jQuery• Core HTML jQuery • Ajax AJax jsonp • Dferred• Data ajax• Utilities
    10. 10. jQuery$(document).ready(function(){ $( ).method( ); $( 2).method( ); $( 3).method( );});
    11. 11. jQuery Plugin
    12. 12. (function($){})(jQuery)• (function($){})(jQuery)• function($){...} ,(jQuery)• JS• (function($){})()
    13. 13. •• $.extend jQuery• $.fn.
    14. 14. jQuery plugin•• return this.each jQuery• this.each DOM DOM
    15. 15. Twitter API Plugin• Twitter API jsonp twitter• jsonp• API js script
    16. 16. Twitter API• https://dev.twitter.com/• API• API jsonp timeline
    17. 17. timeline API• http://api.twitter.com/1/statuses/ user_timeline/twitter_id.json• jsonp url• twitter ID .
    18. 18. Twitter Plugin• DIV class="timeline" DIV• $(.timeline).twitter() div.timeline twitter
    19. 19. • <div class="timeline"> <div class="tweet"> <div class="icon"><img src="icon URL" /></div> <p> </p> </div> tweet </div>
    20. 20. twitter plugin
    21. 21. twitter api
    22. 22. $.getJSON()
    23. 23. $.getJSON()3
    24. 24. $.getJSON(url,data,callback)url: urldata:url paramcallback: datastatus 2
    25. 25. twitter
    26. 26. user_id
    27. 27. API URL
    28. 28. URL user_id
    29. 29. jsonp
    30. 30. [Object,Object,Object …]
    31. 31. 20
    32. 32. { @twitter}
    33. 33. HTML
    34. 34. HTML
    35. 35. $()
    36. 36. $(<div></div>)DIV
    37. 37. • append • prependTo DOM• appendTo • after DOM• prepend • brefore Manipulation
    38. 38. icon icon
    39. 39. url@id
    40. 40. replace
    41. 41. Timeline
    42. 42. bind trigger
    43. 43. .bind•• bind( , , ) bind( , )• click
    44. 44. • click• onMouse• blur• onload•
    45. 45. .trigger•• .trigger( ,[data])
    46. 46. •••
    47. 47. • $(this).bind(twitter.timeline,function() {$.getJSON(....)}) //• $(this).bind(twitter.reload,function(){}) //• $(this).bind(twitter.stop,function(){}); //
    48. 48. • 0 API•
    49. 49. • .delay• .delay
    50. 50. • jQuery Effecto• $("#logo").show("slow") .animate({left:+200},1000) .animate({left:-200},1000);• jQuery queue
    51. 51. timeline• timeline• Queue timeline delary• Queue
    52. 52. $this.bind(twitter.reload,function(){ var $this = $(this); $this.queue(function() { $this.trigger("twitter.timeline") delay(opts.reload) .trigger("twitter.reload").dequeue();});//
    53. 53. $.ajaxSetup({ timeout: 5000, error: function() { $this.bind("twitter.stop"); }});
    54. 54. • jQuery jQuery 2• jQuery prototype• jQuery plugin• Queue Ajax

    ×