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
As we can see, the object isn't displayed in the console. Now let's try with jQuery 3
jQuery 3.0.0
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 ES6 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.
Warning
As mentioned on this blog post, the problem of jQuery 3.0.0 is that it's silencing errors if no rejection handler is added. That's why we advice you to use jQuery 3.1.0 released on 8th July 2016 that fixes this bug.
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