New jQuery API Browser

Posted on by

The jQuery team continues to pump out additional tools and resources to make development using jQuery easy, efficient and productive. The latest addition to jQuery’s growing list of tools is project team lead Jorn Zaefferer’s new jQuery API Browser.

jQuery API Browser
Visit: http://jquery.bassistance.de/api-browser/

The jQuery API browser provides an intuitive interface to quickly find information on jQuery’s methods and properties. Features include:

  • Tabbed navigation
  • Treeview on categories
  • Quicksearch on both navigation and main content
  • Code highlighting for both HTML and JavaScript snippets
  • A vertical splitter that allows you to resize navigation/content panes
  • Highlighting selected methods in the content
  • Styled tooltips for method arguments

The API browser is available both online and as a download for local usage.

The jQuery project offers a comprehensive & ever-growing list of resources that will provide developers with documentation, tutorials, and plugins/widgets for their site development.

jQuery:
http://jquery.com/

Plugins & UI Widgets/Controls:
http://docs.jquery.com/Plugins

Documentation:
http://docs.jquery.com/Main_Page
http://www.visualjquery.com/
http://jquery.bassistance.de/api-browser/

Magazine:
http://www.visualjquery.com/magazine/

Mailing List:
http://jquery.com/discuss/

Project Blog:
http://blog.jquery.com/

Learning Resources:
http://docs.jquery.com/Tutorials
http://www.learningjquery.com/
http://15daysofjquery.com/

About
http://docs.jquery.com/Sites_Using_jQuery
http://docs.jquery.com/About/Contributors

Don’t forget to Digg up this article on Digg!

jQuery 1.1.1

Posted on by

The bug fix release for 1.1 is now ready for all to use. There were a lot of weird behaviors that were discovered post-1.1 that needed to be remedied sooner, rather than later. If you were having any difficulties with the 1.1 release, please try this new release to see if your problems were solved.

It is highly recommended that you upgrade.

As always, if you have any questions or concerns with new release, please feel free to discuss it on the jQuery Mailing List. If you think you’ve spotted a bug, please add it to the bug tracker.

Download

Every bug ever fixed with jQuery can be found on the main bug fixes list. The most important bug fixes, relevant to this release, are as follows:

  1. Setting the numerical value of a css property failed, for example: .css(“opacity”,0.5) (also occurred with zIndex, fontWeight)
  2. Calling $(…, jqobj) with a context of a jQuery object failed.
  3. Accessing a property on an element that doesn’t exist caused an error, for example: $(“#foobar”).attr(“id”)
  4. Calling .load() without a callback caused an error.
  5. You couldn’t cancel an event that was triggered using .trigger() or .click() (for example).
  6. .add()ing a single DOM element to a jQuery object was broken.
  7. Passing in undefined values to a $.post() caused weird errors to occur.
  8. Accessing child nodes within an example document didn’t work properly.
  9. jQuery.isFunction() was unable to reliably determine a function, in a cross-browser way.
  10. Triggering a .click() failed in IE.
  11. Triggered click handlers were executed twice in most browsers.
  12. A newline passed into $(“…”) caused Firefox to go into a never-ending loop.
  13. Calling $.post() without any data caused an error.
  14. Calling a descendant selector after a child selector caused strange results, for example: $(“ul > li ul”)
  15. Triggered events did not occur if an event handler was not bound for that event.

Interface 1.1 Released

Posted on by

The ever-popular, jQuery-based, Drag-and-Drop, Animation, and Widget library, Interface has just released version 1.1 to coincide with the release of jQuery 1.1.

Interface Color Picker

A couple things to note about this release:

  • The brand new animateClass, animateStyle, and animateColor handlers. You can now do an animation from one particular class, to another – and from one color, to another.
  • The speed of droppables and sortables has been vastly improved.
  • The documentation has been overhauled and is quite comprehensive now.
  • The download area has been reworked, and is completely interactive.
  • There’s a ton of demos to see. They’ve updated a bunch of the existing ones and added in some hot new ones, like: Color Picker, Image Cropper, Panorama View, and a Folder tree.

All-in-all, this is a fantastic release. If you haven’t taken the opportunity to check out Interface yet, I recommend that you do now.

jQuery Birthday: 1.1, New Site, New Docs

Posted on by

Great news, everyone! Today is jQuery’s 1 Year “Birthday”! (I released it 1 year ago, today, at BarCamp New York City) In celebration, we’ve got a bunch of stuff for you to enjoy.

1) jQuery 1.1

This is a great release – tons of bug fixes, huge speed improvements, and a big simplification of the outstanding API. It is highly recommend that you upgrade to get all the benefits of this release.

Download Now:

Upgrade Guide:

Please read through these guides before upgrading from 1.0.4 to 1.1 – a number of API changes have been made, and these guides detail how to work through them, and how to use the new jQuery 1.0 Compatibility Plugin to keep 1.0-style functionality in 1.1.

New Features:

  • By all of our counts, jQuery 1.1′s selectors are 10x-20x faster than those in jQuery 1.0.4. This should provide a noticable difference in your jQuery applications.
  • Common selectors like div#id, div .class, td:nth-child(1), and div > div are all significantly faster. It’s a complete world of difference. Try them out and you’ll see.
  • You can now pass in a function as a value for an attribute or a css property. The function is executed and its return value is set as the value for the property. For example:
    // 1.0 Code
    $("a").each(function(){
        $(this).attr("href", "/item/" + this.id);
    }).show();
    
    // 1.1 Code
    $("a").attr("href", function(){ return "/item/" + this.id; }).show();
  • You can now unbind an event handler from within itself. This allows you to have event handlers that are only bound for a specific number of executions, for example:
    $("button").click(function(e){
        // Unbind the event handler if a specific form is hidden
        if ( $("#submitForm").is(":hidden") ) {
            $(this).unbind( e );
        }
    });
  • Easily bind an event that will only occur once (this replaces the old .oneclick() functionality):
    // Show a thank you message for a form submission, but only once
    $("form").one("submit",function(){
        $("#thankyou").show();
    });
  • You can now set the text value of an element (this is different from .html(), where in .text() all HTML is displayed as text).
    $("pre").text("<b>Hello</b>, how are you?");
    
    // Result:
    <pre>&lt;b&gt;Hello&lt;/b&gt;, how are you?</pre>
  • You can now build your own filters, using a custom function. (This was in 1.0, but it wasn’t documented very well.)
    // Find all divs whose parent isn't hidden
    $("div").filter(function(){
      return $(this).parent(":hidden").length > 0;
    });
  • You can now pass a comma-separated list of selectors to the following filter functions:
    filter, find, not, siblings, parents, children, next, prev. This allows you to do some very cool stuff:

    // Find all radio buttons, or checkboxes, in a form
    $("form input").filter(":radio, :checkbox");
    
    // Find the next element that's a span, or a div
    $(this).next("span, div");

2) Refreshed Web Site Design

jQuery Site Screenshot
The design of the jQuery web site has finally be given a much-needed facelift. This was planned out by the fantastic jQuery Design Team and implemented by Nate Cavanaugh. The design team has a full redesign/restructuring planned, but we wanted something that would help us get from our current design to the complete overhaul. Hope you enjoy it – and be sure to thank Nate, Bradley, or Skye for their job well done!

3) Overhauled Documentation

A big point that we’ve been working with, lately, was to really pull together and categorize the jQuery Documentation, Tutorials, and API into one centralized location. The result of this effort is the new:
http://docs.jquery.com/
All jQuery documentation can be found in this one, central, location – making it easier for you to find what you need and get your work done faster. We hope you enjoy this new structuring, please let us know if you have any suggestions for what we can add to make it better.

4) A Secret…

We’ve been holding this one back a while, but we’re finally ready to let it go… There’s a jQuery Book in the works! An excited publisher has stepped up, and the authors are already a quarter of the way complete. There’s still some details in the works, and we’re going to tell all once its getting nearer to completion, but right now it’s looking like we’re going to have a late-Spring/early-Summer release of the first jQuery book!

Blank Book

I hope you enjoy everything – a lot of time and effort has really gone into making this release great. Be sure to thank everyone on the jQuery Team, they’ve put a lot of time and effort into making this release come out really good.

I’ll be doing a “State of the Query” post tomorrow, to talk about where jQuery has come during this past year, and the evangelism team will be doing a couple blog posts about what you can do with the new jQuery 1.1.

Thank you, everyone, for making this a fantastic first year for jQuery.

jQuery wallpapers

Posted on by

Hi there, you may not know me, but my name is Nate, and I am a designer/programmer.

 I’ve been helping a bit with looking for bugs, and with site design stuff, and though I’m not on the team list, I started helping a bit after the list was written.

 Anyways, to help get the word about jQuery out there in the world, I’ve gone ahead and created some minimalistic wallpapers to adorn your desktop.

 You can download the files here:

jQuery MNML v1. (resoltions in zip: 640×480 through 1600×1200)
jQuery MNML v2. (resoltions in zip: 640×480 through 1600×1200)
jQuery MNML v3. (resoltions in zip: 640×480 through 1600×1200)

jQuery MNML v1
jQuery MNML v1.

jQuery MNML v2
jQuery MNML v2.

jQuery MNML v3
jQuery MNML v3.

Enjoi!

Selector Speeds

Posted on by

Note: Jack went ahead and fixed virtually everything mentioned in this post – great job!


We’ve been holding off on talking about the speed of the jQuery selectors for the new 1.1 release until our release was closer to being ready – however, it seems as if that process has already been expedited. So with that already out of the bag, lets look at the selector speeds of jQuery.

In short: For jQuery 1.1 we worked really really hard to make its selectors really fast. In fact, according to all our tests we were faster than any other selector library. Working on the 1.1 release, Dean Edwards’ cssQuery far out-performed any other selector library. It’s really comprehensive, and really fast.

Today, Jack Slocum announced his new DOMQuery selector library. In short: The bar has been raised. His library is very very fast. Quite possibly the fastest available today.

However, in the comparison between his library and ours, some mistakes were made that we’d like to clear up. (By both Jack and jQuery) (For reference, here’s the comparision suite that I used for my tests.)

jQuery completely supports all attribute selectors.
For example, [@foo], [@foo=bar], etc. The notable difference is that jQuery uses the XPath-style syntax in this situation. Since this was not accounted for in Jack’s test, it appeared as if we failed for all of the attribute selector tests.

Our “elem:empty” works just fine.
You can see in Jack’s test that all selectors (but DOMQuery) fail :empty – that’s more due to the fact that he compares the results against DOMQuery, which gets the result wrong. The specification states that something is empty if it doesn’t contain any child elements or text nodes. That doesn’t seem to be accounted for in this case.

[foo!=bar], :first, :last aren’t part of any specification.
…and yet they’re in the test suite. Incidentally, jQuery does implement :first and :last – but not [foo!=bar] (which appears to be only in cssQuery?). In all, its very strange to compare yourself against others when its not something that you’re designed to do.

What does span:not(span.hl-code) match?
This is a strange gray area that I haven’t seen talked about anywhere, and the specification doesn’t help to clear it up at all. Should the resulting set be all spans that don’t have a class of hl-code – or nothing, since you’ve filtered out all the spans. For example:

// Finds nothing in both
span:not(span)
=> []

// Finds spans that don't have a class of 'foo', in both
span:not(.foo)
=> [ <span>, <span>, ... ]

// jQuery's interpretation of the combination:
$("span:not(span.foo)")
=> []

// DOMQuery's interpretation of the combination:
Ext.select("span:not(span.foo")
=> [ <span>, <span>, ... ]

We’ll fully concede that we may be very wrong on this point – but I’m curious to hear what others have to say, and what they’re interpretations of the spec, are.

DOMQuery doesn’t account for duplicates.
Currently, doing Ext.select(“div div”) returns MORE elements than doing just Ext.select(“div”) – and doing Ext.select(“div div div”) returns yet another different set of elements, but still more than just doing Ext.select(“div”). In fact, accounting for duplicates is a huge problem in JavaScript selector libraries – and currently, jQuery is the only one that gets it right.

A big point of this is that accounting for duplicates can be really expensive (computationally) – so the fact that DOMQuery doesn’t account for duplicates gives the appearance of a speed boost. For example:

// DOMQuery
Ext.select("div").elements.length
=> 246
Ext.select("div div").elements.length
=> 624
Ext.select("div div div").elements.length
=> 523

// jQuery
jQuery("div").length
=> 246
jQuery("div div").length
=> 243
jQuery("div div div").length
=> 239

DOMQuery doesn’t support multiple filters: elem.foo[foo=bar] or elem.foo.bar
Until this is implemented, a comparison with any other library simply isn’t fair. Building a library that’s fully capable of handling aspects like that (see: cssQuery, jQuery) comes at a great cost. (Whether it be in code size or speed cost.)

DOMQuery’s #id selectors don’t check for context
You’ll notice if you try to do a query like:

Ext.select("div #badid").elements
=> [div#badid]

That you’ll get an element by “badid” — even if that element isn’t actually inside of a div. Since no check for validity is actually made in the DOMQuery code, it’s blazing fast – and very wrong.

I should mention that until 1.1, jQuery was wrong on this point too, so its an easy issue to overlook.

Where’d the root element go?
You’ll find that searches for “html” and “*” in DOMQuery are strangely missing one obvious thing: The HTML element. seems kind of weird to exclude the root DOM element from all queries; especially since this is perfectly valid: “html > body *”.

…and to make it fair – here’s one for us :-)

Our :nth-child(even/odd) is flawed.
Currently it seems to only select one element (!?). I made a ticket for this and it should be resolved for this Sunday’s 1.1 release.

In all, its great to see the speed leaps that’ve been made by DOMQuery. Selector speed is one area where competition is truly warranted; every time a new speed increase is made, everyone wins (users, developers – everyone).

In fact, looking over his code, I already have some more ideas on how to increase the speed of jQuery!

So, to Jack: Thanks for helping to keep us on our toes – we’re looking forward to seeing your library improve, and everyone win.

jQuery 1.1b

Posted on by

We’re nearly ready for the big 1.1 release, this Sunday – but to hold you over, here’s another set of bug fixes to test upon. The jQuery dev team has been working long-and-hard to fix all the support requests that’ve been coming in this week, and we’ve been pretty successful in fixing just about everything that’s come across our plate.

We’d really appreciate it if you’d take the time to test the new 1.1b with your code, and if you spot any bugs, to please submit them to the bug tracker.

It’s not all bug fixes, however; we do have something new for you to try: The jQuery 1.0 Compatibility Plugin. As promised, this plugin provides all of the methods and selectors that were present in the last 1.0.4 release. So, theoretically, you should be able to drop in jQuery 1.1, and the new compatibility plugin and everything should work seamlessly.

This is how you would use the compatibility plugin with jQuery 1.1:

<html>
<head>
  <script src="jquery-1.1.js"></script>
  <script src="jquery.compat-1.0.js"></script>
  <script>
    $(document).ready(function(){
        // Your old 1.0-centric code
    });
  </script>
</head>
<body></body>
</html>

So, while its fully possible to continue using the compatibility plugin into the foreseeable future, it is highly recommended that you follow the upgrade plans mentioned before.

So, again; please help us test this beta release! The more you help test, the better the final 1.1 release is going to be. Thanks for all your help!

Download

Update: There’s a couple things that I forgot to mention (that’s what I get for posting a release at 4am in the morning):

  • .filter([".foo", ".bar"]) is now .filter(“.foo, .bar”): A much simpler solution – and a fix is already in the compatibility plugin.
  • .We decided to keep .height() and .width(). They’re back in, as they’re quite useful.
  • The documentation is updated to 1.1b (so for those of you who still saw .filter([...]) or didn’t see .height() and .width() – it’s fixed now.)

jQuery 1.1a

Posted on by

As previously announced, today we’re bringing you the alpha release of jQuery 1.1. We’d really appreciate it if you could help us test this alpha, so that we can have a stand-up release this weekend – just in time for jQuery’s 1 Year Anniversary! (January 14th)

This is going to be a fantastic release. In fact, this release is so good that we’re going to be taking this entire week to tell you about what’s new and how you can best use it. The Evangelism team has a bunch of stuff lined up to get you introduced and ready to use this great new version of jQuery.

Here’s the quick-and-dirty on jQuery 1.1:

  • Its selectors are 10-20x faster than those in jQuery 1.0.4.
  • The documentation has been completely revamped.
  • The complexity of the API has dropped by 47%.
  • It has a ton of bug fixes.
  • It has a bunch of great new features.
  • … and it’s still the small 19KB that you’ve come to expect.

We’re going to have the full run down during the next couple days, but for right now, it’s shaping up to be a great release.

Download

API Changes

NOTE: We will release a backwards compatibility plugin together with the full release of jQuery 1.1, when it is released this weekend.

It’s important to note that there’s been a lot of API changes. Some in the form of additions, some in the form of reorganization. If you’d like to help us test this alpha release, please keep these changes in mind:

:nth-child() now starts at 1, instead of 0. Our implementation of the CSS 3 selector started its numbering at 0, instead of 1. This is a bug fix, but one that may effect your code.

// 1.0.x: Get the first column from a table
$("td:nth-child(0)")

// 1.1: Get the first column from a table
$("td:nth-child(1)")

The following methods have been renamed/reorganized in this version, here is how you can continue to use them, as you would expect:

Old Way (1.0.x) New Way (1.1)
.ancestors() .parents()
.width() .css(“width”)
.height() .css(“height”)
.top() .css(“top”)
.left() .css(“left”)
.position() .css(“position”)
.float() .css(“float”)
.overflow() .css(“overflow”)
.color() .css(“color”)
.background() .css(“background”)
.id() .attr(“id”)
.title() .attr(“title”)
.name() .attr(“name”)
.href() .attr(“href”)
.src() .attr(“src”)
.rel() .attr(“rel”)
.oneblur(fn) .one(“blur”,fn)
.onefocus(fn) .one(“focus”,fn)
.oneload(fn) .one(“load”,fn)
.oneresize(fn) .one(“resize”,fn)
.onescroll(fn) .one(“scroll”,fn)
.oneunload(fn) .one(“unload”,fn)
.oneclick(fn) .one(“click”,fn)
.onedblclick(fn) .one(“dblclick”,fn)
.onemousedown(fn) .one(“mousedown”,fn)
.onemouseup(fn) .one(“mouseup”,fn)
.onemousemove(fn) .one(“mousemove”,fn)
.onemouseover(fn) .one(“mouseover”,fn)
.onemouseout(fn) .one(“mouseout”,fn)
.onechange(fn) .one(“change”,fn)
.onereset(fn) .one(“reset”,fn)
.oneselect(fn) .one(“select”,fn)
.onesubmit(fn) .one(“submit”,fn)
.onekeydown(fn) .one(“keydown”,fn)
.onekeypress(fn) .one(“keypress”,fn)
.onekeyup(fn) .one(“keyup”,fn)
.oneerror(fn) .one(“error”,fn)
.unblur(fn) .unbind(“blur”,fn)
.unfocus(fn) .unbind(“focus”,fn)
.unload(fn) .unbind(“load”,fn)
.unresize(fn) .unbind(“resize”,fn)
.unscroll(fn) .unbind(“scroll”,fn)
.ununload(fn) .unbind(“unload”,fn)
.unclick(fn) .unbind(“click”,fn)
.undblclick(fn) .unbind(“dblclick”,fn)
.unmousedown(fn) .unbind(“mousedown”,fn)
.unmouseup(fn) .unbind(“mouseup”,fn)
.unmousemove(fn) .unbind(“mousemove”,fn)
.unmouseover(fn) .unbind(“mouseover”,fn)
.unmouseout(fn) .unbind(“mouseout”,fn)
.unchange(fn) .unbind(“change”,fn)
.unreset(fn) .unbind(“reset”,fn)
.unselect(fn) .unbind(“select”,fn)
.unsubmit(fn) .unbind(“submit”,fn)
.unkeydown(fn) .unbind(“keydown”,fn)
.unkeypress(fn) .unbind(“keypress”,fn)
.unkeyup(fn) .unbind(“keyup”,fn)
.unerror(fn) .unbind(“error”,fn)

I realize that’s a long list – but you’d be surprised how much of that no one was using. By removing all of those methods we’ve been able to reduce the size of the jQuery API by 47%. We’re going to have more information about the API changes in particular, but for now, this list should help you to sort out any major differences in your code.

If you have any questions, feel free to post them here in the comments and we’ll get them answered right away.