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:
Copia codicefor (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