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.

The Road to 1.0

Posted on by

I wanted to give everyone an update as to the progress that’s been made (and being made) on jQuery right now. A bunch of us have been working very hard on getting jQuery squared away for a proper 1.0 release. In order to achieve this goal, I wanted a couple things done:

  1. Cutting down the size. I want jQuery no larger than 15k – as of right now, the code in SVN is sitting at a nice 14.8k (or so).
  2. Speed ups. Some very important speed ups are going into place, including caching and object-oriented code.
  3. Stability. I want jQuery 1.0 to be a solid release that will be supported for a very long time.
  4. Excellent documentation. We’ve been working on getting the new jQuery Wiki squared away. It’s release, along with brand new documentation, will be released at the same time as the 1.0 release.

The game plan is to have a copy of 1.0 out by the end of the month (probably a beta). Right now, the biggest thing left is to write are lots and lots of test cases to make sure that everything is running smoothly. If you’d like to help with test cases, or with the documentation efforts, please comment on this post or post in the mailing list.

This is going to be a great release – I’m really excited about the quality of code that’s coming out of it, and I’m sure you will be too.

jQuery Tetris

Posted on by

jQuery Tetris

Following in the footsteps of the excellent Yahoo! UI Tetris by Dustin Diaz comes jQuery Tetris.

This Javascript implementation of Tetris, written by Franck Marcia, comes in at only about 5.8kb, compared to Dustin’s 30kb for YUI Tetris. This is a great example of the short code that’s possible using jQuery, while still making something that’s quite cool.

SVN Access to jQuery

Posted on by

I’ve slowly been moving jQuery over to SVN during the past month, with the move being nearly complete now. So, if you wish to keep track of jQuery through Subversion (and make sure you always have the latest code), you can do so via:

  • The jQuery SVN Web Interface (This will probably soon change to a Trac-based installation.)
  • Or checking the code out manually using:
    svn co svn://jquery.com/jquery

The biggest changes left to come to the repository is the creation of branches to keep track of the different versions of code, along with some solid, reliable, versioning for the main code base. I’ll have more specific news about that update, soon. If you have any questions concerning the code in the repository, or if you’d like to be able to commit, be sure to drop the the mailing list.

Repository of jQuery Examples

Posted on by

Mark Constable has created an excellent, and well-documented, resource for some interesting advanced jQuery Examples.

The examples range from the simple (such as fading text in and out) to the complex (such as live searching or input field focusing). All of the examples are fully documented, which makes this a great place to learn some new techniques from.

Also, Mark provides a simple format for submitting new examples, so I imagine that this repository will only grow in size (it’s already up to 10 entries). So check it out and be sure to thank Mark for all his hard work!

jQuery under the MIT License

Posted on by

jQuery is now available, exclusively, under the MIT License. This license is much more open than the previous Creative Commons license used (and much better suited to software development). In a nutshell, for those not familiar with the MIT License, it’s about as free as you can get without actually putting something in the public domain. The only stipulation is that you keep the copyright along with the source code, and everything will be a-ok. Choosing this license was the result of a long discussion on the mailing list, figuring out what was best for everyone, including all the corporations that wanted to use it. If you have any questions as to how this might effect you (note: It probably won’t), just drop a note to the mailing list and we can help to set you straight.

15 Days of jQuery

Posted on by

An amazing new jQuery resource has just arrived: 15 Days of jQuery. It’s a new site run by Jack Born, devoted to providing simple tutorials for getting you started using jQuery. Jack created this site after using jQuery in his projects:

I consider [jQuery] the Swiss Army knife of Javascript – it’s small, versatile, and has almost zero learning curve… If you’re not a black belt in advanced javascript code by the end of these tutorials then you get 110% of your money back.

So far he has four tutorials up for you to browse but he’s planning on going up to the whole 15, during these next two weeks. After that, Jack is going to continue exploring and making posts – so you should subscribe now while it’s still young!

This is absolutely a phenomenal resource for anyone new to jQuery, or Javascript programming. I especially liked the Zebra Striping tutorial, it walks you through how to perform a common activity easily and simply with jQuery.

Event Selector Showdown

Posted on by

Simple Challenge: Find all the LI elements underneath two different elements (using their #ID as reference) and bind a click handler which changes the color of the LI’s text. Here is how you would do that in all of the popular event/selector libraries.

Behaviour + Prototype

Behaviour.register({
  '#item li': function(element) {
    Event.observe(element, 'click', function(event) {
      Event.element(element).setStyle({color: '#c00'});
    });
  },
    
  '#otheritem li': function(element) {
    Event.observe(element, 'click', function(event) {
      Event.element(element).setStyle({color: '#c00'});
    });
  }
});

Prototype 1.5.0

$$('#item li, #otheritem li').each(function(li){
  Event.observe(li, 'click', function(event) {
    Event.element(li).setStyle({color: '#c00'});
  });
});

event:Selectors

EventSelectors.start({
  '#item li:click, #otheritem li:click': function(){
    this.setStyle({'color': '#c00'});
  }
});

jQuery

$("#item li, #otheritem li").click(function(){
  $(this).css('color', '#c00');
});

I like to think that the code speaks for itself, as to which one is the easiest to use and understand. I find it interesting how Prototype is migrating closer to what jQuery has now – while jQuery itself is blasting away with some very cool new stuff. Definitely keep your eyes peeled for new releases, as they’ll be coming soon.

Plazes Redesign

Posted on by

Recently Plazes (a popular geolocation web application) put up a redesign of their service. If you take a peek at how it’s doing it’s cool effects, underneath the hood, you’ll see that it’s making good use of jQuery.

The best place to see it in action is on the Plazes People page. The purpose of the page is to allow you to browse around and see what other people are connected and where they’re currently located. This page has a number of cool features that you can play around with:

  • Try moving/zooming the map – the list of people on the left-hand side of the screen will dynamically change and reload.
  • In the input box at the top of the map, enter in part of a city name and it will auto-complete it with the most relevant name.
  • Clicking a user in the left-hand menu will take you to where they’re located on the map.

All in all, it’s a great example of what’s possible with jQuery, Google Maps, and a great dev team to tie it all together.

Firebug Debugger

Posted on by

Joe Hewitt is working on updating his excellent Firebug Firefox extension. If you’re not familiar with it, you should be. It provides detailed per-page error tracking, XMLHTTPRequest tracking, DOM Navigation – everything that a Javascript developer needs.

The new version of Firebug is adding one more feature: Javascript debugging. This will allow you to set break points in your code, pause the application, restart it, and all sorts of cool stuff. If this sounds interesting to you, you should contact Joe, as he needs testers to help him get this off the ground.