jQuery 1.0 – Alpha Release

Posted on by

I would like to take this opportunity to announce the first release of jQuery 1.0 (dubbed jquery-1.0a). This new 1.0 release is designed to be completely comprehensive, small-sized, and bug free. It will be supported for a very long time, into the foreseeable future. (This is NOT the final release of 1.0, that will be coming after comprehensive testing has been completed)

This release is currently available at the following URL:
http://jquery.com/src/jquery-1.0a.js

What I need everyone to do is to download this new release and test it with their specific plugins or applications. If you spot any strange bugs (that are unrelated to any of the changes mentioned below), please post a bug concerning it in the new jQuery Bug Tracker (The more exact you can make the bug, the better – and test pages are highly appreciated):

The proj.jquery.com site is only temporary, and still incomplete, and will be moving over to jquery.com whenever the full 1.0 release is ready. This new site includes a full wiki, so if you see anything that you’d like to add, please feel free to do so.

I would like to thank everyone who’s helped to make this release possible. This release wouldn’t be happening if it wasn’t for everyone who’s donated their time and money to contribute to the project. The community, as a whole, has been invaluable in providing support and feedback, guiding the progress of the project as a whole. Thanks everyone, and enjoy – I’m looking forward to your feedback.

— John Resig

What follows are the release notes of what’s changed in this release. This includes a number of new methods, improvements, things that Javascript purists will like, and changes for plugin developers. They’ve all be organized accordingly.

New Methods

(Note: Some of these have been around for a while, but have just never been publically been announced)

DOM

– $().text():
Returns the text contents of all matched elements, combined. This works for both HTML and XML documents.
– $().html() and $().val():
These both act as getter and setters for innerHTML and value, respectively. Calling .html() will return the HTML contents of the first element matched. Calling .html(“foo”) will set the HTML contents of all matched elements to ‘foo’.
– $().toggleClass(“class”):
If the class exists on a specific element, it is removed, if it does not, it is added.
– $().remove():
Removes all the matched elements from the DOM.
– $().empty():
Remove all child nodes from all matched elements.
– $().parent(“filter”):
Matches the parent element of all matched elements, filtered by the optional “filter”.
– $().parents(“filter”):
Matches all ancestor elements, of all matched elements, optionally filtered by “filter”.
– $().siblings(“filter”):
Matches all sibling elements, of all matched elements, optionally filtered by “filter”.
– $().is(“filter”):
Checks to see if any matched elements match “filter”, if so, the expression returns ‘true’, otherwise ‘false’.

Events

– $().trigger(“event”):
Triggers the ‘event’ event to occur on all matched elements.
– $().dobind():
There is now a shorthand for triggering a specific event on all matched elements.
– $().toggle( function, function ):
Whenever a matched element is clicked, the first function is fired, when clicked again, the second is fired, all subsequent clicks continue to rotate through the two functions.

Effects

– $().fadeTo(speed, to, callback):
This fades all matched elements ‘to’ a certain opacity, at a certain ‘speed’. Once completed, the callback is fired.
– $().animate( properties, speed, callback ):
There is a new, generic function for performing custom animations. ‘properties’ contains a custom object of key/value pairs relating to properties that you want animated, for example:
$(“div”).animate({ height: 40, top: 50}, “slow”);
– $().center() has been moved to a separate plugin and is no longer in the main fx package.

AJAX

– $().ajaxStart( function ) and $().ajaxStop():
Two methods used for binding callback listeners for two new events. ajaxStart is fired whenever a new AJAX request begins (and no other request is happening) and ajaxStop fires whenever all AJAX requests have completed. This is ideal for showing/hiding a ‘loading’ message.
– $().ajaxError( function ), $().ajaxSuccess( function ), and $().ajaxComplete( function ):
These are all generic methods for binding callbacks to handle specific AJAX-related events. ajaxComplete fires whenever an AJAX event finishes (disregarding its success state). ajaxError and ajaxSuccess both fire whenever a request fails, or succeeds.
– $.xml() is now $.ajax()
– $.ajax( options ):
The AJAX method now can take an option object of key/value pairs, represented like so:

  $.ajax({
    url: "request url",
    type: "POST, GET, etc",
    data: "A string of data to send to the server",
    
    // The three, afformentioned, callbacks
    complete: function(){},
    success: function(){},
    error: function(){}
  });

Improvements

– Doing $() is now a wrapper for doing “new $(…)” – as jQuery is now an object, and much much faster.
– A large part of the code is fully documented, inline, now (this includes commnets and better variable names) – this isn’t completely done yet, but will be by the time the full 1.0 releases comes around.
– Animations now figure out the correct height and width of elements based upon the current box model scheme being used, by the browser.
– You can now append/prepend/etc. tr, td, and th elements to tables and table rows – behaving as you expect it would.
– $(document).ready() has been drastically improved. It now works in all modern browsers completely as you’d expect, even with Adsense in the page.
– All effects are now queued, for example:
$(“div”).fadeIn().fadeOut()
will fade all the divs in, then out (once the in animation is complete). However, doing:
$(“div”).fadeIn();
$(“span”).fadeOut();
will fire all the animation simultaneously. Effects are only queued on an element-by-element basis.
– The height and width of an element are automatically set to ‘auto’ after an animation is complete (but only if the height is equivalent to an ‘auto’ height, for example).
– jQuery forces layout in IE, even on elements that don’t have it yet.

Javascript Purists

– jQuery is completely contained within the ‘jQuery’ namespace now, and mapped to the ‘$’ dynamically. This will have little to no effect on your existing code, other than the fact that it makes for much purer code.
– Support for existing $() functions is now generic (in that it doesn’t look for Prototype, but just the $ function).

Plugin Developers

– The old property .$jquery is now .jquery
– $.apply() has been removed.
– jQuery now sets a global variable named ‘undefined’ to undefined. Feel free to use this in your code with: foo === undefined.
– Class manipulation functions are now located in jQuery.className.*
– jQuery.browser contains a string representing the browser that the user is using, it can be either: safari, opera, msie, mozilla, or other.
– jQuery.boxModel is true if the current browser supports the W3C CSS box model, false if not.
– $.getCSS is now $.css
– $.parents() can be used to get all ancestors elements of an element
– All event-related functions are in jQuery.event.*
– The fx namespace is now contained with jQuery.fx.*
– There is no longer any fx.Top/Left/Height/Width/Opacity functions, they’ve all been relegated to the new $().animate() function (which also handles all the queuing).
– $.param( array ):
Can now take an array of elements, whose names and values are serialized to a string.

16 thoughts on “jQuery 1.0 – Alpha Release

  1. Jon Combe on said:

    Wow, congratulations on this latest version.

    I’ve only been looking at this for a couple of days now and love it already. Compared to some of the alternatives out there, this definitely rocks.

    The only thing it lacks for me (and it could well be there and I’m missing it) is accessing XML attributes. If I could…
    $(“somenode”, myXML).each(function(i) {
    alert($(“somenode, myXML).get(i).getAttribute(“myValue”));
    }
    …I’d be delerious.

    And where did $().center() get shipped out to so I can use it again, please?

    This is a great package you’ve got here. Well done!

  2. Jon Combe on said:

    Ahah, delerium achieved. Please ignore the attribute thing, it does work and I was just being a dufus. :)

  3. Michal Tatarynowicz on said:

    Congratulations :)

    I’ll plan to use jQuery on a portfolio website for a friend, and I’ll try to integrate it with my event code that provides:

    – event.mouse() that returns mouse position (relative to window and to page) and buttons up/down data; the code tracks onmouseup/onmousedown events to provide reliable information about currently pressed mouse buttons

    – event.modifier() & event.key() returning information about pressed keys and active key modifiers

    – consistent event.src and event.target across browsers

  4. Johan Sundström on said:

    A reaction to $().is(filter) — in functional languages this kind of method is typically called “any”, and has a companion method “all” yielding true when *all* elements matched the filter. I wouldn’t mind seeing the same in jQuery, but won’t take offense at the lack of it, either.

  5. yurivish on said:

    I jsut wanted to thank you for working on this project and to tell you how useful it’s been to me. :)

    However, there’s one item I would love to see – Being able to call filter() with a function as an argument. Maybe this is already available, but I haven’t found it yet.

    The function would return true or false, and it would function like each, except returning only the elements that validated as true within the function. Example:

    (‘a’).filter(function() {
    return this.href == ‘http://google.com’;
    }).addClass(‘googleLink’);

  6. Logic on said:

    Wow, John.. kudos on the performance improvements. jQuery has been the foundation of an enterprise intranet since your initial release in January 2006 – new releases tested and swapped in flawlessly. Figured you’d appreciate these results via the latest release, 1.0a, as it achieved a 270% gain overall (via firefox/firebug console.time() tests). The following are initialization times (in milliseconds) of various parts of the interface (menu, status bar, sorting engine, etc. that use jQuery to unobtrusively add functionality):

    Version Key:
    jq2006may23 / jq1.0a = gain%

    Performance (in ms):
    47 / 15 = 313%
    46 / 15 = 307%
    47 / 15 = 313%
    35 / 12 = 292%
    23 / 8 = 288%
    25 / 8 = 313%
    37 / 11 = 336%
    48 / 15 = 320%
    13 / 4 = 325%
    69 / 21 = 329%

    Overall (standalone liner init)
    850 / 314 = 271% (OSX)
    642 / 231 = 278% (XP)

    The web as a desktop? With numbers like these… it’s only a matter of time. ;)

  7. Antonio on said:

    It looks g-o-o-d :) specially the speed-up.

    But: as a just-arrived-to-jQuery I find this somewhat counterintuitive:
    > Calling .html() will return the HTML contents of the first
    > element matched. Calling .html(“foo”) will set the HTML contents
    > of all matched elements to ‘foo’.

    I think intuitiveness is one of jQuery strong points, so this duality as getter and setter surprised me. Is it used in other functions? Should I reread the docs? Because if it’s there, I completely missed it.

  8. refactored on said:

    Any improvements to the $()’s XPath implementation? Do we have the ancestor axis now that .parents() is available?

  9. Hey, this is my second comment. :)

    I was also wondering if you could please include a (‘#id’).hasClass() function that returns true or false based on whether the element has a certain class.

  10. Giel Berkers on said:

    I’ve been using jQuery for some time now. I use it in my CMS and on the websites I create and I must say I really love it! I mainly use it to make my webforms more accesible (if users forget a field that is required, if a webform automaticly needs to get more options on-the-fly, etc.)…

    Three thumbs up for you John! I sure hope that jQuery will stick for a long time! I’m also looking forward to the definitive 1.0 version (with complete documentation perhaps?)!

  11. Nilesh on said:

    Thanks much for creating the jQuery, its just a simple joy to use, and fun to work with. I can’t wait for the Drag and Drop and other cool UI is added to the jQuery, its alredy a strong as it is, yet i feel its only about to get more good :)

    Thanks to you, and all others who may of helped along the way, its well worth the time and mind set.

    hope long life for jQuery ;)

    should be fun when JavaScript 2.0 comes out next year or this year or whenever it comes out.

    only thing i would suggest is, downloadable Documents, Chm or PDF or something, i already printed out the Cheet Sheet(visual layout of functions), yet was looking for bit more detailed offline documents. maybe if find some time, ill make a new cheeat sheet detailed out.

    have fun,
    Nilesh

  12. Nilesh on said:

    BTW anyone trying to use html() with a textarea, you may want to use something like this…

    $(‘#my_textareaID’).set(‘value’, ‘abc value here’);

    because doing a simple $(‘#PX_RT_SNOTE_170’).html(‘abc ..’) want do set the value.

    just a heads up. so to clear a textarea use something like $(‘#my_textareaID’).set(‘value’, ”);

    was html() suppose to add a extra element to the textare? or a bug? if i use fireBug in firefox to checkout the textarea it says somethign like innerhtml=’abc.’ and the value says to be ‘abc.’ but the textarea never updates with use of .html(‘abc’)

    anyways hope that helps someone :)

  13. yurivish on said:

    Nilesh: I believe there’s a .value() function that would suit your needs. :)

  14. person on said:

    I know this isn’t a Q/A forum, so just take this as edvidance for one :)

    Given a $(‘#formtag’), is there a method to serialize the /entire/ form (without looping though its elements) to duplicate a POST submittal? I know about .val() and saw stuff about .form(), but could never get it to wrok right.

    I’m using 1.0 alpha.

    Thanks for any help.

    I love jQuery, and no longer find javascript as tedious as I used to. Might jump back into webdev a lot more now.

  15. Wally Glutton on said:

    In the ‘parent’ function:

    var ret = jQuery.map(this.cur,”d.parentNode”);

    The ‘d’ should be an ‘a’.