Offline
Online
Viewers

jQuery Quick Start Tutorial

Foreword

The following is a quick crash course in using jQuery.  If you’ve never used jQuery before and want to know to how without reading a ton, this is the tutorial for you.

Getting Started

First download the latest version and include it in a page.  Grab the minified version for speed or if you want to read through the code yourself, grab the uncompressed version.

http://docs.jquery.com/Downloading_jQuery#Download_jQuery

Next simply include the library in your HTML page just like any other JavaScript file.

[codesyntax lang=”html4strict”]

<script type="text/javascript" src="script/jquery-1.4.4.min.js"></script>

[/codesyntax]

Now we’re ready to start using it.

Dom Traversal

So how do we select a node or nodes.  We have a few different choices, we can use CSS selector syntax, or we can use xpath syntax.  Let’s try an example on the following markup.

[codesyntax lang=”html4strict”]

<html>
<body>
<div class="container">
<span  id="title">Hello World</span>
</div>
</body>
</html>

[/codesyntax]

To apply a standard CSS selector we could use something like “.container #title{ style }” or just “#title{ style }”.  Same with jQuery, here’s an example:

[codesyntax lang=”html4strict”]

<script type="text/javascript">

$(function(){
    var titleSpan = $(".container #title");
    //title span is now set to the span title node
    titleSpan = $("#title");
    //this does the same as well. 
}); 

</script>

[/codesyntax]

Now if you’re unfamiliar with jQuery, the above syntax may look a bit odd but here’s the breakdown.  “$” is an alias of the jQuery object, which is what you’ll use to interact with all jQuery APIs.  The long hand for of the above would look like this:

[codesyntax lang=”html4strict”]

<script type="text/javascript">

$(document).ready(function(){
    ...
});

</script>

[/codesyntax]

Both do the same thing, wait until the document has fully loaded, then process the function passed into the ready event.  There are several methods for traversing the DOM.  To view the entire list checkout:

http://api.jquery.com/category/traversing/

DOM Manipulation

So how do we work with the DOM, change it’s contents, etc.  jQuery makes this really easy, and here’s how.  Let’s say we wanted to get the text content of the title node using the following HTML.

[codesyntax lang=”html4strict”]

<html>
<body>
<div class="container">
<span id="title">Hello World</span>
</div>
</body>
</html>

[/codesyntax]

Here’s all we need to do.

[codesyntax lang=”javascript”]

var titleText = $("#title").text();

[/codesyntax]

Boom! Done!  Very easy.  But what about changing the text contents of the node. Again:

[codesyntax lang=”javascript”]

$("#title").text("Hello Dolly");

[/codesyntax]

Pie!  So if you pass an argument to the text method, it sets the content, without an argument, it retrieves it.  What if we needed to get the innerHTML value of a node.  Here’s what we do:

[codesyntax lang=”javascript”]

var html = $(".container").html();

[/codesyntax]

That’s all there is to it, this example grabs the “container” class and retrieves the html content of the node.  What about setting it you ask? Check it out:

[codesyntax lang=”javascript”]

$(".container").html('<span id="footer">Goodbye</span>');

[/codesyntax]

That’s all there is to it.  For more information on DOM manipulation, have a look at:

http://api.jquery.com/category/manipulation/

Working With Events

So now it’s time to be productive.  Let’s do something semi-based in the real world.  Let’s say we have a list of anchors that we want to attach a click event to.  Now the old school approach would be to do something like this:

[codesyntax lang=”javascript”]

var els = document.getElementsByTagName("a");
int len = els.length
for(var i=0; i<len; i++){
    if(els[i].className == ".showImage"){
        els[i].onclick = function(event){
            ...
        }
    }
}

[/codesyntax]

This approach would allow us to get all the anchor elements off the page, then iterate each to find a match for class “showImage”, then bind a click event to that node and continue.  Using jQuery the same thing can be done if far less code:

[codesyntax lang=”javascript”]

$("a.showImage").click(function(){
    ...
});

[/codesyntax]

Quite a difference, but both perform the same functionality.  In jQuery a selector can return a single or an array of elements depending on the markup and selector syntax used.  If the above looks a little confusing, consider this example:

[codesyntax lang=”javascript”]

$("a.showImage").each(function(){
    //this will return all a.showImage and call this each function on a per returned node basis
    //basically, this is a for each

    var anchor = $(this); //returns the current iteration object of each

    anchor.click(function(){
        ...
    });
});

[/codesyntax]

The above does the same as the example before it.  Difference is the amount of code written and for demonstration purposes you can hopefully better understand what’s going on behind the scenes.

So now we now to to bind events, but what about unbinding events.  This example should help:

[codesyntax lang=”javascript”]

$("a.showImage").each(function(){
    var anchor = $(this);
    //bind the click event to the anchor
    anchor.bind("click", function(){
        ...
    });
    //unbind the click event from the anchor
    anchor.unbind("click");
});

[/codesyntax]

When you use “object.click”, it’s the same as calling the “bind” method of the object.  Therefore to remove the “bind”, simply “unbind”.  For more information on handling jQuery events see:

http://api.jquery.com/category/events/

Conclusion

That’s about the gist of it.  The rest you should be able to discover on your own.  If you have any questions or find anything I’ve mentioned here to be confusing, please feel free to ask in the comments.

2 Comments

Leave a Reply to dink Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Affiliates