Your SlideShare is downloading. ×
0
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Learning How To Use Jquery #5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Learning How To Use Jquery #5

869

Published on

Traversing: DOMの選択系操作

Traversing: DOMの選択系操作

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

No Downloads
Views
Total Views
869
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Transcript

    • 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/

    ×