close

Sintassi di base di jQuery: selezione, manipolazione ed effetti

La sintassi di base di jQuery prevede l'utilizzo di un selettore(selettore in stile CSS) e metodi per manipolare gli elementi selezionati. Ecco alcuni esempi di sintassi di base di jQuery:

 

Selezione degli elementi

  • Seleziona gli elementi in base al nome del tag HTML: $("tagname") Esempio: $("p") seleziona tutti gli <p> elementi nella pagina.

  • Seleziona elementi per classe CSS: $(".classname") Esempio: $(".myClass") seleziona tutti gli elementi con la classe "myClass".

  • Seleziona elementi per ID: $("#idname") Esempio: $("#myElement") seleziona l'elemento con l'ID "myElement".

  • Seleziona elementi per attributo: $("[attribute='value']") Esempio: $("[data-type='button']") seleziona gli elementi con l'attributo data-type impostato su "pulsante".

  • Combinazione di selezioni: $("tagname.classname"), $("#idname .classname"), ...

 

Manipolazione degli elementi selezionati

  • Modifica del contenuto di un elemento: .html(), .text() Esempio: $("#myElement").html("New content") imposta il contenuto HTML dell'elemento con ID "myElement".

  • Modifica degli attributi degli elementi: .attr(), .prop() Esempio: $("img").attr("src", "newimage.jpg") cambia l' src attributo di tutti <img> gli elementi.

  • Manipolare le classi CSS di un elemento: .addClass(), .removeClass(), .toggleClass() Esempio: $("#myElement").addClass("highlight") aggiunge la classe "highlight" all'elemento con ID "myElement".

  • Nascondere/mostrare elementi: .hide(), .show(), .toggle() Esempio: $(".myClass").hide() nasconde tutti gli elementi con la classe "myClass".

  • Gestione degli eventi sugli elementi: .click(), .hover(), .submit(), ... Esempio: $("button").click(function() { ... }) registra un gestore di eventi click

 

Utilizzo di raccolte di elementi

  • Iterazione attraverso una collezione: .each() Esempio: $("li").each(function() { ... }) itera su ogni <li> elemento della pagina.

  • Filtrare una collezione: .filter(), .not() Esempio: $("div").filter(".myClass") filtra gli <div> elementi e seleziona quelli con la classe "myClass".

  • Inserimento di elementi in una raccolta: .append(), .prepend(), .after(), .before() Esempio: $("#myElement").append("<p>New paragraph</p>") aggiunge un nuovo <p> elemento all'elemento con ID "myElement".

 

Effetti e animazioni

  • Esecuzione di effetti fadeIn/fadeOut: .fadeIn(), .fadeOut() Esempio: $("#myElement").fadeIn(1000) dissolvenza nell'elemento con ID "myElement" per una durata di 1 secondo.

  • Esecuzione di effetti slideUp/slideDown: .slideUp(), .slideDown() Esempio: $(".myClass").slideUp(500) fa scorrere verso l'alto tutti gli elementi con la classe "myClass" per una durata di 0,5 secondi.

  • Esecuzione di animazioni personalizzate: .animate() Esempio: $("#myElement").animate({ left: '250px', opacity: '0.5' }) anima l'elemento con ID "myElement" modificandone la posizione a sinistra e l'opacità.

 

Questi esempi dimostrano come utilizzare diversi aspetti della sintassi di base di jQuery per selezionare elementi, manipolarne le proprietà e applicare effetti o animazioni. jQuery offre un ricco set di metodi e funzionalità per semplificare e migliorare le attività di sviluppo web.