jQuery
Published on Apr 23, 2016
No Description
MORE DECKS TO EXPLORE
PRESENTATION OUTLINE
¿Qué es?
Es una librería de Javascript.
Su propósito es hacer más fácil el uso de JavaScript en tu sitio web.
Toma muchas de las tareas comunes que requieren muchas líneas de código de JavaScript para poder realizarse y las simplifica en funciones que tú puedes llamar con una simple línea de código.
También simplifica cosas complicadas de JavaScript como las peticiones por Ajax y la manipulación del DOM.
Su propósito es hacer más fácil el uso de JavaScript en tu sitio web.
Toma muchas de las tareas comunes que requieren muchas líneas de código de JavaScript para poder realizarse y las simplifica en funciones que tú puedes llamar con una simple línea de código.
También simplifica cosas complicadas de JavaScript como las peticiones por Ajax y la manipulación del DOM.
Photo by ed_needs_a_bicycle
¿Qué incluye?
- Manipulación del HTML
- Manipulación del CSS
- Funciones para los eventos de HTML
- Efectos y animaciones
- AJAX
- Utilidades
Photo by Yu. Samoilov
Sintaxis
$(selector).accion();
$ signo que define el acceso a jQuery.
(selector) la consulta para encontrar el elemento HTML
Una acción de jQuery a realizar sobre el elemento.
Photo by Lord James [Web Developer]
Evento Document Ready
Esto previene que el código jQuery se ejecute antes de que el documento haya terminado de cargarse.
Es una buena práctica esperar hasta que el documento esté cargado y listo, para evitar utilizar elementos que aún no han sido cargados.
Por ejemplo agregar eventos.
Es una buena práctica esperar hasta que el documento esté cargado y listo, para evitar utilizar elementos que aún no han sido cargados.
Por ejemplo agregar eventos.
Selector por Elemento
Selecciona elementos basado en el nombre de la etiqueta HTML.
Selector por #id
Selecciona un elemento específico basado en el atributo id de una etiqueta HTML.
El id debe ser único, en caso de que existan varios elementos con el mismo id solo seleccionará el primero.
El id debe ser único, en caso de que existan varios elementos con el mismo id solo seleccionará el primero.
Selector por clase
Selecciona elementos que tengan una clase específica.
Selector múltiple
Selecciona la combinación de resultados de todos los selectores específicos.
Selector por atributo
Selecciona elementos que tienen un atributo en específico sin importar el valor de este.
Selector por atributo igual a
Selecciona elementos que tienen un atributo en específico con un valor exactamente igual.
Selector por atributo diferente a
Selecciona elementos ya sea que no tengan el atributo o que contengan el atributo pero el valor no coincida.
Selector por atributo múltiple
Selecciona todos los elementos que coincidan con todos los filtros de atributos especificados.
Filtro por índice
Selecciona el elemento en el índice n dentro del paréntesis.
Filtro de pares
Selecciona los elementos pares, indexados a cero.
Filtro impar
Selecciona todos los elementos impares. Basado en índice 0.
Filtro primero
Selecciona el primer elemento del DOM.
Filtro último
Selecciona el último elemento que coincida.
Filtro not
Selecciona todos los elementos que no coinciden con el selector dado.
Untitled Slide
Selecciona todos los elementos de tipo checkbox.
Selecciona todos los elementos que están seleccionados.
Selecciona todos los elementos que están desactivados.
Selecciona todos los elementos que están activados.
Selecciona el elemento que actualmente tiene el foco.
Selecciona todos los elementos de tipo password.
Selecciona todos los elementos de tipo radio.
Selecciona todos los elementos que están seleccionados. Este filtro funciona con
Selecciona todos los elementos que están seleccionados.
Selecciona todos los elementos que están desactivados.
Selecciona todos los elementos que están activados.
Selecciona el elemento que actualmente tiene el foco.
Selecciona todos los elementos de tipo password.
Selecciona todos los elementos de tipo radio.
Selecciona todos los elementos que están seleccionados. Este filtro funciona con
Untitled Slide
Cuando el elemento pierde el foco.
Cuando el valor del elemento ha sido cambiado.
Cuando el texto del elemento ha sido seleccionado (inputs tipo texto o textarea).
Cuando un elemento obtiene el foco.
Cuando se envía un formulario.
Cuando el valor del elemento ha sido cambiado.
Cuando el texto del elemento ha sido seleccionado (inputs tipo texto o textarea).
Cuando un elemento obtiene el foco.
Cuando se envía un formulario.
Untitled Slide
Cuando se hace clic sobre un elemento.
Cuando se hace doble clic sobre un elemento.
Cuando se presiona el botón izq. del mouse.
Cuando se libera el botón izq. del mouse.
Cuando el puntero del mouse se encuentra sobre el elemento( o elemento secundario dentro de este).
Cuando se hace doble clic sobre un elemento.
Cuando se presiona el botón izq. del mouse.
Cuando se libera el botón izq. del mouse.
Cuando el puntero del mouse se encuentra sobre el elemento( o elemento secundario dentro de este).
Untitled Slide
Oculta el elemento.
Muestra el elemento.
Muestra u oculta el elemento.
Muestra el elemento con un movimiento de deslizamiento.
Oculta el elemento con un movimiento de deslizamiento.
Muestra u oculta el elemento con un movimiento de deslizamiento.
Duración 0.
La animación se completa dentro de 600 milisegundos.
La animación se completa dentro de 200 milisegundos.
La animación se completa dentro de los milisegundos que elijas.
Muestra el elemento.
Muestra u oculta el elemento.
Muestra el elemento con un movimiento de deslizamiento.
Oculta el elemento con un movimiento de deslizamiento.
Muestra u oculta el elemento con un movimiento de deslizamiento.
Duración 0.
La animación se completa dentro de 600 milisegundos.
La animación se completa dentro de 200 milisegundos.
La animación se completa dentro de los milisegundos que elijas.
Untitled Slide
Obtiene el valor del atributo. Si son varios elementos sólo obtiene el del primero.
Establece uno o más atributos, en los elementos seleccionados.
Elimina un atributo. Si son varios lo elimina de todos los elementos.
Obtiene el valor de la propiedad. Si son varios sólo obtiene la del primero.
Establece una o más propiedades, en los elementos seleccionados.
Elimina una propiedad de los elementos seleccionados.
Diferencia
.prop() recupera de forma explícita los valores de la propiedad, mientras que .attr() recupera los atributos.
.attr(“checked”) -> checked
.prop(“checked”) ->true/false
Propiedades generalmente afectan el estado dinámico de un elemento DOM sin cambiar el atributo HTML en serie.
value/disabled/checked
Obtiene el valor actual. Si son varios elementos obtiene el valor del primero.
Establece el valor para cada elemento seleccionado.
Establece uno o más atributos, en los elementos seleccionados.
Elimina un atributo. Si son varios lo elimina de todos los elementos.
Obtiene el valor de la propiedad. Si son varios sólo obtiene la del primero.
Establece una o más propiedades, en los elementos seleccionados.
Elimina una propiedad de los elementos seleccionados.
Diferencia
.prop() recupera de forma explícita los valores de la propiedad, mientras que .attr() recupera los atributos.
.attr(“checked”) -> checked
.prop(“checked”) ->true/false
Propiedades generalmente afectan el estado dinámico de un elemento DOM sin cambiar el atributo HTML en serie.
value/disabled/checked
Obtiene el valor actual. Si son varios elementos obtiene el valor del primero.
Establece el valor para cada elemento seleccionado.
append
Inserta contenido en cada uno de los elementos seleccionados.
Mueve la etiqueta no la clona.
Mueve la etiqueta no la clona.
prepend
Inserta contenido al principio de cada elemento seleccionado.
html
Obtiene el HTML que contiene el elemento. Si son varios obtiene el del primero.
Establece el contenido HTML en cada uno de los elementos seleccionados.
Establece el contenido HTML en cada uno de los elementos seleccionados.
text
Obtiene el contenido del texto de cada elemento seleccionado incluyendo sus descendientes.
Establece el texto de cada uno de los elementos seleccionados.
Establece el texto de cada uno de los elementos seleccionados.
Untitled Slide
Elimina el elemento o elementos seleccionados.
Elimina todos los nodos hijos de cada uno de los elementos seleccionados.
Elimina todos los nodos hijos de cada uno de los elementos seleccionados.
Ajax
is a developers dream
Ajax (Asynchronous JavaScript And XML), es una técnica de desarrollo web que permite crear aplicaciones interactivas. Estas aplicaciones se ejecutan en el navegador de los usuarios mientras se mantiene una comunicación asíncrona con el servidor en segundo plano. Esto permite realizar cambios sobre las páginas sin tener que recargarlas, lo que mejora la interactividad, velocidad y usabilidad.
Ajax es una tecnología asíncrona ya que se realizan las peticiones al servidor y se cargan los datos en segundo plano sin interferir con la visualización ni el comportamiento de la página.
Ajax es una tecnología asíncrona ya que se realizan las peticiones al servidor y se cargan los datos en segundo plano sin interferir con la visualización ni el comportamiento de la página.
Photo by atxryan
Untitled Slide
Ejercicio
Ajax (Asynchronous JavaScript And XML), es una técnica de desarrollo web que permite crear aplicaciones interactivas. Estas aplicaciones se ejecutan en el navegador de los usuarios mientras se mantiene una comunicación asíncrona con el servidor en segundo plano. Esto permite realizar cambios sobre las páginas sin tener que recargarlas, lo que mejora la interactividad, velocidad y usabilidad.
Ajax es una tecnología asíncrona ya que se realizan las peticiones al servidor y se cargan los datos en segundo plano sin interferir con la visualización ni el comportamiento de la página.
Ajax es una tecnología asíncrona ya que se realizan las peticiones al servidor y se cargan los datos en segundo plano sin interferir con la visualización ni el comportamiento de la página.
Photo by atxryan
Untitled Slide
Untitled Slide
Creamos el primer div con el formulario
Untitled Slide
Creamos el div del mapa y del div de la tabla.
Untitled Slide
Funcion para crear el objeto del mapa.