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 somefunctions 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.

17. Hideand 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’ whichexcludes 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 usingCSS.

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:

<divclass="container"> <div>Thecaris </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