Clase 12 jQuery basico

Electiva II
Clase 12
jQuery Básico
Ing. José Ricardo Tillero UPTAEB

jQuery Básico
Introducción
 Librería que simplifica el desarrollo de la parte de cliente de las aplicaciones Web.
 Define métodos para:
 Manipular elementos.
 Animaciones.
 Comunicación mediante AJAX.
 Esta diseñado para cambiar la manera de programar en JavaScript.
 Ligero (19Kb. última versión 3.6.0).
 Navegadores soportados:
 Firefox.
 Internet Explorer
 Safari
 Opera
 Chrome

jQuery Básico
Introducción
 Es un framework JavaScript.
 El propósito es facilitar la inclusión de JavaScript en un sitio o aplicación web.
 Podemos verlo como una capa de abstracción. Transforma muchas líneas de código
JavaScript, en funciones mas simples.
 NO reemplaza a JavaScript, sino que simplifica su sintaxis.

jQuery Básico
Usando jQuery
 Para utilizarlo, debemos incluirlo en las paginas en las que vamos a utilizarlo.
 Podemos descargar el framework desde www.jquery.com.
 Agregamos una referencia al archivo descargado, en el head de la página.
<script type="text/javascript“ src="jquery-1.5.1.js"></script>
 Debemos agregar en el head esta referencia:
<head>
<title>jQuery test</title>
<script type="text/javascript" src="jquery-1.5.1.js"></script>
</head>

jQuery Básico
Usando jQuery
 Este es un ejemplo de uso de jQuery:
<div id="divTest1"></div>
<script type="text/javascript">
$("#divTest1").text("Hello, world!");
</script>
 Esto carga en el divTest1, el string “Hello, world!”

jQuery Básico
Ready event
 El ejemplo anterior manipula el contenido de la página.
 Es buena práctica esperar a que el documento este cargado y pronto para ser utilizado
 Esto permite:
 Que las estructuras de la página estén cargadas antes de comenzar a utilizarlas
 Que el código JavaScript pueda ser colocado al comienzo de la página.
 Usar $(document).ready() es lo equivalente al evento onLoad y que se ejecuta una
vez cargada la página.
$( document ).ready(function() {
// Todo el código aquí.
});

jQuery Básico
Ready event
 Sin función anónima:
 Con función anónima:

jQuery Básico
Encadenamiento
 Una característica interesante de jQuery, es que la mayoría de los métodos, retornan
un objeto jQuery
 Esto permite realizar cadenas de invocaciones, como por ejemplo:
 Podemos hacer que el código se vea mas intuitivo, como por ejemplo:

jQuery Básico
Selectores
 Una de las tareas mas comunes al usar JavaScript, es modificar el contenido de la
página. Pero para hacer esto, necesitamos encontrar lo que queremos cambiar. Es
para esto que se utilizan los selectores
 El Selector permite tener acceso a elementos DOM mediante selectores CSS o
XPATH.
 Se puede representar mediante jQuery() o el método abreviado $().
 Para elegir un conjunto de elementos, hacemos $(<query para seleccionar>).
 Devuelve un listado de elementos (array).

jQuery Básico
Selectores Básicos
Tipo de Selector Selector Función
Selector por elemento: $(this) Hace referencia a él mismo.
Selector por ID: $(‘#Resultados’) Retorna el elemento que contenga el id con
valor Resultados.
Selector por tag: $(‘div’) Busca todos los div que hay en la página.
Selector por clase CSS:
$(‘.negrita’) Busca todos los elementos que contengan la
clase CSS negrita.

jQuery Básico
Selectores Complejos
 Listado de Selectores más utilizados:

jQuery Básico
Selectores Complejos
 Ejemplos:

jQuery Básico
Core o Núcleo
 El núcleo del jQuery permite la iteración por los elementos devueltos por el
selector:
 .each(callback)
Itera sobre los elementos.
 .size() o .length
Numero de objetos.
.eq(position)
Filtro por posición.
 .get()
Devuelve como objeto DOM.
 .get(index)
Filtro por posición y devuelve el objeto DOM.

jQuery Básico
Core o Núcleo
 De las anteriores funciones cabe destacar el método .each puesto que nos permite
recorrer los elementos devueltos por el selector.
 Ejemplo: Obtener todos los div ocultos y mostrarlos.
 Ejemplo: Añadir el numero de posición a los li seleccionados.

jQuery Básico
Manipulación del DOM
 jQuery provee de métodos para la obtención y manipulación:
 Elementos HTML.
 Atributos en elementos HTML.
 Clases CSS.

jQuery Básico
 Elementos HTML.
 Ejemplos:
Método Función
.html() Retorna el código HTML del elemento (innerHTML).
.html(content) Inserta el valor del content (preferiblemente HTML) al elemento
.text() Retorna el texto del elemento.
.text(content) Asigna el valor del content al texto del elemento.
.append(content) Añade al final del propio elemento el valor del content.
.preprend(content) Añade al principio del propio elemento el valor del content.
.remove(expr) Elimina el elemento con la expr o en su defecto se elimina a el mismo si el
parámetro es vacío (.remove()).
.after(content) Añade el valor del content después del elemento seleccionado.
Añade el valor del content antes del elemento seleccionado.
.before(content) Añade el valor del content antes del elemento seleccionad

jQuery Básico
 Atributos en elementos HTML.
 Ejemplos:
Método Función
.val() Retorna el valor del atributo en elementos input.
.val(val) Inserta el valor del atributo en elementos input.
.attr(name) Devuelve el valor del elemento del atributo name.
.attr(properties) Asigna varios valores mediante un objeto JavaScript.
.attr(name,value) Asigna el valor al elemento con el atributo name, si este no existe se crea.
.removeAttr(name) Elimina el atributo del elemento.

jQuery Básico
 Elementos HTML.
 Ejemplos:
Método Función
.css(name) Obtiene el valor del estilo.
.css(properties) Asigna varios valores de estilo mediante un objeto JavaScript.
.css(name,value) Asigna un valor al estilo.
.addClass(class) Añade la clase al elemento.
.hasClass(class) Devuelve true:false si tiene la clase.
.removeClass(class) Elimina la clase del elemento.
.height() Obtención del alto.
.height(val) Asignación del alto.
.width() Obtención del ancho.
.width(val) Asignación del ancho.

jQuery Básico
Eventos
 Creación de eventos por elementos rápidamente.
 Gran cantidad de eventos disponibles.
 Posibilidad de crear manejadores para aquellos eventos que no contempla jQuery.
 Si se generan nuevos elementos es necesario volver a crear los eventos.
 Eventos integrados en jQuery:
 Ejemplo
.blur .change .click .dblclick .error
.focus .keydown .keypress .keyup .load
.mousedown .mouseenter .mouseleave .mousemove .mouseout
.mouseup .resize .scroll .select .submit
.unload

jQuery Básico
Eventos
 Creación/Eliminación de eventos propios:
 .bind(name,callback)
Se genera un evento y cada vez que lo detecte lanzara la función definida en
callback.
 .unbind(name)
Elimina el manejador para que cuando se lance un evento no lo detecte.
 Ejemplo:

jQuery Básico
Efectos
 Con jQuery, agregar efectos a una página es muy fácil. Estos efectos poseen una configuración predeterminada
pero también es posible proveerles parámetros personalizados. Además es posible crear animaciones
particulares estableciendo valores de propiedades CSS.
 Funciones definidas:
Método Función
.show(speed)
Muestra el elemento, si ya se esta mostrando no hace nada.
.hide(speed)
Oculta el elemento.
.toggle(speed,callback)
Muestra o oculta el elemento, dependiendo del ultimo estado.
.animate(params,speed,callback) Crea una animación con los estilos seleccionados.
.stop()
Para la animación del elemento.
.fadeIn()
De forma animada, cambia la opacidad del elemento seleccionado al 100%.
.fadeOut()
De forma animada, cambia la opacidad del elemento seleccionado al 0
.slideDown()
Muestra el elemento seleccionado con un movimiento de deslizamiento
vertical.
.slideUp()
Oculta el elemento seleccionado con un movimiento de deslizamiento vertical.
.slideToggle()
Muestra o oculta el elemento seleccionado con un movimiento de
deslizamiento vertical, dependiendo si actualmente el elemento está visible o
no.

jQuery Básico
Efectos
 Ejemplos:

jQuery Básico
jQuery - Ajax
 Fácil integración con Ajax.
 Posibilidad de pedir peticiones a alto/bajo nivel.
 Parseo de datos dependiendo de la fuente.

Clase 12 jQuery basico

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Similar a Clase 12 jQuery basico

Similar a Clase 12 jQuery basico (20)

Más de José Ricardo Tillero Giménez

Más de José Ricardo Tillero Giménez (20)

Último

Último (20)

Clase 12 jQuery basico