Fondamentali di jQuery

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) { ... }

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.

• :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

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

• $.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

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.

$('<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(''));

• 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 codice

  
  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.