javascript – What's new and what's new in jQuery 3?

Question:

jQuery is one of the most popular and used Javascript libraries due to its speed, simplicity and the wide range of possibilities it offers.

It allows the manipulation of events, animations, dynamic content loading, etc. with a few lines of code.

It also works in the most used browsers such as IE, Safari, Mozilla, Chrome.

Version 3 began preparation in October 2014 and was released in June 2016.

What are the main new features of jQuery 3?

What are the main advantages of this library with respect to versions 1 and 2?

What to do to start using it?

Note: Although it could be considered a very broad question, I find the existence of a gender question useful for several reasons, including.

  1. We are talking about a new version of the library, so it would be important to have at least its basic information at hand.

  2. jQuery is used by millions of users, many of them Spanish-speaking and at least for now, all that information will exist basically in English.

  3. jQuery 3 represents important changes from its previous versions.

Answer:

URL to the official documentation:

https://jquery.com/upgrade-guide/3.0/#summary-of-important-changes

It is the summary of changes where all your questions are explained. It has actual code samples and details of what functions have been added or modified as well as why.

Summary of the most important changes to jQuery in its version 3.0.

There are three types of changes depending on their impact on the jquery code of who uses an older version:

  • Breaking change is a large / extensive change in some part of the code that causes code implementations created with previous versions to fail. Either because it changes the number of parameters, method names etc.
  • Feature are new functionalities that shouldn't affect your existing code (or at least in most cases). For example new method or a new extra property.
  • Deprecated or deprecated / invalid, means that the feature in question can still be used and is present in the version but its use is discouraged since it is planned to be eliminated in future versions. Continued use in the future could cause a code break / Breaking-Change to your application.

Once this is understood, we must know which are the most important methods that undergo changes.

  1. Ajax, presents 3 Breaking-Changes and a Feature.

    • The methods and properties of the Ajax object options, jqXHR.success (), jqXHR.error (), and jqXHR.complete () will be removed from this version. Instead you can use the following jqXHR.done () , jqXHR.fail (), and jqXHR.always ().
    • The cross-domain must be declared when we perform cross-domain scripting requests with jQuery.ajax () or jQuery.get () to avoid deliberate attacks from the response server. To do this, the dataType: "script" property must be set. It does not affect the jQuery.getScript () method, which makes it explicit.
    • The url hash is kept in the queries by ajax.
    • A settings object is added to jQuery.get () and jQuery.post () as a property that includes all the properties that Jquery.Ajax () has in its declaration, Jquery.Ajax ({…})

  2. Attributes, it presents two Breaking-Changes, a Feature and a Deprecate.

    • When the removeAttr () method is used for attributes that contain a Boolean value, the .prop () method created for it must be used. For example checked, selected or readonly applying the value to false.
    • A select tag with the multiple attribute will return an empty array as long as nothing is selected. Before this version it returned null.
    • SVG documents are supported in class methods.
    • The possibility of calling .toggleClass () without parameters or thus .toggleClass (Boolean) will be eliminated in the future.

  3. Callbacks, or anonymous callbacks, feature 1 Feature.

    • If we pass a "Callback" function to an object method and just add the call to the .lock () method, having previously called the .fire () method, we will stop executing the callback function.

  4. Core, features 7 Breaking-Changes, 2 Features and 3 Deprecates.

    • Now Jquery 3.0 runs in strict mode.
    • Now the document-ready handlers are asynchronous.

Example:

$(function(){
  //document ready
});

.

  • isNumeric and toString will only work with primitive numbers and strings that can be converted to finite numbers.
    • The .context, .size (), and .selector properties were deprecated and are removed.
    • Core methods that were never documented are removed as they were intended to be private jQuery.swap, jQuery.buildFragment, jQuery.domManip
    • The following methods will return undefined by default if they have no value instead of null .width (), .height (), .innerWidth (), .innerHeight (), .outerWidth (), and .outerHeight (), .offsetTop () and .offsetLeft ()
    • Collections can be iterated with the new ES2015 syntax.

Example:

var elems = $(".someclass");

// forma clasica de jquery
$.each(function(i, elem) {
// trabajamos con cada elemento o  "this" un objeto
});

// forma mas elegante de ES2015
for ( let elem of elems ) {
// trabajamos con el elemento
}

.

  • Jquery.ready officially supports promises, that is, you can use the method .then (function () {}). Catch (function () {})

Example:

$.when( $.ready, $.getScript("optional.js") ).then(function() {
    // the document is ready and optional.js has loaded/run
}).catch( function() {
    // an error occurred
});

.

  • The jQuery.unique () method is renamed jQuery.uniqueSort ()

    • Use of jQuery.parseJSON () is deprecated and discouraged because native use of JSON.parse () is supported
    • As of jQuery 3.0, the recommended way to add a document ready is as follows

Example:

$(function(){

});

.

  1. Data, presents a Breaking-Change.

    • As of jQuery 3.0, all data names are stored in the jQuery internal data object in camelCase.

Example:

$('#miElemento').data('infoPrecio',{..});
//en vez de 
$('#miElemento').data('info-Precio',{..});

  1. Deferred or deferred methods, presents 3 Breaking-Changes

    • The deferred methods are updated to make them compatible with the a + and ES6 standards. It is advisable to use the .then () and .catch () in order not to lose exceptions in very complicated processes. Methods such as .done (), .fail (), and .pipe () retain their previous behavior and therefore are not A + standard-compliant promises.

Example:

$.ajax("/status")
.then(function(data) { // antes usabamos .done() 
  whoops();
  // la consola muestra "jQuery.Deferred exception: whoops no es una funcion"
  // nada del código siguiente se ejecuta  
 })
 .catch(function(arg) { //antes usabamos .fail()
  /* Este código se ejecuta tras el error anterior
     arg es un objeto de Error con el mensaje de error anterior
    con done() Este código no se ejecuta ya que la excepción no seria detectada */
 });

  1. Dimensions, presents 2 Breaking-Changes.

    • The .width (), .height (), .css ("width"), and .css ("height") methods can return non-integer values ​​to be more precise.
    • The .outerWidth () or .outerHeight () methods for window include the width and height of the scroll bar.

  2. Effects, presents 1 Braking-Change, 1 Feature and 2 Deprecates

    • Element visibility methods have been revised to make them more loyal to style sheets.
    • Animations now use requestAnimationFrame
    • The .animate () method has been rewritten leaving only one parameter

  3. Event features 5 Break-Changes and a Deprecate

    • Although the .bind (), .unbind (), .delegate () and .undelegate () methods are still executable, they are deprecated and their use is discouraged. Instead, use on () and off ().

    • Eliminate the use of .on ("ready", fn), change to $ (fn).

  4. Selectors

    • If jQuery ("#") and .find ("#") are used now it will give an error, before it did not
    • New method jQuery.escapeSelector (), taking a string as a parameter, it escapes all those characters that are understood as selection operators. This will allow to be able to select an element with an id 'myElement.child'.

Example:

$( "#" + $.escapeSelector( "miElemento.hijo" ) )

Well, these are the ones that I think are the most important, as I said, the question asked is very extensive and it would be necessary to go deeper, but to begin with, it is fine.

  • If you see any important thing that I was missing or that needs to be better explained, please report it. Surely this must go elsewhere on the web, as they say in a wiki.
Post Views: 2
Scroll to Top