jquery tutorial, semplice tutorial per imparare le jquery

Come creare una galleria di immagini con javascript

Lezione precedente: jQuery removeClass()

jQuery attr()

da Cristina | Apr 22, 2019 | jQuery

In questa lezione studieremo il jQuery attr() method, un semplice metodo per assegnare un attributo al valore selezionato.

La sintassi per ritornare un valore di un attributo è questa:

$(selettore).attr(attributo)

Quindi un possibile uso potrebbe essere questo: $(h1).attr(“id”) in cui mi ritorna il valore id del tag h1.

La sintassi per impostare il valore di un attributo è questa:

$(selettore).attr(attributo, valore)

Quindi un esempio: $(#foto).attr(“width”, “300px”)

Per impostare il valore di un attributo secondo una funzione la sintassi è questa:

$(selettore).attr(attributo, function(index, classe_corrente))

O ancora per impostare più attributi:

$(selettore).attr({ attributo1:valore1, attributo2:valore2, … })

Facciamo adesso degli esempi.

Esempio di utilizzo di jQuery attr()

Se fate la prova a cliccare sul pulsante sotto, apparirà una nuova finestra di dialogo con il titolo dell’immagine, la dimensione in larghezza e in altezza.

Per realizzare questo esempio ho inserito la nostra immagine e il pulsante subito sotto.

<figure><img src="img/angoli.jpg" alt="Algoritmi con scratch" width="250" height="200" id="immagine"></figure>
<button id="titolo">Dettagli immagine</button>

Dopo ho incluso la libreria jQuery:

<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>

Poi ho creato la semplicissima funzione che ritorna gli attribuit alt, width ed height dell’immagine.

<script type="text/javascript">
$(document).ready(function(){
  $("#titolo").click(function(){
    alert("Titolo immagine: " + $("#immagine").attr("alt") + " Larghezza " + $("#immagine").attr("width") + " Altezza " + $("#immagine").attr("height"));
  });
});
</script>

Secondo esempio di utilizzo del metodo attr()

Fate la prova a cliccare sul pulsante sotto, noterete che la dimensione dell’immagine cambierà.

Per realizzare questo semplice esempio, inserisco innanzitutto l’immagine e poi il pulsante sotto:

<figure><img src="images/img1.jpg" alt="algoritmi con scratch" width="250" height="200" id="dim"></figure>
<button id="cambio">cambio dimensioni img</button>

Includo la libreria e infine creo la semplicissima funzione utilizzando JQuery attr() method con questa sintassi: $(selettore).attr(attributo, valore).

<script type="text/javascript">
$(document).ready(function(){
  $("#cambio").click(function(){
    $("#dim").attr("width",'200');
    $("#dim").attr("height",'150');
  }); 
});
</script>

In questo caso potevo anche utilizzare la seguente sintassi:

$(selettore).attr({ attributo1:valore1,attributo2:valore2, … })

Quindi riscrivo la funzione precedente in questo modo:

<script type="text/javascript">
$(document).ready(function(){
  $("#cambio").click(function(){
    $("#dim").attr({width: "300", height: "250"});
  });
});
</script>

Terzo esempio di utilizzo di jQuery attr() method

Facciamo ancora degli esempi pratici di utilizzo del metodo attr().

Se fate la prova a cliccare sul pulsante sotto, vedrete che l’immagine diventerà più piccola sia in larghezza sia in altezza.

Inserisco come negli altri esempi la mia immagine e il pulsante sotto:

<figure><img src="images/img1.jpg" alt="immagine" width="250" height="200"></figure>
<button id="piccola">Scala l'immagine</button>

Dopo inserisco la mia funzione utilizzando la sintassi
$(selettore).attr(attributo, function(index, classe_corrente)), non dimenticando di includere la libreria jQuery. Rimpicciolisco l’immagine di 20 pixel ad ogni clic del pulsante sia in larghezza che in altezza.

<script type="text/javascript">
$(document).ready(function(){
  $("#piccola").click(function(){
    $("img").attr("width",function(n,l){
      return l - 20;
    });
    $("img").attr("height",function(n,h){
      return h - 20;
    });
  }); 
});
</script>

Lezione successiva: jQuery gallery

Alcuni link utili:

Rimuovere attributi agli elementi del DOM con JavaScript

Come creare una galleria di immagini con javascript

Lezione precedente: jQuery css() method

jQuery addClass()

da Cristina | Apr 22, 2019 | jQuery

jQuery addClass() method – Questo metodo aggiunge una classe (add class), o anche più di una, ad uno o più elementi di una pagina web.

Quindi, ad esempio, se ho un paragrafo e voglio aggiungere una formattazione diversa, dopo un determinato evento, lo posso fare utilizzando il metodo addClass().

La sintassi è dunque questa: addClass(nome_classe, funzione (index, classe_corrente) ).

Dove il nome_classe specifica una o più classi da attribuire ad un elemento, mentre la funzione riceve quindi, come argomenti, la posizione dell’indice e il nome della classe corrente (ovvero quella esistente) che può essere opzionale.

Ma facciamo subito degli esempi per capire il funzionamento del metodo addClass().

Esempio 1 di utilizzo di jQuery addClass() method

Modifichiamo del testo al click del pulsante, aggiungendo una classe ad un elemento.

Cliccate quindi sul pulsante sotto. Noterete che solo il testo del primo paragrafo si modificherà.

Coding Creativo. Questo paragrafo cambierà.

Blog dove trovare articoli sulla programmazione. Questo paragrafo non cambierà.

Procedimento esempio con il metodo addClass()

Sviluppiamo adesso il codice necessario per realizzare questo esempio.

Innanzitutto inseriamo due livelli con il tag div che contengono del testo a piacere e sotto aggiungiamo un pulsante. Al livello (div) a cui vogliamo dare una formattazione diversa diamo poi un id, ad esempio io ho impostato id=”formattazione”.

<div id="formattazione">
   Coding Creativo. Questo paragrafo cambierà.
</div>
<div>
   Blog dove trovare articoli sulla programmazione. Questo   paragrafo non cambierà.
</div>
<button id="pulsante">Clicca sul pulsante</button>

Inseriamo, in un foglio di stile esterno alla pagina web, le regole per la formattazione del testo, in cui specifichiamo la dimensione del testo, il colore e anche il padding.

.formatta {
  font-size: 22px;
  color: #cccccc;
  padding: 10px;
}

Dopo inseriamo il collegamento al foglio di stile appena creato e alla libreria jQuery.

<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>

Infine creiamo in un file a parte con estensione .js una semplicissima funzione che attiva il cambio del testo al clic del pulsante. Basterà aggiungere al livello con id=”formattazione” la classe formatta, che ho creato prima nel foglio di stile, (potevo scegliere qualsiasi altro nome) utilizzando il metodo addClass().

$(document).ready(function(){
  $("button").click(function(){
    $("#formattazione").addClass("formatta");
  });
});

Quindi colleghiamo questo file alla pagina html, prima della chiusura del tag body.

Esempio 2

In questo secondo esempio utilizzeremo il metodo addClass() con una funzione.

Coding Creativo. Primo paragrafo

Coding Creativo. Secondo paragrafo

Inizialmente inseriamo i due paragrafi ed il pulsante su cui attivare l’evento.

<p>Coding Creativo. Primo paragrafo</p>
<p>Coding Creativo. Secondo paragrafo</p>
<button>Aggiungi uno stile ad uno o più paragrafi.</button>

Dopo inseriamo la formattazione che vogliamo generare utilizzando un foglio di stile esterno che poi collegheremo alla pagina.

.paragrafo_0 {
  color: #cccccc;
  padding:20px;
}
.paragrafo_1 {
  color: #ff0000;
  font-size: 20px;
}

Poi creiamo il nostro semplicissimo script, utilizzando la funzione.

$(document).ready(function(){
  $("button").click(function(){
    $("p").addClass(function(n){
      return "paragrafo_" + n;
    });
  });
});

Chiaramente questi sono solo dei semplicissimi esempi realizzati con il jQuery addClass() method, più avanti vedremo altri esempi d’uso.

Lezione successiva: jQuery removeClass() method

Alcuni link utili

Rimuovere attributi agli elementi del DOM con JavaScript

Come creare una galleria di immagini con javascript

Lezione precedente: jQuery show() method

jQuery css()

da Cristina | Apr 21, 2019 | jQuery

jQuery css() method è il metodo che serve a dare una formattazione ad uno o più elementi di una pagina web. Con jQuery css() infatti posso dare, ad esempio, un colore di sfondo ad un paragrafo oppure un colore di testo ad un titolo e così via.

La sintassi è dunque molto semplice: css(“nome_proprietà“). Dove nome_proprietà è una proprietà dei css, ad esempio color, background-color, ecc.

Oppure si può anche indicare il valore della proprietà seguendo la seguente sintassi: css(“nome_proprietà“,”valore“). Ad esempio posso scrivere come proprietà color e come valore red.

Esempio di utilizzo di jQuery css()

Vediamo, dunque, nel dettaglio, un esempio di utilizzo del metodo jQuery css(), formattando semplicemente dei testi.

Quindi cliccando sul pulsante read more, i paragrafi dell’esempio sotto cambieranno formattazione.

Benvenuti su Coding Creativo! Il testo diventerà verde

Secondo paragrafo. Diventerà grigio

Per realizzare l’esempio precedente innanzitutto aggiungiamo il collegamento alla CDN jQuery nella nostra pagina html, tra il tag di apertura e chiusura di head.

<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>

Dopo, nella pagina html, all’interno del tag body, inseriamo i paragrafi a cui vogliamo cambiare la formattazione e il pulsante che genera l’evento.

<div class="testo">
  <p id="intro">
    Benvenuti su Coding Creativo! Il testo diventerà verde
  <p>
  <p id="intro2">
    Secondo paragrafo. Diventerà grigio
  <p>
</div>

<button id="scopri">Read more</button>

Infine creiamo il nostro script utilizzando il metodo css che assegnerà al primo paragrafo il colore del testo rosso e al secondo invece unno sfondo grigio.

Ecco dunque lo script che utilizza il metodo jQuery css() che chiamo ad esempio script.js.

$(document).ready(function(){
  $("#scopri2").click(function(){
  $("#intro").css("color", "#999900");
  $("#intro2").css("background-color", "#cccccc");
  });
});

Aggiungiamo infine il collegamento allo script nella pagina html, prima della chiusura del body.

<script src="script.js" charset="utf-8"></script>

Esempio 2 sul metodo jQuery css()

In questo secondo esempio scopriremo come dare più di una formattazione ad un elemento. Ad esempio vogliamo che il primo paragrafo abbia sfondo grigio e testo giallo, dimensione del testo giallo, in grassetto e con distanza del testo dai bordi di 10 pixel.

Poi vogliamo che il secondo paragrafo abbia colore di sfondo verde, testo grigio, dimensione 22 pixel e che sia in corsivo.

Benvenuti su Coding Creativo!

Secondo paragrafo.

Quindi al solito includiamo la libreria:

<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>

Dopo inseriamo i due paragrafi ed il pulsante:

<div class="introduzione">
  <p id="testo">
    Benvenuti su Coding Creativo!
  <p>
  <p id="testo2">
    Secondo paragrafo.
  <p>
</div>

<button id="scopri2">Read more</button>

Infine inseriamo la nostra semplicissima funzione che utilizza al suo interno il jQuery css() method.

<script type="text/javascript">
$(document).ready(function(){
  $("#scopri2").click(function(){
       $("#testo").css({
               "background-color": "#999999",
               "color": "yellow",
               "font-size": "20px",
               "font-weight": "bold"
       });
       $("#testo2").css({
               "background-color": "#777700",
               "color": "#999999",
               "font-size": "22px",
               "font-style": "italic"
       });
     });
});
</script>

Chiaramente questi sono solo dei semplicissimi esempi d’uso del jQuery css() method, più avanti vedremo tante altre applicazioni.

Lezione successiva: jQuery addClass()

Alcuni link utili

Rimuovere attributi agli elementi del DOM con JavaScript

Come creare una galleria di immagini con javascript