jQuery Example 1

Basic jQuery methods for HTML manipulation

$(CSS selector)
html() text()
after() before()
append() prepend()
remove()
css()
addClass() removeClass()
hasClass() toggleClass()

All paragraphs red

First paragraph

Second paragraph

Third paragraph

$('div#one p').css('color','red');

Only first paragraph green

Only first paragraph

Second paragraph

Third paragraph

$('div#two p:first').css('color','green');

Class critical large

First paragraph class=critical

Second paragraph class=nonCritical

Third paragraph class=nonCritical

$('div#three p.critical').css('font-size','24px');

Class nonCritical small and grey

First paragraph class=critical

Second paragraph class=nonCritical

Third paragraph class=nonCritical

$('div#four p.nonCritical').addClass('smallGrey');

Delete first paragraph

First paragraph.

Second paragraph

Third paragraph

$('div#five p:first').remove();

Add a list to the end

First paragraph.

Second paragraph

Third paragraph

Insert in between para 1 and 2

First paragraph.

Second paragraph

Third paragraph

Change the last paragraph

First paragraph.

Second paragraph

Third paragraph

$('div#eight p:last').text('We had to rewrite this one.');

Make last para appear / disappear on multiple clicks

First paragraph.

Second paragraph

Third paragraph

$('div#nine p:last').toggleClass('hidden');

Add to start and end of last paragraph

First paragraph.

Second paragraph

Third paragraph class=summary

Insert new paragraphs before and after 3rd one

First paragraph.

Second paragraph

Third paragraph class=summary