Contenido principal
Curso: Programación de computadoras > Unidad 7
Lección 3: Modificación del DOM con jQueryRevisión: modificación del DOM con jQuery
Una vez que hayas encontrado una colección de elementos al usar la función de jQuery, puedes cambiarlos al usar varios métodos.
Establece su html interior con
html()
:$("h1").html("Me <strong>encantan</strong> los gatos");
(Ver ejemplo)Establece atributos con
attr()
:$(".dog-pic").attr("src", "dog.jpg");
$(".google-link").attr("href", "http://www.google.com");
(Ver ejemplo)Cambia los estilos CSS con
css()
:$("h1").css("font-family", "monospace");
$("h1").css({"font-family": "monospace", "color": "red"});
(Ver ejemplo)También puedes crear nuevos elementos desde cero al pasarle una cadena de HTML a la función jQuery:
var $p = $("<p>");
Si quisieras, podrías pasarle el HTML completo, incluyendo etiquetas de contenido, atributos y estilos.
var $p = $('<p style="color:red;">Me encanta la gente que ama a los gatos.</p>');
Una vez que hayas creado un elemento, puedes modificarlo al usar cualquiera de los métodos de arriba:
$p.addClass("warning");
Después puedes anexarlo a un elemento existente al usar
append()
:$("#main-div").append($p);
(Ver ejemplo)Lee la documentación de jQuery para más detalles sobre cada uno de estos métodos, al seguir los nombres de los métodos vinculados arriba. No podremos cubrir todo aquí, y como las mejores prácticas de desarrollo web cambian rápido, tendrás que ser bueno leyendo la documentación para mantenerte al día en lo más reciente y en lo mejor. ¡Es bueno empezar a trabajar en esa habilidad ahora!
¿Quieres unirte a la conversación?
- ¿Es díficil emplear todo Jquery en una pagina web?(2 votos)
- Excelente información , muy buena para repasar(1 voto)