Basics
Wait Until Page Renders
Minimally you only want jQuery to start once the page has completely finished rendering. Do that by starting with this,
$(document).ready(function() { // all of your code goes here });
Referencing Elements
To reference elements see the following,
$("#myID") // find first matching ID element $(".myClass") // find first matching class $("p");
Start Doing Stuff
Assuming we have a CSS class called funky that in this example makes the background yellow.
.funky { background-color: yellow; }
Add Class to Element
$("#myID").addClass("funky");
This is what the completed code would look like.
<style type="text/css"> .funky { background-color: yellow; } </style> <script type="text/javascript" src="${pageContext.request.contextPath}/decorators/jquery-1.7.1.js" /> <script type="text/javascript"> $(document).ready(function() { // put all your jQuery goodness in here. $("#myID").addClass("funky"); }); </script> </head> <body> <p id="myID">Hello</p> </body>
References
Good Intro - http://www.catswhocode.com/blog/learning-jquery-the-basics