The bad news for JavaScript programmers is that jQuery uses an utterly different syntax for selecting elements of the HTML page for interrogation, alteration or replacement.
The good news is that the jQuery selection syntax uses a model very similar to that of CSS.
$("body")... // jQuery code here
... or:
$("#menu")... // jQuery code here
Unlike the JavaScript method getElementById(), a jQuery selector will return either a jQuery object or an array of jQuery objects (depending on whether one or many objects match the selector).
As these are jQuery objects we can only use them with jQuery methods. Standard JavaScript methods will not work with a jQuery object, for example:
// this code uses a JavaScript property .style of a jQuery object
// to make the background of the block with ID 'topmenu' black.
// it will not work!
$("#topmenu").style.backgroundColor = "black";
// this code uses a jQuery method .css() to make the background
// of the block with the ID of 'topmenu' black.
// it will work!
$("#topmenu").css("backgroundColor","black");
Try out the above code in the JavaScript scratch pad and see the difference.
These selectors work with descendant selectors as well:
// these two lines of code accomplish more or less the same thing,
// the first is a little more specific
$("#topmenu ul li a").css("backgroundColor","black");
$("#topmenu a").css("backgroundColor","black");
The jQuery css() method is very useful! It conviniently wrappers the cross-browser incompatibilities between the two models for access of css within the rival browsers and so presents us with a universally compatible way of accessing information contained in <script> tags and external stylesheets.
Have a read through the css() method documentation.
Here is an example:
<script language="javascript" type="text/javascript">
// declare a function called getColour
function getColour() {
// use the jQuery css() method to extract the background colour from
// the "colourExample" block
var colour = $("#colourExample").css("backgroundColor");
// use jQuery html() method to set the content of that area
// (like innerHTML)
$("#colourExample").html("The colour is: " + colour);
}
</script>
<!-- area to change content of -->
<div class="exampleblock" id="colourExample">
I don't know what colour this block is!
</div>
<!-- button to trigger change -->
<input type="button" value="What colour is the block?" onclick="getColour();"
id="colourButton" />
Remember that CSS attribute names are no longer hyphenated as they are in strict CSS notation. Instead they are presented in Camel-case. So, the CSS attribute:
font-family
...becomes:
fontFamily
Note the lack of space between "font" and "Family" and that "Family" has an uppercase F.
Now open the jQuery selectors exercise page and work through it.
You will need to use the jQuery documentation, specifically the css() method.
You may also use the JavaScript scratch pad to try out code quickly.