Traversing: DOMの選択系操作

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/