JQuery JavaScript Framework

Following up to my previous post on Client-Side Javascript, I will be discussing a popular JavaScript framework called JQuery. JQuery is quite small in size (15kb) and this is a big reason that it appealed to me.  For large desktop-like web applications, try out the extensive library of ExtJS.

Now back to JQuery, its slogan is “The write less, do more, JavaScript library” and this slogan holds true to its code.  How would you like the simplicity of the following?

$("a").click( function() {
alert("you clicked a link!");
});

$("#featureDiv").show("slow");

$("div").each(function (i) {
this.addClass(‘highlight');
});

Well in reality  this is all easy doable with JQuery.  Imagine coding the above logic without the help of JQuery.  For the first example it would look something like this:

var anchors = document.getElementsByTagName("a");
for( var i=0;i<anchors.length;i++ )
{
var anchor = anchors[i];
anchor.onclick = function(){
alert("you clicked a link!");
}
}

I’m not sure about you but the above JQuery example seems a whole lot easier.  The beauty of JQuery is that it eliminates those cross-browser issues that JavaScript comes with.  Something that works 100% in Firefox, will not always be the same in Internet Explorer 6 or 7.

On to another slick feature of JQuery is the ease in which AJAX can be implemented.  Remember the XMLHttpRequest() function I talked to you about in the last post?  Well JQuery has a function that uses this in the background.  Let’s say you have a PHP file that spits out JSON by looping through a database.   I will explain JSON (JavaScript Object Notation) in detail in a later post.  We can now use JQuery to grab this information without a page refresh!

$.get("jsonData.php", function(result){
alert(result);
});

I hope this wets your appetite to learn a bit of JQuery when you aren’t stacked up against those tight deadlines that your boss imposes.   I will continue this line of thought in my next entry when I clear the fog surrounding how to use JSON, and why it might be better than XML.

Related posts:

1. Client-Side Javascript
2. AJAX / JSON Guide
3. Plain Text, XML, and JSON Transfer Formats
4. Implementing paging using PHP and jQuery
5. JQuery Custom Plug-in: Equal Height Columns

Tags: JavaScript

Written by Brenley Dueck