It’s been more than 10 years since jQuery started rocking the web and it has stuck around for good reasons. Back in July 2015, jQuery announced the first alpha of version 3.0 – a major update after a long time. They have been working on this for almost 2 years. The new version promises a slimmer and faster jQuery with backwards compatibility in mind.
The current version 3.1.1 fixes a lot of bugs, adds new methods, removes some functions and changes the behavior of a few functions. Let’s take a loot at what new features they have added and how to use them.
Table of Contents
17. Hide and Show Methods
In order to increase the compatibility with responsive design, jQuery 3 has been enhanced for hiding many elements. A test performed on 54 samples shows that the new version is 2 percent faster than than the previous one.
In addition to this, the .hide(), .show(), and .toggle() methods will focus on inline styles instead of computed styles. This way they will better respect display values of stylesheets whenever possible, that means CSS rules can dynamically change upon events such as window resize or device reorientation.
<script>
$( "#showr" ).click(function() {
$( "div" ).first().show( "fast", function showNext() {
$( this ).next( "div" ).show( "fast", showNext );
});
});
$( "#hidr" ).click(function() {
$( "div" ).hide( 1000 );
});
</script>
Read: 28 Amazing CSS3 Effects To Give Your Website a Modern Look
16. WrapAll() and Unwrap() Functions
In jQuery 2, the .wrapAll() method behaved like .wrap() when a function was passed. This has been changed now – .wrapAll(function) calls its function once, using the string result of the function call to wrap the entire collection.
jQuery( "div" ).wrapAll(function( /* No index argument, since the function would be executed only once */ ) {
// context is equal to the first found element
return "<h4></h4>";
});
In jQuery 3, there is an optional selector parameter to unwarp() method. The new signature of the method is:
unwrap([selector])
It allows you to pass a string that contains a selector expression to match within the parent element. If there is a match, the matching child elements are unwrapped, otherwise they won’t.
15. Scrollbar Width/Height Taken Into Account
In jQuery 2, calls to $(window).width() return the ‘content width’ which excludes any scrollbar that the browser has added if the content exceeds the dimensions of the element. In order to provide a measure that is equivalent to the CSS media query, the $(window).outerWidth() and $(window).outerHeight() now returns the width and height including the scrollbar width and height. This is equivalent to the DOM property window.innerWidth.
14. Behavior of data()
In jQuery 3, the behavior of data() method has been altered slightly to align the method to the Dataset API specifications. It will now transform all the properties’ keys to be camel case.
var $elem = $('#container');
$elem.data({
'custom-property': 'Hello World'
});
console.log($elem.data());
If you are using an old version, you will get the following result on the console:
{custom-property: "Hello World"}
In jQuery 3, you will get:
{customProperty: "Hello World"}
As you can see the name of the property is in camel-case with no dash while in the older versions it remained lowercase and retained the dash.
13. Class Operations Support SVG
jQuery still doesn’t completely support SVG, but the methods that manipulate CSS class names like .hasClass() or .addClass(), can be used to target SVG documents. You can alter (add, toggle, remove) or find classes with jQuery in SVG, then style the classes using CSS.
12. Visible and Hidden Filters
jQuery 3 modifies the meaning of the :visible and :hidden filters. It considers elements :visible if they have any layout boxes, including those of zero width and height. For instance, br element and inline elements with no content will be selected by the :visible filter.
If you have the following HTML page:
<section></section> <div></div> <br />
and you run the statement:
console.log($('body :visible').length);
In jQuery 1 and 2, you will get 0 as a result, but in this version, the result will be 3.
11. No More Rounding for Width and Height
jQuery now returns value of .width(), and .height() in floating numbers instead of integers, whenever the browser supports it. For users looking for subpixel precision for designing webpages, this may serve as good news.
For instance, if you have 3 elements with a width of a third (33.3333333%) inside of a container element that has a width of 100px:
<div class="container"> <div>The car is </div> <div>black</div> <div>Audi</div> </div>
If you try to obtain the width of the child elements:
$('.container div').width();
You will get the value 33.3333333, the more accurate result.
10. Extra Security Layer
An extra security layer has been integrated against Cross-Site Scripting (XSS) attacks. It requires developers to specify dataType:”script” in the options of the $.ajax() and the $.get() methods. This prevents the possibility of an attack where the remote site delivers non-script content but further decides to serve a malicious script. Since the jQuery.getScript() explicitly sets dataType:”script”, it is unaffected by this change.
$.ajax({
accepts: {
mynewcustomtype: 'application/abc-some-custom-type'
},
// how to deserialize a `mynewcustomtype`
converters: {
'text mynewcustomtype': function(result) {
// do things
return newresult;
}
},
// Expect a `mynewcustomtype` back from server
dataType: 'mynewcustomtype'
});
9. The Invalid Hash Mark
jQuery 3 throws a syntax error if a selector string consists of nothing but a hash-mark, such as jQuery(“#”) and .find(“#”). In the older version, $(“#”) returned an empty collection and .find(“#”) threw an error.
8. New Method To Escape String
The new jQuery.escapeSelector() method allows you to escape any string or character that has a special meaning in a CSS selector. It is useful in cases where an ID or a class name characters with a special meaning in CSS, such as semicolon or dot.
For instance, if an element on the page has an id of “abc.xyz”, it can’t be selected with $(“abc.xyz”) because the selector is parsed as an element with id ‘abc’, which also has a class ‘xyz’. However, it can be selected with new method $(“#” + $.escapeSelector(“abc.xyz”)).
7. jQuery.when() Arguments
In jQuery 3, if you add an input argument with a then() method to $.when(), it will be interpreted as a Promise-compatible “thenable”. This allows a much wider range of inputs, including Bluebird promises and ES6 promises, that makes it possible to write more sophisticated asynchronous callbacks.
$.when($.ajax("test.apx")).then(function(data,textStatus,jqHXR) {
alert (jqHXR.status); //alerts 200
});
Multi-argument jQuery.when calls behave like Promise.all, aggregating fulfillment values into a fulfillment array, or alternatively rejecting with the first rejection value. The single and zero argument calls behave like Promise.resolve, returning a Deferred that resolves identically to thenable, or fulfills with its non-Promise input.
Moreover, the jQuery.when() method no longer passes along progress notifications from input Deferreds to the output Deferred.
6. Hash In A URL Is Preserved
The jQuery.ajax() method now sends the full URL to the transport (script, xhr, jsonp, or custom transport). It no longer strips off the hash in the URL if it is there. However, you need to strip it off manually before sending the request if the server at the other end of the connection can’t deal with a hash on a URL.
5. Deferred Objects Are Compatible with JS promises
Deferreds are chainable objects that make it possible to create callback queues. jQuery 3 has made deferred objects compatible with the new Promises/A+ standards. There is a key change in .then() method. Any exception thrown within a .then() callback is now caught and converted into a rejection value. The non thenable value returned from a rejection handler turns into a fulfillment value.
The old-style Deferred method:
$.ajax("/stat")
.done(function(data) {
whoops();
// console displays: "whoops is not a function"
// no further execution
})
.fail(function(arg) {
// doesn't execute since the was not caught
});
The new standard Promises/A+ behavior
$.ajax("/stat")
.then(function(data) {
whoops();
// console displays "jQuery.Deferred exception: whoops is not a function"
// no further execution
})
.catch(function(arg) {
// arg is an Error object - "whoops is not a function"
});
4. New API for Animations
jQuery 3 uses the requestAnimationFrame() API for executing animations. This new API runs animation smoother and faster, consuming less CPU time. It is only used in browsers that support it. For older browser like Internet Explorer 9, jQuery uses its older API as a fallback method.
Read: 24 CSS3 and HTML5 Animation Tools for Designers
3. jQuery 3 Runs In Strict Mode
Most of the browsers that support jQuery 3 use strict mode, and the new version has been built with this directive in mind. Although jQuery 3 has been written in strict mode, your code is not required to run in strict mode, so you don’t need to rewrite the existing code if you are going to migrate to current version. However, there is one exception – some version of ASP.net are not compatible because of strict mode.
If you are running ASP.net 4.0 that uses arguments.caller.callee to attempt tracing through call stacks in doPostBack() method, you better keep using jQuery 2.x or earlier versions. Nowadays browsers support stack traces via error.stack, so it is not necessary to examine arguments.caller.callee.
2. New Signature for Get and Post Method
jQuery has a new signature for the $.get() and $.post() utility functions to align them to $.ajax(). The new signature is settings parameters.
$.get([settings]) $.post([settings])
The object settings can have many properties. It’s the same object that you can provide to $.ajax(). The only difference when passing the object to $.get() and $.post() as opposed to $.ajax() is that the method property is always ignored, because $.get() and $.post() have a preset HTTP method to perform the Ajax request (GET and POST).
Consider a code:
$.get({
url: 'https://www.rankred.com',
method: 'POST' // property is ignored
});
Is spite of method property, the statement won’t send a POST request but a GET request.
1. For…of Loop
jQuery 3 supports the for…of loop introduced in ECMAScript 6 specification. It allows you to loop over iterable objects like Map, Set, Array, and so on. When using this loop, the value obtained is a DOM element of a jQuery collection, one at a time.
Read: 26 Modern jQuery Plugins To Make Your Website Better
The for…of loop can be used to replace the former $.each( ) syntax, and make it easier to loop through the elements of a jQuery collection. Let’s assume you want to assign a name to each input element of a page.
The jQuery 2 code would look like…
var $inputs = $('input');
for(var j = 0; j < $inputs.length; j++) {
$inputs[j].id = 'input - ' + j;
}
The jQuery 3 code will be similar to…
var $inputs = $('input');
var j = 0;
for(var input of $inputs) {
input.id = 'input - ' + j++;
}
