jQuery has become the defacto library for advanced UI components.
This article is still in process of being written and flushed out.
In some cases, the default libraries available do not provide enough functionality.
http://codecanyon.net/ - Very big library. Tin, Jason and Roderick have had good experiences here.
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 }); |
To reference elements see the following,
$("#myID") // find first matching ID element $(".myClass") // find first matching class $("p"); |
Assuming we have a CSS class called funky that in this example makes the background yellow.
.funky { background-color: yellow; } |
$("#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> |
As jQuery implementations are done and production proven the lessons learned and methods used will be documented below,
Good Intro - http://www.catswhocode.com/blog/learning-jquery-the-basics