I picked up the book jQuery In Action, and I think I love this library! Actually, I picked it up a while ago and I’m just getting around to writing about it. I recently built a website for watching the building of the new arena in Pittsburgh (which is down now because the building is big enough to block the webcam), and I used jQuery to do some really nice fades for image thumbnails. The only problem was, I was following pre-written instructions and did not know what was really going on. It did, however, introduce me to the magic of jQuery!
CSS consistency across browsers
One of the best things about jQuery is that you can (almost always) just put a line of jQuery in my web page and it will work across all of the major browsers. I have had some very small issues with this, but nothing major compared to the amount of code it takes in straight javascript to do the same thing.
There’s also the selectors. If you know CSS, then you can use jQuery. jQuery works by creating a wrapped set of elements and performing some tasks on each element in the wrapped set. The book i read uses the term wrapped set, but if that term is confusing you can just think of it as a group of elements that matches the selector you chose to use.
Any CSS selector can be used to query the page and create this wrapped set. It even allows for CSS3 selectors and a couple of jQuery-specific extended selectors. For example, consider the child selector #formId > h1 that would select all h1 elements nested inside the element with the id #formId. This is not supported in IE6, but with jQuery you can use it anyway:
$('#formId > h1').css('color','red');
Simplify, Simplify, Simplify
jQuery is just simple. You only need to know the CSS selectors to get the maximum power from jQuery, not which browser supports which selectors, etc. The javascript file is much neater and more readable. Take this example of code that was used to put focus on the first input on a webpage:
function setFocusOnFirstLocationOfInputType(type){
var elementsInputs = document.getElementsByTagName("input");
for (i=0; i < elementsInputs.length; i++) {
if(elementsInputs[i].type == type){
elementsInputs[i].focus();
break;
}
}
}
and now consider the jQuery that does the same:
function setFocusOnFirstLocationOfInputType(type){
$("input[type="+type+"]:first").focus();
}
Extendable!
The jQuery core library does everything I’ve mentioned and a lot more, and it is small. If you need more, there are a lot of plugins available that supply very complex features (made simple!) like accordian or sliding menus (jQueryUI plugin), or extended selectors with regular expressions.
Some links to additional info on the library:
- jQuery documentation page
- Some tutorials on animation and other cool stuff.
- Blogs to follow on jQuery
- Three part jQuery intro from IBM: Part 1, Part 2, Part 3
- jQuery navigation menu tutorials
- jQuery examples and best practices over at smashingMagazine.com
- More tips to get better at jQuery!
