Monday, January 15th, 2007

jQuery 1.1 is reborn on its first birthday

Category: Announcements, jQuery

John Resig and team have released jQuery 1.1 which includes a speed upgrade, an updated API, a new homepage, and new documentation including a book in the works.

The community seems to be growing from strength to strength.

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");

Posted by Dion Almaer at 3:11 pm
19 Comments

++++-
4.3 rating from 68 votes

19 Comments »

Comments feed TrackBack URI

nice comparison table and speed test

Comment by Alex — January 15, 2007

jQuery just keeps getting better and better. Just shows how much can be done with very little code sometimes.

Comment by Matt Oakes — January 15, 2007

@Matt

Heh, I was thinking the same, but along the lines of, “wow, they should change the name to PerlScript”. ;-)

Comment by The Foo — January 15, 2007

I’ve developed a few intra-net AJAX sites, but can’t for the life of me understand why I would have to use JQuery or something like it. Maybe I’m just slow. Seriously, could someone give me a concrete simple example of how it would save me time in coding? Thanks.

Comment by Confused — January 15, 2007

Using a library you don’t have to check for browser compatibility ;)

Comment by netsuo — January 16, 2007

Just wondering how developers cant see how much time can be saved using a framework like this. When it should be obvious that you can trim down your codes from 10 to 1 line in many cases. I know alot of developers wanna write there own things from the scratch but in the business world time is money. And with plugins like Interface its deffently easyer and faster to build nice animations and other stuff both fast and easy!!!

Comment by Iumentum — January 16, 2007

I am one of those who prefers to write his own code from scratch. I can see the time saving and browser compatibility benefits of JavaScript Libraries/Frameworks and I regularly use them as point of reference. I freely admit that I’m not nearly as skilled as some of the people writing these frameworks, so my main argument for writing my own code is as an opportunity to learn. The last statement might sound comical coming from an ASP.NET Developer.

I write my own code in a business environment for a very different reason. I cannot guarantee the quality or the nature of a library/framework without going through every line of code myself. I’m not suggesting that the likes of jQuery and Prototype are writing cleverly disguised viruses for the unsuspecting web developer. I really appreciate all the work that goes into these libraries and am constantly staggered by what they are able to achieve. I just don’t see how I could import any of these libraries into a business critical system without some sort of contract between the library provider and myself. Am I missing something?

Comment by Richard Kimber — January 16, 2007

I’ve not really looked into jquery before, but are all those escaped quotes necessary? or are they just a wordpress oddity?

Comment by Scott — January 16, 2007

jquery makes writing javascript code simple and fun!

Comment by r00t — January 16, 2007

jquery makes writing javascript code simple and fun!

I think JavaScript is just a fun and simple script language … however, I think jQuery is a fantastic library (the best ?) too and these improvements make them even greater ;-)

Comment by Andrea Giammarchi — January 16, 2007

@Richard Kimber: Great points Richard and your concern about support is certainly a valid one. The one thing to keep in mind is that you do receive the source code jQuery (and open source projects like it) so you are free to not only inspect it but refactor it to suit your needs. Having worked with corporate clients for some 18 years now, I have seen a change in perspective towards open source. Using open source software in the corporate workplace is becoming more commonplace because of the cost benefits and productivity gains found when using some of these products vs. propietary closed-source systems.

Libraries like jQuery typically provide as much, if not more, cost benefit than their commerical counterparts because of the zero-cost entry point and excellent community-driven support system. Mind you, not all projects are like jQuery. I think we go to great strides to ensure you have PLENTY of support in the form of samples, documentation and a community. So my suggestion is to peruse the resources we as a project provide and see if its viable for your business.

Comment by Rey Bango — January 16, 2007

@Scott: Not sure about the escaped quotes you’re referring to. Where do you see them? I’d be happy to give you some feedback.

Comment by Rey Bango — January 16, 2007

@Confused: Naw bud, you’re not slow. I think a lot of folks might wonder how any tool can save them time. Its part of the learning process. We typically see two types of folks; the experienced JS/DOM developer that wants to cut down on coding time or the developer thats new to client-side technology and wants to get up to speed VERY quickly, especially using Ajax. jQuery helps both but providing a level of abstraction to the complexities of Javascript and the DOM. Both can be daunting and code intensive and we strive to make it easier (hence our slogan “Write Less, Do More”). So by using a library like jQuery, you’re able to write very complex client-side application logic without having to go into the bowels of JS & the DOM. If you go to the jQuery home page, you can see a small snippet of what I’m referring to: http://jquery.com/. Click on the button that says “Run >>” to see an animation effect that when coded with jQuery is substantially cleaner and easier to write than with straight JS.

Now, I don’t recommend using any library though without understanding JS, CSS & the DOM. Its very important to understand why things happen.

Comment by Rey Bango — January 16, 2007

@Rey Bango,
Be careful when saying “Click on the button that says “Run” to see an animation effect”. It always worked, but unfortunately after site upgrade, the jquery.com layout on my IE6 is so spoiled that it is impossible to click “Run” at all when using normal fonts. I have reported the layout problem earlier on nabble, but just recently I’ve realized that Run may refuse to work depending on font size.
I know that it can be an IE6 problem, but users wanting to get accustomed with jQuery may be stunned when such simple “Run” does not work.

Comment by Krzysztof — January 16, 2007

@Krzysztof: Great catch. I was using FF and it worked perfectly. I’ll make sure to look into this immediately. Thank you again for the heads up.

Comment by Rey Bango — January 16, 2007

@Krzysztof: I just wanted to let you know that the problem you mentioned has been corrected. Thanks for pointing out the issue.

Comment by Rey Bango — January 16, 2007

I have looked at many frameworks and tried all the big name ones. I like jquery the best. I cant wait to see the cool plugins that are going to be developed for this version.

Comment by Josh Giese — January 17, 2007

Be careful when saying “Click on the button that says “Run” to see an animation effect”. It always worked, but unfortunately after site upgrade, the jquery.com layout on my IE6 is so spoiled that it is impossible to click “Run” at all when using normal fonts
Gee I am happy to know that!

Comment by Birthday and Party Lady — June 22, 2007

Glad to hear this

Comment by Birthday Supply — September 6, 2007

Leave a comment

You must be logged in to post a comment.