jQuery

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

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

Page tree