1. 1. v2 jQuery Essentials by Marc Grabanski
  2. 2. We needed a hero to get these guys in line
  3. 3. jQuery rescues us by working the same in all browsers!
  4. 4. Easier to write jQuery than pure JavaScript
  5. 5. Hide divs with pure JavaScript divs = document.getElementByTagName(‘div’);for (i = 0; i < divs.length; i++) { divs[i].style.display = ‘none’; }
  6. 6. Hide divs with pure JavaScript divs = document.getElementByTagName(‘div’);for (i = 0; i < divs.length; i++) { divs[i].style.display = ‘none’; } Hide divs with jQuery$(“div”).hide();
  7. 7. HTML is tied to JavaScript
  8. 8. jQuery Philosophy
  9. 9. jQuery Philosophy#1. Find some HTML
  10. 10. jQuery Philosophy#1. Find some HTML #2. Do something to it
  11. 11. Find $(“div”)
  12. 12. Find let’s find some $(“div”) elements
  13. 13. Give $() a selector
  14. 14. Give $() a selector$(“#myId”)
  15. 15. Give $() a selector$(“#myId”) $(“.myClass”)
  16. 16. Give $() a selector$(“#myId”) $(“.myClass”) $(“table”)
  17. 17. Selector Examples$(“#content”) get element with id content
  18. 18. Selector Examples$(“#content”) get element with id content $(“li:first”) get first list item
  19. 19. Selector Examples$(“#content”) get element with id content $(“li:first”) get first list item $(“tr:odd”) get odd numbered table rows
  20. 20. Selector Examples$(“#content”) get element with id content $(“li:first”) get first list item $(“tr:odd”) get odd numbered table rows$(“a[target=_blank]”)get all links who’s target is “_blank”
  21. 21. Selector Examples$(“#content”) get element with id content $(“li:first”) get first list item $(“tr:odd”) get odd numbered table rows$(“a[target=_blank]”)get all links who’s target is “_blank”$(“form[id^=step]”)get all forms who’s id starts with “step”
  22. 22. You can also string selectors together
  23. 23. You can also string selectors together$(“#myId, .myClass, table”)
  24. 24. Find $(“div”)
  25. 25. FindDo $(“div”) .addClass(“redbox”);
  26. 26. jQuery API Spice Two things that make the API HOT
  27. 27. Chain Methods $(“div”).addClass(“redbox”)
  28. 28. Chain Methods $(“div”).addClass(“redbox”) .fadeOut();
  29. 29. One Method, Many Uses $(...).html();
  30. 30. One Method, Many Uses $(...).html();$(...).html(“<p>hello</p>”);
  31. 31. One Method, Many Uses $(...).html();$(...).html(“<p>hello</p>”);$(...).html(function(i){return “<p>hello “ + i + “</p>”; });
  32. 32. jQuery Methods
  33. 33. jQuery Methods •Moving Elements:append(), appendTo(), before(), after(),
  34. 34. jQuery Methods •Moving Elements:append(), appendTo(), before(), after(), •Attributescss(), attr(), html(), val(), addClass()
  35. 35. jQuery Methods •Moving Elements:append(), appendTo(), before(), after(), •Attributescss(), attr(), html(), val(), addClass() •Eventsbind(), trigger(), unbind(), live(), click()
  36. 36. jQuery Methods •Moving Elements:append(), appendTo(), before(), after(), •Attributescss(), attr(), html(), val(), addClass() •Eventsbind(), trigger(), unbind(), live(), click()•Effectsshow(), fadeOut(), toggle(), animate()
  37. 37. jQuery Methods •Moving Elements:append(), appendTo(), before(), after(), •Attributescss(), attr(), html(), val(), addClass() •Eventsbind(), trigger(), unbind(), live(), click()•Effectsshow(), fadeOut(), toggle(), animate() •Traversingfind(), is(), prevAll(), next(), hasClass()
  38. 38. jQuery Methods •Moving Elements:append(), appendTo(), before(), after(), •Attributescss(), attr(), html(), val(), addClass() •Eventsbind(), trigger(), unbind(), live(), click()•Effectsshow(), fadeOut(), toggle(), animate() •Traversingfind(), is(), prevAll(), next(), hasClass() •Ajaxget(), getJSON(), post(), ajax(), load()
  39. 39. jQuery Factory Method $()You can also pass $() a function to run the function after the page loads.
  40. 40. jQuery Factory Method $()You can also pass $() a function to run the function after the page loads.$(function(){});
  41. 41. jQuery Factory Method $()You can also pass $() a function to run the function after the page loads.$(function(){code here will execute after DOM is ready });
  42. 42. jQuery Factory Method $() You can also pass $() a functionto run the function after the page loads. $(function(){ code here will execute after DOM is ready});Note: This is essentially the same as..$(document).ready(function(){ });
  43. 43. jQuery Factory Method $() You can also pass $() a functionto run the function after the page loads. $(function(){ code here will execute after DOM is ready});Note: This is essentially the same as.. $(document).ready(function(){ }); ..you will see this in tutorials around the net
  44. 44. Moving Elements ExamplesGet element with ID foo and add some HTML.$(“#foo”)<html> <body> <div>jQuery</div> <div id=”foo”>example</div> </body></html>
  45. 45. Moving Elements ExamplesGet element with ID foo and add some HTML.$(“#foo”).append(“<p>test</p>”);<html> <body> <div>jQuery</div> <div id=”foo”>example</div> </body></html>
  46. 46. Moving Elements ExamplesGet element with ID foo and add some HTML.$(“#foo”).append(“<p>test</p>”);<html> <body> <div>jQuery</div> <div id=”foo”>example<p>test</p></div> </body></html>
  47. 47. Moving Elements ExamplesMove paragraphs to element with id “foo” $(“p”) <html><body><div>jQuery <p>moving</p> <p>paragraphs</p></div><div id=”foo”>example</div></body> </html>
  48. 48. Moving Elements ExamplesMove paragraphs to element with id “foo” $(“p”) .appendTo(“#foo”); <html><body><div>jQuery <p>moving</p> <p>paragraphs</p></div><div id=”foo”>example</div></body> </html>
  49. 49. Moving Elements ExamplesMove paragraphs to element with id “foo” $(“p”) .appendTo(“#foo”); <html><body><div>jQuery</div><div id=”foo”>example <p>moving</p> <p>paragraphs</p></div></body> </html>
  50. 50. Attributes
  51. 51. Attributes Get .attr(‘id’)
  52. 52. Attributes Get .attr(‘id’) .html()
  53. 53. Attributes Get .attr(‘id’) .html() .val()
  54. 54. Attributes Get .attr(‘id’) .html() .val().css(“top”)
  55. 55. Attributes Get .attr(‘id’) .html() .val().css(“top”).width()
  56. 56. Attributes Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .val().css(“top”).width()
  57. 57. Attributes Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .html(“<p>hi</p>”) .val().css(“top”).width()
  58. 58. Attributes Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .html(“<p>hi</p>”) .val().val(“new val”) .css(“top”).width()
  59. 59. Attributes Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .html(“<p>hi</p>”) .val().val(“new val”) .css(“top”) .css(“top”, “80px”).width()
  60. 60. Attributes Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .html(“<p>hi</p>”) .val().val(“new val”) .css(“top”) .css(“top”, “80px”).width().width(60)
  61. 61. Attributes
  62. 62. Attributes Set border to 1px black$(...).css(“border”, “1px solid black”);
  63. 63. Attributes Set border to 1px black$(...).css(“border”, “1px solid black”);Set various css properties.$(...).css({“background”: “yellow”,“height”: “400px”});
  64. 64. Attributes Set border to 1px black$(...).css(“border”, “1px solid black”);Set various css properties.$(...).css({“background”: “yellow”,“height”: “400px”});Set all link’s href attribute to google.com$(“a”).attr(“href”, “http://google.com”);
  65. 65. Attributes
  66. 66. AttributesReplace HTML with a new paragraph.$(...).html(“<p>I’m new</p>”);
  67. 67. AttributesReplace HTML with a new paragraph.$(...).html(“<p>I’m new</p>”); <div>whatever</div> turns into <div><p>I’m new</p></div>
  68. 68. AttributesReplace HTML with a new paragraph.$(...).html(“<p>I’m new</p>”); <div>whatever</div> turns into <div><p>I’m new</p></div> Set checkboxes attribute “checked” to checked.$(“:checkbox”).attr(“checked”,”checked”);
  69. 69. AttributesReplace HTML with a new paragraph.$(...).html(“<p>I’m new</p>”); <div>whatever</div> turns into <div><p>I’m new</p></div> Set checkboxes attribute “checked” to checked.$(“:checkbox”).attr(“checked”,”checked”);Set input value to 3.$(...).val(“3”);
  70. 70. AttributesReplace HTML with a new paragraph.$(...).html(“<p>I’m new</p>”); <div>whatever</div> turns into <div><p>I’m new</p></div> Set checkboxes attribute “checked” to checked.$(“:checkbox”).attr(“checked”,”checked”);Set input value to 3. Get input value.$(...).val(“3”);$(...).val();
  71. 71. Events Examples
  72. 72. Events
  73. 73. Events When a button is clicked, do something.$(“button”).click(function(){something();});
  74. 74. Events When a button is clicked, do something.$(“button”).click(function(){something();}); Setup a custom event and trigger it. $(“button“).bind(“expand”, function(){ something(); }); $(“button:first“).trigger(“expand”);
  75. 75. Events When a button is clicked, do something.$(“button”).click(function(){something();}); Setup a custom event and trigger it. $(“button“).bind(“expand”, function(){ something(); }); $(“button:first“).trigger(“expand”); Unbind custom event. $(“button“).unbind(“expand”);
  76. 76. Event Delegation
  77. 77. Event Delegation Attach events to document $(“button”).live(‘click’, function(){ something(); });
  78. 78. Event Delegation Attach events to document $(“button”).live(‘click’, function(){ something(); });Attach event delegation to elements $(“form“).delegate(“button”, ”click”, function(){ something(); });
  79. 79. Effects / AnimationExamples
  80. 80. Animation / EffectsTypes of Effects
  81. 81. Animation / EffectsTypes of Effects#1. Hide and Show
  82. 82. Animation / EffectsTypes of Effects#1. Hide and Show#2. Fade In and Out
  83. 83. Animation / EffectsTypes of Effects#1. Hide and Show#2. Fade In and Out#3. Slide Up and Down
  84. 84. Animation / Effects
  85. 85. Animation / EffectsWith each click, slide up / slide down a div. $(...).click(function(){ $(“div:first”).slideToggle(); });
  86. 86. Animation / EffectsWith each click, slide up / slide down a div. $(...).click(function(){ $(“div:first”).slideToggle(); });Animate elements to 300px wide in .5 seconds. $(...).animate({ “width”: “300px” }, 500);
  87. 87. Animation / EffectsWith each click, slide up / slide down a div. $(...).click(function(){ $(“div:first”).slideToggle(); });Animate elements to 300px wide in .5 seconds. $(...).animate({ “width”: “300px” }, 500);Take focus off elements by fading them to 30% opacity in .5 seconds $(...).fadeTo(500, 0.3);
  88. 88. Traversing Examples
  89. 89. Traversing ExamplesGet previous table cells to #myCell. $(“#myCell”) <html><body><table><tr> <td></td> <td></td> <td id=”myCell”></td> <td></td></tr></table></body> </html>
  90. 90. Traversing ExamplesGet previous table cells to #myCell. $(“#myCell”) .prevAll() <html><body><table><tr> <td></td> <td></td> <td id=”myCell”></td> <td></td></tr></table></body> </html>
  91. 91. Traversing ExamplesGet previous table cells to #myCell. $(“#myCell”) .prevAll() .andSelf(); <html><body><table><tr> <td></td> <td></td> <td id=”myCell”></td> <td></td></tr></table></body> </html>
  92. 92. Traversing ExamplesMove paragraphs to element with id “foo” $(“table”) <html><body><table></table><div> <p>foo</p> <span>bar</span></div></body> </html>
  93. 93. Traversing ExamplesMove paragraphs to element with id “foo” $(“table”) .next() <html><body><table></table><div> <p>foo</p> <span>bar</span></div></body> </html>
  94. 94. Traversing ExamplesMove paragraphs to element with id “foo” $(“table”) .next() <html><body><table></table><div> <p>foo</p> <span>bar</span></div></body> </html>
  95. 95. Traversing ExamplesMove paragraphs to element with id “foo” $(“table”) .next().find(“p”); <html><body><table></table><div> <p>foo</p> <span>bar</span></div></body> </html>
  96. 96. Ajax Examples
  97. 97. Ajax Examples
  98. 98. Ajax ExamplesPost data, “bar” equals “baz” to tag.php using get. $(...).get(“tag.php”, { “bar”: “baz” });
  99. 99. Ajax ExamplesPost data, “bar” equals “baz” to tag.php using get. $(...).get(“tag.php”, { “bar”: “baz” });Post data, “foo” equals “bar” to send.php, then alert the response. $.post(“send.php”, { foo: ”bar” },function(response){alert(response);});
  100. 100. Extending jQuery
  101. 101. Plugin Example $.fn.myPlugin = function(){ return this.each(function(){ $(this).html(“you used myPlugin!”); }); });<html><body><div></div><div></div></body> </html>
  102. 102. Plugin Example $.fn.myPlugin = function(){ return this.each(function(){ $(this).html(“you used myPlugin!”); }); }); $(“div”).myPlugin(); <html><body><div></div><div></div></body> </html>
  103. 103. Plugin Example $.fn.myPlugin = function(){ return this.each(function(){ $(this).html(“you used myPlugin!”); }); }); $(“div”).myPlugin(); <html><body><div>you used myPlugin!</div><div>you used myPlugin!</div></body> </html>
  104. 104. Wait, There’s More!
  105. 105. jQuery isn’t only about simpler code
  106. 106. jQuery isn’t only about simpler codeand being more productive
  107. 107. jQuery isn’t only about simpler codeand being more productiveIt is also about..
  108. 108. jQuery isn’t only about simpler codeand being more productiveIt is also about..great communitytest coverage plugins books support tutorialsopen (free) licensespeedlight weight code
  109. 109. Led to World Domination jQuery http://google.com/trends?q=dojo+javascript,+jquery+javascript,+yui+javascript,+prototype +javascript,+mootools+javascript&ctab=0&geo=all&date=all&sort=1
  110. 110. Usage Across Top 10,000 Siteshttp://trends.builtwith.com/javascript
  111. 111. Plugins jQuery has hundreds of plugins at http://plugins.jquery.com/jQuery UI Set of official user interface components at: http://jqueryui.com
  112. 112. SupportjQuery general discussion mailing list http://forum.jquery.com jQuery discussion docs page http://docs.jquery.com/Discussion jQuery IRC room#jquery on FreeNode.net
  113. 113. Books Learning jQuery 1.3 jQuery in Action by Karl SwedbergYahuda Katz http://www.amazon.com/gp/product/1847196705?http://www.amazon.com/gp/product/1933988355? ie=UTF8&tag=jacofalltrawe-20&linkCode=as2&cam ie=UTF8&tag=jacofalltrawe-20&linkCode=as2&camp p=1789&creative=9325&creativeASIN=1847196705=1789&creative=9325&creativeASIN=1933988355
  114. 114. Video Training http://marcgrabanski.com/article/the-jquery-course-prerelease
  115. 115. Thank you! Marc Grabanski: http://marcgrabanski.comTwitter: @1Marc
Please download to view
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
...

jQuery Essentials

by marc-grabanski

on

Report

Category:

Design

Download: 2

Comment: 0

274,772

views

Comments

Description

Download jQuery Essentials

Transcript

  1. 1. v2 jQuery Essentials by Marc Grabanski
  2. 2. We needed a hero to get these guys in line
  3. 3. jQuery rescues us by working the same in all browsers!
  4. 4. Easier to write jQuery than pure JavaScript
  5. 5. Hide divs with pure JavaScript divs = document.getElementByTagName(‘div’);for (i = 0; i < divs.length; i++) { divs[i].style.display = ‘none’; }
  6. 6. Hide divs with pure JavaScript divs = document.getElementByTagName(‘div’);for (i = 0; i < divs.length; i++) { divs[i].style.display = ‘none’; } Hide divs with jQuery$(“div”).hide();
  7. 7. HTML is tied to JavaScript
  8. 8. jQuery Philosophy
  9. 9. jQuery Philosophy#1. Find some HTML
  10. 10. jQuery Philosophy#1. Find some HTML #2. Do something to it
  11. 11. Find $(“div”)
  12. 12. Find let’s find some $(“div”) elements
  13. 13. Give $() a selector
  14. 14. Give $() a selector$(“#myId”)
  15. 15. Give $() a selector$(“#myId”) $(“.myClass”)
  16. 16. Give $() a selector$(“#myId”) $(“.myClass”) $(“table”)
  17. 17. Selector Examples$(“#content”) get element with id content
  18. 18. Selector Examples$(“#content”) get element with id content $(“li:first”) get first list item
  19. 19. Selector Examples$(“#content”) get element with id content $(“li:first”) get first list item $(“tr:odd”) get odd numbered table rows
  20. 20. Selector Examples$(“#content”) get element with id content $(“li:first”) get first list item $(“tr:odd”) get odd numbered table rows$(“a[target=_blank]”)get all links who’s target is “_blank”
  21. 21. Selector Examples$(“#content”) get element with id content $(“li:first”) get first list item $(“tr:odd”) get odd numbered table rows$(“a[target=_blank]”)get all links who’s target is “_blank”$(“form[id^=step]”)get all forms who’s id starts with “step”
  22. 22. You can also string selectors together
  23. 23. You can also string selectors together$(“#myId, .myClass, table”)
  24. 24. Find $(“div”)
  25. 25. FindDo $(“div”) .addClass(“redbox”);
  26. 26. jQuery API Spice Two things that make the API HOT
  27. 27. Chain Methods $(“div”).addClass(“redbox”)
  28. 28. Chain Methods $(“div”).addClass(“redbox”) .fadeOut();
  29. 29. One Method, Many Uses $(...).html();
  30. 30. One Method, Many Uses $(...).html();$(...).html(“<p>hello</p>”);
  31. 31. One Method, Many Uses $(...).html();$(...).html(“<p>hello</p>”);$(...).html(function(i){return “<p>hello “ + i + “</p>”; });
  32. 32. jQuery Methods
  33. 33. jQuery Methods •Moving Elements:append(), appendTo(), before(), after(),
  34. 34. jQuery Methods •Moving Elements:append(), appendTo(), before(), after(), •Attributescss(), attr(), html(), val(), addClass()
  35. 35. jQuery Methods •Moving Elements:append(), appendTo(), before(), after(), •Attributescss(), attr(), html(), val(), addClass() •Eventsbind(), trigger(), unbind(), live(), click()
  36. 36. jQuery Methods •Moving Elements:append(), appendTo(), before(), after(), •Attributescss(), attr(), html(), val(), addClass() •Eventsbind(), trigger(), unbind(), live(), click()•Effectsshow(), fadeOut(), toggle(), animate()
  37. 37. jQuery Methods •Moving Elements:append(), appendTo(), before(), after(), •Attributescss(), attr(), html(), val(), addClass() •Eventsbind(), trigger(), unbind(), live(), click()•Effectsshow(), fadeOut(), toggle(), animate() •Traversingfind(), is(), prevAll(), next(), hasClass()
  38. 38. jQuery Methods •Moving Elements:append(), appendTo(), before(), after(), •Attributescss(), attr(), html(), val(), addClass() •Eventsbind(), trigger(), unbind(), live(), click()•Effectsshow(), fadeOut(), toggle(), animate() •Traversingfind(), is(), prevAll(), next(), hasClass() •Ajaxget(), getJSON(), post(), ajax(), load()
  39. 39. jQuery Factory Method $()You can also pass $() a function to run the function after the page loads.
  40. 40. jQuery Factory Method $()You can also pass $() a function to run the function after the page loads.$(function(){});
  41. 41. jQuery Factory Method $()You can also pass $() a function to run the function after the page loads.$(function(){code here will execute after DOM is ready });
  42. 42. jQuery Factory Method $() You can also pass $() a functionto run the function after the page loads. $(function(){ code here will execute after DOM is ready});Note: This is essentially the same as..$(document).ready(function(){ });
  43. 43. jQuery Factory Method $() You can also pass $() a functionto run the function after the page loads. $(function(){ code here will execute after DOM is ready});Note: This is essentially the same as.. $(document).ready(function(){ }); ..you will see this in tutorials around the net
  44. 44. Moving Elements ExamplesGet element with ID foo and add some HTML.$(“#foo”)<html> <body> <div>jQuery</div> <div id=”foo”>example</div> </body></html>
  45. 45. Moving Elements ExamplesGet element with ID foo and add some HTML.$(“#foo”).append(“<p>test</p>”);<html> <body> <div>jQuery</div> <div id=”foo”>example</div> </body></html>
  46. 46. Moving Elements ExamplesGet element with ID foo and add some HTML.$(“#foo”).append(“<p>test</p>”);<html> <body> <div>jQuery</div> <div id=”foo”>example<p>test</p></div> </body></html>
  47. 47. Moving Elements ExamplesMove paragraphs to element with id “foo” $(“p”) <html><body><div>jQuery <p>moving</p> <p>paragraphs</p></div><div id=”foo”>example</div></body> </html>
  48. 48. Moving Elements ExamplesMove paragraphs to element with id “foo” $(“p”) .appendTo(“#foo”); <html><body><div>jQuery <p>moving</p> <p>paragraphs</p></div><div id=”foo”>example</div></body> </html>
  49. 49. Moving Elements ExamplesMove paragraphs to element with id “foo” $(“p”) .appendTo(“#foo”); <html><body><div>jQuery</div><div id=”foo”>example <p>moving</p> <p>paragraphs</p></div></body> </html>
  50. 50. Attributes
  51. 51. Attributes Get .attr(‘id’)
  52. 52. Attributes Get .attr(‘id’) .html()
  53. 53. Attributes Get .attr(‘id’) .html() .val()
  54. 54. Attributes Get .attr(‘id’) .html() .val().css(“top”)
  55. 55. Attributes Get .attr(‘id’) .html() .val().css(“top”).width()
  56. 56. Attributes Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .val().css(“top”).width()
  57. 57. Attributes Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .html(“<p>hi</p>”) .val().css(“top”).width()
  58. 58. Attributes Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .html(“<p>hi</p>”) .val().val(“new val”) .css(“top”).width()
  59. 59. Attributes Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .html(“<p>hi</p>”) .val().val(“new val”) .css(“top”) .css(“top”, “80px”).width()
  60. 60. Attributes Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .html(“<p>hi</p>”) .val().val(“new val”) .css(“top”) .css(“top”, “80px”).width().width(60)
  61. 61. Attributes
  62. 62. Attributes Set border to 1px black$(...).css(“border”, “1px solid black”);
  63. 63. Attributes Set border to 1px black$(...).css(“border”, “1px solid black”);Set various css properties.$(...).css({“background”: “yellow”,“height”: “400px”});
  64. 64. Attributes Set border to 1px black$(...).css(“border”, “1px solid black”);Set various css properties.$(...).css({“background”: “yellow”,“height”: “400px”});Set all link’s href attribute to google.com$(“a”).attr(“href”, “http://google.com”);
  65. 65. Attributes
  66. 66. AttributesReplace HTML with a new paragraph.$(...).html(“<p>I’m new</p>”);
  67. 67. AttributesReplace HTML with a new paragraph.$(...).html(“<p>I’m new</p>”); <div>whatever</div> turns into <div><p>I’m new</p></div>
  68. 68. AttributesReplace HTML with a new paragraph.$(...).html(“<p>I’m new</p>”); <div>whatever</div> turns into <div><p>I’m new</p></div> Set checkboxes attribute “checked” to checked.$(“:checkbox”).attr(“checked”,”checked”);
  69. 69. AttributesReplace HTML with a new paragraph.$(...).html(“<p>I’m new</p>”); <div>whatever</div> turns into <div><p>I’m new</p></div> Set checkboxes attribute “checked” to checked.$(“:checkbox”).attr(“checked”,”checked”);Set input value to 3.$(...).val(“3”);
  70. 70. AttributesReplace HTML with a new paragraph.$(...).html(“<p>I’m new</p>”); <div>whatever</div> turns into <div><p>I’m new</p></div> Set checkboxes attribute “checked” to checked.$(“:checkbox”).attr(“checked”,”checked”);Set input value to 3. Get input value.$(...).val(“3”);$(...).val();
  71. 71. Events Examples
  72. 72. Events
  73. 73. Events When a button is clicked, do something.$(“button”).click(function(){something();});
  74. 74. Events When a button is clicked, do something.$(“button”).click(function(){something();}); Setup a custom event and trigger it. $(“button“).bind(“expand”, function(){ something(); }); $(“button:first“).trigger(“expand”);
  75. 75. Events When a button is clicked, do something.$(“button”).click(function(){something();}); Setup a custom event and trigger it. $(“button“).bind(“expand”, function(){ something(); }); $(“button:first“).trigger(“expand”); Unbind custom event. $(“button“).unbind(“expand”);
  76. 76. Event Delegation
  77. 77. Event Delegation Attach events to document $(“button”).live(‘click’, function(){ something(); });
  78. 78. Event Delegation Attach events to document $(“button”).live(‘click’, function(){ something(); });Attach event delegation to elements $(“form“).delegate(“button”, ”click”, function(){ something(); });
  79. 79. Effects / AnimationExamples
  80. 80. Animation / EffectsTypes of Effects
  81. 81. Animation / EffectsTypes of Effects#1. Hide and Show
  82. 82. Animation / EffectsTypes of Effects#1. Hide and Show#2. Fade In and Out
  83. 83. Animation / EffectsTypes of Effects#1. Hide and Show#2. Fade In and Out#3. Slide Up and Down
  84. 84. Animation / Effects
  85. 85. Animation / EffectsWith each click, slide up / slide down a div. $(...).click(function(){ $(“div:first”).slideToggle(); });
  86. 86. Animation / EffectsWith each click, slide up / slide down a div. $(...).click(function(){ $(“div:first”).slideToggle(); });Animate elements to 300px wide in .5 seconds. $(...).animate({ “width”: “300px” }, 500);
  87. 87. Animation / EffectsWith each click, slide up / slide down a div. $(...).click(function(){ $(“div:first”).slideToggle(); });Animate elements to 300px wide in .5 seconds. $(...).animate({ “width”: “300px” }, 500);Take focus off elements by fading them to 30% opacity in .5 seconds $(...).fadeTo(500, 0.3);
  88. 88. Traversing Examples
  89. 89. Traversing ExamplesGet previous table cells to #myCell. $(“#myCell”) <html><body><table><tr> <td></td> <td></td> <td id=”myCell”></td> <td></td></tr></table></body> </html>
  90. 90. Traversing ExamplesGet previous table cells to #myCell. $(“#myCell”) .prevAll() <html><body><table><tr> <td></td> <td></td> <td id=”myCell”></td> <td></td></tr></table></body> </html>
  91. 91. Traversing ExamplesGet previous table cells to #myCell. $(“#myCell”) .prevAll() .andSelf(); <html><body><table><tr> <td></td> <td></td> <td id=”myCell”></td> <td></td></tr></table></body> </html>
  92. 92. Traversing ExamplesMove paragraphs to element with id “foo” $(“table”) <html><body><table></table><div> <p>foo</p> <span>bar</span></div></body> </html>
  93. 93. Traversing ExamplesMove paragraphs to element with id “foo” $(“table”) .next() <html><body><table></table><div> <p>foo</p> <span>bar</span></div></body> </html>
  94. 94. Traversing ExamplesMove paragraphs to element with id “foo” $(“table”) .next() <html><body><table></table><div> <p>foo</p> <span>bar</span></div></body> </html>
  95. 95. Traversing ExamplesMove paragraphs to element with id “foo” $(“table”) .next().find(“p”); <html><body><table></table><div> <p>foo</p> <span>bar</span></div></body> </html>
  96. 96. Ajax Examples
  97. 97. Ajax Examples
  98. 98. Ajax ExamplesPost data, “bar” equals “baz” to tag.php using get. $(...).get(“tag.php”, { “bar”: “baz” });
  99. 99. Ajax ExamplesPost data, “bar” equals “baz” to tag.php using get. $(...).get(“tag.php”, { “bar”: “baz” });Post data, “foo” equals “bar” to send.php, then alert the response. $.post(“send.php”, { foo: ”bar” },function(response){alert(response);});
  100. 100. Extending jQuery
  101. 101. Plugin Example $.fn.myPlugin = function(){ return this.each(function(){ $(this).html(“you used myPlugin!”); }); });<html><body><div></div><div></div></body> </html>
  102. 102. Plugin Example $.fn.myPlugin = function(){ return this.each(function(){ $(this).html(“you used myPlugin!”); }); }); $(“div”).myPlugin(); <html><body><div></div><div></div></body> </html>
  103. 103. Plugin Example $.fn.myPlugin = function(){ return this.each(function(){ $(this).html(“you used myPlugin!”); }); }); $(“div”).myPlugin(); <html><body><div>you used myPlugin!</div><div>you used myPlugin!</div></body> </html>
  104. 104. Wait, There’s More!
  105. 105. jQuery isn’t only about simpler code
  106. 106. jQuery isn’t only about simpler codeand being more productive
  107. 107. jQuery isn’t only about simpler codeand being more productiveIt is also about..
  108. 108. jQuery isn’t only about simpler codeand being more productiveIt is also about..great communitytest coverage plugins books support tutorialsopen (free) licensespeedlight weight code
  109. 109. Led to World Domination jQuery http://google.com/trends?q=dojo+javascript,+jquery+javascript,+yui+javascript,+prototype +javascript,+mootools+javascript&ctab=0&geo=all&date=all&sort=1
  110. 110. Usage Across Top 10,000 Siteshttp://trends.builtwith.com/javascript
  111. 111. Plugins jQuery has hundreds of plugins at http://plugins.jquery.com/jQuery UI Set of official user interface components at: http://jqueryui.com
  112. 112. SupportjQuery general discussion mailing list http://forum.jquery.com jQuery discussion docs page http://docs.jquery.com/Discussion jQuery IRC room#jquery on FreeNode.net
  113. 113. Books Learning jQuery 1.3 jQuery in Action by Karl SwedbergYahuda Katz http://www.amazon.com/gp/product/1847196705?http://www.amazon.com/gp/product/1933988355? ie=UTF8&tag=jacofalltrawe-20&linkCode=as2&cam ie=UTF8&tag=jacofalltrawe-20&linkCode=as2&camp p=1789&creative=9325&creativeASIN=1847196705=1789&creative=9325&creativeASIN=1933988355
  114. 114. Video Training http://marcgrabanski.com/article/the-jquery-course-prerelease
  115. 115. Thank you! Marc Grabanski: http://marcgrabanski.comTwitter: @1Marc
Fly UP