Page tree
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 6 Next »

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>

 

 

References

Good Intro - http://www.catswhocode.com/blog/learning-jquery-the-basics

  • No labels