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.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <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>
Implementation Examples
As jQuery implementations are done and production proven the lessons learned and methods used will be documented below,
References
Good Intro - http://www.catswhocode.com/blog/learning-jquery-the-basics