Fondamentali di jQuery

$(document).ready(function() {
    console.log('il ocumento è pronto!');
});

$(function() {
    console.log('il ocumento è pronto!');
});

function readyFn() {
    // codice da eseguire quando il documento è pronto
}

$(document).ready(readyFn);

$('#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

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

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

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

$('a').attr('href', 'allMyHrefsAreTheSameNow.html');
$('a').attr({
    'title' : 'con i titoli è la stessa cosa!',
    'href' : 'somethingNew.html'
});

$('a').attr('href');  // restituisce il primo valore dell'attributo href
                      // appartenente al elemento <a> del documento

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

$('#myList li').each(function(idx, el) {
    console.log(
        'L\'elemento ' + idx +
        'ha il seguente html: ' +
        $(el).html()
    );
});

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

$('#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.