Java Script

metadrop
be water

Introducción a jQuery
Ricardo Sanz Ante

26/Febrero/2010

26/Febrero/2010

www.metadrop.net

Presentación no exhaustiva de las posibilidades y
facilidad de jQuery, y su integración en Drupal.
Ejemplos

Todos los ejemplos se han hecho y se
pueden probar en el sitio Drupal.org
mediante la consola de Firebug del
navegador Firefox.

26/Febrero/2010www.metadrop.net

Consola Firebug.
26/Febrero/2010

www.metadrop.net

¿Qué es jQuery?
Framework JavaScript.
● Write less, do more.
● Permite generar efectos fácilmente.
● Crear y modificar contenido de la web (DOM).
● Responder a la interacción del usuario.
● Oculta diferencias entre navegadores.
● Incluido en Drupal desde la versión 5.
●

26/Febrero/2010

www.metadrop.net

¿Cómose usa?
Apuntar y disparar
En el uso básico de jQuery, primero se
seleccionan los elementos del DOM que
queremos tratar (apuntar) y luego se llama a las
funciones jQuery adecuadas (disparar).

26/Febrero/2010

www.metadrop.net

Seleccionar elementos
Se usan selectores CSS, incluyendo selectores
CSS 3, y propios de jQuery.
● Se usa la función $.
● $ devuelve un objeto jQuery con loselementos
seleccionados.
● Selectores disponibles:
http://api.jquery.com/category/selectors/
●

26/Febrero/2010

www.metadrop.net

El objeto jQuery
Los objetos jQuery contienen elementos del
DOM.
● El objeto jQuery ofrece funciones para operar
(disparar) sobre los elementos del DOM que
contiene, que pueden afectar a su CSS, atributos,
posición en el DOM, etc.
●

26/Febrero/2010www.metadrop.net

Ejemplo selección
$('.node:nth-child(3n+2)')
De los elemento de clase node, selecciona el segundo de cada 3

$('div:contains("Drupal")')
Selecciona los elementos div que tengan “Drupal” en su contenido

26/Febrero/2010

www.metadrop.net

¿Qué se puede hacer con jQuery? (I)
Leer y modificar el CSS de los elementos.

Apuntar

Disparar$('.content').css('font-variant', 'small-caps')
Cambiamos a smallcaps los textos de los elementos de clase .content

26/Febrero/2010

www.metadrop.net

¿Qué se puede hacer con jQuery? (II)
Guardar los elementos seleccionados para
manipularlos después, o hacer nuevas
selecciones a partir de ellos.
cont = $('.content')
Guardamos los elementos de clase .content en la variable cont
cont.css({color:'white','background-color':'black'})
Cambiamos el color del texto y del fondo de los elementos de cont.

26/Febrero/2010

www.metadrop.net

Las funciones jQuery suelen devolver el mismo
conjunto de elementos sobre el que operan,
envueltos en un objeto jQuery, de forma que se
pueden encadenar llamadas.
cont.find('input').css('backgroundColor', 'red')
Obtenemos los elementos input que seanhijos de los
elementos de cont (que son elementos de clase .content) y
cambiamos su color de fondo

26/Febrero/2010

www.metadrop.net

¿Qué se puede hacer con jQuery? (III)
Leer y manipular los atributos de los elementos.
$('.node-title').toggleClass('terms')
Conmuta la clase terms en los elementos de clase .node-title

$('img').attr('src', '/misc/druplicon.png')
Cambia el atributo srcde todos los elementos img con la ruta a la
imagen de druplicon

26/Febrero/2010

www.metadrop.net

¿Qué se puede hacer con jQuery? (IV)
Disparar efectos, predefinidos o construidos.
$('.content').slideToggle(3000)
Conmutar la visibilidad de los elementos de clase .content, en 3 segundos
$('.content').animate(
{borderWidth: '15px', fontSize: '1.5em'},
2000)
Animar en 2 segundos elcambio del borde actual y el tamaño de letra
actual a 15px de borde y fuente de 1.5em
Se pueden especificar funciones a ejecutar tras finalizar el efecto

26/Febrero/2010

www.metadrop.net

¿Qué se puede hacer con jQuery? (V)
Manejar eventos, facilitando la creación de
interacciones con el usuario.
$('.block').click(function() {
alert('Bloque clickado')})
Muestra un aviso al clicar...