What’s New in jQuery 3 – 10 Coolest Features

jQuery 3.0, a new vital recover of jQuery finally got released. The web developer village waited for this critical step given Oct 2014, when a jQuery group began to work on a new vital chronicle adult until now, Jun 2016, when a final release is out.

The release note promises a slimmer and faster jQuery, with backwards compatibility in mind. In this post, we have a demeanour during some of a new facilities of jQuery 3.0 to give we an overview about how it changes a JavaScript landscape.

Where to Start

If we wish to download jQuery 3.0 to examination for yourself, go right to a download page. It’s also value carrying a demeanour during a Upgrade Guide, or a source code.

If we wish to exam how your existent plan works with jQuery 3.0, we can give a try to a jQuery Migrate plugin that identifies harmony issues in your code. You can also take a demeanour into future milestones.

This essay doesn’t cover all a new facilities of jQuery 3.0, usually a some-more engaging ones: softened formula quality, formation of new ECMAScript 6 features, a new API for animations, a new process for evading strings, increasing SVG support, softened async callbacks, softened harmony with manageable sites, and increasing security.

1. Old IE Workarounds Got Removed

One of a categorical goals of a new vital recover was to make it faster and sleeker, therefore a aged hacks and workarounds associated to IE9- got removed. This means if we wish or need to support IE6-8, you’ll have to keep regulating a latest 1.12 release, as even a 2.x array doesn’t have full support for comparison Internet Explorers (IE9-). Check out a records on browser support in a docs.

jQuery Browser Support
jQuery Docs: Browser Support

Note that there are also many deprecated features in jQuery 3. A large accountability of a Upgrade Guide is that a deprecated facilities – as of Jun 2016 – aren’t grouped, so if you’re meddlesome in them, you’ll need to demeanour them adult with your browser’s hunt apparatus (Ctrl+F).

jQuery 3 Deprecated Features
jQuery Upgrade Guide

2. jQuery 3.0 Runs in Strict Mode

As many browsers upheld by jQuery 3 support strict mode, a new vital recover have been built with this gauge in mind.

Although jQuery 3 has been created in despotic mode, it’s critical to know that your formula is not compulsory to run in despotic mode, so we don’t need to rewrite your existent jQuery formula if we wish to quit to jQuery 3. Strict non-strict mode JavaScript can happily coexist.

There’s one exception: some versions of ASP.NET that – given of a despotic mode – are not concordant with jQuery 3. If you’re concerned with ASP.NET, we can have a demeanour during a sum here in a docs.

3. For…of Loops is Introduced

jQuery 3 supports a for…of statement, a new kind of for loop, introduced in ECMAScript 6. It gives a some-more candid approach to loop over iterable objects, such as Arrays, Maps, and Sets.

In jQuery, a for...of loop can reinstate a former $.each(...) syntax, and can make it easier to loop by a elements of a jQuery collection.

For...of Loops in jQuery 3
Code Example from a Upgrade Guide

Note that a for...of loop will only work possibly in an sourroundings that supports ECMAScript 6, or if we use a JavaScript compiler such as Babel.

4. Animations Got a New API

jQuery 3 uses a requestAnimationFrame() API for behaving animations, creation animations run smoother and faster. The new API is usually used in browsers that support it; for comparison browsers (i.e. IE9) jQuery uses a prior API as a fallback process to arrangement animations.

RequestAnimationFrame has been out for a while, if we are meddlesome in what it knows or given we should use it, CSS Tricks has a good post about it.

requestAnimationFrame Browser Support

5. New Method for Escaping Strings with Special Meaning

The new jQuery.escapeSelector() process allows we to shun strings or characters that mean something else in CSS in sequence to be means to use it in a jQuery-selector; though evading a JavaScript interpreter can't scrupulously know it.

The docs helps us know this process softened with a following example:

For example, if an component on a page has an id of “abc.def” it can't be comparison with $( "#abc.def" ) given a selector is parsed as “an component with id ‘abc’ that also has a category ‘def’. However, it can be comparison with $( "#" + $.escapeSelector( "abc.def" ) ).”

I’m not certain how frequently such a box happens, though if we strike into a problem like this, now we have an easy approach to fast repair it.

6. Class Manipulation Methods Support SVG

Unfortunately, jQuery 3 still doesn’t entirely support SVG, though a jQuery methods that manipulate CSS category names, such as .addClass() and .hasClass(), now can be used to target SVG documents as well. This means we can cgange (add, remove, toggle) or find classes with jQuery in Scalable Vector Graphics, afterwards character a classes with CSS.

7. Deferred Objects Are Now Compatible with JS Promises

JavaScript Promises – objects used for asynchronous computations – have been standardised in ECMAScript 6; their poise and facilities are specified in a Promises/A+ standards.

In jQuery 3, Deferred objects have been done concordant with a new Promises/A+ standards. Deferreds are chainable objects that make it probable to create callback queues.

The new underline changes how asynchronous callback functions are executed; Promises concede developers to write asynchronous formula that is closer in proof to synchronous code.

See code examples from a Upgrade Guide or, have a demeanour during this good Scotch.io tutorial about a basis of JavaScript Promises.

8. jQuery.when() Interprets Multi-Arguments Differently

The $.when() process provides a approach to execute callback functions. It’s partial of jQuery given chronicle 1.5. It’s a stretchable method; it also works with 0 arguments, and it can accept one or some-more objects as arguments as well.

jQuery 3 changes a approach how arguments of $.when() are interpreted when they enclose a $.then() method with that we can pass additional callbacks as arguments to a $.when() method.

jQuery.when( method)

In jQuery 3, if we supplement an submit evidence with a then() process to $.when(), a evidence will be interpreted as a Promise-compatible “thenable”.

This means that a $.when process will be means to accept a roomer operation of inputs, such as local ES6 Promises and Bluebird Promises, that creates it probable to write some-more worldly asynchronous callbacks.

9. New Show/Hide Logic

In sequence to boost compatibility with manageable design, a formula associated to showing and stealing elements has been updated in jQuery 3.

From now on, a .show(), .hide(), and .toggle() methods will concentration on inline styles, instead of computed styles, this approach they will better honour stylesheet changes.

The new formula respects a display values of stylesheets whenever it’s possible, that means that CSS manners can dynamically change on events such as device reorientation and window resize.

The docs asserts that a many critical outcome will be:

“As a result, away elements are no longer deliberate hidden unless they have inline display: none;, and therefore .toggle() will no longer compute them from connected elements as of jQuery 3.0.”

If we wish to softened know a results of a new show/hide logic, here is an engaging Github discussion about it.

jQuery developers also published a Google Docs table about how a new poise will work in opposite use cases.

10. Extra Protection Against XSS Attacks

jQuery 3 combined an additional confidence layer opposite Cross-Site Scripting (XSS) attacks by requiring developers to mention dataType: "script" in a options of a $.ajax() and a $.get() methods.

In other words, if we wish to govern cross-domain book requests, we must announce this in a settings of these methods.

XSS definition
Slideshare by Andrew Kerr: Cross-site Scripting (slide 17)

According to a docs, a new requirement is useful when a “remote site delivers non-script content though after decides to serve a book that has antagonistic intent“. The change doesn’t impact a $.getScript() method, as it sets a dataType: "script" choice explicitly.

Add Comment