1. jQuery

2. jQuery
• js Ajax
jQuery HTML
jQuery 2
• $( )
jQuery

3. jQuery

4. • jQuery
• jQuery new
jQuery prototype

5. $( )
• $( ) jQuery( )
• $( ) jQuery
• html DOM
jQuery

6. $(DOM)
• DOM
DOM jQuery
• '<div></div>' HTML
DOM jQuery

7. jQuery
• Core • Effects
• Attribute • Ajax
• Traversing • Data
• Manipulation • Dferred
• Css • Utilities
• Event
11 jQuery

8. jQuery
• Core/Misc
jQuery DOM
• Attribute
• Traversing
• CSS
CSS
• Event
• Effects
( )
• Data
Effect
• Manipulation
DOM /

9. jQuery
• Core
HTML jQuery
• Ajax
AJax jsonp
• Dferred
• Data ajax
• Utilities

10. jQuery
$(document).ready(
function(){
$( ).method( );
$( 2).method( );
$( 3).method( );
}
);

11. jQuery Plugin

12. (function($){})(jQuery)
• (function($){})(jQuery)
• function($){...}
,(jQuery)
• JS
• (function($){})()

13. •
• $.extend jQuery
• $.fn.

15. jQuery plugin
•
• return this.each jQuery
• this.each DOM
DOM

16. Twitter API
Plugin
• Twitter API jsonp twitter
• jsonp
• API js
script

17. Twitter API
• https://dev.twitter.com/
• API
• API jsonp timeline

18. timeline API
• http://api.twitter.com/1/statuses/
user_timeline/twitter_id.json
• jsonp url
• twitter ID .

19. Twitter Plugin
• DIV class="timeline" DIV
• $('.timeline').twitter() div.timeline
twitter

20. • <div class="timeline">
<div class="tweet">
<div class="icon"><img src="icon URL" /></div>
<p> </p>
</div>
tweet
</div>

21. twitter plugin

23. twitter api

24. $.getJSON()

25. $.getJSON()
3

26. $.getJSON(url,data,callback)
url: url
data:url param
callback:
data
status 2

28. twitter

29. user_id

30. API
URL

32. URL user_id

36. jsonp

39. [Object,Object,Object
…]

40. 20

41. {
@twitter
}

44. HTML

45. HTML

46. $()

47. $('<div></div>')
DIV

48. • append • prependTo
DOM
• appendTo • after
DOM
• prepend • brefore
Manipulation

53. icon
icon

55. url
@id

56. replace

58. Timeline

61. bind trigger

62. .bind
•
• bind( , ,
) bind(
, )
• click

63. • click
• onMouse
• blur
• onload
•

64. .trigger
•
• .trigger( ,[data])

65. •
•
•

66. • $(this).bind('twitter.timeline',function()
{$.getJSON(....)})
//
• $(this).bind('twitter.reload',function(){})
//
• $(this).bind('twitter.stop',function(){});
//

67. • 0
API
•

68. • .delay
• .delay

69. • jQuery Effecto
• $("#logo").show("slow")
.animate({left:+200},1000)
.animate({left:-200},1000);
•
jQuery
queue

70. timeline
• timeline
• Queue timeline
delary
• Queue

71. $this.bind(twitter.reload,function(){
var $this = $(this);
$this.queue(function() {
$this.trigger("twitter.timeline")
delay(opts.reload)
.trigger("twitter.reload").dequeue();
});//

72. $.ajaxSetup(
{
timeout: 5000,
error: function() {
$this.bind("twitter.stop");
}
});

73. • jQuery jQuery
2
• jQuery prototype
• jQuery plugin
• Queue Ajax