Class Selecting & Changing
If you’ve managed to tear yourself away from the many effects on the jQuery site then it’s time to look at how jQuery can make many other things simpler. A common JavaScript task is to apply a certain effect to elements with a certain CSS class.
Normally this would require
Toggle Snippet
// This function will be applied to the onmouseover effect of all the elements with a class name 'testClass'
function foo() { alert('bar'); }
// get all elements
var ele = document.getElementsByTagName('*');
// count them
nm = ele.length;
// loop through and check className before applying the function to mouseover on the matching elements
for (i=0; i
The above has kept things simple but it still takes quite a few lines. jQuery can condense this down to 1 (not including the $(document).ready() part
$('.testClass').mouseover(function () { alert('bar');});
Using the jQuery class selector ‘.testClass’, we can add the function in one single line. When would you need more than one line? Well, not very often. Let’s say you wanted to add a function and then hide all of the elements (with an animation) before changing the text colour of each element. I won’t bother with the normal code because it will get a bit big but let’s see how you might do it with jQuery
Toggle Snippet
$('.testClass').mouseover(function () { alert('bar');}).hide('medium').css('color', '#FF0000')
Yep, you guessed it. This can all be done in a single line. The beauty of the jQuery object is that it always returns the element so you can string together an arbitrary number of operations on a set of elements.
Just for fun, I’ve given all the H3 elements in this tutorial a class of “showOff”. Make Them Lemon Yellow! Using jQuery
DOMinate
The Document Object Model is the W3 specification for interacting with structured documents ((x)HTML, XML). To do things the correct way as required by the DOM can sometimes be a little fiddly but jQuery has made DOM compliance as easy as it has made everything else.
We’ve already seen how easy it makes finding elements within a page with its selectors (of course the back end of this is traversing the DOM) so now let’s look at how you can actually modify the document using jQuery.
If, using normal JavaScript, I wanted to add a div to the body of the document on the fly and inside the div, I wanted to have a h1, two paragraphs and one strong tag it would require quite a chunk of action.
Toggle Snippet
// create the div
var newDiv = document.createElement('div');
// Create the h1
var h1 = document.createElement('h1');
// Add text to h1
h1.appendChild(document.createTextNode('This is H1 Text'));
// Add h1 to div
newDiv.appendChild(h1);
// create a paragraph
var newP = document.createElement('p');
// now a strong
var str = document.createElement('strong');
str.appendChild(document.createTextNode('This is strong'));
newP.appendChild(str);
newP.appendChild(document.createTextNode('This is some extra text for the paragraph'));
newDiv.appendChild(newP);
newP = document.createElement('p');
newP.appendChild(document.createTextNode('This is the text for the second paragraph'));
newDiv.appendChild(newP);
// add new div to the body
document.getElementsByTagName('body')[0].appendChild(newDiv);
So, there’s quite a bit going on here and as you can probably see, this can become tedious to do for large chunks of dynamic HTML. I could have used the innerHTML attribute found in most modern browsers but innerHTML is not a supported DOM property.
jQuery has the brilliant .html() and .append() (among other) functions that take a string of text, interpret it and convert it (almost 100%) into the required DOM functions for insertion into the document. Therefore, that big chunk from above could be converted to simply
Toggle Snippet
$('body').html('
This is H1 text
This is strong this is more text
This is text for the second paragraph
');
Again, there goes jQuery reducing quite a complex script to a single line. You needn’t bother with the semantics in the background you can just relax in the knowledge that the document will be updated in accordance to the DOM recommendations.
As you saw in the script I wrote from scratch above, the DOM has many functions and jQuery includes quite a few easier to use versions of these. jQuery also has $(element0).after(element1) function that places a document element1 after document element0 — a function strangely missing from the DOM.
To see all of your options for manipulating the DOM with jQuery I again refer you to the documentation.
Clean Up With Ajax
The last part of this tutorial will show you the benefits of jQuery’s AJAX functions. All of the JavaScript libraries claim to simplify Ajax requests but in my opinion, none does it as elegantly as jQuery.
An Ajax request object can be a temperamental beast at times and to do it well, you need to take into account the many things that may go wrong during an AJAX request to the server.
Here is an example of an AJAX request written from scratch. (This is from http://w3schools.com/ajax/ajax_intro.asp — the general procedure for starting an AJAX event rarely changes so I am using this as an example)
Toggle Snippet
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);
}
There’s quite a few lines of code in this and it includes very little exception handling. If the above goes wrong, you will have a hard time finding out why because it is only checking if the request has completed — not whether the response from the server was a good one. It is also only set up for a request using GET (sending data on the query string) and not POST which requires fiddling.
The same thing in jQuery can be achieved using:
Toggle Snippet
$.ajax({
type: "GET",
url: "time.asp",
dataType: "text",
success : function (text)
{ alert(text); },
failure : function (text) { alert('That was all wrong, wrong!!'); }
});
This is probably the longest bit of jQuery you will see but it does a whole lot more than the manual code above did. This simply says “GET the time.asp page and treat it as plain text when it arrives. If all goes well, alert me with the response but if it goes bottom up, tell me that too” This is taking into account the fact that AJAX request will sometimes break and with only an extra line, you will immediately know that the request broke.
You will notice in the above AJAX script the { something : ‘something else’} argument sent to the function. This is simply a ‘hash’ or object declaration. Many jQuery functions accept an options object as their argument and this is a shorthand way of declaring them at run time.
Having such an easy way of using AJAX opens up many possibilities, even sending more JavaScript from the server to run later.
Look at the jQuery AJAX documentation to see more.
jQuery Why Aren’t You Yet?
There is much more to jQuery than what I’ve been able to cover here and the beauty comes from finding out more and more about it. Once you learn to love this library, you will find it hard to go back and then you’ll discover the plug-in repository and jQuery UI and your JavaScript nightmares will be over.
I leave you with this last message.
This Page’s Code
You will notice that the code for this page is using the jQuery object instead of $. This is because jQuery is running in compatibility mode to avoid conflicts.
Toggle Snippet
Pages: 1 2
The Web Squeeze is sponsored by:
Did you like it? Share it!
About The Author
Luke Dingle
Luke Dingle is a professional web developer working in Tasmania, Australia. Although much of his time revolves around writing, then re-writing Python (Django), PHP and JavaScript code for others, he manages to find time to work on pet projects like http://www.openthource.com and http://www.lukedingle.com. Luke likes to juggle and play piano but usually runs out of time as his attempts to lobby the government for 3 extra hours in each day have so far failed. Tweet him @Rakuli
RSS Feed
Email Feed
TWS Podcast
@thewebsqueeze
TWS on Facebook
TWS on LinkedIn
TWS on YouTube
Delicious
DesignBump
DesignFloat
DesignMoo
Digg
StumbleUpon
Technorati
Comments
Great post Luke!
I also posted a short one on my blog a few days ago about looping through a table:
http://jackfranklin.co.uk/single.php?contentid=83
Great tutorial mate
Thanks Jack and Monie. I’m glad it was helpful and look forward to seeing what you do with jQuery.
Nice post. I too have been leary about JS frameworks because I figure I can do it myself, but you make same valid points. Maybe I should set my pride aside and look into a framework.
Wow… jQuery is awesome.
Thanks for writing this post Luke as I was reluctant to fully see the power of this amazing and lightweight package.
I have been implementing all week since we spoke last and am finding it a real treat to finally see my application going AJAX.
There are some teething issues though, I’ve yet to fully get AJAX form submitting happening. But as far as getting dynamic content up in a fancy manner with jQuery is a breeze.
Thanks Scott. You wouldn’t believe how hard it was for me to put the keyboard aside and let jQuery do some typing for me. It is a battle that I’m glad my ego lost though, it lets me concentrate on what I love — innovating interfaces.
@Bobby
Glad you’ve joined my on the jQuery bandwagon — the jquery.form.js plugin is an absolute godsend… I don’t think I’ll ever have to write another HttpRequest object again.
Just like to add I think its a shame the jquery site seems to run terribly slow for me. As though its hosted on somebodies private modem. I don’t know.
If you’re like me and having constant issues accessing their regular site http://docs.jquery.com/ load your browser to http://visualjquery.com/ which is an alternative to the documentation.
I find it bizarre, that for such an awesome framework that is used so much that it appears to be quite limited in its documentation and that its own site doesn’t have the feeling of being streamlined. Some of these really popular plugins have 0-5 ratings so it seems like its not a hub of activity when it is. Anyways. It rocks.
In case you haven’t checked out the jQuery site in a while (which I doubt!), they’ve had a face lift, and seem to be quicker to access. I guess if it’s slow, that’s really probably just a testament to the fact they must have a heavy traffic load thanks to all of us!!
Also, you might want to check out http://ui.jquery.com/ if you haven’t already, to see some of the fancier demos of what you can do with javascript, and simply with jQuery
(I’m a convert!)
Yes making your own framework is a labor of love. Just remember its a better idea to get a divorce rather than kill your cheating spouse.
My framework, VVED, Very Versatile Electronic Document is the culmination of about 6 years work. Its basically the core of a pure javascript game engine, but you can use it to make pages too.
Trackbacks
Toggle Trackbacks
[... What is jQuery? * If you prefer to see things work, head to the bottom of page 2 in this tutorial to see a demonstration of jQuery's effects. If you have yet ...]
[... What is jQuery? * If you prefer to see things work, head to the bottom of page 2 in this tutorial to see a demonstration of jQuery's effects. If you have yet ...]
[... What is jQuery? * If you prefer to see things work, head to the bottom of page 2 in this tutorial to see a demonstration of jQuery's effects. If you have yet ...]