jQuery Core 3.0 Upgraded Features

Most awaited update in jQuery, jQuery 3.0 finally released in June 2016. Since October 2014, the expert brain worked persistently for this major update (jQuery 3.0 Core). The wait and efforts of the developers indeed resulted fruitful. jQuery Core 3.0 is designed by keeping in mind the faster, lighter and slimmer front end processes along with the minimal back end compatibility.

jQuery mainly came up with the breaking changes for few codes which include removal of deprecated. public APIs, modification of documented or undocumented behavior of existing APIs for particular inputs and modification or removal of undocumented API. Such changes are beneficial for both jQuery developers and end-users.

Let’s have a quick look on some upgraded features of jQuery Core 3.0:

Using camelCase in data () method.

Earlier, when the method name obtained was ‘–‘ (hyphen) separated, but now if follows the rule of camelCase. This enhanced the convenience of the developers to deal with elements.

In earlier version we obtained the below output:

{my-property: "Hello John"}

But in jQuery 3.0, we get myProperty in camelCase Structure

{my-property: "Hello John"}

Use of .escapeSelector () to select items.

.escapeSelector () is integrated to resolve the major issue of selection of particular ID or Class from the container. It can be called as a method used for advanced and precise selection.

For example:

To select an element having an ID = ‘appetizer.download’, in previous versions developers need to write that $ ( “#appetizer\\.download”), but in latest version we have a specific function to select name –  $ ( “#” + $ .escapeSelector ( “appetizer.download “))

Older Internet Explorers (IE6-8) not supported.

In jQuery Core 3.0, the hacks and workarounds connected to IE6-8 are removed for the fast and sleek performance. This version only supports the Internet Explorers of IE9 and higher versions. So, for developers who need the support of IE6-8 need to continue using latest 1.12.

Extra Security Layer.

jQuery development in latest version adds up an extra protection layer against Cross-Site Scripting (XSS) attacks. For this, developer need to declare the methods in the setting itself before executing cross-domain script requests.

Thereby, any modifications does not harm the $.getScript() method, because the dataType: “script” option is set explicitly.

Some methods discontinued.

In this version some methods are discontinued while some are removed. The methods can be used in previous versions only. Though few of them still work in version 3 of jQuery but their maintenance is discontinued. It is assumed that in jQuery 4 the new methods will replace them.

• .load ()
• .unload ()
• .error()
• .context ()
• .support ()
• .selector switch()
• .bind () – discontinued
• .delegate () – discontinued
• .live () – discontinued
• .off () – discontinued
• .unbind () – discontinued
• .undelegated () – discontinued
• .die () – discontinued
• .bind () – discontinued
• .delegate () – discontinued
• .unbind () – discontinued
• .undelegate () – discontinued
• .swap ()
• .buildFragmentj ()
• .domManip ()
• .JSON.parse () – discontinued , instead use .parseJSON ()
• .on (“ready”, fn) – gave compatibility problems, instead use: $ (fn)
• .event.pageX
• .event.pageY
• .event.props
• .event.fixHooks

SVG Class Manipulation.

Although, jQuery 3 fully does not support SVG (Scalable Vector Graphics), but it can manipulate some CSS based class names such as .addClass() and .hasClass().

For example

//addClass()
 $ ("#svgId").addClass("listing details");
 
//hasClass()
 $ ("#svgId").hasClass("details");

Upgraded Show/Hide/Toggle Logic.

To boost compatibility and responsiveness of design, jQuery code for showing and hiding elements has been update in this version of jQuery. The .show(), .hide(), and .toggle() method focuses only on inline styles and not on computed styles.

In the new update the display values of style sheets is taken care of which clearly suggests that CSS rules can be dynamically changed based on events.

The disconnected elements will not be considered hidden until they have inline display: none; and therefore .toggle () will not differentiate them from connected elements.

Deferred Objects Are Compatible.

In this version, deferred objects are made compatible with new Promises/A+ standards. As deferred objects are chainable objects, they help to create callback queues. Promises let developers write asynchronous code that is almost alike synchronous code.

In earlier version code was executed synchronously, the execution of the code stops once the error is found. It does not continue even though the error handling code is mentioned in later part. But in latest version execution handled asynchronously, so if any error handling part is mentioned in further code, it will be continue to execute even after error throws.

Final Verdict,

jQuery 3.0 incorporates the bug fix and exception and error handling to improve the performance. Though jQuery 3.0 runs in strict mode, the older codes need not to be changed as both can easily coexist.