One of the most renowned cross-platform JavaScript libraries, jQuery has reigned as a sort of “Java King” for many years running, now. With an easy-to-use UI, the ability to perform AJAX requests, and general ease of use when it comes to creating animations, it’s easy to understand why. Originally launched back in October of 2014, jQuery 3 is now available with much more sophisticated and advanced capabilities. In the following article, Nola Arney of HTMLPanda will go over some of the more enticing features of this advanced framework. Read on >>
The advanced version of the framework jQuery 3 works in strict mode
These days, almost all the browsers compatible with jQuery 3 works even in strict mode. The latest release has been created using this directive.
jQuery 3 has been compiled in the strict mode but if you have a code running in non strict mode, it can happily coexist with jQuery 3’s strict mode.
Introduction of For… Of Loops
jQuery 3 supports for…of statement. This is a new kind of loop introduced in ECMAScript 6. It offers a simple way to loop over objects that are iterable like Arrays, Maps and Sets.
In For…Of loop, $.each(…) syntax can be removed. This makes it simple to loop via the elements of jQuery collection.
This loop would only function in an environment that supports ECMAScript 6. It can only be used if a JavaScript compiler like Babel is used.
Compatibility of Deferred objects with JS Promises
In the latest version of jQuery, i.e. jQuery 3.0 deferred objects have been made fully supported with the new promises /A+ standards. Deferred is a chainable object which makes it easier to create callback queues.
Promises, on the other hand, allows developers to write asynchronous code which is quite close to the synchronous code. Promise as an object is used to deliver a result in future. Promises/A+ is an open standard for interoperable JavaScript promises.
Use of escapeSelector () for escaping strings with special meaning
This innovative method $.escapeSelector () allows a user to escape strings or characters that has a different meaning in CSS selector. This method is viable in cases where a ID or class name contains characters with a special meaning in CSS like dot or semicolon. Though the issue does not occur frequently, however if you get into a problem of this type, you can fix it via:
//consider this is your element
<div id=”abc.def”></div>
//above element can’t be selected like this because the selector is parsed as “an element with id ‘abc’ that also has a class ‘def’.
$(‘#abc.def’)
//with jQuery 3.0 it can be selected like this
$( ‘#’ + $.escapeSelector( ‘abc.def’ ) )
Easy Show/Hide Logic
This is an important element that needs to be remembered. .show(), .hide() and .toggle() elements have been updated in the latest version of jQuery 3.0. In this latest version, these elements will emphasize more on inline styles rather than computed styles. With this feature, they will be able to better respect stylesheet changes.
Deprecation of Bind(), Unbind(), Delegate() And Undelegate()
Earlier on() method was concepted to offer a unified interface. This method basically functions by replacing jQuery’s bind(), delegate () and live () methods. Simultaneously jQuery also launched the off() method. This function offers a unified interface and replaces the unbind(), undelegated() and die().
jQuery 3 now deprecates all these methods with the intent of removing them in the advanced or upcoming versions like jQuery 4. However, when using on() and off() methods, you do not have to be worried about the future releases.
Massive improvements made in custom selectors like :visible
Massive performance improvements have been made with the usage of selectors like :visible
This can be done internally via caching.
WRAPALL()
The latest version of jQuery resolves any kind of bug in the wrapALL() method which takes place when passing a function to it. Other than this, this function is called only once in jQuery 3.
Use of modern API in animations
The use of requestAnimationFrame() API is done for making use of animations in an uninterrupted manner. The operation is quite smooth and quick. This API works only in the browser it is compatible with. In the earlier versions like IE9, jQuery makes use of previous API as the only source to display animations.
Improved security against cross site scripting attacks
With the help of jQuery 3, developers will be able to construct websites which are featured with extra security. With this functionality, dataType “script” can be used in place of $.ajax() and $.get().
Ending Notes
jQuery 3 brings ample number of advanced features to the library. It has made its esteemed place in the realm of modern web development owing to an advanced set of features. This post covers the major changes that the upgraded version will feature. So, it is the right time to implement the advanced version of the framework for designing a modern and updated website for your business.
Author Bio
Nola Arney is a seasoned jQuery developer at HTMLPanda, a PSD To HTML Company. She enjoys exploring modern jQuery Mobile App Development technologies and taking on new challenges. Apart from being a developer, she has contributed high quality write-ups and tutorials to many of the top tech blogs across the internet. When it comes down to it, Nola really just has a love for sharing her development expertise with other industry experts, technology professionals and tech readers alike.
