JQuery

Uso de JQuery
Objetivos
• Introducción
• Seleccionar, mostrar, ocultar objetos
• Leer el texto de un objeto o la información de un campo
• Agregar / quitar elementos al DOM
• Agregar elementos con acciones y revisar su comportamiento
• Entender el uso de Jquery on()
• Iniciar con el concepto de acciones en JavaScript previo al submit de la página.
• Prácticas
Introducción JQuery
1. ¿Qué es?
1. Es una librería de JavaScript que está basada en el principio de “escribir menos y hacer
más”.

2. ¿Para que nos sirve?

1. Su API de fácil manejo nos permite hacer cosas como manipular los elementos de un
HTML, control de eventos, agregar animaciones, etc. de una forma más simple que con
JavaScript puro

3. Ventajas
1. Funciona de forma transparente en los principales navegadores (Chrome, FireFox, Safari,
Internet Explorer, etc.)
2. Proporciona la habilidad de crear aplicaciones basadas en Ajax de una forma rápida y
simple.
Seleccionar, mostrar, ocultar objetos
• Al cargar el documento hacer lo siguiente:
 Seleccionar el link de JQuery Page y cambiar su estilo a bold.
 Seleccionar el párrafo innerText y cambiar fondo a yellow

• Al presionar el botón de Ocultar, Esconder todos los párrafos del documento.

• Al presionar el botón de Mostrar, Mostrar el párrafo innerText del documento.
Introducción
• Una instrucción de Jquery normalmente inicia con el signo de dolar ($) y termina con punto y
coma (;)
• El signo de dolar es un alias para no escribir la palabra jquery
• Ejempo: $(document).ready(function(){ alert("Hello World!"); });
• La sección de $(document).ready(handler); se conoce como el evento ready, el cual indica que el
documento está listo para ser manipulado.
Introducción
• El siguiente script:
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text("Hello World!");
});
});
</script>

• Sólo se ejecuta cuando ocurre un evento de click en el botón del formularo.

Seleccionar objetos
• Los objetos del DOM (Document Object Model) se pueden seleccionar por id,
por nombre de la clase, por nombre del tag o por algun atributo de html.
Seleccionar objetos

Selección por id con un elemento que tien id=”mark”:
$("#mark").css("background", "yellow");


Selección por class name con un elemento que tiene
class=”mark”:
$(".mark").css("background", "yellow");


Selección por element name, todos los elementos <p>:
$("p").css("background", "yellow");


Selección por compound css:
Seleccionar objetos

Selección por compound css:
Marcar solo elementos <p>/paragraph que tienen class=”mark”
$("p.mark").css("background", "yellow");

Marcar sólo los elementos span que están dentro de un elemento con id=”mark”
$("#mark span").css("background", "yellow");

Marcar los elementos li dentro de algun elemento ul

$("ul li").css("background", "red");

Marcar los elementos li dentro del elemento ul que tenga id=”mark”

$("ul#mark li").css("background", "yellow");

Marcar los elementos li dentro de todos los elmentos ul que tengan class=”mark”
$("ul.mark li").css("background", "green");

Marcar todos los elementos de ancla que tienen el target blank

$('a[target="_blank"]').css("background", "yellow");
Seleccionar objetos

Selección con el custom selector de Jquery:
Marcar la filas de la tabla que aparecen en una posición impar
$("tr:odd").css("background", "yellow");

Marcar las filas de la tabla que aparecen en una posición par

$("tr:even").css("background", "orange");

Marcar el primer elemento de tipo paragraph

$("p:first").css("background", "red");

Marcar el últmo elemento de tipo paragraph

$("p:last").css("background", "green");

Marcar todos los elementos input con tipo text dentro de algun elemento form
$("form :text").css("background", "purple");

Marcartodos los elementos input con tipo password dentro de algun elemento form
$("form :password").css("background", "blue");

todos los elementos input con tipo submit dentro de algun elemento form
$("form :submit").css("background", "violet");
Seleccionar objetos
• Para lograr hacer lo siguiente:
 Seleccionar el link de JQuery Page y cambiar su estilo a bold.
 Seleccionar el párrafo innerText y cambiar fondo a yellow

• Primero debemos incluir un tag de <script> en el <head> de nuestro html e incluir la función
document.ready de JQuery
<script>

$(document).ready(function(){

• Ahora vamos a seleccionar los objetos por medio de su id y utilizaremos la funcion .css() para cambiar
el estilo del elemento seleccionado.

$("#test").css("font-weight", "bold");

$("#innerText").css("background", "yellow");
Mostrar, ocultar objetos
• Para ocultar objetos se utiliza la función .hide() y para mostrarlos la función .show().
 Entonde para lograr que al presionar el botón de Ocultar, se escondan todos los
párrafos del documento, hacemos lo siguiente:


$("#hide").click(function(){

$("p").hide();
});

 Aquí estamos buscando el botón con id=”hide” y utilizando el evento de click para
indicar que cuando hagan click en dicho botón se ejecute la función dentro del cuerpo
de click();
 Ésta función selecciona todos los elementos de tipo paragraph y ejecuta la acción de
hide();
• Al presionar el botón de Mostrar, Mostrar el párrafo innerText del documento.
Mostrar, ocultar objetos
• Para lograr que al presionar el botón de Mostrar, se muestre el párrafo con id innerText
del documento. Hacemos lo siguiente:
• $("#show").click(function(){
$("p#innerText").show();
});
•

 Aquí estamos buscando el botón con id=”show” y utilizando el evento de click para
indicar que cuando hagan click en dicho botón se ejecute la función dentro del cuerpo
de click();
 Ésta función selecciona todos los elementos de tipo paragraph con
id=”innerText”(idealmente sólo debe existir un elemento con dicho id) y ejecuta la
acción de show() en el elemento seleccionado.
Leer el texto de un objeto o la información
de un campo
• Algunos métodos de jQuery pueden se utilizados para leer o asignar el valor a
un elemento seleccionado. Algunos de estos métodos son text(), html(), attr(), y
val().

• Cuando éstos métodos se llaman sin argumentos, se les conoce como getters, ya
que obtienen o leen el valor del elemento.

• Cuando son llamados con argumentos, se les conoce como setters, ya que el
valor enviado como argumento es asignado al elemento seleccionado.
Leer el texto de un objeto o la información
de un campo
• Algunos métodos de jQuery pueden se utilizados para leer o asignar el valor a
un elemento seleccionado. Algunos de estos métodos son text(), html(), attr(), y
val().

• Cuando éstos métodos se llaman sin argumentos, se les conoce como getters, ya
que obtienen o leen el valor del elemento.

• Cuando son llamados con argumentos, se les conoce como setters, ya que el
valor enviado como argumento es asignado al elemento seleccionado.
Leer el texto de un objeto o la información
de un campo
• Al presionar el botón de Leer Info, debe leer el contenido del div con id “texto”,
utilizando la función text() y mostrarlo en la consola.

• Al presionar el botón de Leer Datos, leer la información capturada en el campo de texto

de First Name, utilizando la función val() y mostrarlo en la consola.
Agregar / quitar elementos al DOM
jQuery proporciona varios métodos como append(), prepend(), before(), after(), wrap() etc.
que permiten insertar nuevo contenido dentro de un elemento existente.

El método append() se utiliza para insertar contenido al final del elemento seleccionado.
Pero dentro del tag del elemento.

El método prepend() inserta el contenido al principio del elemento seleccionado. Pero

dentro del tag del elemento.

El método after() se utiliza para insertar contenido al final del elemento seleccionado. Pero
fuera del tag del elemento.

El método before() inserta el contenido al principio del elemento seleccionado. Pero fuera
del tag del elemento.

El método wrap() se utiliza para envolver el elemento seleccionado con otro elemento.
Agregar / quitar elementos al DOM
• Vamos a agregar una función que al presionar el botón de Agregar incluya un párrafo al
div con id de result. Utilizando la función append();

• Y vamos a agregar una función que al presionar el botón de Quitar, quite el último
párrafo del div con id de result.
 Para ello utilizaremos la función remove(); Ésta función elimina el elemento
seleccionado del DOM así como todo lo que tenga dentro.
 Para seleccionar el elemento vamos a buscar el div por id=”result” y de ahí el tag <p>
con el selector de jQuery :last.
Agregar elementos con acciones
• Al presionar el botón de Agregar Botón, incluir un nuevo párrafo que indique el texto
“Nuevo Botón” y dentro lleve un botón en el div con id “newButtons”. Es decir, se debe
agregar el siguiente código al div:
• <p>Nuevo Botón <input type="button" value="DeleteMe" id="delMe"></p>
• Cuando se presione este nuevo botón(DeleteMe), se debe de eliminar sólo el botón del
párrafo.
Agregar elementos con acciones
• La función $(document).on() permite agregar un controlador de eventos para uno o
varios eventos generados en el elemento seleccionado.
• Ejemplo:
<script>
$(document).ready(function(){
$("button").click(function(){
$("ol").append("<li>list item <a href='javascript:void(0);' class='remove'>×</a></li>");
});
$(document).on("click", "a.remove" , function() {
$(this).parent().remove();
});
});
</script>

• En nuestro caso, buscamos agregar una función al evento click del elemento con
id=”delMe” y la función debe eliminar el botón utilizando el método remove();
Práctica
• Crear una página donde los usuarios puedan agregar y calificar los ejemplos de una
categoría (películas, álbumes, deportes, etc.) La página debe incluir lo siguiente:
• Una forma donde pueda agregar datos a la lista.
• Una tabla que contenga todos los registros que se han agregado.
• Un botón de borrar para cada fila de la tabla que te deje quitar elementos de la lista.
• Agregar estilos a la tabla y los botones con Bootstrap
• NOTA: Para ver el ejemplo de la siguiente diapositiva, es necesario iniciar la
presentación para que se reproduzca la animación.

Para más información de jquery ver la documentación oficial en https://api.jquery.com/

Ejemplo