Dev Tip: Faster Selects w/Tag Name

Posted on by

jQuery provides an extremely versatile DOM query mechanism. If you’re wondering what’s happening under the covers, and if there are less- and more-performant ways to formulate your query . . . the answer is YES. In many cases you can help jQuery by specifying a tag name, i.e.:

$("div.class").show()

is faster than:

$(".class").show()

. . . with the difference being that the query engine can narrow by tag name first. It’s smart like that.

So, you shoud be in the habit of specifying a tag name. The only exception: getting by ID. If you’re getting by ID, do not include a tag name, or anything else besides the ID selector.

Note that the second example here (with the class selector only) is perfectly valid, and if you need to query for multiple element types, by all means go ahead — jQuery will still return the correct results.

Technorati Using jQuery

Posted on by

Just today Technorati pushed a new redesign live. Amongst other changes, it now uses jQuery as its primary Javascript code base. This is huge news as another big web site chooses jQuery as their Javascript library of choice.

If I had to guess, as to why they chose it, I’d say that they appreciated the bandwidth savings that jQuery afforded them, while still providing a number of useful usability improvements. I’ll see if I can hunt down who was in charge of the Javascript for the redesign to get their actual thoughts.

jQuery plugin goodness

Posted on by

There is a lot of good plugin development going on for jQuery. Here are two which have come up on the list lately:

HighlightFade by Blair Mitchelmore is a very thorough jQuery implementation of the “yellow fade” technique. Options include the type of fade (linear, sinusoidal, exponential), the duration, and a function to call on completion. The plugin weighs in at 3.5K (uncompressed, so it could be made smaller), and should handle all your yellow-fading needs.

Tablesorter by Christian Bach is browser-side table sorter (click on a column heading to sort the table accordingly). It’s fast (in the demo, sorts 400 rows in about .3 seconds), and it auto-detects the column type to provide the appropriate kind of sorting. For example, it automatically recognizes date vs. text vs. URL contents, and sorts accordingly. For URLs, it disregards the http/https/ftp/file prefix for sorting purposes, which is more likely to give you the sort you actually want. You can also define your own auto-detects, which usually involves 5-10 lines of code. The plugin is about 10.5K uncompressed.

Did you know there are lots more jQuery plugins listed on the wiki at http://proj.jquery.com/plugins/? Note that the URL to the wiki will change when jQuery goes 1.0.

jQuery Color Picker

Posted on by

Steven Wittens of Drupal fame has released a nifty jQuery plugin of his own called Farbtastic. So what does it do, you ask?

Farbtastic uses layered transparent PNGs to render a saturation/luminance gradient inside of a hue circle. No Flash, no pixel sized divs.

With Farbtastic, a simple form input box turns into an auto-updated hex code whose background color changes accordingly with the clickable color wheel and block added by the 8kb Javascript file. Click the color, drag the chooser or enter in a hex code manually.

Just include the farbtastic.js file along with the farbtastic.css stylesheet and create a placeholder div along with a form element for the hex code like so:

<form>
    <input type="text" ... />
</form>
<div id="colorpicker"></div>

And then include the one line jQuery code:

$('#colorpicker').farbtastic('#colorpickerinput');

That’s all there is to it! You should now have a color picker widget on your page.

To see a working demo as well as more in depth instructions on using the plugin, visit the Farbtastic page. Farbtastic is protected by the GPL.

Inline Editing with jQuery

Posted on by

We’ve all heard of in-line editing. Flickr uses it for many things such as changing the title or description of one of your pictures.

For those of you who dont know, in-line editing is when you can just click on text, and it becomes a text box which the user can then edit. When the user hits enter, the edited text is sent to a script, which can do some magic, like submitting the text to a database.

Now, thanks to Dylan Verheul, doing this with jQuery could never be easier. He has created a plugin called Editable, which makes it possible to create in-line editing fields with one simple line of code.

$(element).editable(url, options);

The source code, along with a (broken fixed) demo can be seen here. I have put together a simple working demo on my website, here.

Bloggers Wanted

Posted on by

On the road up to 1.0 there is one thing, that we’ve been lacking in, that we need more of: Lots of jQuery bloggers!

With my commitment to squishing bugs in the jQuery core, adding new features, writing documentation – I just don’t have time to keep the blog updated with all the hot new projects that are coming out.

So, here is what I’d like: I’d like to turn the jQuery blog into a group blog, discussing jQuery, Javascript, jQuery Plugins/Projects/Apps, AJAX – anything that relates back to jQuery or Javascript. The blog currently has around 800-900 readers – which is decent, considering that I haven’t put much time into it (It’s also ranked in the top 6000 on Technorati).

I see this as being a great opportunity for different members of the diverse jQuery audience to really come together – especially for those who don’t feel confident committing code changes.

Here are some of the ideas that I’ve come up with, for blogging “positions”:

  • jQuery on the Web (find people writing and building with jQuery,
    and talk about it)
  • jQuery on the List (collect and talk about all the projects and
    news that take place on the mailing list)
  • Weekly List Recap (Recap the important events/discussions of the
    mailing list every week)
  • jQuery News (Project Announcements, bug fixes, etc – this will
    probably be done by me)
  • jQuery Hacks (Cool things that you can do with jQuery – compare
    with other libraries)
  • Javascript News (Report on new techniques, libraries, hacks – whatever)
  • jQuery International (The jQuery user base is all over the globe -
    having articles/sections in other languages would be fantastic!)

If we can get even half of this up and running, we will definitely become a top blog for Javascript news – which would be good in so many ways.

If this project interests you, please reply to this post, or email me personally. I’d also like to see a sample of your code and/or writing (if I haven’t seen it already). If you have any ideas, feel free to bring them up, I’m all ears!

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.