What’s new in jQuery 3.0 & jQuery Compat 3.0

jQuery users and fans don’t always have major releases to look forward to, but that just changed with last week’s releases of jQuery 3.0 and jQuery Compat 3.0. The former supports today’s browsers and IE9-and-beyond environments while the latter supports IE8. (Both versions support Yandex. Browser, which was released in 2012.)

You can get your files from the jQuery CDN or opt to link to them directly at: https://code.jquery.com/jquery-3.0.0-alpha1.js and https://code.jquery.com/jquery-compat-3.0.0-alpha1.js

Without further ado, let’s look at the main changes these major releases offer:

Simpler .show() and .hide() menus

The biggest change to remember is: Don’t utilize a stylesheet if you want to set the default of display: none and then try to use .show () to make it viewable. Want to hide an element by default instead? Simply incorporate a class name such as “hidden” to the element. Then, define said class as display: none in your stylesheet.

Special situation with .data() names

jQuery has updated its .dat () implementation to be closer to the HTML5 dataset specification. This means that all of the keys are converted from kebab-case to camelCase, regardless of the access approach. Digits also won’t be a part of the conversion. You’ll notice these changes primarily when trying to retrieve all data by calling .data () without arguments, or as you try to access said data with a converted key as opposed to the original.

jQuery.Deferred is promises/A+ compatible

jQuery.Deferred objects are updated to be compatible with Promises/A+ and ES2015, confirmed with the Promises/A+ compliance test suite. This includes the appearance of a .catch () method and some significant changes to the .then () method.

On another note, jQuery.when was updated as well. It can now accept all “thenable” objects, and this includes native Promise objects.

Removed special-case deferred methods in .ajax

The jqXHR object is a Promise, yet it also features additional methods such as .abort (), so that it’s now possible for you to stop a request after you’ve made it. Users are increasingly accepting the Promise pattern asynchronous work such as AJAX. However, it’s a bad idea to have your special cases for the Promise returned by jQuery.ajax.

Error cases will not be silently ignored

In the past, error cases had a tendency to be silently ignored. For instance, if you ever asked or wondered what the offset of a window was, you were likely to get a response…just so jQuery could return something instead of nothing. This is addressed for this new release because users can now expect jQuery to throw them error cases when asking such extreme questions.

.width (), .height (), .css (“width”) and .css (“height”) return decimal values

Before, jQuery used to round any values as it retrieved both width and height. However, some browsers have been known to return sub-pixel values; Firefox and IE come to mind. This is a good feature, as sometimes, users do require this exactness when they’re relying on values like these for a layout. jQuery doesn’t expect this particular change to have much impact on users’ code.

Deprecated event aliases are deleted

.load, .unload and .error have all been deleted. At any rate, they haven’t been around since jQuery 1.8, so this change makes a world of sense. Instead, you can now use .on () to register any listeners.

.swap, .buildFragment and .domManip aren’t accessible anymore

These particular methods were ever only meant for internal use, hence never documented. Finally, jQuery has cleared up the confusion by making them private.

Animations rely on requestAnimationFrame

When platforms support the requestAnimationFrame API, jQuery’s now going to use that API as it performs animations. As a result, animations are expected to utilize less CPU time and run smoother, too. Bonus: This will save batteries on mobile devices.

This isn’t jQuery’s first brush with requestAnimationFrame. It was attempted a few years ago, but, unfortunately, there were huge issues with compatibility and existing code that made jQuery pull out.

The .unwrap (selector)

Prior to jQuery 3.0, the .unwrap() method failed to take any arguments. Now, the selector parameter provides a means to be exact about which wrappers to take away.

Great speed increases for some jQuery custom selectors

If users now utilize custom selectors like :visible many times in the same document, it will save them from having to do a whole lot of work. This specific case is as much as 17 times quicker in this new version.

Still, selectors such as :visible and :hidden can be expensive since they rely on the browser to tell if elements are really displaying on a page. In other words, in the worst-case scenario, that could necessitate a total recalculation of page layouts and CSS styles.

jQuery encourages users to experiment with the new versions

With the releases of these two, new versions of jQuery, users can expect a definite improvement from earlier versions. Still, every new version always has the tendency to be affected by issues that jQuery can’t thoroughly catch before a release. That’s why jQuery encourages its users to try out these new versions, identify any potential compatibility issues, and then provide feedback to ensure a smoother experience.

Marc’s a copywriter who covers design news for Web Designer Depot. Find out more about him at marcschenkercopywriter.com. More articles by Marc Schenker
Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress