Introduction
jQuery has become the defacto library for advanced UI components.
This article is still in process of being written and flushed out.
jQuery Enhanced Libraries
In some cases, the default libraries available do not provide enough functionality.
jQuery Market Place
http://codecanyon.net/ - Very big library. Tin, Jason and Roderick have had good experiences here.
Basics to Using jQuery
Minimally you only want jQuery to start once the page has completely finished rendering. Do that by starting with this,
| Code Block |
|---|
|
$(document).ready(function() {
// all of your code goes here
}); |
Referencing Elements
To reference elements see the following,
| Code Block |
|---|
|
$("#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.
| Code Block |
|---|
|
.funky {
background-color: yellow;
} |
Add Class to Element
| Code Block |
|---|
$("#myID").addClass("funky"); |
This is what the completed code would look like.
| Code Block |
|---|
|
<!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