Prototype: l’uso del doppio dollaro ($$)

Con l’ultimo rilascio di Prototype, Andrew e Christophe hanno velocizzato e migliorato la funzione ‘doppio dollaro’  ($$ utility), la quale permette di selezionare un elemento specificando il selettore (praticamente tutti i selettori supportati dalle specifiche CSS3).

L’utilità di questa funzione va ben oltre la popolare $, che può essere utile ma, in fin dei conti, non svolge nessuna operazione degna di nota. L’utility ‘doppio dollaro’ ($$) invece permette davvero di selezionare qualsiasi tipo di elemento, fornendo ottimi strumenti per filtrare gli elementi nel DOM.

Vediamo alcuni esempi ripresi dal sito ufficiale:

1
2
3
4
5
$$('div'); // -> Tutti i DIV del documento. Stessa cosa di document.getElementsByTagName('div')!
$$('#contents'); // -> Uguale a $('contents'), ma ritorna sempre un array.
$$('li.faux'); // -> Tutti fli elementi LI con class 'faux'
$$('#contents a[rel]'); // -> Tutti i TAG A (links) al di sotto di un elemento con ID "contents" e con un attributo rel
$$('a[href="#"]'); // -> Tutti i TAG A (links) con un'attributo href con valore "#" (eyeew!)

Il punto di forza, tuttavia, risiede nella possibilità di escludere alcuni elementi in favore di altri, ad esempio:

1
$$('a:not([rel~=nofollow])'); // -> Tutti i TAG A (links), esclusi quelli che contengono un attributo rel impostato a "nofollow"

Ancora più interessante è:

1
$$('a[href^=#]:not([href=#])')

Questo, in pratica, trova tutti i TAG A con l’attributo href che inizia con ‘#’ ma non prende in considerazione quelli che sono uguali a ‘#’ solamente. In altre parole vengono ignorati i links che non puntato ad un valido ID!
Questa eccezionale caratteristica del ($$) ha ispirato Tobie Langel per creazione di un semplicissimo script (disarmante) in grado di aggiungere un simpatico effetto di scroll quando all’interno di una stessa pagina HTML ci si sposta per Anchors, con la tecnica – appunto – href=”#”.
Per un Demo clicca qui.

2 commenti a: “ ”

  1. 28 mar, 2007 undolog » Blog Archive » Esempi di unobtrusive Javascript:

    [...] Ma cosa si può fare con questa tecnica? Molte cose interessanti. Un’interessante esempio che possiamo commentare (vedi anche Prototype: l’uso del doppio dollaro ($$)) ci viene da Tobie Langel. Con poche righe di codice e scricando le librerie Prototype e Scriptaculous si può dare un simpatico effetto ai classici anchor delle nostre pagine. Prima di tutto create una pagina HTML con il seguente codice: PLAIN TEXT HTML: [...]

  2. 09 mag, 2008 Dove Javascript vince | Undolog.com:

    [...] Prototype: l’uso del doppio dollaro ($$) Adobe Apollo Alpha [...]

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre> // blocco generico
                   <code></code> // blocco generico
                   [cc_actionscript][/cc_actionscript] // Actionscript
                   [cc_actionscript3][/cc_actionscript3] // Actionscript 3
                   [cc_css][/cc_css] // CSS Style Sheet
                   [cc_html][/cc_html] // HTML
                   [cc_js][/cc_js] // Javascript
                   [cc_objc][/cc_objc] // Objective-C
                   [cc_php][/cc_objc] // PHP
                   [cc_sql][/cc_sql] // SQL