Nozioni di base di jQuery
Indice
3.1: Il blocco $(document).ready()
$(document).ready(function() { console.log('il ocumento è pronto!'); });
3.2: Forma abbreviata per $(document).ready()
$(function() { console.log('il ocumento è pronto!'); });
3.3: Passare il nome di una funzione al posto di una funzione anonima
function readyFn() { // codice da eseguire quando il documento è pronto } $(document).ready(readyFn);
Di seguito sono elencate alcune tecniche comuni per la selezione degli elementi:
3.4: Selezione di elementi in base al loro ID
$('#myId'); // si noti che l'ID deve essere univoco per ogni pagina
$('div.myClass'); // se si specifica il tipo di elemento, // si migliora le prestazioni della selezione
$('input[name=first_name]'); // attenzione, che può essere molto lento
$('#contents ul.people li');
$('a.external:first'); // il primo elemento <a> con la classe 'external' $('tr:odd'); // gli elementi <tr> dispari di una tabella $('#myForm :input'); // gli elementi del tipo input $('div:visible'); // gli elementi <div> visibili $('div:gt(2)'); // gli elementi <div> tranne i primi tre $('div:animated'); // gli elementi <div> attualmente animati
Per avere un riferimento, il seguente è il frammento di codice che utilizza jQuery per determinare quando un elemento è visibile o meno. I commenti sono stati inseriti per rendere più chiara la sua comprensione:
jQuery.expr.filters.hidden = function( elem ) { var width = elem.offsetWidth, height = elem.offsetHeight, skip = elem.nodeName.toLowerCase() === "tr"; // Scelta di Selettori ha 0 di altezza, // 0 di larghezza e non è <tr>? return width === 0 && height === 0 && !skip ? // allora deve essere nascosto (hidden) true : // ma se ha larghezza e l'altezza e non è un <tr> width > 0 && height > 0 && !skip ? // allora deve essere visibile false : // se siamo qui è perché l'elemento ha larghezza // e altezza, ma è anche un <tr>, quindi verifica // il valore dello stile display applicato attraverso // i CSS per decidere se è nascosto o meno jQuery.curCSS(elem, "display") === "none"; }; jQuery.expr.filters.visible = function( elem ) { return !jQuery.expr.filters.hidden( elem ); };
jQuery fornisce molti selettori basati sugli attributi che consentono di fare delle selezioni in base ai contenuti degli attributi utilizzando semplificazioni con delle espressioni regolari.
// trovare tutti gli <a> cui attributi finiscono in "thinger" $("a[rel$='thinger']");
Per saperne di più su questo argomento, Paul Irish ha fatto una grande presentazione sui miglioramenti delle prestazioni Javascript (in inglese), diverse diapositive centrate sui selettori.
if ($('div.foo')) { ... }
Invece di utilizzare il codice di prima, la cosa da fare è chiedere il numero di elementi che ha la selezione che è stata eseguita. E’ possibile fare usando la proprietà JavaScript, length. Se la risposta è 0, la condizione restituisce false, altrimenti (più di 0 elementi), la condizione è vera.
3.9: Valutare se una selezione ha degli elementi
if ($('div.foo').length) { ... }
3.10: Salvare le selezioni su una variabile
var $divs = $('div');
Una volta che la selezione è memorizzata nella variabile, può essere utilizzato in combinazione con i metodi di jQuery e il risultato sarà lo stesso se si utilizza la selezione originale.
3.11: Affinamento delle selezioni
$('div.foo').has('p'); // l'elemento div.foo contiene elementi <p> $('h1').not('.bar'); // l'elemento h1 non possiede la clase 'bar' $('ul li').filter('.current');// un item di una lista non ordinata che // possiede la classe 'current' $('ul li').first(); // il primo item de una lista non ordinata $('ul li').eq(5); // el sesto item de una lista non ordinata
:button
Seleziona elementi <button
> e con l’attributo type=”button”:checkbox
Seleziona elementi <input
> con l’attributotype=”checkbox”:checked
Seleziona elementi <input
> del tipo checkbox selezionati:disabled
Seleziona elementi del form che sono disabilitati:enabled
Seleziona elementi del form che sono abilitati:file
Seleziona elementi <input
> con l’attributo type=”file”:image
Seleziona elementi <input
> con l’attributo type=”image”:input
Seleziona elementi <input
>, <textarea
> e <select
>:password
Seleziona elementi <input
> con el atributo type=”password”:radio
Seleziona elementi <input
> con l’attributo type=”radio”:reset
Seleziona elementi <input
> con l’attributo type=”reset”:selected
Seleziona elementi <options
> che sono selezionati:submit
Seleziona elementi <input
> con l’attributo type=”submit”:text
Seleziona elementi <input
> con l’attributo type=”text”
$('#myForm :input'); // ottiene tutti gli elementi input nel form #myForm
Concatenazione
3.13: Concatenando
$('#content').find('h3').eq(2).html('testo per il terzo elemento h3!');
3.14: Formattazione del codice incatenato
$('#content') .find('h3') .eq(2) .html('testo per il terzo elemento h3!');
3.15: Ripristinare la selezione originale utilizzando il metodo $.fn.end
$('#content') .find('h3') .eq(2) .html('testo per il terzo elemento h3!') .end() // ripristina tutti gli elementi h3 in #content .eq(0) .html('testo per il primo elemento h3!');
3.16: Il metodo $.fn.html utilizzato come impostatore
$('h1').html('ciao mondo');
$('h1').html();
$('h1').css('fontSize'); // restituisce una stringa come "19px" $('h1').css('font-size'); // funziona lo stesso
// imposta una proprietà singola CSS $('h1').css('fontSize', '100px'); // imposta molteplici proprietà CSS $('h1').css({ 'fontSize' : '100px', 'color' : 'red' });
Utilizzare Classi per applicare Stili CSS
3.20: Lavorare con le classi
var $h1 = $('h1'); $h1.addClass('big'); $h1.removeClass('big'); $h1.toggleClass('big'); if ($h1.hasClass('big')) { ... }
Il codice riportato nell’esempio “Dimensioni – Metodi di base” è solo un breve riassunto delle funzionalità sui rapporti dimensionali di jQuery, tutti i dettagli possono essere trovati http://api.jquery.com/category/dimensions/.
3.21: Dimensioni - Metodi di base
$('h1').width('50px'); // imposta la larghezza di tutti gli elementi H1 $('h1').width(); // ottiene la larghezza del primo elemento H1 $('h1').height('50px');// imposta l'altezza di tutti gli elementi H1 $('h1').height(); // Ottiene l'altezza del primo elemento H1 $('h1').position(); // Restituisce un oggetto che contiene informazioni // circa la posizione del primo elemento relativo a // "offset" (posizione) dal suo elemento genitore
Il metodo $.fn.attr funge sia da metodo getter che da metodo setter. Inoltre, come metodo di $.fn.css, se usato come metodo setter può accettare una serie di parole chiave-valore o un oggetto che contiene più serie.
3.22: Impostare attributi
$('a').attr('href', 'allMyHrefsAreTheSameNow.html'); $('a').attr({ 'title' : 'con i titoli è la stessa cosa!', 'href' : 'somethingNew.html' });
3.23: Ottenere attributi
$('a').attr('href'); // restituisce il primo valore dell'attributo href // appartenente al elemento <a> del documento
In http://api.jquery.com/category/traversing/ può trovare una documentazione completa sui metodi di attraversamento del DOM (in inglese traversing) che ha jQuery.
$('h1').next('p'); // seleziona l'elemento successivo <p> // immediatamente dopo <h1> $('div:visible').parent(); // seleziona il contenitore padre // di un elemento <div> visibile $('input[name=first_name]').closest('form'); // seleziona dal più // vicino <form> un input $('#myList').children(); // seleziona tutti gli elementi figlio // di #myList $('li.selected').siblings(); // seleziona tutti gli elementi fratelli // del elemento <li>
3.25: Interagire in una selezione
$('#myList li').each(function(idx, el) { console.log( 'L\'elemento ' + idx + 'ha il seguente html: ' + $(el).html() ); });
La documentazione completa sui metodi di manipolazione può essere trovata in http://api.jquery.com/category/manipulation/.
Ottenre e Impostare Informazioni negli Elementi
$.fn.html
Ottiene o imposta il contenuto HTML di un elemento.$.fn.text
Ottiene o imposta il contenuto in texto piano dell’elemento; nel caso di pasarli come argomento del codice HTML, questo sarà ripulito dai sui tag.$.fn.attr
Ottiene o imposta il valore di un determinato attributo.$.fn.width
Ottiene o imposta la larghezza in pixels del primo elemento della selezione come un intero.$.fn.height
Ottiene o imposta l’altezza in pixeles del primo elemento della selezione come un intero.$.fn.position
Ottiene un oggetto con informazioni sulla posizione del primo elemento della selezione relativa al primo elemento genitore posizionato. Questo metodo è solo ottenitore (getter).$.fn.val
Ottiene o imposta il valore (value) negli elementi dei forms.
$('#myDiv p:first') .html('Nuovo <strong>primo</strong> parragrafo!');
- Volere mettere il/gli elementi selezionati rispetto ad altri elementi
- Volere mettere un elemento rispetto ad altri elementi selezionati.
Per esempio, jQuery fornisce metodi $.fn.insertAfter e $.fn.after. Il metodo $.fn.insertAfter colloca il/gli elementi selezionati dopo l’elemento che è stato passato come argomento, mentre il metodo $.fn.after colloca l’elemento passato come argomento dopo l’elemento selezionato. Altri metodi seguono anche questo modello:
$.fn.insertBefore
e$.fn.before;
$.fn.appendTo
e$.fn.append;
- e
$.fn.prependTo
e$.fn.prepend
.
L’uso di uno o un altro metodo dipende dagli elementi che hanno selezionato e il tipo di riferimento che si desidera salvare rispetto all’elemento che si sta muovendo.
3.27: Spostare oggetti con differenti approcci
// fare il che primo elemento della lista sia l'ultimo var $li = $('#myList li:first').appendTo('#myList'); // un altro approccio allo stesso problema $('#myList').append($('#myList li:first')); // Va notato che non c'è modo di accedere // alla lista degli items che è stata spostata, // giacché restituisce la lista stessa
3.28: Ottenere una copia del elemento
// copiare il primo elemento della lista // e spostarlo alla fine dello stesso $('#myList li:first').clone().appendTo('#myList');
D’altra parte, il $.Fn.detach rimuove anche l’elemento, ma conserva le informazioni e gli eventi associati ad esso, essendo utile in caso di necessità di reinserire l’elemento nel documento.
D’altra parte, se si desidera mantenere l’elemento, ma si ha bisogno di rimuovere i uso contenuto, è possibile utilizzare il metodo $.fn.empty, il quale “svuoterà” il contenuto HTML dell’elemento.
3.29: Creare nuovi elementi
$('<p>Questo è un nuovo paragrafo</p>'); $('<li class="nuovo">nuovo item della lista</li>');
$('<a/>', { html : 'Questo è un <strong>nuovo</strong> link', 'class' : 'nuovo', href : 'foo.html' });
Quando si crea un elemento, non è immediatamente aggiunto alla pagina, ma se deve farlo in combinazione con un metodo.
3.31: Creare un nuovo elemento nella pagina
var $myNewElement = $('<p>Nuovo elemento</p>'); $myNewElement.appendTo('#content'); $myNewElement.insertAfter('ul:last'); // eleminerà l'elemento <p> esistente in #content! $('ul').last().after($myNewElement.clone()); // clonare l'elemento <p> per avere due versioni
Tuttavia, la maggior parte delle volte si desidererà fare riferimento all’elemento aggiunto, e quindi, se si salva in una variabile non c’è bisogno di selezionarlo più tardi.
3.32: Creare e aggiungere allo stesso tempo un elemento alla pagina
$('ul').append('<li>item della lista</li>');
var myItems = [], $myList = $('#myList'); for (var i=0; i<100; i++) { myItems.push('<li>item ' + i + '</li>'); } $myList.append(myItems.join(''));
3.33: Manipolazione di un singolo attributo
$('#myDiv a:first').attr('href', 'newDestination.html');
$('#myDiv a:first').attr({ href : 'newDestination.html', rel : 'super-special' });
$('#myDiv a:first').attr({ rel : 'super-special', href : function(idx, href) { return '/new/' + href; } }); $('#myDiv a:first').attr('href', function(idx, href) { return '/new/' + href; });
- Selezionare tutti gli elementi div che hanno classe “module”.
- Specificare tre selezioni che possono selezionare il terzo item della lista non ordinata #myList. Qual è il migliore da usare e perché?
- Selezionare l’elemento label dell’elemento input mediante un selettore di attributo.
- Verificare quanti elementi della pagina sono nascosti (suggerimento:. .length)
- Verificare quante immagini sulla pagina hanno l’attributo alt.
- Selezionare tutte le righe dispari del corpo della tabella.
- Selezionare tutte le immagini sulla pagina, registrare nella console l’attributo alt di ogni immagine.
- Selezionare l’elemento di input, poi andare al form e aggiungere una classe ad esso.
- Selezionare l’item che ha la classe di “current” nella lista #myList e rimuovere la classe, poi aggiungere la classe “current” al successivo item della lista.
- Selezionare l’elemento select all’interno di #special; per poi dirigersi verso il pulsante submit.
- Selezionare il primo item della lista nell’elenemto #slideshow; aggiungere la classe “current” ad esso e poi aggiungere la classe “disabled” agli elementi fratelli.
- Aggiungere 5 nuovi elementi alla fine della lista non ordinata # myList. Suggerimento:
for (var i = 0; i<5; i++) { ... }
- Rimuovere gli elementi dispari dalla lista.
- Aggiungere un altro elemento h2 e un altro paragrafo all’ultimo div.module.
- Aggiungere un’altra opzione all’elemento select, danno all’opzione aggiunta il valore “Wednesday”.
- Aggiungere un nuovo div.module alla pagina dopo l’ultima pagina; e quindi aggiungere una copia di una delle immagini esistenti nel nuovo div.
Ancora nessun commento