Fun with jQuery

Joshua Eichorn

Obu Web Technologies

AJAX

If you want to learn more about AJAX in general instead of a specific library take a look at my book, Understanding AJAX

What is jQuery

Why jQuery

jQuery Provides

Language Additions

Method Chaining

$('#chaining').hide('slow').show('slow').html('Sweet'); Run It
Chain this

Each()

$('#each li').each(function(i,el) { el.html(i+1) }); Run It

jQuery element selection

$('#elementSelection').addClass('selected').show("slow");Run It

jQuery DOM Manipulation

$('.domManip').addClass('selected').prepend(':-)').after('!'); Run It

Hello World

jQuery CSS Manipulation

$('#cssManip p').background('red').color('white').width('200px').append($('#cssManip p').height()); Run It

Hello World

jQuery Event Handling

$(document).ready( function() {
	$('#event').click(function() { $('#event').toggleClass('selected') });
});

Click Me

jQuery Basic Effects

$('#beffect').slideDown('slow', function() { $('#beffect').fadeIn('slow') } ); Run It

Hello World

jQuery Animations

$('#aeffect').animate({ opacity: 50, height: 100, width: 100},2000); Run It

Wahoo

jQuery AJAX

$.get('ajax.php',{foo:'bar'},function(result) { $('#ajax').html(result); }); Run It

Resources