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. 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. for

4. Markup Engineer

5. Markup Engineer
• (X)HTML + CSS

6. Markup Engineer
• (X)HTML + CSS
• CMS Templates (MovableType, WordPress
and so on)

7. Markup Engineer
• (X)HTML + CSS
• CMS Templates (MovableType, WordPress
and so on)
• JavaScript

8. Markup Engineer
• (X)HTML + CSS
• CMS Templates (MovableType, WordPress
and so on)
• JavaScript
• Accessibility, UI (not language anyway)

9. Markup Engineer
• (X)HTML + CSS
• CMS Templates (MovableType, WordPress
and so on)
• JavaScript
• Accessibility, UI (not language anyway)
• Design (not language anyway)

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

12. #1

13. #1
• ready hundler

14. #1
• ready hundler
• selectors

15. #1
• ready hundler
• selectors
• css

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

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

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

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

20. #2

21. #2
• Attributes - DOM

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

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. #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. #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. #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. #2
• Manipulation - DOM

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

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

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. #2
• Manipulation - DOM
• - replaceWith(content), replaceAll(selector)

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

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

34. #3

35. #3
• today

36. #3
• today
• more events

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

38. #3
• today
• more events
• combination of events, css, effects,
attributes and manipulation
• samples and demos

39. Events

40. Events
• ready(fn)
• click(fn)
• hover(over, out)

41. Events
• ready(fn)
• click(fn)
• hover(over, out)
• focus(fn)

42. Events
• ready(fn)
• click(fn)
• hover(over, out)
• focus(fn)
• change(fn)

43. Events
• ready(fn)
• click(fn)
• hover(over, out)
• focus(fn)
• change(fn)
• keyup(fn)

44. Events - focus(fn)
$("input").focus(function() {
$(this).next("span")
.css('display', 'inline')
.fadeOut(1000);
});

45. Events - change(fn)
$("select").change(function() {
var str = "";
$("select option:selected").each(function() {
str += $(this).text() + " ";
});
$("div").text(str);
}).change();

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. Samples and Demos
http://www.flickr.com/photos/neo_ii/4054300112/

48. Samples and Demos

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

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

51. Samples and Demos
• so-called “don’t click twice”
• so-called “tab”
• so-called “roll over”

52. Samples and Demos
• so-called “don’t click twice”
$("form").submit(function() {
$("input[type=submit]").attr("disabled", "disabled");
});

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. 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. One More Thing
http://www.flickr.com/photos/acaben/541334636/

56. http://www.flickr.com/photos/mikelowe/9696647/

57. Ajax
http://www.flickr.com/photos/mikelowe/9696647/

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

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. 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. 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. http://www.flickr.com/photos/jenosaur/4051305996/