En el anterior artículo ya vimos como seleccionar los elementos de nuestra página web en jQuery y también vimos como asociarle un evento. En esta segunda parte vamos a ver como asociarle métodos a a los elementos de nuestra página web con lo que seremos capaces de manipular el DOM, manipular el CSS y realizar efectos y animaciones.
Los métodos que tenemos para manipular el DOM se pueden utilizar de dos formas, para obtener (get) o para establecer (set).
- Obtener (get):
| Método | Resultado |
| html() | Obtiene el contenido HTML del elemento seleccionado. |
| text() | Obtiene el texto del elemento seleccionado. |
| val() | Obtiene el valor del elemento seleccionado de un formulario. |
| attr(atributo) | Obtiene el valor del atributo del elemento seleccionado. |
Con un ejemplo lo vais a ver más claro. Si tenemos el siguiente HTML:
|
1 2 3 4 5 6 7 8 9 10 11 |
<html> <head> <title>Ejemplo jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript" src="jQuery.js"></script> </head> <body> <h1 id="Encabezado">Bienvenido a Programar Fácil</h1> <br>Introduce tu nombre<input id="form" type="text"></input> </body> </html> |
Y tenemos el siguiente código jQuery:
|
1 2 3 4 5 6 |
$("h1").html(); $("h1").text(); $("h1").attr("id"); $("#form").change(function(){ $("#form").val(); }) |
Nos devolvería lo siguiente:
|
1 2 3 4 |
<h1 id="Encabezado">Bienvenido a Programar Fácil</h1> Bienvenido a Programar Fácil Encabezado //Lo que introdujera el usuario en el imput |
Podéis apreciar la diferencia entre html() y text(). El primero tiene en cuenta las etiquetas HTML y el segundo no.
- Establecer (set):
| Método | Resultado |
| html(contenido) | Establece el contenido HTML en el elemento seleccionado. |
| text(texto) | Establece el texto en el elemento seleccionado. |
| val(valor) | Establece el valor del elemento seleccionado de un formulario. |
| attr(atributo,valor) | Establece el valor del atributo del elemento seleccionado. |
En nuestro HTML con el siguiente script:
|
1 2 3 4 |
$("h1").html("<h2>Hola Mundo</h2>"); $("h1").text("Buenos Días Mundo"); $("h1").attr("id","OtroID"); $("#form").val("@@@"); |
Con estas instrucciones habremos cambiado dinámicamente nuestro HTML quedando al final un encabezado H2 que pone “Buenos Días Mundo” con un id=”OtroID” y en el campo de entrada del formulario pondrá @@@
Para manipular el CSS dispones de estos tres métodos:
| Método | Resultado |
| css(propiedad, valor) | Permite obtener y asignar estilos CSS a un conjunto de elementos modificando el valor del atributo style mediante valores a propiedades CSS |
| addClass(clase) | Añade la clase especificada a cada elemento del conjunto de resultados |
| removeClass(clase) | Elimina la clase de todos los elementos del conjunto de resultados |
Podéis ver un ejemplo del método .css() al final de este fragmento de código.
Y ya llegamos a los métodos para realizar efectos:
| Método | Resultado |
| hide(velocidad, callback) | Oculta los elementos seleccionados si estaban visibles. Velocidad (slow, fast, milis) que se esconde y callback función que llama después de ocultar el contenido. |
| show(velocidad, callback) | Muestra los elementos seleccionados si estaban visibles. Velocidad (slow, fast, milis) que se muestra y callback función que llama después de mostrar el contenido. |
| toggle(velocidad, callback) | Alterna entre hide() y show(). Velocidad (slow, fast, milis) que se esconde/muestra y callback función que llama después de esconder/mostrar el contenido. |
| fadeIn(velocidad, callback) | El contenido aparece a la velocidad indicada para cada elemento seleccionado. |
| fadeOut(velocidad, callback) | El contenido se desvanece a la velocidad indicada para cada elemento seleccionado. |
| fadeToggle(velocidad, callback) | Alterna entre aparecer y desvanecer el contenido |
| fadeTo(velocidad, transparencia) | Permite desvanecer hasta una transparencia indicada entre 0 y 1. |
| slideDown(velocidad, callback) | Desliza hacia abajo. |
| slideUp(velocidad, callback) | Desliza hacia arriba. |
| slideToogle(velocidad, callback) | Alterna deslizar hacia abajo y arriba. |
| animate({param}, velocidad, callback) | Crea una animación personalizada donde param indica las propiedades a animar y las opciones de las animación. |
| stop() | Detiene todas las animaciones en marcha para todos los elementos. |
En los métodos hide y show los parámetros son opcionales y en el resto de funciones el parámetro callback es opcional. En el parámetro callback es una función que se lanzara tras la ejecución del efecto. Os dejamos un ejemplo:
|
1 2 3 4 |
$("p").hide("slow", function(){ alert("El parrafo se ha escondido"); }); |
También podemos concatenar concatenar estos métodos para lanzar un efecto tras otro. Ha esta técnica se le denomina Chaining:
|
1 |
$(“p”).fadeIn(1000).fadeOut(2000); |
– Fragmentos de código relacionados:
AJAX en jQuery
Una parte fundamental de jQuery es el método $.ajax(), con el podremos realizar peticiones asíncronas al servidor y recoger los datos que necesitemos. Os dejo su referencia para que le echéis un vistazo.
La sintaxis del método $.ajax() es muy sencilla:
|
1 2 3 4 5 6 7 8 |
$.ajax({ url: “ruta_pagina_servidor.php”, type: “GET”, async: true, data: “parametro1=valor1¶metro2=valor2” success: TodoCorrecto, error: HaFallado, }); |
Si observáis, en las opciones del método, lo que hacemos a success y error es asociarle una función. Así seguiría el código con esas funciones:
|
1 2 3 4 5 6 7 |
function TodoCorrecto(datos){ console.log(“Todo ha ido bien ”+datos); } function HaFallado(jqXHR, estado, mensError){ console.log(“Algo ha fallado ”+ mensError); } |
Las sentencias de esa función la podríamos ejecutar dentro de la llamada AJAX tras sus opciones correspondientes pero siempre queda más claro sacarlas en funciones.
$.ajax() es el método principal que tiene jQuery para utilizar esta librería, pero tenemos otros métodos sobrecargados que son los que normalmente vamos a utilizar:
| Método | Propósito |
| $.get(url, callback,tipoDatos) | Realiza una petición GET a la url. Una vez recuperada la respuesta, se invocará el callback el cual recuperará los datos de tipoDatos |
| $.getJSON(url, callback) | Similar a $.get() pero recuperando datos en formato JSON |
| $.getScript(url, callback) | Carga un archivo JavaScript de la url mediante un petición GET, y lo ejecuta. |
| $.post(url, datos, callback) | Realiza una petición POST a la url, enviando los datos como parámetros de la petición |
Al final estos métodos nos simplifican la sintaxis y los utilizaremos dependiendo del tipo de llamada que queramos hacer y los datos que nos devuelva el servidor.
Fragmento de código relacionado: Peticiones Ajax (jQuery) desde ASP.NET
jQueryUI
A pesar de jQuery nos ofrece multitud de funcionalidad en ocasiones necesitamos extenderla con algún plugin. jQueryUI es uno de estos plugins pero no el único, existe un enorme repositorio de plugins para jQuery.
Con jQueryUI extendemos la funcionalidad de interfaz de usuario que ya están construidas en este plugin para poder usarlas en nuestra aplicación. Dentro de estas funcionalidades tenemos interacciones, widgets (componentes), efectos y utilidades.
Aquí podéis ver el clásico ejemplo de menú en forma de acordeón.
