jQuery.com describes jQuery as: "...fast and concise JavaScript Library that simplifies document traversing, event handling, animating, and Ajax interactions for raid web development." It sounds like good marketing language crafted to exagerate the technology, but I believe the description is very precise and accurate.
For those who aren't familiar with Web Markup languages, they're written and interpreted in a hierarchical manner. A fairly good example would be the Matryoshka doll. They're those little wooden two-piece dolls that have several layers of slightly smaller dolls packed inside of each other. Another way to think of it is a folder tree in a Windows Explorer window. You keep clicking on the plus signs until you get to the folder you're trying to locate. When you get to the folder, the left side of the window is a series of progressing indentations displaying all of the folders you just opened in your search. HTML is the same way, only it's broken down by a progressive set of elements contained in tags that look like <title>Rob's jQuery Take</title>. What the author means by traversing is simply being able to navigate easily up and down (or in and out of) the various elements in the markup tree. One example would be the parent method. The parent method would direct to the ancestor of a given element, or in other words, it would take you up one level to the next tag. To use my example of the Matryoshka doll, the next largest doll would be the parent.
Another great feature of jQuery is use of Selectors. They can be used to select specific tags, groups of tags, classes and more. One example would be if you have a span tag with a class named largePrint for easier reading, the jQuery code for referencing it would look like $(".largePrint").
There are many other great features of jQuery that would be far too lengthy to fit into this writeup. There's fantastic documentation you can reference at jQuery.com.
The curtain you clicked on to reveal this page used the jQuery toggle event. I hand drew the vector image, brought it into Photoshop and saved it as a 56k transparent png file. It would have been quite a bit more involved to replicate the same effect in Flash.
jQuery - The Here and Now of Web Development!
This section was created using the HTML5 Contenteditable tag. It's used to create editable content that encourages end user engagement. This content can be edited by selecting and typing your own text.
jQuery Effects on an Image
This section contains my write-up on CSS3 layers. The image mentioned is the one from my HTML5 & CSS3 page. After you finish reading my article, you can click on the HTML5 link above if you'd like to see it in action. If you click the "Layers" link in the next sentence, you'll see jQuery at work using the .hide and .show effects with a timed gradualism. If you're not familiar with Layers, hopefully I'll be able to shed a little light on it with my very simple axis diagram. You all remember the X/Y axis grid from geometry where X is width and Y is height. When I took geometry in high school, there was barely a mention of the Z-axis which is the 3rd dimension we refer to as depth.
A layer is simply a coordinate along the Z-axis. Think of it in this way. If you're facing your monitor, 2 inches from the Z-axis is closer to you than a position of 1 inch from the starting point of the Z-axis or zero. In your style sheet, you simply set your z-axis postion to a numerical value. I set the Z-axis value to 1 because a 2D web page is at the zero point. This places the graphic above the page. If you expand and contract your window, you'll see that any objects on the page tuck right under the graphic.
By the way, the grapic to the right was created in Adobe Illustrator using the 3D rotate effect. One of the new features in HTML5 is the Canvas element. I'm not a big fan of using it as it's currently applied, although I do see tremendous potential in the future. The Canvas element allows you to draw vector graphics using plotting coordinates in your HTML markup. Why would one want to take the time to write long code in coordinates to make simple shapes in markup language rather than just using a graphic created in Illustrator or Photoshop. The rationale given is that image files load slower because of their file size. There is some truth to that, and there was more truth to that not too many years ago before high speed internet was popular. It's really a non issue now. The image to the right has a file size of 15K. That's pretty impressive being that it's also transparent. With today's internet speeds, dozens of those images can load in less than a second.
I am curious to see where the future of the Canvas element will lead. If a feature rich WYSIWYG illustrating application is developed that generates the code, it would be the way to go. Maybe Adobe is already on it.
The final element I'm going to highlight is the footer tag below. It works the same way as a standard div tag footer setup, but the advantage is that it's already named. That makes for quick work on the style sheet.
The major drawback to HTML5 at this time is that not all of the features are compatible with every browser yet. It also displays things a little differently in the browsers where some of the features are available. Even with the JavaScript added for compatibility, you'll notice this page looks really funny in any Internet Explorer version prior to IE9. If you open it up in IE8 or earlier, you'll also notice the lack of compatibility with CSS3. This can make for significantly increased coding times. If you want complete compatibility, it's literally like coding for two or more websites.
Once the new browsers are up to speed, and a majority of users have upgraded to the "latest and greatest", HTML5 will be an excellent tool in the Web Developers arsenal.
