Snippet jQuery

$(window).scroll(function() {
        /* fai cose ogni volta che la pagina viene scrollata */
    });

Quando un elemento raggiunge la distanza specificata in 'pixelFromTop' dalla cima del viewport, fai un'azione. Funzione adattata da una trovata qui qui

function isScrolledIntoView(elem, pixelFromTop){
    /* quanto ci vuole per raggiungere top 0 del sito a partire dalla posizione dello scroll attuale*/
    var docViewTop = $(window).scrollTop();
    /* console.log(docViewTop); */
    /* docViewTop + il 100vh, trovo il bordo inferiore dello schermo */
    /* var docViewBottom = docViewTop + $(window).height(); */

    /* quanto bisogna scrollare per rendere visibile il top di un dato elemento */
    var elemTop = $(elem).offset().top;
    /* quanto bisogna scrollare per renvere visibile la fine di un dato elemento */
    var elemBottom = elemTop + $(elem).height();
    /* if (pixelFromTop == "65"){
    pixelFromTop = $(window).height() / 10;
    } */
    return (elemTop <= (docViewTop + pixelFromTop));
}

Se un padre ha figli, e vogliamo vincolare il click solo al padre stesso e non ai figli, basta fare così

$('.padre-con-figli').on('click', function(e) {
    if (e.target !== this)
        return;

    //fai cose
});

jQuery(document).ready(function($) {
         
  });

/*Richiamo la funzione al document ready per posizionare correttamente la parallax fin da subito*/
effettoParallasse('.selettore', 0.05, 0); 
/* e poi allo scroll, la richiamo */
window.addEventListener('scroll', () => {
    effettoParallasse('.selettore', 0.05, 0); 
});

function effettoParallasse(selettoreCSSElementoConParallasse, velocitaParallasse, distanzaTopBackground){
    let altezzaViewport = $(window).height();
    /* altezza elemento su cui applicare la parallasse */
    let hElementoParallax = $(selettoreCSSElementoConParallasse).height();
    /* quanto la cima dell'elemento dista da top 0 del viewport */
    let cimaElementoParallax = $(selettoreCSSElementoConParallasse).offset().top;
    /* quanto la fine dell'elemento dista da top 0 del viewport */
    let fineElementoParallax = $(selettoreCSSElementoConParallasse).offset().top + hElementoParallax;

    let spostamentoBackground;
    /* se l'elemento è già visibile */
    if (altezzaViewport > cimaElementoParallax) {
        spostamentoBackground = ((window.scrollY + 1) * velocitaParallasse) + distanzaTopBackground;
    } else if ((window.scrollY + altezzaViewport) > cimaElementoParallax) { //altrimenti, quando diventa visibile, scrolla per tutta la sua altezza ma non oltre
        spostamentoBackground = (((window.scrollY + altezzaViewport) - cimaElementoParallax + 1) * velocitaParallasse) + distanzaTopBackground; 
        if (spostamentoBackground > 100){
            spostamentoBackground = 100;
        }  
    } else { /* altrimenti ripristina la posizione iniziale */
        spostamentoBackground = distanzaTopBackground;
    }
    $(selettoreCSSElementoConParallasse).css({"background-position": "50%"+ spostamentoBackground +"%"});
}

Se vengono aggiunti elementi nel DOM che non c'erano al caricamento del js, questi elementi non saranno direttamente raggingibili dal js, per questo usiamo la Event Delegation, delegando l'azione a un elemento padre rispetto all'elemento 'non raggiungibile'

$( "body o comunque un padre" ).on( "click change keyup paste: SI POSSONO INSERIRE VARIE AZIONI, SENZA VIRGOLE", "selettore", function() {
  /* fai cose agli eventi specificati sul selettore */
});

soluzione utilizzata qui e qui

<div class="gruppoFiltro filtro">
  <!-- tanti attributi quanti servono -->
  <div class="attributo ">
    <h3>Nome Attributo</h3>
    <div class="options">
      <!-- mettere tanti "single-input" checkbox quante sono necessarie all\interno di questo gruppo -->
      <div class="single-input">
        <input type="checkbox" id="identificativo_checkbox" name="identificativo_gruppo_checkbox" data-filtro="la classe che unisce la checkbox e il div/prodotto corrispondente su cui filntrare">
        <label for="identificativo_checkbox">Nome label</label>
      </div>
    </div>
  </div>
  <div class="azzeraFiltri" style="">
    <p>Azzera Filtri</p>
  </div>
</div>

jQuery(function ($) {
    /* ASCOLTO IL CAMBIAMENTO DELLA SELEZIONE DEL FILTRO PER MOSTRARE O NASCCONDERE I PRODOTTI CORRISPONDENTI */
    $( ".gruppoFiltro input" ).change( function() {
    /* var categoria = $("#categorie input:checked").val();
    console.log(categoria); */
    var filtriSelezionati = [];
    $(".gruppoFiltro input:checked").each(
        function(){
        filtriSelezionati.push($(this).data("filtro"));
        }
    )
    /* console.log(filtriSelezionati);  */
    $.fn.extend({
        hasAllClasses: function (selectors) {
            var self = this;
            var contatore = 0;
            /* Per ciascun elemento, controllo conto quante delle classi selezionate ha */
            for (var i in selectors) {
                if ($(self).hasClass(selectors[i])) 
                    contatore++
                }
                /* se le ha tutte, return true, altrimenti false */
                if (selectors.length == contatore){
                    return true;
                } else {
                    return false;
                }
        }
    });
    var listaProdotti = $(".single-product");
    listaProdotti.each(function( index ) {
            /* se non sono selezionati filtri, mostro tutti i prodotti */
            if (filtriSelezionati.length == 0){
            listaProdotti.show();
            } else {
                if ($(this).hasAllClasses(filtriSelezionati)){
                $(this).show();
                } else {
                $(this).hide();
                }
            }
        });
    });

    /* per ogni gruppo di checkbox (identificato dal name), può esserne selezionata solo 1 */
    $("input:checkbox").on('click', function() {
        var inputCliccato = $(this);
        /* se la checkbox di un gruppo è cliccata, deseleziona tutte le checkbox del gruppo e riseleziona solo quella cliccata, altrimenti deselezionala */
        if (inputCliccato.is(":checked")) {
            var group = "input:checkbox[name='" + inputCliccato.attr("name") + "']";
            $(group).prop("checked", false);
            inputCliccato.prop("checked", true);
        } else {
            inputCliccato.prop("checked", false);
        }
    });

    /* AZZERA FILTRI */
    $('.azzeraFiltri').click(function(){
    $(".gruppoFiltro input:checked").each(function(){
            $(this).prop("checked", false);
        });
        $(".single-product").show();
    });

});

Collega più funzioni diverse e eventi diversi in un unico selettore

$(".classe").on({
    mouseenter : function(){ /* fai cose */ },
    mouseout: function(){  /* fai altre */ }
}); 

Come impostare e come leggere una variabile locale

// impostare una che si chiama "nomeVariabileLocale"
function variabileSessione(elem){
      window.localStorage.setItem('nomeVariabileLocale', 'valore della variabile locale');
    }

var valoreVariabileLocale = window.localStorage.getItem('nomeVariabileLocale');

$(".testoPassword").on({
    mouseenter : function(){ $(this).closest(".pwrd").removeClass("blurPassword") },
    mouseout: function(){  $(this).closest(".pwrd").addClass("blurPassword")  }
});

Se un elemento non è visibile, scrolla il padre per renderlo interamente visibile

/* scrollo il contenuto di un elemento padre, finche l'elemento selezionato finche non risulta pienamente visibile */
var elem = $('.selettore')
/* distanza dell'elem dal top 0 del padre */
distanzaDaTopContainer = elem.offset().top;
/* altezza finale, data da distanzaDaTopContainer e l'altezza dell'elemento stesso */
quantoDeveScrollare = distanzaDaTopContainer + elem.height();
/* se l'elemento non è visibile, anima lo scroll in 900ms per renderlo interamente visibile */
if (quantoDeveScrollare > $(window).height() ) {
    /* $('#menu').scrollTop(quantoDeveScrollare); */
    $('#menu').animate({
        scrollTop: quantoDeveScrollare
    }, 900, 'linear');
}

Varie tipologie di console log

/*  Se si mettono variabili dentro il console log racchiuse fra le graffe,
vengono stampate come nome valore senza necessità anteporci davanti una stringa di spiegazione */
var ciao = "a tutti";
console.log({ciao});
stamperà {ciao: "a tutti"}}