Learning how to use jQuery #3
            YOSHIMURA Takahiro
            twitter: @yosshi
            yosshi@gmail.com
   ...
tungumál teanga taal gjuha lingua bahasa iaith мова keel
taal idioma lingua γλώσσα jezik språk idioma jazyk jezik lugha
је...
for
Markup Engineer
Markup Engineer
• (X)HTML + CSS
Markup Engineer
• (X)HTML + CSS
• CMS Templates (MovableType, WordPress
  and so on)
Markup Engineer
• (X)HTML + CSS
• CMS Templates (MovableType, WordPress
  and so on)
• JavaScript
Markup Engineer
• (X)HTML + CSS
• CMS Templates (MovableType, WordPress
  and so on)
• JavaScript
• Accessibility, UI (not...
Markup Engineer
• (X)HTML + CSS
• CMS Templates (MovableType, WordPress
  and so on)
• JavaScript
• Accessibility, UI (not...
Markup Engineer
• (X)HTML + CSS
• CMS Templates (MovableType, WordPress
  and so on)
• JavaScript
• Accessibility, UI (not...
Review



         http://www.flickr.com/photos/themastershakesignal/173060038/
#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

• today
#3

• today
• more events
#3

• today
• more events
• combination of events, css, effects,
  attributes and manipulation
#3

• today
• more events
• combination of events, css, effects,
  attributes and manipulation
• samples and demos
Events
Events
• ready(fn)
• click(fn)
• hover(over, out)
Events
• ready(fn)
• click(fn)
• hover(over, out)
• focus(fn)
Events
• ready(fn)
• click(fn)
• hover(over, out)
• focus(fn)
• change(fn)
Events
• ready(fn)
• click(fn)
• hover(over, out)
• focus(fn)
• change(fn)
• keyup(fn)
Events - focus(fn)
$("input").focus(function() {
    $(this).next("span")
           .css('display', 'inline')
           ...
Events - change(fn)
$("select").change(function() {
    var str = "";
    $("select option:selected").each(function() {
  ...
Events - keyup(fn)
$("input").keyup(function() {
    $("div").text($(this).val());
}).keyup();




$(window).keyup(functio...
Samples and Demos



              http://www.flickr.com/photos/neo_ii/4054300112/
Samples and Demos
Samples and Demos

• so-called “don’t click twice”
Samples and Demos

• so-called “don’t click twice”
• so-called “tab”
Samples and Demos

• so-called “don’t click twice”
• so-called “tab”
• so-called “roll over”
Samples and Demos
 • so-called “don’t click twice”
$("form").submit(function() {
    $("input[type=submit]").attr("disable...
Samples and Demos
 • so-called “tab”
// hide all content
$("#content > div").hide();

$("#nav li a").click(function() {
  ...
Samples and Demos
  • so-called “roll over”
// preload
$("img.hover").each(function() {
    var preload = new Image;
    p...
One More Thing



             http://www.flickr.com/photos/acaben/541334636/
http://www.flickr.com/photos/mikelowe/9696647/
Ajax



       http://www.flickr.com/photos/mikelowe/9696647/
Ajax
 • load(url, data, callback)
$("#trigger").click(function() {
    $("#wrapper").load("./sample.txt");
});
Ajax
 • jQuery.get(url, data, callback, type)
$("#trigger").click(function() {
    var num = $("select").val();
    $.get(...
thanks to
•   API reference
    •   http://docs.jquery.com/Main_Page
    •   http://semooh.jp/jquery/

•   jQuery Lesson S...
thanks to
•   Flickr
    •   http://www.flickr.com/photos/themastershakesignal/173060038/
    •   http://www.flickr.com/phot...
http://www.flickr.com/photos/jenosaur/4051305996/
Upcoming SlideShare
Loading in …5
×

Learning How To Use Jquery #3

1,222 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,222
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
25
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Learning How To Use Jquery #3

  1. 1. Learning how to use jQuery #3 YOSHIMURA Takahiro twitter: @yosshi yosshi@gmail.com http://www.greenplastic.net http://friendfeed.com/yosshi November 11, 2009
  2. 2. tungumál teanga taal gjuha lingua bahasa iaith мова keel taal idioma lingua γλώσσα jezik språk idioma jazyk jezik lugha језик ภาษา wika jazyk sprog Sprache dil språk nyelv ॿॿॿॿ kieli langue език ngôn ngữ ‫ שפה‬мова ‫ ﺯﺑ # # # # # ##ﺎﻥ‬język linguagem јазик lingwa Bahasa valoda kalba limbă язык language tungumál teanga taal gjuha lingua bahasa iaith мова keel taal idioma lingua γλώσσα jezik språk idioma jazyk jezik lugha Languages језик ภาษา wika jazyk sprog Sprache dil språk nyelv ॿॿॿॿ kieli langue език ngôn ngữ ‫ שפה‬мова ‫ ﺯﺑ # # # # # ##ﺎﻥ‬język linguagem јазик lingwa Bahasa valoda kalba limbă язык language tungumál teanga taal gjuha lingua bahasa iaith мова keel taal idioma lingua γλώσσα jezik språk idioma jazyk jezik lugha језик ภาษา wika jazyk sprog Sprache dil språk nyelv ॿॿॿॿ kieli langue език ngôn ngữ ‫ שפה‬мова ‫ ﺯﺑ # # # # # ##ﺎﻥ‬język linguagem јазик lingwa Bahasa valoda kalba limbă язык language tungumál teanga taal gjuha lingua bahasa iaith мова keel taal idioma lingua γλώσσα jezik språk idioma jazyk jezik lugha језик ภาษา wika jazyk sprog Sprache dil språk nyelv ॿॿॿॿ kieli langue език ngôn ngữ ‫ שפה‬мова ‫ ﺯﺑ# # # # ##ﺎﻥ‬język linguagem јазик lingwa Bahasa valoda kalba limbă язык language
  3. 3. for
  4. 4. Markup Engineer
  5. 5. Markup Engineer • (X)HTML + CSS
  6. 6. Markup Engineer • (X)HTML + CSS • CMS Templates (MovableType, WordPress and so on)
  7. 7. Markup Engineer • (X)HTML + CSS • CMS Templates (MovableType, WordPress and so on) • JavaScript
  8. 8. Markup Engineer • (X)HTML + CSS • CMS Templates (MovableType, WordPress and so on) • JavaScript • Accessibility, UI (not language anyway)
  9. 9. Markup Engineer • (X)HTML + CSS • CMS Templates (MovableType, WordPress and so on) • JavaScript • Accessibility, UI (not language anyway) • Design (not language anyway)
  10. 10. Markup Engineer • (X)HTML + CSS • CMS Templates (MovableType, WordPress and so on) • JavaScript • Accessibility, UI (not language anyway) • Design (not language anyway) • English
  11. 11. Review http://www.flickr.com/photos/themastershakesignal/173060038/
  12. 12. #1
  13. 13. #1 • ready hundler
  14. 14. #1 • ready hundler • selectors
  15. 15. #1 • ready hundler • selectors • css
  16. 16. #1 • ready hundler • selectors • css • effects
  17. 17. #1 • ready hundler • selectors • css • effects • events
  18. 18. #1 • ready hundler • selectors • css • effects • events • method chain
  19. 19. #1 • ready hundler • selectors • css • effects • events • method chain • selector
  20. 20. #2
  21. 21. #2 • Attributes - DOM
  22. 22. #2 • Attributes - DOM • Attr - attr(name), attr(properties), attr(key, value), attr(key, fn), removeAttr(name)
  23. 23. #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)
  24. 24. #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)
  25. 25. #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)
  26. 26. #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)
  27. 27. #2 • Manipulation - DOM
  28. 28. #2 • Manipulation - DOM • - append(content), prepend(content), appendTo(content), prependTo(content)
  29. 29. #2 • Manipulation - DOM • - append(content), prepend(content), appendTo(content), prependTo(content) • - after(content), before(content), insertAfter(content), insertBefore(content)
  30. 30. #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)
  31. 31. #2 • Manipulation - DOM • - replaceWith(content), replaceAll(selector)
  32. 32. #2 • Manipulation - DOM • - replaceWith(content), replaceAll(selector) • - empty(), remove()
  33. 33. #2 • Manipulation - DOM • - replaceWith(content), replaceAll(selector) • - empty(), remove() • - clone(), clone(true)
  34. 34. #3
  35. 35. #3 • today
  36. 36. #3 • today • more events
  37. 37. #3 • today • more events • combination of events, css, effects, attributes and manipulation
  38. 38. #3 • today • more events • combination of events, css, effects, attributes and manipulation • samples and demos
  39. 39. Events
  40. 40. Events • ready(fn) • click(fn) • hover(over, out)
  41. 41. Events • ready(fn) • click(fn) • hover(over, out) • focus(fn)
  42. 42. Events • ready(fn) • click(fn) • hover(over, out) • focus(fn) • change(fn)
  43. 43. Events • ready(fn) • click(fn) • hover(over, out) • focus(fn) • change(fn) • keyup(fn)
  44. 44. Events - focus(fn) $("input").focus(function() { $(this).next("span") .css('display', 'inline') .fadeOut(1000); });
  45. 45. Events - change(fn) $("select").change(function() { var str = ""; $("select option:selected").each(function() { str += $(this).text() + " "; }); $("div").text(str); }).change();
  46. 46. Events - keyup(fn) $("input").keyup(function() { $("div").text($(this).val()); }).keyup(); $(window).keyup(function(e) { var k = e.keyCode; $("div").text(e.keyCode); if (k == 13) $("div").append(' return'); });
  47. 47. Samples and Demos http://www.flickr.com/photos/neo_ii/4054300112/
  48. 48. Samples and Demos
  49. 49. Samples and Demos • so-called “don’t click twice”
  50. 50. Samples and Demos • so-called “don’t click twice” • so-called “tab”
  51. 51. Samples and Demos • so-called “don’t click twice” • so-called “tab” • so-called “roll over”
  52. 52. Samples and Demos • so-called “don’t click twice” $("form").submit(function() { $("input[type=submit]").attr("disabled", "disabled"); });
  53. 53. Samples and Demos • so-called “tab” // hide all content $("#content > div").hide(); $("#nav li a").click(function() { // nav $("#nav li").removeClass("current"); $(this).parent().addClass("current"); // content $("#content > div").hide(); var cpt = $(this).attr("href"); $(cpt).show(); return false; });
  54. 54. Samples and Demos • so-called “roll over” // preload $("img.hover").each(function() { var preload = new Image; preload.src = this.src.replace(/^(.+)(.[a-z]+)$/, "$1_over$2"); }); // so-called roll over $("img.hover").hover( function() { $(this).attr("src", function() { return $(this).attr('src').replace(/ ^(.+)(.[a-z]+)$/, "$1_over$2"); } ); }, function() { $(this).attr("src", function() { return $(this).attr('src').replace(/ ^(.+)_over(.[a-z]+)$/, "$1$2"); } ); } );
  55. 55. One More Thing http://www.flickr.com/photos/acaben/541334636/
  56. 56. http://www.flickr.com/photos/mikelowe/9696647/
  57. 57. Ajax http://www.flickr.com/photos/mikelowe/9696647/
  58. 58. Ajax • load(url, data, callback) $("#trigger").click(function() { $("#wrapper").load("./sample.txt"); });
  59. 59. Ajax • jQuery.get(url, data, callback, type) $("#trigger").click(function() { var num = $("select").val(); $.get("./get.php", {id:num}, function(data) { $("#wrapper").text(data); } ); });
  60. 60. thanks to • API reference • http://docs.jquery.com/Main_Page • http://semooh.jp/jquery/ • jQuery Lesson Series • http://woorkup.com/2009/10/05/jquery-lesson-series-introduction-to- selectors/ • http://woorkup.com/2009/10/14/jquery-lessons-how-to-interact-with- html-forms/ • http://woorkup.com/2009/10/22/jquery-lessons-series-how-to-implement- animations-of-css-properties/ • http://woorkup.com/2009/11/06/jquery-lessons-series-manipulate-css- classes/
  61. 61. thanks to • Flickr • http://www.flickr.com/photos/themastershakesignal/173060038/ • http://www.flickr.com/photos/neo_ii/4054300112/ • http://www.flickr.com/photos/acaben/541334636/ • http://www.flickr.com/photos/mikelowe/9696647/ • http://www.flickr.com/photos/jenosaur/4051305996/ • Others • http://www.alink.co.jp/tech/wiki/index.php?jQuery%2F %2Fsubmit 2 • http://www.aozora.gr.jp/cards/000148/files/775_14942.html
  62. 62. http://www.flickr.com/photos/jenosaur/4051305996/

×