jQuery is the world’s most popular JavaScript library. The jQuery team has released the full version of jQuery 3.0 on 9th of June’2016. In this version, some interesting changes included such as ES6 promises, requestAnimationFrame API etc. In this post, I’m going to highlight the most important changes made in jQuery 3.0




Download

You can download Jquery 3.0 from here also you can directly use from CDN.

https://code.jquery.com/jquery-3.0.0.js

Browser Support

All modern browsers (Except IE6 to IE8)

  • Internet Explorer: 9+
  • Chrome, Edge, Firefox, Safari: Current and Current – 1
  • Opera: Current
  • Safari Mobile iOS: 7+
  • Android 4.0+

Light Version

jQuery team announced lightweighted (~6kb) or slim version of jQuery without ajax, effect and currently deprecated code modules. It excludes method like $.ajax(), $.get(), $.post(), $.ajaxSetup(), .load(), .ajaxStart(), .animate(), .slideUp(), .hide(“slow”), .load, .unload, .error etc.

https://code.jquery.com/jquery-3.0.0.slim.js

https://code.jquery.com/jquery-3.0.0.slim.min.js

requestAnimationFrame() for Animation

requestAnimationFrame helps to perform animation with less CPU usage. All modern browsers including IE supports requestAnimationFrame API. So this is a massive performance improvement.

ES6 promises

jQuery.Deferred objects have been updated by ES2015/ES6 Promises.



Image Source

Use the new then and catch methods for Promises/A+ compliance. then() used when the Deferred object is resolved, rejected, or still in pending. Instead of then(null, fn) you can use catch() method.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
var deferred = $.Deferred();
deferred.then(null, function(value) {
  console.log("rejection callback 1", value);
  return "value2";
})
.then(function(value) {
  console.log("success callback 2", value);
  throw new Error("exception value");
}, function(value) {
  console.log("rejection callback 2", value);
})
.catch(function(value) {
  console.log("rejection callback 3", value);
});
deferred.reject();

New signature for jQuery.get() and jQuery.post()

Now you can set settings parameters for jQuery.get() orjQuery.post() like jQuery.ajax(). Check full settings parameters list here

1
2
3
4
5
6
var settings = {
...
}
 
$.get(settings)
$.post(settings)

Introduction for…of Loop

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
var elems = $(".someclass");
  
//Class javascript way
for(var i = 0; i < elems.length; i++) {
...
}
  
// Classic jQuery way
$.each(function(i, elem) {
...
});
  
// ES6 way in jQuery 3.0
for ( let elem of elems ) {
...
}
 
// ES5 way in jQuery 3.0
 
for (var elem of elems) {
...
}

.data() names containing dashes (-)

1
2
3
4
5
6
7
var elems = $(".someclass");
 
elems.data({
   'some-property': 'coderexample'
});
 
console.log(elems.data());

Previously it returns {some-property: “coderexample”}

Now in jQuery 3 it returns {someProperty: “coderexample”}

Performance Improvement of some jQuery custom selectors

Some selectors like :visible and :hidden has been re-written to improve the performance.

Deprecation of load(), unload(), error(), bind(), unbind(), delegate() and undelegate()

on() method is using since v1.8 to replace bind(), delegate(), and live() methods. Also you can see off() method is replacing unbind(), undelegated() like methods.

RIP load(), unload(), error()

load(), unload(), error() deprecated since jQuery 1.8, those are no more in the this version.

Deprecate jQuery.parseJSON

No need to use jQuery.parseJSON as we already have native JSON.parse.

SVG documents support class operations

No jQuery versions (including jQuery 3) fully supports SVG documents. There are some manipulate class names methods such as addClass() and hasClass() support SVG.

Improved .show(), .hide(), and .toggle()

jQuery will manipulate these methods according to the stylesheet. Full combination of display state and show/hide actions can be found here

New method jQuery.escapeSelector()

Suppose you have an id “myid.abc”
<p id=”myid.abc”>Hello</p>. As per jquery css selector rule you cant select this id as it will select like “myid” id that also has a class ‘abc’.
So instead of $( “#myid.abc” ) you can use $( “#” + $.escapeSelector( “myid.abc” ) )

jQuery 3.0 runs in Strict Mode

Now you don’t have to explicitly declare “use strict” in ES5 way to enable strict mode.

Hope this version of jQuery helps write less, do more with good performance. Meanwhile, Jquery team released jQuery Migrate Plugin to migrate your current codebase. There are so many breaking, Feature and Deprecate changes taken place in this version, the full list can be found here .