This document provides an introduction and overview of jQuery for developers. It discusses that jQuery is a JavaScript library used on 35% of sites that use JavaScript and 1 in 5 of all sites, to simplify DOM manipulation, events, animations and Ajax interactions. It then covers 5 core jQuery concepts including finding elements and performing actions on them, creating elements, chaining methods, implicit iteration, and building plugins. The document provides examples of each concept and encourages questions at the end.
2. A bit about me
• Cody Lindley
• I work for Ning (www.ning.com)
• jQuery team member, on the evangelism team
• Many years ago I authored, Thickbox
• Co‐authored O’Reilly “jQuery Cookbook” due out
end of the year
• Recently authored a PDF book called “jQuery
Enlightenment” (www.jqueryenlightenment.com)
3. Today
• Who, what, where, and why of jQuery
• 5 core jQuery concepts
• Overview of jQuery API
• How to build a plugin in 6 steps
• Ques)ons
7. What exactly is jQuery
(if you don’t already know)
• jQuery is a JavaScript Library
(19kb Minified and Gzipped, 120kb Uncompressed)
• Dealing with the DOM
(e.g. selec)ng, crea)ng, traversing, changing etc…)
• JavaScript Events
• DOM Anima)ons
• Ajax interac)ons
9. It means no more of this
var tables = document.getElementsByTagName(‘table’);
for (var t = 0; t < tables.length; t++) {
var rows = tables[t].getElementsByTagName("tr");
for (var i = 0; i < rows.length; i += 2) {
if (!/(^|s)odd(s|$)/.test(rows[i].className)) {
rows[i].className += ‘odd’;
}
}
};
h[p://jsbin.com/ebiye/edit#html
16. Why use jQuery
• Helps us to simplify and speed up web
development
• Allows us to avoid common headaches associated
with browser development
• Provides a large pool of plugins
• Large and ac)ve community
• Tested on 50 browsers, 11 plaiorms
• It’s for both coders and designers (we don’t
discriminate)
17. Why use jQuery over other soluKons
• Helps us to simplify and speed up web
development
• Allows us to avoid common headaches associated
with browser development
• Provides a large pool of plugins
• Large and ac)ve community
• Tested on 50 browsers, 11 plaiorms
• It’s for both coders and designers (we don’t
discriminate)
18. Where to get jQuery
• Download the source from Google code
(moving to github soon)
h[p://code.google.com/p/jqueryjs/
• Or, use a CDN
h[p://code.google.com/apis/ajaxlibs/documenta)on/#jquery
h[p://ajax.microso_.com/ajax/jquery/jquery‐1.3.2.min.js
37. Concept 5. jQuery() parameters
• First Parameter
CSS selectors ‐ e.g. jQuery(‘li’)
HTML ‐ e.g. jQuery(‘<li><a href=“#”>link</a></li>’)
DOM elements ‐ e.g. jQuery(document)
A func)on (shortcut for ready()) ‐ e.g. jQuery(func)on(){})
• Second Parameter
CSS selectors ‐ e.g. jQuery(‘li’,’#nav’)
DOM elements ‐ e.g. jQuery(‘input’,’document.forms[0]’)
38. Review
• Find something, do something
• Create something, do something
• Chaining
• Implicit Itera)on
• jQuery() parameters