jQuery 1.0.2 is now ready for consumption! This release is a huge bug fix release – and it is highly recommended that you upgrade right away. As always, if you spot a bug, please add it to the bug tracker.

In addition to having a better test suite, a big push for this release was to have better cross-browser compatibility for common tasks (such as AJAX operations). Functionally, however, no major features have been added to this release (although, expect some new code come 1.1).

I’d like to take this opportunity to introduce everyone to Jörn Zaefferer. Much of this release was made possible by him. He’s responsible for completely overhauling the test suite (it now has over 260+ tests!) and for fixing the majority of the current bugs and enhancements (over 60 of them!). If you want someone to thank for this release, it should be him.

Download Now:

• jQuery 1.0.2
• jQuery 1.0.2 Compressed

Tickets Closed:

The full set of bugs, or enhancements, that were closed with this release:

1. Cross Browser Dimensions
2. I.E. text rendering at full opacity
3. FadeIn/FadeOut breaks if opacity is already set
4. css(‘top’) and css(‘left’)
5. fx.custom() doesn’t work for opacity in IE
6. Opacity doesn’t work in IE
7. jQuery IE6 bug with base href
8. [PATCH] IE Opacity issues resolved
9. Namespaced Selection of Elements and Attributes
10. append(html) function fails, if html is a table fragment and begins with whitespace
11. IE weirdness on semi-opaque anti-aliased text, a small fix
12. a fix for getAttribute(‘action’) in forms
13. IE throws errors for $(this) in nested each loops
14. IE5 scripting error
15. Leak for Mozilla/Firefox browsers (using addEventListener)
16. filter seemingly not operating correctly
17. $(‘node1/node2’) gives error when node1 is empty
18. add does not merge sets
19. extend not(jQuery) to be able to operate with sets
20. document the behaviour of $(”
    “) and similar methods (eg. wrap)
21. $.load requires a callback
22. [PATCH] $().hover error in firefox
23. Attribute values in :not()
24. children() may return nothing
25. IE throws errors for $(this) in nested each loops
26. ajax summary / todo list
27. Safari crash in test suite
28. wrong safari detection
29. different behavior for next() in IE and Firefox
30. [PATCH] IE Memory Leaks from event system
31. Different Encodings for AJAX
32. IE 6 removes whitespace, eg. when using append
33. hover() mouseout bug
34. $.postJSON
35. Params to $.get() are appended wrong to querystring,
36. calling load without arguments throws exception
37. Returning script tag in IE fails
38. Unavailable response header breaks Firefox 1.0
39. ifModified arg to $.ajax()
40. Timeout as Argument to AJAX
41. Replacement :input, :radio, etc.
42. Ajax refactoring
43. jQuery’s toggle(); gets mixed up with moo.fx’s toggle();
44. Error Parsing Opacity
45. .constructor == Function is not enough
46. [PATCH] $().hasClass()
47. Create IE 5.0 Support Plugin
48. [PATCH] innerWidth and innerHeight fails in IE with no borders
49. sibling() returns siblings and the subject
50. IE fails with #element/* expressions
51. XHTML Tables
52. wrap breaks when the HTML structure contains text
53. Fix for attribute *=, ^=, and $= in cases where special attributes.
54. `]` breaks selectors
55. Including jQuery again overwrites already registered document-ready events
56. Expression generates error in FireFox 1.5.0.6
57. support of ancestor:: axis
58. prev() does not work as expected
59. nth-of-type
60. Animate function release
61. attr(‘checked’, true) doesn’t work

Leave your answers in the comments.

1. Name (anonymous if you must)
2. Are you using jQuery corporately or for your personal use?
3. Describe how you are using jQuery.
4. Showcase! Link to any of your projects that use jQuery.

We would really like to get to know a lot of you better, not just the hardcore developers but the everyday users. So give us the scoop!

(Or, “let us know a little about you, and shamelessly plug your projects, too!”).

UPDATE: Thanks to all who have responded so far.

I have to say, I am astonished at how many of you are using jQuery for corporate sites. Many of you (or your companies) might consider donating to the jQuery project from the homepage. Of course, this is not required, but it does ensure jQuery stays strong by covering the costs of development and keeping the monthly server bill in check. :)

And to that I will add: bug reports, plugins, and other contributions to the community are equally valuable as donations. My point: Let’s remember to all give back in whatever ways we can.

All of your comments are invaluable, whether you’re a big-timer working on corporate sites or a small-timer building a webapp just for fun. Keep ’em coming!

The first issue of the brand-new Visual jQuery magazine has been released. It is available for download in PDF format.

The purpose of the Visual jQuery Magazine is to provide information about jQuery for beginners and advanced developers, interviews with interesting members of the jQuery community, and details on how to maximize your use of the framework through plugins and other tips.

The first issue includes:

• An editorial comment about the magazine
• Winning on Philosophy: Why jQuery’s Approach Works
• The Man Behind the Magic: An interview with John Resig
• jQuery Tutorial: An introduction to the jQuery object
• Plugins for rich application development.
• Meet Dave Cardwell, the developer of jqBrowser and jqMaxMin
• A cool back-page ad (trust me, you want to take a look)

Issue 2 will feature more of the same jQuery goodness:

• Meet Klaus Hartl, the developer of jQuery tabs who works on Plazes
• jQuery Tutorial: An introduction to jQuery’s AJAX functionality
• Plugins useful for visual effects
• Letters from our readers

So run, don’t walk, and download the magazine today!

Update: Please digg the magazine or add it to your other social bookmarking sites like delicious.

Excellent news today: Paul Bakaus has received sponsorship from his employer, New Identity AG, to contribute back to jQuery project. He’s being given a chunk of hours under which he is sponsored to develop jQuery-related code. All of this is going straight back in to the community.

This is in addition to the fact that New Identity AG is in the process of making some major switches over to using jQuery as their primary JavaScript library. They have a number of high profile clients that they develop for.

Paul is going to begin by undertaking a number of tasks that have been “in the works”, namely: A Prototype support plugin, Cross-browser utility methods, and improved functionality and bug fixes for Interface.

This is a clear sign of a couple things: That jQuery’s German user-base is growing quite well, that development will move at an even quicker pace now, and that Interface is becoming an integral part of the full “jQuery package.” Expect to see some important updates in the pipeline, soon.

If you’re new to jQuery, you might not know that it has a very extensible plugin architecture. That’s not to imply that it’s a complicated one; it’s not!

One of the popular features of jQuery is the built-in effects library. Using jQuery’s plugin architecture, a number of smart people have taken the built-in effects one step further, creating some very pleasing modules for image enhancement.

Three to check out:

jCarousel
http://sorgalla.com/pages/jcarousel.html

jCarousel by Jan Sorgalla displays image thumbnails in a horizontal or vertical component. Configuration is pretty straightforward, and sufficient documentation is available on the plugin page. jCarousel can tie into Flickr, load static images, or dynamically load via AJAX.

Interface
http://interface.eyecon.ro/ [main]
http://interface.eyecon.ro/demos/slideshow.html [slideshow demo]

Interface Elements by Stefan Petre has a slideshow component for displaying individual images. Fade-in/fade-out between numbered images with next and previous links. Very usable overall, sharp look and very professional feel.

Thickbox 2.0
http://jquery.com/demo/thickbox/

Cody Lindley recently updated Thickbox to version 2.0, so if you haven’t yet, give it another look.

Browse the full list of plugins to find more enhancements for your projects.

jQuery 1.0 solidified a lot of the framework, but it also introduced some neat structural changes.

First up, the framework now builds via make files, so anybody can check out jQuery from subversion and compile either the packed or unpacked jquery.js for use in their website.

Second of all, jQuery now includes built-in testing, and the make file can build the test suite, which the user can then run in his favorite browser to make sure that the latest checked in version is up to snuff. There aren’t a whole lot of test cases written so far, but that should change moving forward (primarily because it’s so easy to add them).

Most important for me, however, has been the inclusion of inline documentation. Beginning with version 1.0 of jQuery, the documentation of the framework is included in the source files themselves, and John Resig, jQuery’s maintainer, has written a parser that will spit out an XML version of the documentation as part of the makefile (a simple make docs will build the documentation).

Visual jQuery

In the run-up to 1.0, I converted the old Visual jQuery site from a Rails-based solution, that required manual entry of functions, into a site that loads the documentation on the fly as it’s committed to the trunk.

For the less-technical, that means that Visual jQuery will now be updated pretty much as soon as jQuery is updated. Lots of people have found the visual documentation convenient and easy to use, and the new version strives to continue that ease of use.

Thanks to John, the file that his parser spits out is very well optimized for sites like Visual jQuery. He has really made good documentation a priority this time around. And from my perspective, a major part of what sets jQuery apart from the competition is its emphasis on providing readable, good documentation. I’m happy to say that jQuery has made the right choice here. Within the next couple of days, John will have fully documented all jQuery functions (there are a few still to go), and the visual documentation will fully represent the jQuery API.

Visual jQuery Magazine

With that, I have a couple of announcements.

1. Visual jQuery is going to get a major new feature sometime in the next week of two. Specifically, users will have the ability to filter functions (by name and description) through a live-search box. That capability will make it easier to find specific functions.
2. Visual jQuery is launching a monthly online magazine. It will be released in PDF format, and will be available free of charge. The first issue will include an interview with John Resig, our first in a series of articles about the newest and greatest jQuery plugins, and a visual look at the jQuery Object, the centerpiece of the entire jQuery framework. The Magazine will be released the third Wednesday of every month, so Issue 1 of the Magazine, the September 2006 issue, will be released on September 20.

As always, check out VisualjQuery.com for the latest Visual jQuery Documentation and further announcements about the Magazine.

People are really starting to pick up on the “jQuery thing”! I’ve given a number of interviews and presentations lately concerning jQuery. Here are most of the interviews: One for a magazine, two for online articles, and one podcast. Enjoy!

eWeek: jQuery Eases JavaScript, AJAX Development

As more developers adopt the practice of AJAX-style development to create more interactive applications, they are looking for tools to make the job easier.

One such tool is jQuery, which some users say makes AJAX (Asynchronous JavaScript and XML) development cleaner by making using JavaScript easier. JavaScript is notoriously difficult to work with, said a group of experts at Microsoft’s Lang.Net symposium in early August, in Redmond, Wash.

Drupal Podcast: jQuery Author John Resig

We’ve just posted the 21st episode of the Drupal Podcast! It is an interview with JQuery author, John Resig. We talk about what JQuery is, how it works, and how it will fit into Drupal.

.net Magazine: John Resig of jQuery

Most of the “big” updates to jQuery are going to be community related. I’m now working with a number of international jQuery users who will be translating the documentation and the site’s blog posts into other languages; most likely German, Chinese, Spanish, Italian, and French to start with.

Additionally, since jQuery has an incredibly easy plugin architecture, I’m also working on improving the overall developer community and organization – think Sourceforge for jQuery.

InfoWorld: JavaScript, .Net developers aided in separate projects

In the JavaScript arena, the open source jQuery project provides developers with a JavaScript library to improve the quality of Web applications. JQuery makes it easier to write JavaScript and AJAX (Asynchronous JavaScript and XML), said John Resig, lead developer of jQuery and also an author.

“The big thing that makes it different form other JavaScript libraries is it doesn’t really try to impose itself on you,” Resig said. Developers should be able to write shorter code than before while still getting equal if not better functionality, he said.

The first post-1.0 release is now ready – and (as you would probably expect) it’s a bug fix release. I’ve been working on fixing up some of the most pressing 1.0 bugs during the past couple days and I think it’s ready to go. So, without further ado – here’s jQuery 1.0.1:

• jQuery 1.0.1
• jQuery 1.0.1 Compressed

I definitely recommend that you upgrade to this release since it’ll only help make your development go easier (I expect that the next few point releases will be rather feature-lite). Here’s what’s been fixed in this release:

• Fixed Minor Documentation Flaws
• Fixed the issue with jQuery not packing correctly for Safari.
• Fixed some issues with .children() not working correctly.
• Fixed some issues with .remove() not working correctly.
• Apparently I accidentally removed :nth-child() — oops, it’s back now.
• Fixed issues with .val() not working properly.
• Fixed issue with comment text being included in .text() results.
• Fixed issue with opacity being set to only 0.9999 for Opera, Safari, etc.
• Fixed issue with .attr( “disabled”, false ) not working properly.
• Added fix for broken $(“../..”,foo).
• Added fix for stray script element that was left for IE for the DOMReady hack.
• Added support for the native AJAX object in IE 7.
• Added native support for JSON data.

There’s a couple more, less-pressing, bug fixes waiting in the queue, with a bunch of nice enhancements coming up soon (especially for the AJAX functions, thanks to Will Jessup). The next move is going to be putting the finishing touches on the API documentation and moving proj.jquery.com to jquery.com.

As always, if you spot any bugs, please feel free to post them to the bug tracker (it helps me to keep tabs on everything, and keep it organized).

Update: I’ve applied two hot fixes to this update, both of which fix big problems with this bug update. That’s what I get for releasing this at some awful time in the morning. Please make sure you get the latest source from this page.

I’d like to take this opportunity to announce the brand new jQuery 1.0! A lot of work has gone into this release. A lot of bugs fixed, a ton of new features, and a complete overhaul of how the jQuery development process is run.

In reality, this release is so large, it’s going to take a couple days to release it (this includes a new version of the jQuery web site). So bare with us as we make the transition over to full release. There’s some kinks that’ll have to be worked out (namely, finalizing the new documentation) but it’s all in the pipeline and will be ready within the next couple days.

For now, here are some relevant links to get you started:

• jQuery 1.0
• jQuery 1.0 – Compressed
• API Documentation
• (Partial) Test Suite

If you want to build your own copies of jQuery, you can check it out of Subversion and build it from the command line. You can get the latest jQuery by doing:

svn co svn://jquery.com/home/jquery/src/jquery

There’s so much more to come. I’ll be doing a post every day this week detailing some aspect of jQuery 1.0 along with some screencasts demonstrating what you can do with all the new code. Please, if you spot any bugs, file them in the bug tracker:

• Bug Tracker
• Submit New Bug

I’d like to thank everyone who made this release possible. It’s been a lot of work, but the journey is only just beginning. I can’t wait to delve into some of the very exciting advances that we have planned. Happy Coding!

Update: Here’s a fun fact. jQuery 1.0 has been released nearly one year after it was first conceived as a post in my weblog. Funny how those things work.

Update: The very cool Visual jQuery site has also released a preview version of the new documentation in its sharp style. The final release of their updated docs will be coming in the next couple days.

There have been a whole bunch of posts on this blog about the differences in code size between jQuery and Prototype. The basic premise of those posts (which I agree with) is that because of the way jQuery code is structured, all sorts of typical Javascript design patterns are rendered shorter and simpler in the framework when compared with Prototype.

For the longest time, I was a confessed Prototype junkie. I discovered the framework when I started doing Rails work, and for Rails developers, there is very little alternative. Prototype, in all its ugliness, is baked into Rails, and it’s very difficult to give up the productivity gains Rails provides by coding Javascript by hand. Going further on a tangent, that’s why I started working on jQuery on Rails, which aims to allow Rails developers to use jQuery as a drop-in replacement for Prototype.

But back to the purpose of this post, there’s something more fundamentally different about jQuery’s programming sense than just its code size. In fact, the difference in sensibilities is very similar to the difference in sensibilities between Java and Ruby, so it’s ironic that the Rails community has embraced Prototype so completely.

Let’s take a look at some code comparisons. First up, adding some arbitrary HTML after a particular node.

In Prototype:

new Insertion.After('myId', 'Arbitrary HTML');

In jQuery:

$('#myId').after('Arbitrary HTML');

Now, we haven’t done much by way of reducing code clutter (although jQuery’s is cleaner), but there is a fundamental difference in the way that Prototype and jQuery each approach the problem.

Prototype creates a series of monolithic classes that each encapsulate some functionality. Developers then pass in an id, and some other parameters, and the class does what it’s supposed to do. Very much like the Java way of encapsulating functionality (like the Math class, for instance). NOTE: That’s not to say that Java couldn’t do things this way.

jQuery approaches the problem in a fundamentally different way. It sees sets of HTML nodes as objects to pass messages to (more like the traditional Ruby way). So instead of having a separate class that adds text after an HTML node, jQuery glues the functionality onto the jQuery object, which is returned by the $ function. By contrast, Prototype’s $ function returns a vanilla DOM node.

Prototype attempted to achieve similar functionality with its $$ method added in the latest RC of the framework, but there’s a fundamental difference. While Prototype’s $$ returns an array of DOM Elements, jQuery’s $ is the fundamental underpinning of the entire framework. Virtually all jQuery functions bind to the jQuery object, which is returned by the $ method.
The benefits of the jQuery way are highly visible:

• Chainability. Because jQuery objects have functionality glued onto them, they return other jQuery objects, which the developer can then pass additional messages to. The trivial example on the jQuery website is $(“p.surprise”).addClass(“ohmy”).show(“slow”);
• Use of CSS selectors and XPath operators. Because jQuery passes messages to objects, it can (and has) implement additional selector functionality into the $ method. The methods that are glued onto jQuery objects just see an array-like object that holds a series of DOM elements. It doesn’t care how we got them. So plugin developers can add additional parsers into the $ method, or glue additional functions onto the jQuery object rather easily.
• Which brings us to plugin development. The jQuery way is very conducive to plugin development. It’s quite easy to add functionality that takes advantage of the jQuery object, and jQuery plugins are usually much shorter than their counterparts. jQuery Plugins
• Automatic looping. jQuery methods are required to automatically loop through all DOM elements in the array, and apply the desired method. So $(expression).after(‘some HTML’) transparently adds the HTML after every single element returned by the expression. $(‘p’).after(‘some HTML’) will add ‘some HTML’ after every <p> on the page, for instance. Personally, I find the elimination of iteration in my code (in most cases) to be one of the top practical, day-to-day benefits of using jQuery.
• Builds on itself. As jQuery has matured, it’s become easier to build plugins on top of the existing architecture. Because all jQuery functions automatically loop, using existing jQuery functions means that annoying iteration is all but gone.

There’s more, but the thread that runs through all of the benefits comes out of the very meticulous way that John Resig has made the jQuery object/array accept passed messages, rather than build various monolithic functionality blocks, each of which must be built from scratch.

Some other examples:
AJAX Updater in Prototype:

new Ajax.Updater('placeholder', url, { method: 'get', parameters: par });

AJAX Updater In jQuery:

$('#placeholder').load(url + par);

Note: This example doesn’t deal with the obvious iteration benefits we get if we wanted to load the response into every <p> object, for instance.

Adding a class to an element in Prototype:

Element.addClassName('element', 'className');

Adding a class to an element in jQuery:

$('#element').addClass('className');

Adding a class to a group of elements in Prototype:

$$('.element').each(function(node) {
Element.addClassName(node, 'className');
}

Adding a class to a group of elements in jQuery:

$('.element').addClass('className');

That last one is the clearest example of the difference in methodology. Because jQuery is passing messages to jQuery objects, the code is barely changed. jQuery doesn’t care that we’re now adding a class to a group of objects instead of one object; the underlying code is the same (add the class to the set of elements in the object). Prototype, on the other hand, requires an iterator.

And as your code becomes more complex, jQuery’s scales easily, while nested loops become the norm in frameworks like Prototype.

[UPDATE] An astute reader (Mislav) pointed out that Prototype does indeed do just a bit of what jQuery does. Prototype seems to bind the Element class to DOM Elements, allowing things like $(‘myElement’).hide(), and such. However, it only applies to the Element module, and seems to only work on single DOM elements. Binding the Elements module is cool, but it’s more an afterthought than the way jQuery makes it a fundamental design decision.