Oct
03
Posted on 03-10-2006
Filed Under (pixzone) by Federico Feroldi on 03-10-2006

JQuery è una libreria, anzi lo chiamerei framwork Javascript che estende le API standard implementate nei browser.

Il metodo principale è

$(el)

dove el può essere un oggetto DOM o una stringa.

$(document).ready(function() {
    alert(‘Document loaded!’);
});

In questo modo quando l’oggetto document sarà pronto (ovvero la pagina sarà caricata completamente) verrà lanciata la funzione agganciata all’evento ready, in questo caso una funziona anonima che apre un alert.

Selectors

Nel caso il parametro el sia una stringa, questa verrà interpretata come selector CSS o XPath che andrà a generare un array di oggetti DOM ai quali verrà poi applicato il metodo successivo nella catena.

$(‘a’).click(function() {
    alert(“Hello world!”);
});

Il primo metodo $() seleziona tutti i link presenti nella pagina, su di essi il metodo click() associa una funzione anonima all’evento onClick. Il risultato sarà che cliccando sui link si aprirà l’alert, il tutto senza modificare nemmeno un tag HTML.

Per i selector JQuery supporta le sintassi CSS1-3 e XPath (non completamente), questo ne fa a mio avviso la caratteristica più potente. Vediamo qualche esempio preso dalla documentazione.

Nasconde tutti i paragrafi che contengono un link:

$(“p[a]“).hide();

Mostra il primo paragrafo presente nella pagina:

$(“p:eq(0)”).show();

Nascondi tutti i DIV che vengono visualizzati sulla pagina:

$(“div:visible”).hide();

Seleziona tutti gli elementi appartenenti a liste ordinate:

$(“ul/li”); /* sintassi XPath */
$(“ul> li”); /* sintassi CSS */

Seleziona tutti i paragrafi con classe “foo” che includono un link al loro interno:

$(“p.foo[a]“);

Legge i valori dei campi INPUT con nome “bar“:

$(“input[@name=bar]“).val();

Seleziona tutti i radio buttons attivi:

$(“input[@type=radio][@checked]“);
Share and Enjoy:
  • Digg
  • del.icio.us
  • DZone
  • Reddit
  • Technorati
  • YahooMyWeb
(1) Comment    Read More   

Comments

[...] JQuery è facilissimo! Da un occhiata qua dove parlo dei selector [...]


Post a Comment
Name:
Email:
Website:
Comments: