Learning How To Use Jquery #3
2 likes668 views
The document provides an overview of learning how to use jQuery #3. It discusses using more events and combinations of events, CSS, effects, attributes and manipulations. It also covers samples and demos that combine these jQuery features, such as a "don't click twice" sample to disable a submit button, a tab sample to show and hide page content, and a "roll over" sample to change an image on hover. It concludes with a brief introduction to using Ajax with jQuery's load and get methods.
![Samples and Demos
• so-called “don’t click twice”
$("form").submit(function() {
$("input[type=submit]").attr("disabled", "disabled");
});](https://image.slidesharecdn.com/learninghowtousejquery3-091110210748-phpapp02/85/Learning-How-To-Use-Jquery-3-52-320.jpg)
![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"); } );
}
);](https://image.slidesharecdn.com/learninghowtousejquery3-091110210748-phpapp02/85/Learning-How-To-Use-Jquery-3-54-320.jpg)
Learning How To Use Jquery #3
- 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
- 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/
- 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/
- 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