jQuery is an open source JavaScript library that simplifies HTML and JavaScript interaction. It has a small file size, is fully documented, and supported across many browsers. jQuery allows developers to select elements, perform actions on them such as effects, events, DOM manipulation, and AJAX requests, using its simple and concise syntax.

1. jQuery
Introduction
Ajax Experience - July 2007
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 (20kb)
• Everything works in IE 6+, Firefox,
Safari 2+, and Opera 9+

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 hundreds more...

23. Community
• Very active mailing list
• 108+ Posts/Day
• 2500+ Members
• Technorati: 22+ blog posts per day

24. Who uses jQuery?
• IBM
• MSNBC
• Technorati
• Drupal
• Wordpress
• Digg
• many others...

25. Books
• 4 Books in Progress:
• Learning jQuery (Packt)
• jQuery Reference (Packt)
• jQuery Quickly (Manning)
• Designing with jQuery (Manning)

26. Future
• “jQuery UI”
• Themeing
• Internationalization

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