Da jQuery a Javascript: ecco le controparti vanilla javascript delle principali funzionalità di jQuery

L’uso di jQuery è spopolato fin dalla sua introduzione nel mondo del web developing. Questo articolo non vuole assolutamente essere un denigrare quanto fatto da questo (a mio avviso) ottimo framework, ma vuole dare un approccio differente tramite javascript alle più comuni funzionalità usate in jQuery.

La cosa migliore per coloro che volessero intraprendere la carriera di web developer a mio avviso sarebbe quella di seguire questa scaletta:

1. imparare le basi di javascript vanilla
2. Web API
3. jQuery o altri framework.

Ora più che mai imparare framework come React o Angular senza sapere nulla di javascript è davvero ostico.

Selezione elementi del DOM

Selezione elemento per ID

$('#targetweb'); //jQuery
document.getElementById('targetweb');//Javascript

Selezione elemento per classe

$('.targetweb');//JQuery
document.getElementsByClassName('targetweb'); //Javascript

Selezione elemento per tag

$('span'); // jquery
document.getElementsByTagName('div'); //Javascript

Selezione elemento per attributo

$('[data-foo-bar="someval"]');//jQuery
document.querySelectorAll('[data-foo-bar="someval"]'); // Javascript

Pseudo Classi

$('#targetweb :invalid');//jQuery
document.querySelectorAll('#targetweb :invalid'); //Javascript

Selezione figli

$('#targetweb').children(); //jQuery
document.getElementById('targetweb').childNodes; //Javascript

Selezione tag discendenti

$('#targetweb A'); //jQuery
document.querySelectorAll('#targetweb A'); //Javascript

Esclusione elementi

$('DIV').not('.ignore'); //JQuery
document.querySelectorAll('DIV:not(.ignore)'); //Javascript

Selettore multiplo

$('DIV, A, SCRIPT'); //jQuery
document.querySelectorAll('DIV, A, SCRIPT'); //Javascript

Manipolazione del DOM

Aggiungere / Rimuovere una classe CSS

$('#targetweb').addClass('bold'); //jQuery
document.getElementById('targetweb').classList.add('bold'); //Javascript
//Rimozione
$('#targetweb').removeClass('bold'); //jQuery
document.getElementById('targetweb').classList.remove('bold'); //Javascript

Aggiungere/rimuovere testo

$('#targetweb').text('Goodbye!'); //JQuery
document.getElementById('targetweb').innerHTML = 'Ciao!'; //Javascript - IE 5.5+
document.getElementById('targetweb').textContent = 'Ciao!'; //Javascript -  Tutti i nuovi browser IE9+

Modificare lo style inline [LISTA PROPRIETA’ DI STYLE OBJ]

$('#targetweb').css('fontWeight', 'bold'); //jQuery
document.getElementById('targetweb').style.fontWeight = 'bold'; //Javascript

Chiamate Ajax

NON PERDERTI LA NOSTRA GUIDA COMPLETA CHIAMATE AJAX JQUERY

Chiamate GET

//jQuery
$.ajax({
      type: "GET",
      url: "targetweb.php",
      data: "id=" + thisId + "&value=" + thisValue,
      success: function(){
        alert( "OK" );
      }
});

//Javascript
var xhr = new XMLHttpRequest();
xhr.open('GET', 'targetweb.php?id=1');
xhr.onload = function() {
    if (xhr.status === 200) {
       alert( "OK" );
    }
    else {
      alert( "Errore" );
    }
};
xhr.send();

Chiamate POST

//jQuery
$.ajax({
      type: "POST",
      url: "targetweb.php",
      data: "id=" + thisId + "&value=" + thisValue,
      success: function(){
        alert( "OK" );
      }
});

//Javascript
var xhr = new XMLHttpRequest();
xhr.open('POST', 'targetweb.php?id=1');
xhr.onload = function() {
    if (xhr.status === 200) {
       alert( "OK" );
    }
    else {
      alert( "Errore" );
    }
};
xhr.send();

Eventi

Eventi al click

//jQuery
$(elemento).on('click', function() {
   //Codice
});

//Javascript
elemento.addEventListener('click', function() {
    //Codice
});

Rimuovere evento

$('elemento').off('click', myEventHandler);//jQuery
elemento.removeEventListener('click', myEventHandler); //Javascript

Mouse Hover

//jQuery
$('elemento').hover(
    function hoverIn() {
        // mouse hover
    },

    function hoverOut() {
        // mouse out
    }
);

//Javascript
elemento.addEventListener('mouseover', function() {
    // mouse hover
});

elemento.addEventListener('mouseout', function() {
     // mouse out
});

Eventi al caricamento di pagina

//jQuery
$(window).load(function() {
    // pagina caricata
})
//Javascript
window.addEventListener('load', function() {
   // pagina caricata
});

//DOM LOAD
//Jquery
$(document).ready(function() {
    // Dom caricato
});
//Javascript
document.addEventListener('DOMContentLoaded', function() {
    // Dom caricato
});

Ovviamente questo è solo un riassunto delle moltissime funzioni, ma sappiate che ad ogni funzionalità di jQuery corrisponde la controparte vanilla javascript. Cercate di usare jQuery solo se realmente necessario, e iniziate a usare javascript per le azioni più comuni.

Questo articolo ti è piaciuto? Condividilo con i tuoi colleghi!