jQuery 3: Exciting Features To Look Upon

One of the esteemed JavaScript library, jQuery has emerged as a blessing for a lot of web developers out there. Since the time of its release in 2006, many of the web developers have started using this wonderful library in their projects to make the life easier.

Earlier in the year 2015, jQuery incepted the first alpha which was a major release that took place after a long time. It is called jQuery 3.0. This launch came up with a quicker and slimmer jQuery.

Let us see what important changes were introduced with this version and how developers can make use of it:

jQuery 3 operates in strict mode

Presently, almost all the major browsers supported by jQuery 3 supports strict mode. This mode makes various changes to the normal JavaScript semantics. It eliminates some JavaScript errors and resolves issues that make it difficult for JavaScript engines to perform optimization. At times, strict mode can be made to operate faster than identical code.

It opens the opportunities to new features in terms of performance.

Introduction of for...of Loops

‘For’ loop introduced in ECMAScript 6 is greatly supported by jQuery3. This offers an uncomplicated way to loop over iterable objects like Arrays, Maps and Sets.

In jQuery, the for...off loop can easily substitute the former $.each(...) syntax. This makes simple to loop via the elements of jQuery collection.

var elems = $('.someclass');

// classic jQuery way
$.each(function(i, elem){
  // work with elem (or "this" object)
});

// prettier ES2015 way
for (let elem of elems) {
  // work with elem
}

This for...of loop will only process in an environment that is compatible with ECMAScript6.

Enhanced security against XSS attacks

jQuery 3.0 adds an extra layer of protection against the Cross-site scripting (XSS) attacks. It allows developers to state dataType: 'script' in the options of $.ajax() and $.get().

XSS attacks are a kind of injection in which malicious scripts are injected into the trusted websites. These attacks occur when a hacker makes use of web application to send malicious code. This code is in the form of browser side script.

Better management of error cases

This latest version of jQuery has better potential to handle error cases. These error cases include incorrect requests that have been ignored till now. jQuery’s 3.0 version now throws up an error. Let us check this out with an example:

Let us take example of “offset” which gets the present coordinates of the first element, in the set of matched elements, relative to the document. So, if you are trying to discover the offset for window with previous versions, you would end up getting results as (top:0, left:0) This means that error is not yet displayed.

Similarly, $("#") now throws an error rather than returning 0-length collection.

Easy show/hide logic

From now on, disconnected elements will not be considered hidden unless they have inline display. This means .show(), .hide() and .toggle() methods will now focus on inline styles rather than computed ones.

SVG support for class manipulation methods

jQuery features that manipulate CSS class names like .addclass() and .hasclass() can be used for manipulating SVG documents also. This means you can find classes with jQuery in SVG and then style classes with CSS.

New API found in animations

jQuery 3 uses the requestAnimationFrame() API for conducting animations in a smoother and faster way. The new API functions only in the browser that supports it. For older versions of the browser, like (IE9), jQuery makes use of previous API as an alternative method to display animations.

Previous IE Workarounds Get Removed

One of the major objectives of the introduction of the latest version is to come up with a faster and sleeker version. This is the reason the previous hacks and workarounds associated with IE9 got removed. So, in order to support IE6-8, you need to keep using the latest 1.12 release. There are times when even 2.x series has no full support for older Internet Explorer versions.

Unwrap() method

Until the introduction of jQuery 3.0, the unwrap method did not take any argument. This method removes the element’s parent. This is completely opposite of the .wrap() method. In this method, the matched elements replace their parents within the DOM structure.

The HTML code used should be:

  

    row1
  
  

    row2
  

Calling the unwrap method on elements with detail class:

$('.detail').unwrap();

This will lead to unwrapping all of these. However, if you wish to unwrap only elements with a parent with row class, you will have to change the selector to match its direct parent. So, now follow this:

$('.row>.detail').unwrap();

jQuery 3 allows you to pass a selector to the method. This will help in checking the parent element. If an element parent does not match the selector, the element will not be unwrapped.

In jQuery 3, it is done in the following ways:

$('.detail').unwrap('.row');

Final Thoughts!

One of the most sensible advancements of version 2, jQuery version 3.0 comes up altogether with a lot of new features. The development of the framework still continues and in the coming years it will continue to re-engineer itself with some modern and updated features. With these features, developers will be able to come up with an ultra modern design and advanced functionality.

Author bio:

Nola Arney is a seasoned jQuery developer employed at HTMLPanda. She enjoys exploring modern jQuery app development technologies and taking new challenges. Apart from being a developer, she has contributed all high quality write-ups. She also loves to share her development expertise with the readers.