This document discusses learning jQuery and provides summaries of 5 sections: 1. Ready handlers, selectors, CSS, effects, events, and method chaining 2. Attributes, classes, HTML manipulation, and value manipulation 3. Event handling and samples for events like click and tab 4. Using AJAX with load() and get() methods 5. Plugins for thickbox, colorbox, fancybox and traversing DOM elements.

1. Learning how to use jQuery #5
YOSHIMURA Takahiro
twitter: @yosshi
yosshi@gmail.com
http://www.greenplastic.net
http://friendfeed.com/yosshi
November 25, 2009

2. #1

3. #1
• ready hundler

4. #1
• ready hundler
• selectors

5. #1
• ready hundler
• selectors
• css

6. #1
• ready hundler
• selectors
• css
• effects

7. #1
• ready hundler
• selectors
• css
• effects
• events

8. #1
• ready hundler
• selectors
• css
• effects
• events
• method chain

9. #1
• ready hundler
• selectors
• css
• effects
• events
• method chain
• selector

10. #2

11. #2
• Attributes - DOM

12. #2
• Attributes - DOM
• Attr - attr(name), attr(properties), attr(key,
value), attr(key, fn), removeAttr(name)

13. #2
• Attributes - DOM
• Attr - attr(name), attr(properties), attr(key,
value), attr(key, fn), removeAttr(name)
• Class - addClass(class), removeClass(class),
toggleClass(class), toggleClass(class, switch)

14. #2
• Attributes - DOM
• Attr - attr(name), attr(properties), attr(key,
value), attr(key, fn), removeAttr(name)
• Class - addClass(class), removeClass(class),
toggleClass(class), toggleClass(class, switch)
• HTML - html(), html(val)

15. #2
• Attributes - DOM
• Attr - attr(name), attr(properties), attr(key,
value), attr(key, fn), removeAttr(name)
• Class - addClass(class), removeClass(class),
toggleClass(class), toggleClass(class, switch)
• HTML - html(), html(val)
• Text - text(), text(val)

16. #2
• Attributes - DOM
• Attr - attr(name), attr(properties), attr(key,
value), attr(key, fn), removeAttr(name)
• Class - addClass(class), removeClass(class),
toggleClass(class), toggleClass(class, switch)
• HTML - html(), html(val)
• Text - text(), text(val)
• Value - val(), val(val)

17. #2
• Manipulation - DOM

18. #2
• Manipulation - DOM
• - append(content), prepend(content),
appendTo(content), prependTo(content)

19. #2
• Manipulation - DOM
• - append(content), prepend(content),
appendTo(content), prependTo(content)
• - after(content), before(content),
insertAfter(content), insertBefore(content)

20. #2
• Manipulation - DOM
• - append(content), prepend(content),
appendTo(content), prependTo(content)
• - after(content), before(content),
insertAfter(content), insertBefore(content)
• - wrap(html), wrap(elem),
wrapAll(html), wrapAll(elem),
wrapInner(html), wrapInner(elem)

21. #2
• Manipulation - DOM
• - replaceWith(content), replaceAll(selector)

22. #2
• Manipulation - DOM
• - replaceWith(content), replaceAll(selector)
• - empty(), remove()

23. #2
• Manipulation - DOM
• - replaceWith(content), replaceAll(selector)
• - empty(), remove()
• - clone(), clone(true)

24. #3

25. #3
• Events

26. #3
• Events
• focus(fn), change(fn), keyup(fn)

27. #3
• Events
• focus(fn), change(fn), keyup(fn)
• Samples and Demos

28. #3
• Events
• focus(fn), change(fn), keyup(fn)
• Samples and Demos
• “don’t click twice”

29. #3
• Events
• focus(fn), change(fn), keyup(fn)
• Samples and Demos
• “don’t click twice”
• “tab”

30. #3
• Events
• focus(fn), change(fn), keyup(fn)
• Samples and Demos
• “don’t click twice”
• “tab”
• “roll-over”

31. #3

32. #3
• Ajax

33. #3
• Ajax
• load(url, data, callback)

34. #3
• Ajax
• load(url, data, callback)
• jQuery.get(url, data, callback, type)

35. #3
• load(url, data, callback)
$("#trigger").click(function() {
$("#wrapper").load("./sample.txt");
});

36. #3
• jQuery.get(url, data, callback, type)
$("#trigger").click(function() {
var num = $("select").val();
$.get("./get.php",
{id:num},
function(data) {
$("#wrapper").text(data);
}
);
});

37. #4
• Plugins
• ThickBox 3.1
• ColorBox
• FancyBox
• Others

38. #5
• today
• Traversing - DOM

39. Traversing
• Filtering
• Finding
• Chaining

40. Traversing - Filtering
• eq(index) • is(expr)
• hasClass(class) • map(calback)
• filter(expr) • not(expr)
• filter(fn) • slice(start, [end])

41. Traversing - Finding
• add(expr) • nextAll([expr])
• children([expr]) • parent([expr])
• closest([expr]) • parents([expr])
• contents() • prev([expr])
• find(expr) • prevAll([expr])
• next([expr]) • siblings(expr)

42. Traversing - Chaining
• andSelf()
• end()

43. thanks to
• API reference
• http://docs.jquery.com/Main_Page
• http://semooh.jp/jquery/
• Flickr
• http://www.flickr.com/photos/r_b/2451480923/

44. http://www.flickr.com/photos/r_b/2451480923/