jQuery Essentials

Like this? Share it with your network

Share

jQuery Essentials

  • 270,957 views
Uploaded on

Things you should know about jQuery JavaScript library.

Things you should know about jQuery JavaScript library.

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
270,957
On Slideshare
110,108
From Embeds
160,849
Number of Embeds
337

Actions

Shares
Downloads
7,171
Comments
51
Likes
410

Embeds 160,849

http://marcgrabanski.com 65,313
http://www.learningjquery.com 37,718
http://web.enavu.com 21,018
http://www.bukuharian.com 7,686
http://www.myphptutorials.com 3,351
http://tutsvalley.com 2,717
http://blog.25sprout.com 2,543
http://miageprojet2.unice.fr 1,915
http://www.liondk.com 1,555
http://www.learningjquery.com. 1,356
http://shreelimbkar.wordpress.com 1,097
http://www.vestanbul.net 987
http://kopi-paste.com 867
http://phpwafr.wordpress.com 867
http://www.mrkindy.com 785
http://eredaktor.pl 763
http://www.scoop.it 475
http://vothanhduy.wordpress.com 440
http://feeds2.feedburner.com 431
http://www.elholgazan.com 421
http://jquery.collected.info 399
http://www.digitalmediaminute.com 353
http://green.cx 314
http://www.slideshare.net 304
http://www.iamntz.com 304
http://www.nosolocodigo.com 296
http://jqueryfiles.ru 281
http://www.koolbuddhi.com 277
http://swik.net 270
http://translate.googleusercontent.com 261
http://localhost 260
http://assets.marcgrabanski.com 256
http://learningjquery.com 231
http://vothanhduy.com 220
http://feeds.feedburner.com 220
http://www.jquery.allindoc.com 202
http://blog.factordstudio.com 185
http://www.blog.smthakur.com 145
http://thuannvn.blogspot.com 135
http://www.cnblogs.com 134
http://blog.nerdery.com 110
http://nomikos.info 93
http://greenido.wordpress.com 91
http://theoldreader.com 86
http://posterous.com 85
http://www.srikanthportal.com 83
http://192.168.1.20 79
http://www.nicolasaguenot.com 79
http://blog.artetweb.com 72
http://janaksodha.com 71

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. v2 jQuery Essentials by Marc Grabanski
  • 2. We needed a hero to get these guys in line
  • 3. jQuery rescues us by working the same in all browsers!
  • 4. Easier to write jQuery than pure JavaScript
  • 5. Hide divs with pure JavaScript divs = document.getElementByTagName(‘div’); for (i = 0; i < divs.length; i++) { divs[i].style.display = ‘none’; }
  • 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. HTML is tied to JavaScript
  • 8. jQuery Philosophy
  • 9. jQuery Philosophy #1. Find some HTML
  • 10. jQuery Philosophy #1. Find some HTML #2. Do something to it
  • 11. Find $(“div”)
  • 12. Find let’s find some $(“div”) elements
  • 13. Give $() a selector
  • 14. Give $() a selector $(“#myId”)
  • 15. Give $() a selector $(“#myId”) $(“.myClass”)
  • 16. Give $() a selector $(“#myId”) $(“.myClass”) $(“table”)
  • 17. Selector Examples $(“#content”) get element with id content
  • 18. Selector Examples $(“#content”) get element with id content $(“li:first”) get first list item
  • 19. Selector Examples $(“#content”) get element with id content $(“li:first”) get first list item $(“tr:odd”) get odd numbered table rows
  • 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. 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. You can also string selectors together
  • 23. You can also string selectors together $(“#myId, .myClass, table”)
  • 24. Find $(“div”)
  • 25. Find Do $(“div”) .addClass(“redbox”);
  • 26. jQuery API Spice Two things that make the API HOT
  • 27. Chain Methods $(“div”).addClass(“redbox”)
  • 28. Chain Methods $(“div”).addClass(“redbox”) .fadeOut();
  • 29. One Method, Many Uses $(...).html();
  • 30. One Method, Many Uses $(...).html(); $(...).html(“<p>hello</p>”);
  • 31. One Method, Many Uses $(...).html(); $(...).html(“<p>hello</p>”); $(...).html(function(i){ return “<p>hello “ + i + “</p>”; });
  • 32. jQuery Methods
  • 33. jQuery Methods •Moving Elements: append(), appendTo(), before(), after(),
  • 34. jQuery Methods •Moving Elements: append(), appendTo(), before(), after(), •Attributes css(), attr(), html(), val(), addClass()
  • 35. jQuery Methods •Moving Elements: append(), appendTo(), before(), after(), •Attributes css(), attr(), html(), val(), addClass() •Events bind(), trigger(), unbind(), live(), click()
  • 36. jQuery Methods •Moving Elements: append(), appendTo(), before(), after(), •Attributes css(), attr(), html(), val(), addClass() •Events bind(), trigger(), unbind(), live(), click() •Effects show(), fadeOut(), toggle(), animate()
  • 37. jQuery Methods •Moving Elements: append(), appendTo(), before(), after(), •Attributes css(), attr(), html(), val(), addClass() •Events bind(), trigger(), unbind(), live(), click() •Effects show(), fadeOut(), toggle(), animate() •Traversing find(), is(), prevAll(), next(), hasClass()
  • 38. jQuery Methods •Moving Elements: append(), appendTo(), before(), after(), •Attributes css(), attr(), html(), val(), addClass() •Events bind(), trigger(), unbind(), live(), click() •Effects show(), fadeOut(), toggle(), animate() •Traversing find(), is(), prevAll(), next(), hasClass() •Ajax get(), getJSON(), post(), ajax(), load()
  • 39. jQuery Factory Method $() You can also pass $() a function to run the function after the page loads.
  • 40. jQuery Factory Method $() You can also pass $() a function to run the function after the page loads. $(function(){ });
  • 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. 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 }); Note: This is essentially the same as.. $(document).ready(function(){ });
  • 43. 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 }); Note: This is essentially the same as.. $(document).ready(function(){ }); ..you will see this in tutorials around the net
  • 44. Moving Elements Examples Get element with ID foo and add some HTML. $(“#foo”) <html> <body> <div>jQuery</div> <div id=”foo”>example</div> </body> </html>
  • 45. Moving Elements Examples Get 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. Moving Elements Examples Get 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. Moving Elements Examples Move 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. Moving Elements Examples Move 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. Moving Elements Examples Move 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. Attributes
  • 51. Attributes Get .attr(‘id’)
  • 52. Attributes Get .attr(‘id’) .html()
  • 53. Attributes Get .attr(‘id’) .html() .val()
  • 54. Attributes Get .attr(‘id’) .html() .val() .css(“top”)
  • 55. Attributes Get .attr(‘id’) .html() .val() .css(“top”) .width()
  • 56. Attributes Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .val() .css(“top”) .width()
  • 57. Attributes Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .html(“<p>hi</p>”) .val() .css(“top”) .width()
  • 58. Attributes Get Set .attr(‘id’) .attr(‘id’, ‘foo’) .html() .html(“<p>hi</p>”) .val() .val(“new val”) .css(“top”) .width()
  • 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. 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. Attributes
  • 62. Attributes Set border to 1px black $(...).css(“border”, “1px solid black”);
  • 63. Attributes Set border to 1px black $(...).css(“border”, “1px solid black”); Set various css properties. $(...).css({ “background”: “yellow”, “height”: “400px” });
  • 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. Attributes
  • 66. Attributes Replace HTML with a new paragraph. $(...).html(“<p>I’m new</p>”);
  • 67. Attributes Replace HTML with a new paragraph. $(...).html(“<p>I’m new</p>”); <div>whatever</div> turns into <div><p>I’m new</p></div>
  • 68. Attributes Replace 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. Attributes Replace 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. Attributes Replace 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. Events Examples
  • 72. Events
  • 73. Events When a button is clicked, do something. $(“button”).click(function(){ something(); });
  • 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. 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. Event Delegation
  • 77. Event Delegation Attach events to document $(“button”).live(‘click’, function(){ something(); });
  • 78. Event Delegation Attach events to document $(“button”).live(‘click’, function(){ something(); }); Attach event delegation to elements $(“form“).delegate(“button”, ”click”, function(){ something(); });
  • 79. Effects / Animation Examples
  • 80. Animation / Effects Types of Effects
  • 81. Animation / Effects Types of Effects #1. Hide and Show
  • 82. Animation / Effects Types of Effects #1. Hide and Show #2. Fade In and Out
  • 83. Animation / Effects Types of Effects #1. Hide and Show #2. Fade In and Out #3. Slide Up and Down
  • 84. Animation / Effects
  • 85. Animation / Effects With each click, slide up / slide down a div. $(...).click(function(){ $(“div:first”).slideToggle(); });
  • 86. Animation / Effects With 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. Animation / Effects With 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. Traversing Examples
  • 89. Traversing Examples Get 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. Traversing Examples Get 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. Traversing Examples Get 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. Traversing Examples Move paragraphs to element with id “foo” $(“table”) <html> <body> <table></table> <div> <p>foo</p> <span>bar</span> </div> </body> </html>
  • 93. Traversing Examples Move paragraphs to element with id “foo” $(“table”) .next() <html> <body> <table></table> <div> <p>foo</p> <span>bar</span> </div> </body> </html>
  • 94. Traversing Examples Move paragraphs to element with id “foo” $(“table”) .next() <html> <body> <table></table> <div> <p>foo</p> <span>bar</span> </div> </body> </html>
  • 95. Traversing Examples Move 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. Ajax Examples
  • 97. Ajax Examples
  • 98. Ajax Examples Post data, “bar” equals “baz” to tag.php using get. $(...).get(“tag.php”, { “bar”: “baz” });
  • 99. Ajax Examples Post 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. Extending jQuery
  • 101. Plugin Example $.fn.myPlugin = function(){ return this.each(function(){ $(this).html(“you used myPlugin!”); }); }); <html> <body> <div></div> <div></div> </body> </html>
  • 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. 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. Wait, There’s More!
  • 105. jQuery isn’t only about simpler code
  • 106. jQuery isn’t only about simpler code and being more productive
  • 107. jQuery isn’t only about simpler code and being more productive It is also about..
  • 108. jQuery isn’t only about simpler code and being more productive It is also about.. great community test coverage plugins books support tutorials open (free) license speed light weight code
  • 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. Usage Across Top 10,000 Sites http://trends.builtwith.com/javascript
  • 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. Support jQuery 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. Books Learning jQuery 1.3 jQuery in Action by Karl Swedberg Yahuda 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. Video Training http://marcgrabanski.com/article/the-jquery-course-prerelease
  • 115. Thank you! Marc Grabanski: http://marcgrabanski.com Twitter: @1Marc