click

Click the button.

$("#click button").click(function(){ alert("You clicked the button! All buttons on this page use .click()"); });

hide

Click the button to hide this text.

$("#hide p").hide();

show

Click the button to see the hidden text.

$("#show h3").show();

toggle

Click the button to toggle the header

$("#toggle h2").toggle();

slideDown

Click the button to slideDown a hidden image

$("#slideDown img").slideDown();

slideUp

Click the button to slideUp the image

$("#slideUp img").slideUp(); slideUp image

slideToggle

Click the button to slidetoggle a hidden image

$("#slideToggle img").slideToggle();

fadeIn

Click the button to fade in a hidden image

$("#fadeIn img").fadeIn();

fadeOut

Click the button to fade out the image

$("#fadeOut img").fadeOut(); fade out image

addClass

Click the button to add class "red" to this paragraph

$("#addClass p").addClass("red-text");

before

Click the button to add a paragraphn before this one.

$("#before p.default").before("<p>New paragraph!!!</p>");

after

Click the button to add a paragraph after this one.

$("#after p.default").after("<p>New paragraph yo.</p>");

append

Click the button to append a header to this div.

$("#append").append("<h4>New header!!!</h4>");

html

Click the button to use .html() to add a span to this text.

var jqP = $("#html p"); jqP.html("<span class=\"red\">" + jqP.text() + "</span> (span with class of red added)" );

attr

Click the button to change the 'max' attribute to 50.

$("#attr progress").attr("max", 50);

val

Click the button to get the value of the progress bar in the xmpvious section.

alert("Progress: " + $("#attr progress").val() );

text

Click the button to change this text.

$("#text p").text("Taylor Swift is the best musical artist of the last decade.");

data

Click to view the hidden data!

alert( "Hidden Data: " + $("#data p").data("name") );