PDF de programación - Introducción a jQuery

Imágen de pdf Introducción a jQuery

Introducción a jQuerygráfica de visualizaciones

Actualizado el 23 de Julio del 2021 (Publicado el 14 de Enero del 2017)
1.245 visualizaciones desde el 14 de Enero del 2017
284,7 KB
25 paginas
Creado hace 14a (02/03/2010)
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/2010

www.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ómo se 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 los elementos
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/2010

www.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 sean hijos 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 src de 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 el cambio 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 sobre un bloque

$('.block').hover(

function() {$(this).find('a').css('color', 'red')},
function() {$(this).find('a').css('color', 'blue')})

Se asignan dos acciones (funciones) sobre los elementos de clase
.block, uno cuando el ratón entra, y otro cuando el ratón sale; las
funciones modifican el color de las etiquetas a hijas del elemento que
genera el evento

26/Febrero/2010

www.metadrop.net

¿Qué se puede hacer con jQuery? (VI)
Crear elementos e insertarlos en el DOM.

$('<div>Esto es jQuery</div>').insertBefore('#content')
Crea un elemento div y lo inserta antes del elemento #content

26/Febrero/2010

www.metadrop.net

¿Qué se puede hacer con jQuery? (VII)
Otras posibilidades:
● Simplifica el uso de Ajax.
● Detección de características del navegador (box
model, opacidad, etc)
● Manipulación compleja del DOM.
● Funciones de utilidad sobre cadenas, arrays, etc.

26/Febrero/2010

www.metadrop.net

Plugins
● jQuery puede ser extendido con multitud de
plugins, al estilo de los módulos de Drupal. Por
ejemplo, para mostrar tooltips, pestañas, efectos,
etc.
● Existen muchos módulos de Drupal que integran
plugins de jQuery.
● Para usarlos basta con incluir su
correspondiente fichero JS.
● Directorio de plugins:

http://plugins.jquery.com/

26/Febrero/2010

www.metadrop.net

Plugins y módulos de Drupal
Existen muchos módulos de Drupal que integran
automáticamente plugins de jQuery, como
Lightbox.

Normalmente es preferible usar un módulo que
integrarlo a mano.

26/Febrero/2010

www.metadrop.net

jQuery UI
Es una librería de plugins que extiende jQuery
añadiéndole interacciones, efectos y widgets de
interfaz de usuario.
Está inlcuida en Drupal 7.

http://jqueryui.com/

http://jqueryui.com/demos/

26/Febrero/2010

www.metadrop.net

Integración con Drupal
Drupal 5 incluye jQuery 1.0.x, Drupal 6 incluye
jQuery 1.2.x.

Si se necesita una versión más actualizada (p. ej:
jQuery 1.3.2) el módulo jQuery Update permite
actualizar la versión de jQuery.

http://drupal.org/project/jquery_update

26/Febrero/2010

www.metadrop.net

Incluir ficheros JS en Drupal (I)
Mediante theme.info para que esté disponible en
todas las páginas.

scripts[] = script.js
Relativo a al directorio del tema

26/Febrero/2010

www.metadrop.net

Incluir ficheros JS en Drupal (II)
Mediante la función drupal_add_js, por ejemplo en
template.tpl.php o en un módulo, para usarlo solo
en ciertas páginas.
Se puede usar esta función directamente en el
body de un nodo mediante el filtro PHP; útil para
pruebas, pero en principio poco recomendable
como método definitivo.

drupal_add_js('sites/all/themes/mitema/script.js')
Relativo a base_theme()

26/Febrero/2010

www.metadrop.net

jQuery y Drupal
● jQuery parece ser percibido como algo más
complicado de lo que en realidad es.
● Se pueden obtener buenos resultados con poco
código, sin necesidad de conocer a fondo jQuery.
● Esta presentación no es exhaustiva, se han
dejado muchas cosas fuera, simplemente sirve
para abrir boca.

26/Febrero/2010

www.metadrop.net

Enlaces
http://jquery.com/
http://visualjquery.com/
http://plugins.jquery.com/
http://drupal.org/project/jquery_update
http://docs.jquery.com/Tutorials:Live_Examples_of_jQuery

26/Febrero/2010

www.metadrop.net

metadrop

be water

www.metadrop.net

[email protected]

668 830 032
Madrid (Spain)

26/Febrero/2010

www.metadrop.net
  • Links de descarga
http://lwp-l.com/pdf1595

Comentarios de: Introducción a jQuery (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad