jQuery Overload

$ - The jQuery Object

Select nodes selectors

$('.class, #id'); // CSS3 selector
$('input:checkbox'); // extra pseudo-classes
$('input:checkbox:not(.class):not(:disabled)') // stack it up
$('td:odd') // same as CSS3 td:nth-child(odd) - works with 'even'
$('input', this) // context node, equals to $(this).find('input')
            

jQuery-fy a DOM node

$(this) // useful in events
$([array, works, too])
$(document.getElementById('foo'))
            

Create DOM nodes

var h1, ul, div;
h1 = $('<h1/>').text('Foo');
h1 = $('<h1/>', {
    text: 'Foo',
    click: function(e){
        // do stuff
    }
});
div = $('<div/>').append(h1);
ul = $('<ul><li>foo</li></ul>').append('<li>bar</li>');
h1.after(ul);
alert(div.wrap('<div/>').html());
            

Onload callback

$(function(){
    // dom ready here
    alert('ready');
});
            

Cloning jquery objects

var obj = $('div');
var copy = $(obj); // clone of obj
alert(obj === copy); // false
alert(obj.length === copy.length); // true
            

Getters and Setters

Getters and Setters

$('div').text() // returns the content
$('div').text('foo') // sets it
$('div').text(function(idx, val) {
    return val.toUpperCase();
});

// works with .css(), .html(), etc.

// .attr() accesses any attribute
$('div').attr('custom'); // read
$('div').attr('custom', 'foo'); // write
            

In short..

Thank you.

Questions?

References & Links