Scribd
Cargar
48 vistas8 páginas

Javascript - Clase 6

El documento describe la librería jQuery y sus funcionalidades. jQuery simplifica la manipulación del DOM, el manejo de eventos y las animaciones. La función principal $() permite acceder a nodos del DOM usando selectores CSS. jQuery agrega métodos como css(), html(), append(), prepend() y attr() para modificar el estilo, contenido y atributos de los nodos.

Cargado por

Claudio L Abesi
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
48 vistas8 páginas

Javascript - Clase 6

El documento describe la librería jQuery y sus funcionalidades. jQuery simplifica la manipulación del DOM, el manejo de eventos y las animaciones. La función principal $() permite acceder a nodos del DOM usando selectores CSS. jQuery agrega métodos como css(), html(), append(), prepend() y attr() para modificar el estilo, contenido y atributos de los nodos.

Cargado por

Claudio L Abesi
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 8

CURSO JAVASCRIPT I Auxiliar: Joaquin Jauregui

Disertante: David Curras Auxiliar: Germán A.Dosko

Javascript I (jQuery)

Clase 6
Introducción a jQuery

Índice
La librería jQuery …………………………………… 2
El Core de jQuery …………………………………… 3
Funcionalidad en nodos DOM …………………………………… 4
Efectos en nodos DOM …………………………………… 6
Eventos con jQuery …………………………………… 7
Otras recomendaciones …………………………………… 8

Página 1 de 8
CURSO JAVASCRIPT I Auxiliar: Joaquin Jauregui
Disertante: David Curras Auxiliar: Germán A.Dosko

La librería jQuery
jQuery es una biblioteca de JavaScript que nos permitirá simplificar la manera de manipular los objetos
del DOM, manejar eventos, desarrollar animaciones y agregar interacción con AJAX. Esta biblioteca fue
creada inicialmente por John Resig y presentada por primera vez el 14 de enero de 2006 en el BarCamp de
Nueva York.
jQuery ofrece una serie de funcionalidades basadas en JavaScript que de otra manera requerirían de
mucho más código, es decir, con las funciones propias de esta biblioteca se logran grandes resultados en
menos tiempo y espacio.
Para utilizarlo, solo necesitamos descargar la última versión desde el sitio web oficial
(http://jquery.com/download/), guardarlo en nuestro proyecto y hacerle referencia desde el documento
HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">


<head profile="http://www.w3.org/2005/10/profile">
<title>Calculadora</title>
<meta http-equiv="Content-Type" content="text-html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
...
<script type="text/javascript" src="jquery.1.8.2.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
...
</body>
</html>

Google posee un amplio listado de librerías online, las cuales podemos utilizar sin necesidad de
descargarlas. Esto nos permite referenciar la librería de la siguiente forma:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
Podemos ver un listado completo de las librerías que posee Google en esta dirección:
https://developers.google.com/speed/libraries/devguide?hl=es-ES

En esta clase veremos cómo jQuery nos ayuda a realizar lo que aprendimos en las clases anteriores de
una manera más sencilla y con la seguridad de que obtendremos la misma funcionalidad independientemente
de la plataforma o el navegador que utilicemos.

Página 2 de 8
CURSO JAVASCRIPT I Auxiliar: Joaquin Jauregui
Disertante: David Curras Auxiliar: Germán A.Dosko

El Core de jQuery
El Core de jQuery lo forman las funciones más recurridas y que forman la base sobre la que se trabaja
para hacer cualquier cosa con jQuery. Contiene una serie de clases y métodos útiles para hacer tareas
reiterativas, que vamos a necesitar en las aplicaciones. Integra desde funciones que serán útiles en cualquier
script, por sencillo que sea, hasta funciones menos recurridas pero que nos facilitarán el trabajo a la hora de
hacer código limpio, corto y reutilizable.
La principal función de la librería es la función jQuery, la cual tiene diversas utilidades según los
parámetros que se le envíen. Esta función posee como nombre el signo pesos, es decir: $(). Dado que varias
librerías poseen la función pesos, también podemos llamarla de la siguiente forma: jQuery().
Acceso directo a nodos del DOM
Su utilidad principal es acceder de forma directa a los diferentes nodos del árbol DOM, mediante el uso
de selectores CSS.
var misLi = $('li');
for (var i=0; i < misLi.length; i++) {
console.log(misLi[i]); //Mostrará cada uno de los elementos li
}
console.dir(misLi); //Podremos ver el listado de propiedades del array misLi

Así podemos acceder a nodos que serían complejos de conseguir con JavaScript nativo.
//Conseguimos todos los li con clase number, que sean hijos de un elemento cuyo
//atributo id sea buttons
var nodos = $('#buttons li.number');
console.dir(nodos); //Podremos ver el listado de propiedades del array de nodos

Al utilizar la función jQuery pasándole como parámetro un texto con el selector CSS de los nodos que
queremos recuperar, obtendremos un array con todos los nodos encontrados.
Importante: Tener en cuenta que en el ejemplo anterior no se está controlando la carga completa del
DOM antes de ejecutar el código JavaScript, por lo cual no va a funcionar a menos que pongamos el código
dentro del manejador del evento Load del documento o hacer referencia al archivo script.js al final del
HTML.
Extender funcionalidades de los elementos del DOM
Podemos utilizar la función jQuery pasándole como parámetro un objeto del DOM, lo cual resultará en
un nuevo objeto, muy similar al objeto DOM original, pero extendido con todas las funcionalidades de
jQuery para los elementos DOM.
Se debe tener en cuenta que al acceder directamente a nodos del DOM utilizando la función jQuery y
selectores CSS, la mayoría de las veces obtendremos un array con objetos nodo, y este array estará
extendido por las funcionalidades de jQuery, pero los elementos internos no, con lo cual si deseamos utilizar
las funciones jQuery sobre los nodos recuperados debemos volver a incluirlos dentro de la función jQuery:
var misLi = $('li'); //El array devuelto posee funciones jQuery pero los li no
for (var i=0; i < misLi.length; i++) {
$(misLi[i]); //convertimos cada li en nodo con funcionalidades jQuery
}

Página 3 de 8
CURSO JAVASCRIPT I Auxiliar: Joaquin Jauregui
Disertante: David Curras Auxiliar: Germán A.Dosko

Funcionalidades de jQuery en nodos DOM


Son muchas las propiedades y métodos que jQuery agrega a los objetos nodo, a continuación solo
revisaremos las mas utilizadas.
El método CSS
El método CSS de jQuery puede recibir uno o dos parámetros de tipo string. El primer parámetro
representa la propiedad CSS que queremos acceder y el segundo el valor para esta propiedad.
Si le pasamos solo el primer parámetro estaremos obteniendo el valor actual para dicha propiedad. Si le
pasamos ambos parámetros estaremos dándole un nuevo valor a la propiedad.
var numeros = $('#buttons li.number'); //obtenemos todos los botones numero
for (var i=0; i < numeros.length; i++) {
$(numeros[i]).css('color', '#0F0'); //Le damos color verde al texto
console.log($(numeros[i]).css('width')); //Obtenemos el ancho del boton
}

El método HTML
El método html es el equivalente a la propiedad innerHtml de los objetos nodo en JavaScript nativo.
Puede recibir cero o un atributo de tipo string.
Si no le pasamos ningún atributo obtendremos todos los nodos hijo convertidos a texto XHTML. Si le
pasamos un atributo, se remplazará todo el contenido del nodo por el texto XHTML que le enviemos y se
volverá a generar el DOM.
var botonera = $('#buttons'); //obtenemos el elemento con id "buttons"
console.log($(botonera).html()); //Obtenemos todo el html interno
$(botonera).html('<p>Cambiamos el html</p>'); //Remplazamos el html interno

El método APPEND
Este método agrega contenido XHTML al final del elemento actual (internamente).
//Agregamos un párrafo al final del elemento buttons
$('#buttons').append('<p>Agregamos html</p>');

El método PREPEND
Es similar a APPEND pero agrega contenido XHTML al principio del elemento actual (internamente).
//Agregamos un párrafo al principio del elemento buttons
$('#buttons').prepend('<p>Agregamos html</p>');

El método AFTER
Este método agrega contenido XHTML después del elemento actual (externamente).
//Agregamos un párrafo al principio del elemento buttons
$('#buttons').after('<p>Agregamos html fuera de buttons</p>');

Página 4 de 8
CURSO JAVASCRIPT I Auxiliar: Joaquin Jauregui
Disertante: David Curras Auxiliar: Germán A.Dosko

El método BEFORE
Es similar a AFTER pero agrega contenido XHTML antes del elemento actual (externamente).
//Agregamos un párrafo al principio del elemento buttons
$('#buttons').after('<p>Agregamos html fuera de buttons</p>');

El método ATTR
Al igual que el método CSS, ATTR puede recibir uno o dos parámetros de tipo string. El primer
parámetro representa el nombre del atributo HTML que queremos acceder y el segundo el valor para esta
atributo.
Si le pasamos solo el primer parámetro estaremos obteniendo el valor actual para dicho atributo. Si le
pasamos ambos parámetros estaremos dándole un nuevo valor al atributo.
var numeros = $('#buttons li.number'); //obtenemos todos los botones numero
for (var i=0; i < numeros.length; i++) {
$(numeros[i]).attr('title', 'button'+i); //Agregamos el atributo title
console.log($(numeros[i]).attr('class')); //Obtenemos el atributo class
}

El método PROP
Este método es muy similar a ATTR, dado que lo utilizaremos para modificar propiedades del nodo
XHTML. La principal diferencia es que PROP actúa sobre las propiedades del objeto DOM de JavaScript, y
ATTR actúa solo sobre los atributos XHTML.
PROP es muy útil para manejar elementos de formulario, sobre todo cuando queremos modificar
elementos que estén deshabilitados.
var miInput = $('#miInput'); //obtenemos un elemento input en particular
miInput.prop('disabled', false);
var miCheckBox = $('#miCheckBox'); //obtenemos un checkbox en particular
miCheckBox.prop('checked', true);

El método ADDCLASS
Este método permite agregar un nuevo valor al atributo class de XHTML. Observar que esto no
remueve otras clases que ya posea el elemento, como pasaría al utilizar el método ATTR.
//Agregamos la clase 'nuevaClase' al elemento con id 'buttons'
$('#buttons').addClass('nuevaClase');

El método REMOVECLASS
Este método elimina la clase especificada del elemento XHTML en caso que exista.
//Agregamos la clase 'nuevaClase' al elemento con id 'buttons'
$('#buttons').removeClass('nuevaClase');

Página 5 de 8
CURSO JAVASCRIPT I Auxiliar: Joaquin Jauregui
Disertante: David Curras Auxiliar: Germán A.Dosko

Efectos jQuery en nodos DOM


Una de las ventajas más destacadas de jQuery es la realización de efectos especiales para páginas web,
que se desarrollan rápido y con poco código. Podemos ver una lista completa de los efectos básicos que
disponemos en http://docs.jquery.com/Effects.
HIDE
Este método oculta el elemento actual. Podemos pasarle como parámetro un string que controlar la
animación a esta función.
$('#buttons').hide();//Ocultamos de forma normal
$('#buttons').hide('slow');//Ocultamos lentamente
$('#buttons').hide('fast');//Ocultamos rápidamente

SHOW
Es similar a HIDE solo que en lugar de ocultar, muestra el elemento actual.
$('#buttons').show();//Mostramos de forma normal
$('#buttons').show('slow');// Mostramos lentamente
$('#buttons').show('fast');// Mostramos rápidamente

TOGGLE
Este método utiliza los métodos SHOW y HIDE, y cada vez que lo ejecutamos reconoce si el objeto
actual está visible o no, para ocultarlo o mostrarlo según corresponda.
$('#buttons').show();//Nos aseguramos que el elemento está visible
$('#buttons').toggle();//Ocultamos
$('#buttons').toggle();//Volvemos a mostrar

SLIDEUP
Es similar a HIDE, solo que en lugar de disminuir la opacidad con CSS del elemento hasta hacerlo
desaparecer, le disminuye la altura.
$('#buttons').slideup();//Ocultamos de forma normal
$('#buttons').slideup('slow');//Ocultamos lentamente
$('#buttons').slideup('fast');//Ocultamos rápidamente

SLIDEDOWN
Es similar a SHOW, solo que en lugar de aumentar la opacidad con CSS del elemento hasta hacerlo
aparecer, le aumenta la altura.
$('#buttons').slidedown();//Mostramos de forma normal
$('#buttons').slidedown('slow');// Mostramos lentamente
$('#buttons').slidedown('fast');// Mostramos rápidamente

SLIDETOGGLE
Similar a TOGGLE, pero en lugar de utilizar SHOW y HIDE, utiliza SILDEDOWN y SLIDEUP.

Página 6 de 8
CURSO JAVASCRIPT I Auxiliar: Joaquin Jauregui
Disertante: David Curras Auxiliar: Germán A.Dosko

Eventos con jQuery


El manejo de eventos con jQuery es una de las funcionalidades mas importantes de la librería, no solo
porque permite la compatibilidad entre diferentes navegadores y plataformas, sino porque resuelve el
problema de lanzar eventos manualmente.
El evento Load
El evento Load del documento se controla con el método ready de jQuery.
$('document').ready(miFuncion);//miFuncion se ejecturá cuando se cargue el DOM
var miFuncion = function(){
...
};

El evento click
El evento click es uno de los eventos más utilizados en la web y podemos controlarlo fácilmente con
jQuery. También podemos disparar un evento click sobre cualquier objeto del DOM ejecutando el método
click de jQuery sin pasarle argumentos.
$('#miElemento').click(miFuncion);//miFuncion manejará el evento click

var miFuncion = function(event){


console.dir(event); //Mostramos pro consola las propiedades de event
};

$('#miElemento').click();//Disparamos el evento click sobre el elemento

Eventos del teclado


Uno de los aportes más importantes es la estandarización de los valores de las propiedades del objeto
Event para los manejadores de eventos de teclado. La propiedad which del evento nos permite reconocer
cual tecla fue presionada.
Al igual que con click, podemos disparar eventos del teclado simplemente ejecutándolos sin pasarles
ningún parametro.
$('document').keypress(miFuncion);//miFuncion manejará el evento keypress

var miFuncion = function(event){


console.log('El código de tecla es: '+ event.which);
};

$('document').keypress();//Disparamos el evento keypress

Página 7 de 8
CURSO JAVASCRIPT I Auxiliar: Joaquin Jauregui
Disertante: David Curras Auxiliar: Germán A.Dosko

Otras recomendaciones
Para aquellos que deseen interiorizarse aún más en la librería jQuery, recomendamos leer el siguiente
manual de DesarrollosWeb.com
DesarrollosWeb.com - jQuery
Importante!!! Como ya vimos antes, Firebug posee el método dir del objeto console que permite
visualizar el listado de propiedades, métodos y eventos disponibles en el objeto que enviemos como
parámetro. Este método solo sirve para visualizar objetos y esta disponible únicamente en Firebug.
Muchass veces no es necesario buscar en la web ciertas funcionalidad, simplemente recorremos la lista
que nos provee console.dir y podremos encontrar la propiedad de jQuery que estamos buscando.

Página 8 de 8

También podría gustarte