Search

jQuery Essentials

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

12 comments

Comments 1 - 10 of 12 previous next Post a comment

  • + claymanz claymanz 2 weeks ago
    What a great slideshow for newbies, really helpful!
  • + siamtweet siamtweet 1 month ago
    Concise and yet a great introduction. Thanks!
  • + singhgarima Garima Singh 2 months ago
    Hey Great Stuff
  • + jinhuan_kon kite 5 months ago
    Thanks
  • + annejan Anne Jan Roeleveld 6 months ago
    Nice! Thanks a lot for this presentation.
    Can you enable the download possibility?
  • + Torrespro Torrespro 6 months ago
    gracias!
  • + ppass ppass 6 months ago
    How can I download this presentation? I don’t see any download link even though I am logged into my slide share account.
  • + Gaurav_M Gaurav M 7 months ago
    this is the best and easy step by step slide..of jQuery for beginners
    in slideshare
  • + HO_BA HO_BA 7 months ago
    Thanks Marc

    This is awesome
  • + guest0597d5 guest0597d5 7 months ago
    Great presentation.

    jQuery Lover

Comments 1 - 10 of 12 previous next

Post a comment
Embed Video
Edit your comment Cancel

Notes on slide 1

85 Favorites

jQuery Essentials - Presentation Transcript

  1. jQuery Essentials by Marc Grabanski
  2. A JavaScript library designed to hide painful cross-browser compatibility issues while presenting a solid, usable, API.
  3. A JavaScript library designed to hide painful cross-browser compatibility issues while presenting a solid, usable, API. In other words... jQuery makes JavaScript less painful and simpler!
  4. For example, instead of messing with.. if (!document.ELEMENT_NODE) { document.ELEMENT_NODE = 1; document.ATTRIBUTE_NODE = 2; document.TEXT_NODE = 3; document._importNode = function(node, allChildren) { switch (node.nodeType) { case document.ELEMENT_NODE: var newNode = document.createElement(node.nodeName); /* does the node have any attributes to add? */ if (node.attributes && node.attributes.length > 0) for (var i = 0; il = node.attributes.length; i < il) newNode.setAttribute(node.attributes[i].nodeName, node.getAttribute(node.attributes[i++].nodeName)); /* are we going after children too, and does the node have any? */ if (allChildren && node.childNodes && node.childNodes.length > 0) for (var i = 0; il = node.childNodes.length; i < il) newNode.appendChild(document._importNode (node.childNodes[i++], allChildren)); return newNode; break; case document.TEXT_NODE: case document.CDATA_SECTION_NODE: case document.COMMENT_NODE: return document.createTextNode(node.nodeValue); break; } }; http://www.alistapart.com/articles/crossbrowserscripting
  5. You could write this code: $(“#content”).load(“page.html #content”);
  6. You could write this code: $(“#content”).load(“page.html #content”); HAWT!
  7. It isn’t only about simpler code
  8. It isn’t only about simpler code and hiding web browsers’ faults
  9. It isn’t only about simpler code and hiding web browsers’ faults jQuery is also about.. great community test coverage plugins books support tutorials open (free) license speed light weight code
  10. These things have led jQuery to World Domination.
  11. These things have led jQuery to World Domination. World Domination http://google.com/trends?q=prototype+javascript%2C+jquery+javascript%2C+yui+javascript%2C+mootools+javascript%2C+scriptaculous+javascript%2C+dojo+javascript
  12. Used by projects: •Wordpress, Drupal, Textpattern
  13. Used by projects: •Wordpress, Drupal, Textpattern Used by major companies: •Google, Amazon, Digg, Netflix, Dell, HP, Bank of America, Intel...
  14. Used by projects: •Wordpress, Drupal, Textpattern Used by major companies: •Google, Amazon, Digg, Netflix, Dell, HP, Bank of America, Intel... •NBC, CBS, BBC, Reuters, Newsweek ...and many more. http://docs.jquery.com/Sites_Using_jQuery
  15. jQuery’s Core Philosophy:
  16. jQuery’s Core Philosophy: Simplify interaction between HTML and JavaScript.
  17. jQuery’s Core Philosophy: Simplify interaction between HTML and JavaScript. #1. Find some HTML
  18. jQuery’s Core Philosophy: Simplify interaction between HTML and JavaScript. #1. Find some HTML #2. Do something to it.
  19. <html> <body> <div>jQuery</div> <div>example</div> </body> </html>
  20. Find all divs $(“div”) <html> <body> <div>jQuery</div> <div>example</div> </body> </html>
  21. Find all divs add class to them $(“div”).addClass(‘foo’); <html> <body> <div class=”foo”>jQuery</div> <div class=”foo”>example</div> </body> </html>
  22. jQuery Factory Method $() Find HTML elements on a page by passing $() a selector.
  23. jQuery Factory Method $() Find HTML elements on a page by passing $() a selector. $(selector) - use any CSS selector
  24. jQuery Factory Method $() Find HTML elements on a page by passing $() a selector. $(selector) - use any CSS selector $(“#myId”)
  25. jQuery Factory Method $() Find HTML elements on a page by passing $() a selector. $(selector) - use any CSS selector $(“#myId”) $(“.myClass”)
  26. jQuery Factory Method $() Find HTML elements on a page by passing $() a selector. $(selector) - use any CSS selector $(“#myId”) $(“.myClass”) $(“table”)
  27. jQuery Factory Method $() Find HTML elements on a page by passing $() a selector. $(selector) - use any CSS selector $(“#myId”) $(“.myClass”) $(“table”) You can also string selectors together $(“#myId, .myClass, table”)
  28. Selector Examples $(“#content”) get element with id content
  29. Selector Examples $(“#content”) get element with id content $(“li:first”) get first list item
  30. Selector Examples $(“#content”) get element with id content $(“li:first”) get first list item $(“tr:odd”) get odd numbered table rows
  31. 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”
  32. 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”
  33. Selector Examples
  34. Selector Examples Live Examples of Selectors http://codylindley.com/jqueryselectors/
  35. jQuery Factory Method $() You can also pass $() a function to run the function after the page loads.
  36. jQuery Factory Method $() You can also pass $() a function to run the function after the page loads. $(function(){ });
  37. jQuery Factory Method $() You can also pass $() a function to run the function after the page loads. $(function(){ code here will execute after page load });
  38. jQuery Factory Method $() You can also pass $() a function to run the function after the page loads. $(function(){ code here will execute after page load }); Note: This is essentially the same as.. $(document).ready(function(){ });
  39. jQuery Factory Method $() You can also pass $() a function to run the function after the page loads. $(function(){ code here will execute after page load }); Note: This is essentially the same as.. $(document).ready(function(){ }); ..you will see this in tutorials around the net
  40. jQuery Factory Method $() You can pass $() in a string of HTML
  41. jQuery Factory Method $() You can pass $() in a string of HTML $(“<p>this is some <em>html</em></p>”)
  42. jQuery Methods
  43. jQuery Methods •Moving Elements: before(), after(), appendTo(), append()
  44. jQuery Methods •Moving Elements: before(), after(), appendTo(), append() •Attributes css(), attr(), html(), val(), addClass()
  45. jQuery Methods •Moving Elements: before(), after(), appendTo(), append() •Attributes css(), attr(), html(), val(), addClass() •Events bind(), trigger(), unbind(), live(), click()
  46. jQuery Methods •Moving Elements: before(), after(), appendTo(), append() •Attributes css(), attr(), html(), val(), addClass() •Events bind(), trigger(), unbind(), live(), click() •Effects show(), fadeOut(), toggle(), animate()
  47. jQuery Methods •Moving Elements: before(), after(), appendTo(), append() •Attributes css(), attr(), html(), val(), addClass() •Events bind(), trigger(), unbind(), live(), click() •Effects show(), fadeOut(), toggle(), animate() •Traversing find(), is(), prevAll(), next(), hasClass()
  48. jQuery Methods •Moving Elements: before(), after(), appendTo(), append() •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()
  49. jQuery Methods Actions can be chained together.
  50. jQuery Methods Actions can be chained together. $(...).addClass(‘foo’).fadeIn().html(“foo”);
  51. Quick Note: When I write $(...), it means use any selector.
  52. Moving Elements Examples
  53. 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>
  54. 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>
  55. 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>
  56. Moving Elements Examples Add HTML to element with ID foo. $(“<p>test</p>”) <html> <body> <div>jQuery</div> <div id=”foo”>example</div> </body> </html>
  57. Moving Elements Examples Add HTML to element with ID foo. $(“<p>test</p>”).appendTo(“#foo”); <html> <body> <div>jQuery</div> <div id=”foo”>example</div> </body> </html>
  58. Moving Elements Examples Add HTML to element with ID foo. $(“<p>test</p>”).appendTo(“#foo”); <html> <body> <div>jQuery</div> <div id=”foo”>example<p>test</p></div> </body> </html>
  59. 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>
  60. 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>
  61. Attributes Examples
  62. Attributes Examples
  63. Attributes Examples Set border to 1px black $(...).css(“border”, “1px solid black”);
  64. Attributes Examples Set border to 1px black $(...).css(“border”, “1px solid black”); Set various css properties. $(...).css({ “background”: “yellow”, “height”: “400px” });
  65. Attributes Examples 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”);
  66. Attributes Examples
  67. Attributes Examples Replace HTML with a new paragraph. $(...).html(“<p>I’m new</p>”);
  68. Attributes Examples Replace HTML with a new paragraph. $(...).html(“<p>I’m new</p>”); <div>foo</div> turns into <div><p>I’m new</p></div>
  69. Attributes Examples Replace HTML with a new paragraph. $(...).html(“<p>I’m new</p>”); <div>foo</div> turns into <div><p>I’m new</p></div> Set checkboxes attribute “checked” to checked. $(“:checkbox”).attr(“checked”,”checked”);
  70. Attributes Examples Replace HTML with a new paragraph. $(...).html(“<p>I’m new</p>”); <div>foo</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”);
  71. Attributes Examples Replace HTML with a new paragraph. $(...).html(“<p>I’m new</p>”); <div>foo</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();
  72. Events Examples
  73. Events Examples
  74. Events Examples When a button is clicked, do something. $(“button”).click(function(){ something(); });
  75. Events Examples 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”);
  76. Events Examples 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”);
  77. Effects Examples
  78. Effects Examples
  79. Effects Examples With each click, slide up / slide down a div. $(...).click(function(){ $(“div:first”).slideToggle(); });
  80. Effects Examples 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);
  81. Effects Examples 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. $(...).fadeTo(0.3);
  82. Traversing Examples
  83. 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>
  84. 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>
  85. 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>
  86. Traversing Examples Move paragraphs to element with id “foo” $(“table”) <html> <body> <table></table> <div> <p>foo</p> <span>bar</span> </div> </body> </html>
  87. 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>
  88. 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>
  89. 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>
  90. Ajax Examples
  91. Ajax Examples
  92. Ajax Examples Post data, “bar” equals “baz” to tag.php using get. $(...).get(“tag.php”, { “bar”: “baz” });
  93. 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); });
  94. Extending jQuery
  95. Plugin Example $.fn.myPlugin = function(){ return this.each(function(){ $(this).html(“you used myPlugin!”); }); }); <html> <body> <div></div> <div></div> </body> </html>
  96. Plugin Example $.fn.myPlugin = function(){ return this.each(function(){ $(this).html(“you used myPlugin!”); }); }); $(“div”).myPlugin(); <html> <body> <div></div> <div></div> </body> </html>
  97. 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>
  98. Plugins jQuery has hundreds of plugins at http://plugins.jquery.com/ jQuery UI Set of official user interface components at: http://jqueryui.com
  99. Support jQuery general discussion mailing list http://groups.google.com/group/jquery-en jQuery discussion docs page http://docs.jquery.com/Discussion jQuery IRC room #jquery on FreeNode.net
  100. 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
  101. Questions?
  102. Thank you! Marc Grabanski - http://marcgrabanski.com My company offers user interface and web application development. Email me: m@marcgrabanski.com

+ 1Marc1Marc, 7 months ago

custom

11673 views, 85 favs, 29 embeds more stats

Things you should know about jQuery JavaScript libr more

More info about this document

© All Rights Reserved

Go to text version

  • Total Views 11673
    • 8129 on SlideShare
    • 3544 from embeds
  • Comments 12
  • Favorites 85
  • Downloads 0
Most viewed embeds
  • 2869 views on http://marcgrabanski.com
  • 289 views on http://www.elholgazan.com
  • 207 views on http://www.nosolocodigo.com
  • 62 views on http://www.mrkindy.com
  • 33 views on http://www.lug.or.kr

more

All embeds
  • 2869 views on http://marcgrabanski.com
  • 289 views on http://www.elholgazan.com
  • 207 views on http://www.nosolocodigo.com
  • 62 views on http://www.mrkindy.com
  • 33 views on http://www.lug.or.kr
  • 15 views on http://static.slidesharecdn.com
  • 10 views on http://www.techiegyan.com
  • 10 views on http://blog.nerdery.com
  • 9 views on http://planetcakephp.org
  • 6 views on http://feedproxy.google.com
  • 6 views on http://cyberbloggin.blogspot.com
  • 6 views on http://idojava.blogspot.com
  • 4 views on http://hawesome.wordpress.com
  • 2 views on http://www.i9cafe.com
  • 2 views on http://toobla.com
  • 1 views on http://www.cyberbloggin.blogspot.com
  • 1 views on resource://brief-content
  • 1 views on http://feeds.marcgrabanski.com
  • 1 views on http://www.feedage.com
  • 1 views on http://www.hanrss.com
  • 1 views on http://cofra36.blogspot.com
  • 1 views on http://sites
  • 1 views on https://www.lug.or.kr
  • 1 views on http://megtessmann.com
  • 1 views on http://www.megtessmann.com
  • 1 views on http://localhost
  • 1 views on http://www.blogger.com
  • 1 views on http://ww.marcgrabanski.com
  • 1 views on http://209.85.129.132

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories

Tags

more
-->
Search
RSS Feed
What's new?

© 2009 SlideShare Inc. All Rights Reserved