Scribd
Cargar
19 vistas50 páginas

Material Jquery

Cargado por

Miguel Horowitz
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 PPTX, PDF, TXT o lee en línea desde Scribd
19 vistas50 páginas

Material Jquery

Cargado por

Miguel Horowitz
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 PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 50

HTML+CSS+JS

JAVA PROGRAMMING III


Capítulo 5
INTRO A JQUERY

jQuery es un framework Javascript

Un Framework es un conjunto de herramientas que nos


permiten trabajar de manera mas sencilla, y reutilizar
funcionalidades en varios proyectos.
En desarrollo web, un Framework permite estructurar de una
mejor forma nuestro código

El propósito de jQuery es hacer que JavaScript sea más fácil


usar.
INTRO A JQUERY

CARACTERÍSTICAS:
 jQuery es una Framework JavaScript.
 Simplifica la programación JavaScript.
 Es fácil de aprender.
 Es rápido y liviano.
NOS PROPORCIONA:
 Manipulación HTML/DOM.
 Manipulación CSS.
 Métodos de eventos HTML.
 Efectos y animaciones.
 AJAX.
 Entre otros.
UTILIZANDO JQUERY

Para añadir jQuery a nuestro código, podemos:

 Descargar el Framework desde http://jquery.com/


La librería jQuery es un solo archivo JavaScript y lo
referenciamos con la etiqueta HTML <script> (debe estar
dentro de la sección <head>):
UTILIZANDO JQUERY

O también podemos utilizarlo remoto:


 Incluir los archivos de jQuery de un CDN (Content Delivery
Network):
Google CDN:

Microsoft CDN:
UTILIZANDO JQUERY

• Cuáles son las ventajas de Incluir jQuery desde


un CDN (Content Delivery Network)?

Muchos de los usuarios ya han descargado jQuery


de Google o Microsoft previamente cuando visitan
otro sitio. Como resultado, se cargará desde la
caché cuando visiten nuestro sitio, lo que lleva a
un tiempo de carga más rápido. Además, el uso de
CDN se asegurará de que una vez un usuario
solicite un archivo de él, se servirá desde el
servidor más cercano a ellos, lo que también
conduce a un tiempo de carga más rápido.
LA SINTAXIS

Con jQuery se seleccionan (consultan/query) elementos HTML y


se realizan "acciones" sobre ellos.

SINTAXIS BÁSICA:
$(selector).action()

 Un signo $ para definir/acceder a jQuery.


 Un (selector) para “consultar/query (o buscar)" elementos
HTML.
 Una acción() jQuery que se realizará en el elemento.
LA SINTAXIS

EJEMPLOS:

 $(this).hide() - oculta el elemento actual.


 $("p").hide() - oculta todos los elementos <p>.
 $(“.test").hide() - oculta todos los elementos con class="test".
 $("# test").hide() - oculta el elemento con id="test".
DOCUMENT READY EVENT

De esta manera, evitamos que cualquier código jQuery se ejecute antes


de que el documento termine de cargar (is ready).
Se debe tener presente que algunas acciones podrían fallar si se
ejecutan antes de que el documento este completamente cargado:
 Intentar ocultar un elemento que aún no se ha creado.
 Intentar obtener el tamaño de una imagen que aún no ha sido
cargada.
DOCUMENT READY EVENT

Existe una manera simplificada de hacer referencia a lo mismo:


LOS SELECTORES
Los selectores jQuery permiten seleccionar y manipular elementos
HTML.
Se utilizan para "buscar" (o seleccionar) elementos HTML basados en:
 nombre,
 id,
 clases,
 tipos,
 atributos,
 valores de atributos
 Y más.

Se basa en los selectores CSS existentes y, además, tiene algunos


selectores personalizados.
LOS SELECTORES

En: http://api.jquery.com/category/selectors/ se puede encontrar una


completa referencia sobre los selectores de la biblioteca.

SINTAXIS:
$(‘selector’)

Los selectores jQuery retornan un array de objetos que coinciden


con los criterios especificados. Este array es un conjunto de objetos
de jQuery.
LOS SELECTORES

Selector por nombre de etiquetas:


• Indicamos la etiqueta a la que deseamos referirnos, es decir, la
etiqueta que queremos seleccionar. Obtendremos así, todas las
etiquetas de la página indicada en el selector.
• EJEMPLO:
 $("h1"): selecciona todos los encabezados de nivel 1. Es decir, todos los
tags h1.
Selector por identificador:
• Sirven para seleccionar elementos que tengan un identificador dado,
que se asigna a las etiquetas a través del atributo id del HTML. Para
utilizar este selector se indica primero el carácter "#" y luego el
identificador de cuyo elemento se desee seleccionar, tal como con CSS.
• EJEMPLO:
 $("#idElemento"): selecciona una etiqueta que tiene el atributo
id="idElemento”
LOS SELECTORES
Selector por clase:
• Podemos indicar el nombre de una clase (class de CSS) y seleccionar
todos los elementos a los que se ha aplicado esta clase. Para ello,
como en CSS, comenzamos colocando el carácter "." y luego el
nombre de la clase que deseamos seleccionar.
• EJEMPLO:
 $(".miClase"): selecciona todos los elementos que tienen el atributo
class="miClase”
Selector por varias clases:
• Podemos indicar varias clases CSS, para obtener todos los elementos que
tienen las mismas: todas al mismo tiempo. Esto se consigue comenzando
por un ".", igual que los selectores de clases, y luego otro "." para separar
las distintas clases que queremos utilizar en el selector.
• EJEMPLO:
 $(".clase1.clase2"): selecciona los elementos que tienen class="clase1
clase2”.
LOS SELECTORES
Selector asterisco "*":
• Nos sirve para seleccionar todos los elementos de la página.
• EJEMPLO:
 $("*"): selecciona todos los elementos que tiene la página.

Más selectores:
• etiqueta.clase: Encuentra elementos del tipo de la etiqueta que tengan la
clase “clase”.
 Ejemplo: $(‘div.miClase’);
• selector1, selector2,…: Encuentra todos los selectores especificados.
Equivalente al OR.
 Ejemplo: $(‘#id1, #id2’);
• Y más…
EL EACH
• Es un método para realizar acciones con los elementos que
concuerdan con una selección realizada con $(selector).
• Es muy útil ya que nos da una manera cómoda de iterar con
elementos de la página y hacer cosas con ellos de manera
rápida.
• ¿CÓMO FUNCIONA?
 Con each realizamos una iteración por todos los elementos del DOM
que se hayan seleccionado.
 Con la variable "this" tenemos acceso al elemento actual.
 El método each recibe una función a ejecutar para cada elemento y
dentro de esa función con la variable "this" tenemos una referencia
a ese elemento del DOM. Adicionalmente, la función que se envía a
each, puede recibir un parámetro que es el índice actual sobre el
que se está iterando.
EL EACH

Imaginemos que tenemos párrafos en la página y queremos


cambiar el color de fondo a los mismos, de manera que tengan
colores alternos, para hacer dinámicamente un diseño para los
listados.
Entonces podríamos hacer lo siguiente:
LOS EVENTOS

Recordemos el concepto de eventos en JavaScript…


Ejemplos:
 mover el mouse sobre un elemento,
 click en un botón,
 click en un elemento,
 etc.

En jQuery, tenemos un método equivalente para el manejo de


eventos que vimos con JS.
Por ejemplo: para asignar un evento al hacer click a todos los
tags “p” de una página
LOS EVENTOS

MÁS UTILIZADOS:
 click(): genera un evento cuando se produce un click en un
elemento de la página.
 dblclick(): genera un evento cuando se produce un doble click
sobre un elemento.
 mouseenter(): Este evento se produce al situar el mouse
encima de un elemento de la página.
 mouseleave(): Este se produce cuando el mouse sale de
encima de un elemento de la página.
 mousedown(): genera un evento cuando el usuario hace click,
en el momento que presiona el botón e independientemente
de si lo suelta o no. Sirve tanto para el botón derecho como el
izquierdo del mouse.
LOS EVENTOS
MÁS UTILIZADOS:
 mouseup(): genera un evento cuando el usuario ha hecho click y
luego suelta un botón del ratón.
 focus(): se ejecuta cuando el campo de un formulario obtiene el
foco.
 keydown(): se produce en el momento que se presiona una tecla
del teclado, independientemente de si se libera la presión. Se
produce una única vez en el momento de la presión.
 keypress(): ocurre cuando se digita un carácter, o se presiona otro
tipo de tecla. Se ejecuta como respuesta a una pulsación e
inmediata liberación de la tecla, o varias veces si se pulsa una tecla
y se mantiene pulsada.
 keyup(): se ejecuta al momento de liberar una tecla. Es decir, al
dejar de presionar una tecla que teníamos pulsada.
LOS EVENTOS

EVENTO ON:

El método on() asigna uno o más manejadores de eventos para


los elementos seleccionados.
MANIPULACION DEL DOM

jQuery contiene potentes métodos para cambiar y manipular


elementos y atributos HTML.
En cuanto a los elementos, podemos mencionar tres métodos
simples:

 text() - Establece o devuelve el contenido de texto de los


elementos seleccionados
 html() - Establece o devuelve el contenido de los elementos
seleccionados.
 val() - Establece o devuelve el valor de los campos de
formulario
MANIPULACION DEL DOM

EJEMPLO GET(OBTENER)

DIFERENCIA ENTRE TEXT() Y


HTML():

 text() - Establece o
devuelve el contenido de
texto de los elementos
seleccionados
 html() - Establece o
devuelve el contenido de
los elementos
seleccionados.
MANIPULACION DEL DOM
EJEMPLO SET(ESTABLECER)
MANIPULACION DEL DOM
En cuanto a los atributos, tenemos el método attr().
Pero antes, recordemos la siguiente sintaxis:

Entonces:
 attr(): se utiliza para obtener valores de atributos.
MANIPULACION DEL DOM
AGREGAR ELEMENTOS/CONTENIDO:

Vemos cuatro métodos jQuery que se utilizan para agregar


contenido nuevo:

 append() - Inserta contenido al final de los elementos


seleccionados
 prepend() - Inserta contenido al comienzo de los elementos
seleccionados
 after() - Inserta contenido luego de los elementos seleccionados
 before() - Inserta contenido antes de los elementos seleccionados

TIP: A estos métodos le podemos pasar más de un parámetro para


agregar más de un elemento.
MANIPULACION DEL DOM

ELIMINAR ELEMENTOS/CONTENIDO:

Para eliminar elementos y contenido, hay principalmente dos


métodos jQuery:

 remove() - Elimina el elemento seleccionado (y sus


elementos secundarios)
 empty() - Elimina los elementos secundarios del elemento
seleccionado
MANIPULACION DEL DOM
EJEMPLO REMOVE:
MANIPULACION DE ESTILOS CSS

jQuery, provee una fácil manipulación de los estilos CSS de los


elementos.

 addClass() - Agrega una o más clases a los elementos


seleccionados.
 removeClass() - Elimina una o más clases de los elementos
seleccionados.
 toggleClass() - Alterna entre añadir/quitar clases de los
elementos seleccionados.
 css() - Establece o devuelve el atributo de estilo.
MANIPULACION DE ESTILOS CSS

MÉTODO CSS():

El método css() retorna una o más propiedades de estilo para los


elementos seleccionados.

Y para establecer una o varias propiedades


PRIMERA PRACTICA

EJERCICIO 1: Mostrar el texto “READY!” una vez que el


documento HTML ha terminado de cargar.
EJERCICIO 2: Crear un párrafo con algún texto, y agregarlo al final
del body una vez que el documento ha sido cargado en su
totalidad (este contiene al menos dos <p>).
EJERCICIO 3: Generar un HTML que contenga 4 párrafos de texto.
Luego, usando jQuery obtener todos los tags <p> y recorrerlos,
asignándoles a cada uno un color de texto diferente.
TIP: Para recorrerlos usar EACH.
EJERCICIO 4: Crear un HTML que contenga un vinculo que
permita ir al sitio web www.google.com, y a su vez contenga
también un botón con el texto “Otra ayuda” que al presionarlo
cambie el sitio al cual me redirige a www.stackoverflow.com.
LAS DIMENSIONES

jQuery, brinda facilidades para trabajar con las dimensiones de


los elementos y la ventana del navegador.
Para esto, brinda los siguientes métodos:
 width()
 height()
 innerWidth()
 innerHeight()
 outerWidth()
 outerHeight()
LAS DIMENSIONES

 El método width() establece o


devuelve el ancho de un elemento
(excluyendo padding, borde y margen).
 El método height() establece o
devuelve la altura de un elemento
(excluyendo padding, borde y margen).
 El método innerWidth() devuelve el
ancho de un elemento (incluyendo el
padding).
 El método innerHeight() devuelve la
altura de un elemento (incluyendo el
padding).
LAS DIMENSIONES
 El método outerWidth() devuelve el
ancho de un elemento (incluyendo
padding y borde).
 El método outerHeight() devuelve la
altura de un elemento (incluyendo
padding y borde).
 El método outerWidth(true) devuelve
el ancho de un elemento (incluye
padding, borde y margen).
 El método outerHeight(true) devuelve
la altura de un elemento (incluye
padding, borde y margen).
ALGUNOS EFECTOS

jQuery ofrece facilidades para que el contenido se pueda:


 Ocultar,
 Mostrar,
 Activar,
 Deslizar,
 Desvanecer
 Animar.
ALGUNOS EFECTOS

SHOW/HIDE:

El parámetro de velocidad (speed) es opcional y especifica la


velocidad con que se hará la ocultación/visualización y puede
tomar los siguientes valores:
 lento:“slow",
 rápido:“fast" o
 ser especificada en milisegundos.
El parámetro callback, es opcional y es una función que se
ejecutará después de completar el método hide() o show().
ALGUNOS EFECTOS

SHOW/HIDE:

Con jQuery, es posible alternar entre los métodos hide() y show()


con el método toggle().
ALGUNOS EFECTOS

FADING:

Con jQuery es posible desvanecer elementos.


 fadeIn():
 $(selector).fadeIn(speed,callback);
 fadeOut():
 $(selector).fadeOut(speed,callback);
 fadeToggle():
 $(selector).fadeToggle(speed,callback);
 fadeTo():
 $(selector).fadeTo(speed,opacity,callback);
ALGUNOS EFECTOS

SLIDING:

jQuery permite deslizar elementos hacia arriba y hacia abajo.

 slideDown():
 $(selector).slideDown(speed,callback);
 slideUp():
 $(selector).slideUp(speed,callback);
 slideToggle():
 $(selector).slideToggle(speed,callback);
ALGUNOS EFECTOS
ANIMATION:
El método animate() permite crear animaciones personalizadas.

 params - es obligatorio y define los estilos css que queramos


modificar.
 speed - opcional (valor en milisegundos,“slow”, “fast”).
 callback - opcional, función que ejecutaremos luego de que
termine la animación.
EL CALLBACK

Un CALLBACK o función de devolución de llamada se ejecuta


después de que el efecto actual haya finalizado por completo.
QUE ES AJAX?

AJAX: Asynchronous JavaScript And XML.


 No es un lenguaje de programación, sino diversas tecnologías
trabajando juntas.
 Nos permite comunicarnos con un servicio web sin tener que
recargar la página
 Tecnología asíncrona, los datos adicionales se solicitan al
servidor y se cargan en segundo plano sin interferir con la
visualización ni el comportamiento de la página.
QUE ES AJAX?
AJAX: Asynchronous JavaScript And XML.
Con los métodos AJAX, es posible solicitar texto, HTML, XML o
JSON desde un servidor remoto utilizando HTTP Get y HTTP Post.
Además, se pueden cargar datos externos directamente en
elementos HTML seleccionados de nuestra página web.
METODOS AJAX

El método: load() es un método simple, pero potente.


Este método carga los datos de un servidor y coloca los datos
devueltos en el elemento seleccionado.

 El parámetro URL es requerido y especifica la URL que desea


cargar.
 El parámetro data es opcional y especifica un conjunto de
pares clave/valor para enviar junto con la solicitud.
 El parámetro callback es opcional y es el nombre de la
función que se ejecutará después de completarse el método
load().
METODOS AJAX

Los métodos jQuery get() y post() se utilizan para solicitar datos


del servidor con una petición HTTP GET o POST.

Dos métodos comúnmente utilizados para una solicitud-


respuesta entre un cliente y un servidor son: GET y POST.

 GET: solicita datos de un recurso especificado.


 POST: envía los datos a procesar a un recurso especificado.
METODOS AJAX

 GET se utiliza para obtener (recuperar) datos del servidor.


IMPORTANTE: El método GET puede devolver datos
almacenados en caché.

 POST también se puede utilizar para obtener datos del


servidor. Sin embargo, el método POST nunca almacena
datos en caché y, a menudo, se utiliza para enviar datos junto
con la solicitud.
METODOS AJAX

$.get

EJEMPLO:
METODOS AJAX

$.post()

EJEMPLO:
QUE ES UN PLUGIN?

Un complemento (Plugin) es una aplicación que se


relaciona con otra para aportarle una función nueva y
generalmente específica.

 jQuery user interface - http://jqueryui.com/


 jQuery Validation - http://jqueryvalidation.org/
 fancyBox - http://fancyapps.com/fancybox/
 jssor Slider - http://www.jssor.com/
 simpleWeather - http://simpleweatherjs.com/

¡Incluirlas después de jQuery!


SEGUNDA PRACTICA

EJERCICIO 1: Crear un HTML con una galería de 4 imágenes,


que al pasar el mouse por encima de ellas, se hagan
transparentes (desvaneciéndose) y nos muestre la descripción
de la imagen actual.
EJERCICIO 2: Crear un botón con el texto “Ver más” que al
presionarlo, permita ver debajo del mismo un texto
descriptivo a elección. El “ver más” del nombre del botón
debe cambiar a “Ver menos” para que al hacer clic
nuevamente, se oculte de manera suave (dándole un delay al
efecto hide) el texto recientemente mostrado.

También podría gustarte