// Vanilla JS / standard
document.getElementById('mioId').href;

// jQuery
$('#mioId').attr('href');

[...]
    <script src="jquery-3.4.1.min.js"></script>
    <script src="main.js"></script>
</body>
</html>

let el = $('#mioID');

let elements = $('.miaClasse');

let elemento = $('<div></div>');

let window = $(window);

el.append(elemento);

el.addClass('miaClasse');

el.removeClass('miaClasse');

$('#mioID'); // SELEZIONE PER ID

$('.miaClasse'); // SELEZIONE PER CLASSE

$('a');  // SELEZIONE PER TAG

// SELEZIONA TUTTI I LINK DENTRO ALL'ELEMENTO CON CLASSE miaClasse
$('.miaClasse a');

// SELEZIONA TUTTI I LI DENTRO ALL'ELEMENTO CON 
// UL DIRETTAMENTE DISCENDENTI, NON I "SOTTO FIGLI"
$('ul > li');

// SELEZIONA TUTTI GLI SPAN DIRETTAMENTE VICINI AD UN DIV
$('div + span')

<div>Questo</div><span>Sì</span>
<div>Questo</div><img /><span>No</span>

// SELEZIONA TUTTI GLI SPAN FRATELLI MA ANCHE NON DIRETTAMENTE ADIACENTI
$('div ~ span')
<div>Questo</div><span>Sì</span>
<div>Questo</div><img /><span>Anche</span>

$("a[target='_blank']"); // SELEZIONA TUTTI I LINK CHE SI APRONO IN NUOVE FINESTRE

$("a[title^='nuova']"); // SELEZIONA I LINK CON TITOLO CHE INIZIA PER "nuova"

$("a[title$='pagina']"); // SELEZIONA I LINK CON TITOLO CHE FINISCONO PER "pagina"

$("#menu li:first-child"); // SELEZIONA TUTTI IL PRIMO LI NEL MENU

$("#menu li:last-child"); // SELEZIONA TUTTI L'ULTIMO LI NEL MENU

$("#menu li:even"); // SELEZIONA TUTTI I LI PARI

$("#menu li:odd"); // SELEZIONA TUTTI I LI DISPARI

$("#menu li:eq(3)"); // SELEZIONA IL TERZO LI NEL MENU

$("div").find('a'); // SELEZIONA TUTTI I LINK DENTRO AI DIV

$("li").parent(); // SELEZIONA L'ELEMENTO PADRE DIRETTO

$("li").closest('div'); // SELEZIONA IL DIV PARENTE PIU' PROSSIMO

$("li").next(); // SELEZIONA L'ELEMENTO SUCCESSIVO

$("li").prev(); // SELEZIONA L'ELEMENTO PRECEDENTE

$("#menu li").length; // RESTITUISCE IL NUMERO DI LI 

$("#menu li").each(function () {
     let id = this.id; 
});

// RESTITUISCE L'ATTRIBUTO HREF
$("a#mioLink").attr("href");

// IMPOSTA L'ATTRIBUTO HREF SUL ELEMENTO CON ID mioLink
$("a#mioLink").attr("href", "http://www.google.com");

// RIMUOVERE UN ATTRIBUTO DA UN ELEMENTO HTML
$("#menu li a").removeAttr("target");

// METODO DI CONTROLLO CHE RITORNA TRUE SE L'ELEMENTO HA UNA SPECIFICA CLASSE
$("a").hasClass('miaClasse');

// AGGIUNGI UNA CLASSE
$("a").addClass('miaClasse');

// RIMUOVI UNA CLASSE
$("a").removeClass('miaClasse');

// AGGIUNGE UNA CLASSE SE NON PRESENTE, ALTRIMENTI LA TOGLIE
$("a").toggleClass('miaClasse');

<p>testo del <strong>paragrafo</strong></p>

// TEXT RESTITUISCE SOLO IL TESTO, GIà LAVORATO
$("p").text(); // "testo del paragrafo"

// HTML RESTITUISCE IL CONTENUTO IN FORMATO HTML
$("p").html(); // "testo del <strong>paragrafo</strong>"

// INSERISCE UN NUOVO TESTO NEL PARAGRAFO
$("p").text("Nuovo testo");

// INSERISCE UN NUOVO HTML NEL PARAGRAFO
$("p").html("Nuovo testo con <strong>HTML</strong>");

$("a").css("color"); //restituisce il colore esadecimale del primo elemento link
$("a").css("color","#FF0000"); //imposta il colore dei link


$("a").css({
    "color" : "#FF0000", //imposta il colore
    "display" : "block" // imposta la visualizzazione
});

// RESTITUISCE LA LARGHEZZA IN PIXEL
$("a").width();

// RESTITUISCE L'ALTEZZA' IN PIXEL
$("a").height();

// RESTITUISCE LA LARGHEZZA IN PIXEL, INCLUSO IL PADDING 
// MA NON IL BORDO E IL MARGINE
$("a").innerWidth();

// RESTITUISCE L'ALTEZZA' IN PIXEL, INCLUSO IL PADDING 
// MA NON IL BORDO E IL MARGINE
$("a").innerHeight();

// RESTITUISCE LA LARGHEZZA IN PIXEL, INCLUSO IL PADDING 
// E IL BORDO MA NON IL MARGINE
$("a").outerWidth();

// RESTITUISCE L'ALTEZZA' IN PIXEL, INCLUSO IL PADDING 
// E IL BORDO MA NON IL MARGINE
$("a").outerHeight();

// RITORNA UN OGGETTO CON LA DISTANZA DA SINISTRA E 
// DALL'ALTO DELL'ELEMENTO RISPETTO AL DOCUMENTO
$("a").offset();

// COME OFFSET; MA LE DISTANZE SONO RELATIVE AL CONTENITORE
$("a").position();

// TROVA O IMPOSTA SCROLL DELL'ELEMENTO RISPETTO AL DOCUMENTO
$("a").scrollTop();
$("a").scrollLeft();

let el = document.getElementById('mioID');
el.addEventListener('click', () => {
  alert('CIAO!');
});

$('#mioID').on('click', () => {
    alert('CIAO!');
});

$(document).ready( function() {
    alert('DOM CARICATO');
});

// MOSTRA IL BLOCCO SE NASCOSTO
$('.blocco').show();

// MOSTRA IL BLOCCO SE NASCOSTO, MA CON UN ANIMAZIONE PIU' LENTA
$('.blocco').show('slow');

// NASCONDI IL BLOCCO SE NASCOSTO
$('.blocco').hide();

// NASCONDI IL BLOCCO SE NASCOSTO, MA CON UN ANIMAZIONE PIU' LENTA
$('.blocco').hide('slow');

// NASCONDE/MOSTRA UN ELEMENTO CON UN ANIMAZIONE SULL'ALTEZZA
$('.blocco').slideToggle();

// MOSTRA UN ELEMENTO LAVORANDO SULL'OPACITA'
$('.blocco').fadeIn();

// NASCONDI UN ELEMENTO LAVORANDO SULL'OPACITA'
$('.blocco').fadeOut();

// ANIMATE PERMETTE DI APPLICARE UNA SERIE DI PROPRIETA' CSS
// DECIDENDO IL TIMING ED AVENDO LA POSSIBILITà DI 
// ESEGUIRE UNA CALLBACK ALLA FINE DELL'ANIMAZIONE
$("#box").animate({
	"borderWidth" : "4px", //bordo a 4 pixel
	"width" : "+=20px" //aumenta la larghezza di 20 pixel
	},
	"slow", //animazione lenta
	"linear", //andamento lineare
	function () {
		//funzione di callback
		alert("Animazione conclusa!");
	}
);

// AJAX E' UNA FUNZIONE CHE CI PERMETTE DI EFFETTUARE
// CHIAMATE XHR IN MODO MOLTO SEMPLICE

$.ajax({
    url : 'dati.php',
    data : {
        limit: 10,
        offset: 0
    },
    complete: function (righe, stato) {
        for (i=0; i < righe.length; i++) {
            let riga = righe[i];
            $("<tr/>")
              .append("<td>" + riga.colonna1 + "</td><td>" + riga.colonna2 + "</td>")
              .appendTo("#tabella");
        }
    }
});