Tips & Tricks [JQuery]

  • $ e JQuery sono la stessa cosa
  • Al caricamento, IN ORDINE DI ESECUZIONE
    1.  Attenzione 2 e 3 hanno lo stesso significato ; 4 e 5 sono identiche
    2. $(document).ready(function()
      1. jQuery(document).ready(function(: per evitare conflitti con altri framework
    3. $(function() {.. : l’albero degli elementi HTML è stato caricato.
    4. window.onload = function() {… : tutto il documento è stato caricato, compresi foglio di stile e immagini.
    5. $(window).load(function(){
DescrizioneComandoCommento / Esempio
Tutti i link del documento$("a")Si usa la notazione CSS
Seleziona un singolo elemento con id ="idblocco"$("#idblocco")Si usa la notazione CSS
Solo i link con la classe external$("a.external")
Tutti gli elementi del documento$("*")Restituisce un array di elementi jQuery
Più selettori contemporaneamente$("#blocco, a.external")Restituisce un array di elementi jQuery
I Link all'interno dell'elemento con id = "blocco"$("#blocco a")Restituisce un array di elementi jQuery
solo gli elementi lista diretti (1 livello) discendenti del tag ul$("ul > li")
tutti i tag input preceduti da un tag label$("label + input")
tutti i div adiacenti a #prev$("#prev ~ div")
tutti i link che si aprono in nuove finestre$("a[target='_blank']")
link con title che inizia con 'nuova'$("a[title^='nuova']")
link con title che finisce con 'pagina'$("#a[title$='pagina']")
link che non apre una nuova pagina$("a[target!='_blank']")
tutti i link con attribute title$("a[title]")
Il primo elemento della lista con id menu$("#menu li:first-child")
l'ultimo elemento della lista con id menu$("#menu li:last-child")
$("#menu li:only-child")
Tutti i tag con div nascosti$("div:hidden")
Sono uguali$(":text")
$("input[type='text']")
Tutti gli elementi disabilitati$(":disabled")
Tutti i checkbox selezionati dall'utente$(":checked")
Restituisce la dimensione dell'array.size()Restituisce un numero
$("#menu li").size()
Restituisce la dimensione dell'array.lengthRestituisce un numero
Restituisce una collezione di elementi da usare con javascript.get()
.get(i) restituisce l'iesimo elemento
Restituisce oggetti jQuery.eq().eq(i) solo l'iesimo
Ritorna l'indice dell'elemento rispetto a quelli selezionati.index(...)
Ciclo sull'elemento specifico this.each(function() { ... this. }
Ciclo con indice ed elemento.each(function(i, el) { });
Il valore di href$("a#miolink").attr("href")
Imposto il valore di href$("a#miolink").attr("href", "http://www.urlsito.it");
Imposto il valore di href in base alla funzione$("a#miolink").attr("href", function (){...})
Imposto il valore di href e del target$("a#miolink").attr({"href": "http://www.urlsito.it", "target":"_blank"})
Rimuovo l'attributo.removeAttr("target")
Ritorna true se l'elemento ha una specifica classe.hasclass(...)
Aggiunge una classe.addclass(...)
Rimuove una classe.removeclasse(...)
aggiunge una classe se non presente altrimenti la toglie.toggleclass(...)
Restituisce il testo contenuto in un elemento.text()
.text("nuovo testo")
Restituisce il contenuto dell'elemento.html()
.html("ciao Pippo

") NUovo valore
comprende i tag html
Solo i link con classe external.filter(".external")$("#contenitore a").filter(".external")
Metodo opposto a filter.not(...)
Selettivo da n a m.slice(0,2)$("#contenitore a").slice(0,2) solo il primo e il secondo link
Restituisce true quando gli elementi rispettano le regole indicate.is(...)$("#contenitore a")each(function(){
if ($(this).is(".external")) {
//codice per link esterni
} else {
//codice per link interni
}
});