FUNCIÓN $

La función $ viene a reemplezar a la función getElementById de javascript. En principio tiene la misma funcionalidad más algunas mejoras. Recordemos que esta función nos permite acceder a cualquier elemento del DOM conociendo su ID.

Por ejemplo, definamos estas líneas de código HTML:

<input type="text" id="caja_texto">

<input type="button" value="Mostrar contenido" onclick="mostrar_contenido()">

Ahora en javascript definimos la función mostrar_contenido()

function mostrar_contenido(){ 
    var contenido = document.getElementById('caja_texto').value;
    alert (contenido);
}

Esta función utilizando Prototype sería:

function mostrar_contenido(){ 
    var contenido = $('caja_texto').value;
    alert (contenido);
}

En cualquier caso, al clickear el boton "Mostrar contenido", se invocará a la función mostrar_contenido(), la cual mostrará el contenido actual de la caja de texto. 

La vuelta de tuerca de la función $ es que nos permite a diferencia de getElementById referenciar a más de un elemento a la vez.

Por ejemplo, definamos estas líneas de código HTML:

<input type="text" id="caja_texto1">

<input type="text" id="caja_texto2">

<input type="text" id="caja_texto3"> 

<input type="button" value="Mostrar contenido" onclick="mostrar_contenido()">

 Ahora definamos esta función utilizando Prototype:

function mostrar_contenido(){ 
    var contenido = $('caja_texto1','caja_texto2','caja_texto3').value;
    alert (contenido[0].value+' - '+contenido[1].value+' - '+contenido[2].value);
}

Al clickear el boton "Mostrar contenido", se invocará a la función mostrar_contenido(), la cual mostrará el contenido actual de todas las cajas de texto. 

Ver ejemplo