Quick Summary of What’s new in jQuery 3.0
jQuery 3.0 is the newest version of jQuery and it’s already out. There are many new features, bug fixes and deprecations of old methods. In this post, find a quick and short summary of some of the newest features and bug fixes.
- For loop syntax changed
jQuery 3.0 introduces new syntax for “for loop”. With this new syntax, you will get DOM element, instead of jQuery collection. So here you don’t need to use index to get the element as you are already having direct access to the element.
var $dvElements = $("div");
var i = 0;
for(var elm of $dvElements) {
elm.addClass("dummy");
}
- jQuery.Deferred is now Promises/A+ compatible
Deferreds have been updated for compatibility with Promises/A+ and ES2015 (a.k.a ES6) Promise. Use the new then and catch methods for Promises/A+ compliance.
In jQuery 1.x and 2.x, an uncaught exception inside a callback function halts code execution. The thrown exception bubbles up until it is caught inside a try/catch or reaches window and triggers window.onerror. But with jQuery 3.0, any uncaught exception can be caught with in catch block. See below code.
$.ajax("/status")
.then(function(data) {
whoops();
})
.catch(function(arg) {
});
- New signature for jQuery.get() and jQuery.post()
Now you can set settings parameters for jQuery.get() orjQuery.post() like jQuery.ajax().
var settings = {
...
}
$.get(settings)
$.post(settings)
- New method jQuery.escapeSelector()
The new jQuery.escapeSelector(selector) method takes a selector string and escapes any character that has a special meaning in a CSS selector. For example, an element on the page has an id of “abc.xyz” it cannot be selected with $("#abc.xyz") in prior version of jQuery. But with jQuery 3.0, it can be selected
$("#" + $.escapeSelector("abc.xyz"));
- :visible and :hidden Behavior change
jQuery 3.0 modifies the behavior of :visible and :hidden filters. Prior to jQuery 3.0, the version will not select elements with no content. For example, for following HTML
<div></div>
<br />
jQuery 1.x and 2.x will return count as 0, though these elements are visible. But with jQuery 3.0, things are changed. Elements will be considered :visible/:hidden if they have any layout boxes, or of zero width and/or height. For the above HTML, jQuery 3.0 will return count as 2.
- Changes in .data()
There is also a change in the behavior of .data() with jQuery 3.0. It is now more align with new specification of Dataset API. Now, the property key name is transformed to camelCase. While in old version it was in lower case with dash (if exists in key name). For example,
<div data-foo-name="bar"></div>
Prior to jQuery 3, the property name is "foo-name" but with 3.0, it is "fooName". However if there are any digit present in the key name then it remain same as the previous version.
- jQuery 3.0 runs in Strict mode
Now that most of the browsers supported by jQuery 3.0 have "use strict", jQuery is being built with this directive. Your code is not required to run in Strict Mode, so most existing code should not require any changes.
- Cross-domain script requests must be declared
When making a request via jQuery.ajax() or jQuery.get() for a script outside your domain, you must now explicitly specify dataType: "script" in the options. This ensures the possibility of an attack where the remote site delivers non-script content but later decides to serve a script that has malicious intent.
- width() and height()
jQuery 3.0 now returns decimal values for .width() and .height() methods. In previous version of jQuery, they return nearest value but that is in integer. For following HTML,
<div style="width:100px;">
<div id="dvFirst">Some text..</div>
<div id="dvSecond">Some text..</div>
<div id="dvThird">Some text..</div>
</div>
</pre>
And below jQuery code,
<pre class="brush:javascript">
$('#dvFirst').width();
will return 33 but with jQuery 3.0, returned value is 33.3333333. So you get more accurate results.
- unwrap() Method
unwrap() method allows you to remove the parents of the matched elements from the DOM. But there was no way to unwrap based on certain conditions as it did not accept parameters earlier. With jQuery 3.0, you can pass a selector to it.
- RequestAnimationFrame() for animation
jQuery 3.0 will use requestAnimationFrame() on platforms/browser which supports this property. This will ensure smooth animation and consume less CPU power.
- load(), unload() AND error() methods are removed
jQuery 3.0 removes all above deprecated method. These methods were deprecated in jQuery 1.8 but still available to use. But now, they are removed.
- bind(), unbind(), delegate() AND undelegate() are deprecated
jQuery 1.7 introduced .on() method to replace .bind(), .live() and .delegate(). And they encourage developers to use .on() method for better handling of binding the events to dynamic objects. But these methods are still available to use. But with jQuery 3.0, these methods are deprecated with the intention of removing them in future.
