Learning how to use jQuery #5
            YOSHIMURA Takahiro
            twitter: @yosshi
            yosshi@gmail.com
   ...
#1
#1
•   ready hundler
#1
•   ready hundler
•   selectors
#1
•   ready hundler
•   selectors
•   css
#1
•   ready hundler
•   selectors
•   css
•   effects
#1
•   ready hundler
•   selectors
•   css
•   effects
•   events
#1
•   ready hundler
•   selectors
•   css
•   effects
•   events
•   method chain
#1
•   ready hundler
•   selectors
•   css
•   effects
•   events
•   method chain
•   selector
#2
#2
•   Attributes - DOM
#2
•   Attributes - DOM
    •   Attr - attr(name), attr(properties), attr(key,
        value), attr(key, fn), removeAttr(n...
#2
•   Attributes - DOM
    •   Attr - attr(name), attr(properties), attr(key,
        value), attr(key, fn), removeAttr(n...
#2
•   Attributes - DOM
    •   Attr - attr(name), attr(properties), attr(key,
        value), attr(key, fn), removeAttr(n...
#2
•   Attributes - DOM
    •   Attr - attr(name), attr(properties), attr(key,
        value), attr(key, fn), removeAttr(n...
#2
•   Attributes - DOM
    •   Attr - attr(name), attr(properties), attr(key,
        value), attr(key, fn), removeAttr(n...
#2
•   Manipulation - DOM
#2
•   Manipulation - DOM
    •            - append(content), prepend(content),
        appendTo(content), prependTo(conte...
#2
•   Manipulation - DOM
    •             - append(content), prepend(content),
        appendTo(content), prependTo(cont...
#2
•   Manipulation - DOM
    •             - append(content), prepend(content),
        appendTo(content), prependTo(cont...
#2
•   Manipulation - DOM
    •      - replaceWith(content), replaceAll(selector)
#2
•   Manipulation - DOM
    •      - replaceWith(content), replaceAll(selector)

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

    •      - empty(), remove()

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

• Ajax
#3

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

• Ajax
 • load(url, data, callback)
 • jQuery.get(url, data, callback, type)
#3
 • load(url, data, callback)
$("#trigger").click(function() {
    $("#wrapper").load("./sample.txt");
});
#3
 • jQuery.get(url, data, callback, type)
$("#trigger").click(function() {
    var num = $("select").val();
    $.get("....
#4

• Plugins
 • ThickBox 3.1
 • ColorBox
 • FancyBox
 • Others
#5


• today
• Traversing - DOM
Traversing

• Filtering
• Finding
• Chaining
Traversing - Filtering

• eq(index)         • is(expr)
• hasClass(class)   • map(calback)
• filter(expr)       • not(expr)
...
Traversing - Finding
• add(expr)          • nextAll([expr])
• children([expr])   • parent([expr])
• closest([expr])    • p...
Traversing - Chaining


• andSelf()
• end()
thanks to
•   API reference
    •   http://docs.jquery.com/Main_Page
    •   http://semooh.jp/jquery/

•   Flickr
    •   ...
http://www.flickr.com/photos/r_b/2451480923/
Upcoming SlideShare
Loading in …5
×

Learning How To Use Jquery #5

999 views

Published on

Traversing: DOMの選択系操作

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
999
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Learning How To Use Jquery #5

    1. 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. 2. #1
    3. 3. #1 • ready hundler
    4. 4. #1 • ready hundler • selectors
    5. 5. #1 • ready hundler • selectors • css
    6. 6. #1 • ready hundler • selectors • css • effects
    7. 7. #1 • ready hundler • selectors • css • effects • events
    8. 8. #1 • ready hundler • selectors • css • effects • events • method chain
    9. 9. #1 • ready hundler • selectors • css • effects • events • method chain • selector
    10. 10. #2
    11. 11. #2 • Attributes - DOM
    12. 12. #2 • Attributes - DOM • Attr - attr(name), attr(properties), attr(key, value), attr(key, fn), removeAttr(name)
    13. 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. 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. 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. 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. 17. #2 • Manipulation - DOM
    18. 18. #2 • Manipulation - DOM • - append(content), prepend(content), appendTo(content), prependTo(content)
    19. 19. #2 • Manipulation - DOM • - append(content), prepend(content), appendTo(content), prependTo(content) • - after(content), before(content), insertAfter(content), insertBefore(content)
    20. 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. 21. #2 • Manipulation - DOM • - replaceWith(content), replaceAll(selector)
    22. 22. #2 • Manipulation - DOM • - replaceWith(content), replaceAll(selector) • - empty(), remove()
    23. 23. #2 • Manipulation - DOM • - replaceWith(content), replaceAll(selector) • - empty(), remove() • - clone(), clone(true)
    24. 24. #3
    25. 25. #3 • Events
    26. 26. #3 • Events • focus(fn), change(fn), keyup(fn)
    27. 27. #3 • Events • focus(fn), change(fn), keyup(fn) • Samples and Demos
    28. 28. #3 • Events • focus(fn), change(fn), keyup(fn) • Samples and Demos • “don’t click twice”
    29. 29. #3 • Events • focus(fn), change(fn), keyup(fn) • Samples and Demos • “don’t click twice” • “tab”
    30. 30. #3 • Events • focus(fn), change(fn), keyup(fn) • Samples and Demos • “don’t click twice” • “tab” • “roll-over”
    31. 31. #3
    32. 32. #3 • Ajax
    33. 33. #3 • Ajax • load(url, data, callback)
    34. 34. #3 • Ajax • load(url, data, callback) • jQuery.get(url, data, callback, type)
    35. 35. #3 • load(url, data, callback) $("#trigger").click(function() { $("#wrapper").load("./sample.txt"); });
    36. 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. 37. #4 • Plugins • ThickBox 3.1 • ColorBox • FancyBox • Others
    38. 38. #5 • today • Traversing - DOM
    39. 39. Traversing • Filtering • Finding • Chaining
    40. 40. Traversing - Filtering • eq(index) • is(expr) • hasClass(class) • map(calback) • filter(expr) • not(expr) • filter(fn) • slice(start, [end])
    41. 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. 42. Traversing - Chaining • andSelf() • end()
    43. 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. 44. http://www.flickr.com/photos/r_b/2451480923/

    ×