// 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");
        }
    }
});