1. jQuery
New Wave JavaScript
Ajax Experience - Oct 2006
John Resig (ejohn.org)

2. What is jQuery?
• An open source JavaScript library that
simplifies the interaction between HTML
and JavaScript.

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. Complete Focus:
• Find some elements
• Do something with them

5. Find Some Elements...
• Full CSS 1-3 Support
• Basic XPath
• Better CSS support than most browsers

6. $(“div”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>

7. $(“#body”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>

8. $(“div#body”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>

9. $(“div.contents p”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>

10. $(“div > div”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>

11. $(“div[div]”)
<div id=”body”>
<h2>Some Header</h2>
<div class=”contents”>
<p>...</p>
<p>...</p>
</div>
</div>

12. Features
• Events (click, hover, toggle)
• DOM Manipulation (append, prepend, remove)
• Effects (hide, show, slideDown, fadeOut)
• AJAX (load, get, post)

13. Events
• $(“form input:last”).click(function(){
$(“#menu”).slideDown(“slow”);
});

14. DOM Manipulation
• $(“a[@target]”)
.append(“ (Opens in New Window)”);
• $(“#body”).css({
border: “1px solid green”,
height: “40px”
});

15. Effects
• $(“#menu”).slideDown(“slow”);
• $(“div”).hide(500,function(){
$(this).show(500);
});

16. AJAX
• $(“#body”).load(“sample.html”);
• $.getScript(“test.js”);

17. Chaining
• $(“div”).hide();
• $(“div”).hide().color(”blue”);
• $(“div”).hide().color(”blue”).slideDown();

18. Live Demos

19. Accordion Menu

20. Hover Menu

21. Todo List

22. Plugins
• Drag and Drop
• Sortables
• Tabbed Navigation
• Sortable Tables
• And over 80 more...

23. Community
• Very active mailing list
• 90+ Posts/Day
• 640+ Members
• Technorati: 10+ blog posts per day

24. Who uses jQuery?
• MSNBC
• Technorati
• Feedburner
• Drupal
• many others...

25. Future
• Internationalization
• Plugin Community (think Sourceforge)
• Fixing “Hard” Problems

26. jquery.com
jquery.com/docs - jquery.com/plugins
More:
visualjquery.com
learningjquery.com