jQuery

jQuery

JavaScript framework
Multi-browser
CSS and DOM manipulation
AJAX
Plugins

Syntax

jQuery object $
Objects and functions
Always close parentheses and brackets ( ) { }
Always put a semicolon at the end of the statement

$(selector)
$(selector).function();
$(selector).function(arg1, arg2);

Selectors

Mostly the same as CSS

Element   $('div')
ID        $('#id')
Class     $('.class')
Attribute $('[attr="val"]')

Selectors

$('.ancestor .descendant')
$('.parent > .child')
AND $('.one.two')
OR $('.one, .two, .three')

Refining

$('p').not('.ignore')
$('ul li').first()
$('.child').closest('.ancestor')
$('.item').next('.sibling')

DOM

Document Object Model
HTML elements
Access and modify easily (get and set)

$('a').attr('href');
$('div').html();
$('div').append('Extra HTML');
$('input').val();
$('input').val('New value');

Chaining

Using the same selector?
This gets redundant:

$('.parent .child').addClass('new');
$('.parent .child').fadeIn();

(Carefully) use chaining instead:

$('.parent .child').addClass('new')
    .fadeIn();

Effects

Show/Hide
Slide
Fade
Callback function

$('.my-div').fadeIn('slow', function() {
    // Do something
});

Custom Effects

$('.my-box').animate({
    left:   '500px',
    top:    '400px',
    width:  '400px',
    height: '80px',
}, 10000, function() {
    $('.my-box').fadeOut();
});

Events

Mouse
Keyboard
Window
Element

$('a').click( ... );
$('select').change( ... );
$('input').focus( ... );

Events

$(this)
Callback function

$('#nav a').click( function(e) {
    e.preventDefault();
    $(this).addClass('active')
        .siblings().removeClass('active');
});

AJAX & more

Interact with the server in the background
Click links, submit forms, refresh data, etc.
without reloading the page

$.post(url, data, callback);
$.get(url, data, callback);

Plugins...

Debugging

Use the Console
```
console.log('message');
```

Questions?