Introduction to jQuery (Ajax Exp 2006)

2,063 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,063
On SlideShare
0
From Embeds
0
Number of Embeds
295
Actions
Shares
0
Downloads
17
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Introduction to jQuery (Ajax Exp 2006)

  1. 1. jQueryNew Wave JavaScriptAjax Experience - Oct 2006 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 (15kb)• Everything works in IE 5.5+, Firefox, Safari 1.3+, and Opera 8+
  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 over 80 more...
  23. 23. Community• Very active mailing list • 90+ Posts/Day • 640+ Members• Technorati: 10+ blog posts per day
  24. 24. Who uses jQuery?• MSNBC• Technorati• Feedburner• Drupal• many others...
  25. 25. Future• Internationalization• Plugin Community (think Sourceforge)• Fixing “Hard” Problems
  26. 26. jquery.comjquery.com/docs - jquery.com/plugins More: visualjquery.com learningjquery.com

×