Photoshop, Illustrator, HTML & CSS tutorials

So you want to use jQuery to do something really cool! Here’s something you will really find useful.

Remember the old way to load scripts on “startup”? This is how we used to do this before jQuery.

The new and improved version is easier to use, has some benefits(that I’ll explain later on) and does not need messy HTML code.

1. Download jQuery here
2. Include it in your page

<script src="js/jquery-1.3.2.min.js" type="text/javascript"><!--mce:0--></script>

3. Introducing $(document).ready

$(document).ready(function() {
    // what you need to do when the DOM is ready.
});

4. Add your action

[$(document).ready(function() {
    	$("img").each(function(){ // for each image encountered in the page
             $(this).css("border", "1px solid red"); // add a red 1 pixel border.
        });
});

Now a short explanation is needed. First of all what this code does in plain english : When the DOM of the page finished loading(beware, this does not mean when the entire page has loaded. Do some reading on the DOM.), make all images you can find in the page have a red border of 1 pixel.

You can use this to do numerous stuff. I’ve included it here because someone attempting to start learning jQuery should really know this.