JQ binding of functions to events


$('#b-one').click( one );
	
function one() {
	console.log('one clicked');
	$('div#one p').css('color','red');
}


// This is an anonymous function associated solely with
// this one event.
$('#b-tweleve').click( function () {
	$('div#tweleve p.summary').before('<p>Paragraph added before </p>');
	$('div#tweleve p.summary').after('<p>Paragraph added after </p>');
});





// example of chaining
// We need to select a particular paragraph and do *2*
// things to it.

// First, without chaining.

$('#b-eleven').click( function () {
	$('div#eleven p.summary').prepend('<em>Prepended</em> to paragraph. ');
	$('div#eleven p.summary').append(' <strong>Appended</strong> to paragraph.');
});		

// with JQ chaining
		
$('div#eleven p.summary')
	.prepend('<em>Prepended</em> to paragraph. ')
	.append(' <strong>Appended</strong> to paragraph.');
});