Since 2006, the year of the jQuery's first version release, the library has come a long way. The team just released jQuery 3 early June, here are some new features that may be useful to your website and make your developer's life easier.

The data method

To respect the Dataset API specifications, jQuery 3 now recognizes the data-* attributes of the objects, and automatically modifies the case of these attributes to make it camel cased. If the key in the data-* attribute contains a digit, it will no longer participate in the conversion.

jQuery 2.x.x

data method with jQuery 2

As we can see, the object isn't displayed in the console. Now let's try with jQuery 3

jQuery 3.0.0

data method with jQuery 3

The numbers don't participate in the camel case conversion, hence the dash.

width(), height()

Now, we get decimal values for these methods, and that's a huge bug fix! jQuery doesn't round the values anymore. If an element has a height of 1/3 of 100 px, .height() would return the exact number 33.3333..... now and not 33 as it was the case with the previous versions

load(), unload() and error() methods

These methods are now removed, because they were deprecated. The recommended way of using these features is to use the on() method, with .on("unload", function(){...}); for instance (replacing the .unload() method here).

jQuery Objects iterable with a for...of loop

From now on, we can iterate over the DOM elements of a jQuery collection using the for...of loop, which is actually a foreach loop. Let's say for instance that we want to assign an id to each paragraph of the page. Before the new version of jQuery, we would have coded it with a simple loop:

var $paragraphs = $('p');
for(var i = 0; i < $paragraphs.length; i++) {
      $paragraphs[i].id = 'paragraph-' + i;
}

Now, we can iterate over the paragraphs:

var $paragraphs = $('paragraph');
var i = 0;
for(var paragraph of $paragraphs) {
     paragraph.id = 'paragraph-' + i++;}

 

However, it turns out these foreach loops are slower than normal JavaScript loops, you can check it out in an upcoming article dedicated to loops performances.

The :visible and :hidden attributes

jQuery 3 changed its policy about objects considered visible or hidden. Even if there is no content, the object would be considered visible as long as it has any layout box. So for example if this is what's in your <body> :

<div></div>
<br/>

And this is what's in the Javascript :

console.log($('body :visible').length);

The result would be 2 with jQuery 3 while it was 0 with the former versions.

This new version of jQuery brings so many other new features, I just selected the ones that appear to be the most important in this article. I would recommend to check out the official jQuery's page: jQuery 3 final release