in General

Quick jQuery example

This is a very quick jQuery example which shows a “Run” link, and when you click on the link a message should appear underneath it.

Put the following the your head part of your HTML document. (Note you may require to change the path of where you have installed jQuery.

Code:

<script type="text/javascript" src="javascript/jquery.js"></script>

<script type="text/javascript">
/* <![CDATA[ */

$(document).ready(function() {	

	$("a#generate").click(function() { 
		$("p.surprise").addClass("ohmy").show("slow");
		return false;
	}); 

});

/* ]]> */
</script>

<style type="text/css">
p.surprise {
display: none;
margin-bottom: 5px;
}
p.ohmy{
padding:5px;
border:1px solid #acd373;
background:#fafff3;
margin-bottom: 10px;
}
</style>

And put this within your body of your page;

Code:

<a id="generate" href="#">Run</a>

<p class="surprise">
Congratulations! You just ran a snippet of jQuery code. Wasn't that easy?
</p>

And that’s it!