Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to jQuery (Ajax Exp 2007)

1,174 views

Published on

Talk I gave at Ajax Experience West and East 2007.

Published in: Technology
  • Be the first to comment

Introduction to jQuery (Ajax Exp 2007)

  1. 1. jQuery IntroductionAjax Experience - July 2007 John Resig (ejohn.org)
  2. 2. What is jQuery?• An open source JavaScript library that simplifies the interaction between HTML and JavaScript.
  3. 3. Why jQuery?• Fully documented• Great community• Tons of plugins• Small size (20kb)• Everything works in IE 6+, Firefox, Safari 2+, and Opera 9+
  4. 4. Complete Focus:• Find some elements• Do something with them
  5. 5. Find Some Elements...• Full CSS 1-3 Support• Basic XPath• Better CSS support than most browsers
  6. 6. $(“div”)<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>
  7. 7. $(“#body”)<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>
  8. 8. $(“div#body”)<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>
  9. 9. $(“div.contents p”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div>
  10. 10. $(“div > div”)<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>
  11. 11. $(“div[div]”)<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>
  12. 12. Features• Events (click, hover, toggle)• DOM Manipulation (append, prepend, remove)• Effects (hide, show, slideDown, fadeOut)• AJAX (load, get, post)
  13. 13. Events• $(“form input:last”).click(function(){ $(“#menu”).slideDown(“slow”); });
  14. 14. DOM Manipulation• $(“a[@target]”) .append(“ (Opens in New Window)”);• $(“#body”).css({ border: “1px solid green”, height: “40px” });
  15. 15. Effects• $(“#menu”).slideDown(“slow”);• $(“div”).hide(500,function(){ $(this).show(500); });
  16. 16. AJAX• $(“#body”).load(“sample.html”);• $.getScript(“test.js”);
  17. 17. Chaining• $(“div”).hide();• $(“div”).hide().color(”blue”);• $(“div”).hide().color(”blue”).slideDown();
  18. 18. Live Demos
  19. 19. Accordion Menu
  20. 20. Hover Menu
  21. 21. Todo List
  22. 22. Plugins• Drag and Drop• Sortables• Tabbed Navigation• Sortable Tables• And hundreds more...
  23. 23. Community• Very active mailing list • 108+ Posts/Day • 2500+ Members• Technorati: 22+ blog posts per day
  24. 24. Who uses jQuery?• IBM• MSNBC• Technorati• Drupal• Wordpress• Digg• many others...
  25. 25. Books• 4 Books in Progress: • Learning jQuery (Packt) • jQuery Reference (Packt) • jQuery Quickly (Manning) • Designing with jQuery (Manning)
  26. 26. Future• “jQuery UI”• Themeing• Internationalization
  27. 27. jquery.comdocs.jquery.com - jquery.com/plugins More: visualjquery.com learningjquery.com

×