JQuery – #04. HTML

En esta lección empezaremos a trabajar con elementos HTML tal y como hacíamos cuando interactuábamos con el DOM en el curso de Javascript V. Utilización del modelo de objetos del documento (DOM). Pero esta vez haciendo uso de las opciones que ofrece JQuery.

En primer lugar veremos cómo extraer información de un elemento mediante:

• .html(): extrae el código HTML.
• .text(): extrae el texto de la etiqueta.
• .val(): extrae el valor de un elemento de tipo input.

También veremos cómo modificar y añadir información a un elemento:

• .html(“valor”): añade a un elemento el código html introducido entre paréntesis.
• .text(“valor”): añade a un elemento el texto introducido entre paréntesis.
• .val(“valor”): introduce el valor entre paréntesis en el elemento input.

Además, trabajaremos con atributos de un elemento mediante los siguientes métodos:

• .attr(“atributo”): extrae la información del atributo cuyo nombre está indicado entre paréntesis.
• .attr(“atributo”, “valor”): añade el valor del segundo parámetro al atributo cuyo nombre está indicado en el primer parámetro.
• .attr({ “atributo1”: “valor1”, “atributo2”: “valor2”}: permite añadir o modificar la información de más de un atributo simultáneamente.

Por último, veremos las funciones callback que tienen los métodos .text, .html, .val y .attr. Estas contienen dos parámetros: el índice del elemento actual en la lista de elementos seleccionados y el valor original.

En el siguiente vídeo podrás ver el funcionamiento con ejemplos prácticos. ¡Echa un vistazo!