A presentation & knowledge share given to the Development team at Madgex, 2009.

1. A BRIEF INTRO
Madgex

2. WHAT IS IT?

3. WHAT IS IT?
•AJavaScript library with the philosophy "Writing JavaScript
code should be fun"

4. WHAT IS IT?
•A JavaScript library with the philosophy "Writing JavaScript
code should be fun"
• Simplifies stuff & adds common functionality

5. WHAT IS IT?
•A JavaScript library with the philosophy "Writing JavaScript
code should be fun"
• Simplifies stuff & adds common functionality
• Removessome cross-browser headaches (events/AJAX/
window.onload)

6. WHAT IS IT?
•A JavaScript library with the philosophy "Writing JavaScript
code should be fun"
• Simplifies stuff & adds common functionality
• Removessome cross-browser headaches (events/
window.onload)
• Pretty small at 19KB minified & gzipped

7. HOW DO YOU USE IT?
• "Find stuff & do stuff to it"

8. HOW DO YOU USE IT?
• "Find stuff & do stuff to it"
• Finding stuff is based around CSS(1-3) selectors & XPath

9. HOW DO YOU USE IT?
• "Find stuff & do stuff to it"
• Finding stuff is based around CSS(1-3) selectors & XPath
• Threemain 'doing' categories based around: manipulation,
returning a value & modifying

10. HOW DO YOU USE IT?
• "Find stuff & do stuff to it"
• Finding stuff is based around CSS(1-3) selectors & XPath
• Threemain 'doing' categories based around: manipulation,
returning a value & modifying
• Chaining methods together - makes it look weird

11. ME
H O W E!
S CO D
T HE

12. SELECTING
jQuery('div.panel')
All divs with class=“panel”
$('p#intro')
The paragraph with id=“intro”
$('div#content a:visible')
All visible links inside the div with id=“content”
$('input[name=email]')
All input fields with name=“email”
$('table.orders tr:odd')
“odd” numbered rows in a table with class “orders”

13. MANIPULATION
$('div#primary').width(300);
Set the width of div id=“primary” to 300 px.
$('p').css('line‐height', '1.8em');
Apply a line-height of 1.8em to all paragraphs.
$('li:odd').css({color: 'white', backgroundColor: 'black'});
Apply two CSS rules to every other list item; note that the css() function can take an object
instead of two strings.
var div = $('<div>Some text</div>').addClass('inserted').attr('id', 'foo');
div.appendTo(document.body);
Create a snippet of HTML, add some attributes then add it to the document.

14. RESULT SET MANIPULATION
$('div').not('[id]')
Returns divs that do not have an id attribute.
$('h2').parent()
Returns all elements that are direct parents of an h2.
$('blockquote').children()
Returns all elements that are children of a blockquote.
$('p').eq(4).next()
Find the fifth paragraph on the page, then find the next element (its direct sibling to the right).
$('input:text:first').parents('form')
Find the form parent of the first input type=“text” field on the page. The optional argument to parents()
is another selector.

15. EVENTS
$('p').click(function() {
$(this).css('background‐color', 'red');
});
Set up paragraphs so that when you click them they turn red.
$('a').hover(function() {
$(this).css('background‐color', 'orange');
}, function() {
$(this).css('background‐color', 'white');
});
hover() is a shortcut for setting up two functions that run onmouseover and
onmouseout.

16. AJAX
$.ajax({
type: "POST",
data: “name=Dave&location=Brighton”
url: "/getusers",
success: function(data){
console.log(‘data from server: ’, data);
}
});

17. ANIMATION
$("p").click(function () {
$(this).fadeOut("slow");
});
$("div#clickme").click(function () {
$(this).animate({
width: "70%",
opacity: 0.4,
marginLeft: "20px",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});

18. EXAMPLE

19. LINKY LINKS
• http://jquery.com & http://docs.jquery.com
• http://docs.jquery.com/discussion
• http://api.jquery.com - Interactive API browser & AIR
download
• jQuery for JavaScript developers - http://tinyurl.com/
jq4jsdevs