jQuery - The best thing since sliced bread?

[nodeinfo|64|body|0.91094000 1201181163][inline_autoadd][image=1]This article has been several days in the making. A few weeks ago I was looking for ways to do dynamic interactive elements on web pages - such as dragging and dropping, sliding down of menus, etc. During my search online, I came across the description of jQuery, which I vaguely knew from Drupal.



jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.



This at first sounded too good to be true, until I started getting into jQuery.



I have written hundreds of lines of code to make a drag and drop page, and I hated it. It was extremely buggy, and only worked about 60% of the time. I then found a plugin for jQuery that allows me to make a dropdown in about 6 lines of code. This plugin - called Interface - is extremely well written and easy to use.



Take for example binding an event to an element onload. Using straight javascript, you must use behavioral modifies in your HTML to get things to work. This would cause all sorts of issues, and most people would add commands to html tags themselves such as:

This created a headache when attempting to troubleshoot non-working script, and was not the correct way to add these event handlers in the first place. I would also like to mention that using the onLoad function would not load any script until the full document was loaded, this included images, content, EVERYTHING.



That is where jQuery hits home. Using a simple command, jQuery allows you to add all event handlers when the document is ready for them. This means that once the DOM is loaded, your script will begin to work.



It's also quite simple to use:


It's that easy. The fun doesn't stop here however. Binding events to an element, as well as referencing elements, has never been easier. Take for example the following:





Lets break this up, and explain it.



$('a'): This tidbit denotes the element to attach the events to. If you would like to use an Element ID, simply use the CSS denotation for ID: $('#elementID'). Same goes for a Class: $('.elementClass').



.click(function()): This is the event that will happen when any link is clicked. In this case it is just an Alert with the message Hello World!



While jQuery does take a little while to learn, after 3 weeks of using the language, I have to say that I cannot imagine not using the library now. It has made my web development much less tedious, and much more fun.



As I briefly mentioned, jQuery also allows for plugins. These are simply just libraries that add-on to jQuery functionality, and are widely available with a Google search. Listed below are a few of my favorites:

• Interface
• jqModal
• Autogrow

I would also like to talk about the community behind jQuery. I came across the most helpful development forum I have ever seen. This forums has a few regulars, but seems to get many people joining to ask questions almost on a daily basis. The moderator and Administrator on this site are top-notch, and I recommend hitting them up for any questions you may have trying to get into jQuery, or even if you have been using jQuery for a long time. the support forum can be found here, at jQueryHelp