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

Introduction to jQuery (Ajax Exp 2007)

551

Published on

Talk I gave at Ajax Experience West and East 2007.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
551
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×