How jQuery changed the way I look at JavaScript.
May 22nd, 2009 5:05 pmOk, I warned you that I was going to get geeky on you - so here it goes.
In the past, I thought JavaScript libraries were bloated with features and functions that made development time shorter but compromised the speed of load time for websites. It packed far more features than I would ever use in building websites that did not require a lot of scripting. So, I developed my own speedy set of functions like opening external links in a new window or making sure dropdown menus dropped down in Internet explorer 6 and below which accomplished the needed tasks without the added file size of a library. While those are still very good for simple websites, I prefer to use the JavaScript library from jQuery.
I was awestruck from the moment I looked at the example on jQuery's home page. I thought, "How could something that seems so complicated be so easy to program?" I became more interested in jQuery when I saw more of it's very straightforward and consistent flow of attractive feature combinations like CSS3 and Xpath Selectors and Chaining. I've been using it for sometime now and it keeps getting easier and more effortless to employ it in creating functional and efficient websites.
jQuery is miraculous for websites that will be using any kind of Ajax (asynchronous JavaScript + XML) which is a geeky way of saying: Server Scripting and Client Side scripting working together to add functionality to a website without page refreshes. jQuery is perfect for animations and for people who are not that familiar with JavaScript.
For instance, let me show you an example of how it makes things easier. Look at the code for a simple drop down menu fix for Internet Explorer 6 written with regular JavaScript and jQuery.
JavaScript:
if (document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" hover";
}
node.onmouseout=function() {
this.className=this.className.replace(" hover", "");
}
}
}
}
jQuery:
$("#nav li").hover(
function(){$(this).addClass("hover")},
function(){$(this).removeClass("hover")}
);
What its doing is finding the navigation, finding all the list items inside of it, then assigning an event to the list items on mouse over and mouse out. So when you mouse over the list item a class name of "hover is added, and when you remove your mouse it is removed
As you can see, jQuery gets rid of all the boring stuff and lets you get right down to the task at hand.
Both of these scripts work but jQuery makes it simpler, easier and more fun to accomplish the same task. It lets me spend valuable development time making things work instead of spending countless hours trying to figure out where I missed a comma and why the script doesn't seem to work in Internet Explorer.
If you come from the design side of web design and you are solid in your knowledge of CSS, look no further than jQuery. It is by far, the best choice when it comes to JavaScript libraries. Best of all, jQuery's functions and methods are supported in all the major browsers. This means that you will not have to worry about browser detection and branching code to support multiple browsers. In short, you write it once and it just works.
763-488-1630