Post on 12-Jun-2015
description
Módulo 3Manipulando DOM en IDs y Class
Índice● Método ready ● Método html ● Método text ● Método attr ● Métodos addClass y removeClass● Ejercicios
.ready()El interprete ejecuta .ready() y se garantiza que se ejecutará después de que el DOM esté listo, por lo que este es el mejor lugar para colocar el resto de los controladores de eventos y ejecutar otro código jQuery. Cuando se utiliza CSS es importante hacer referencia a las hojas de estilo externas o elementos de estilo HTML antes de hacer referencia a los scripts jquery.
El método .ready() es generalmente incompatible con el atributo <body onload="">.
.ready()$(document).ready(function() {
// funciones a ejecutarse cuando esté lista la página});
.html()Este método no está disponible para trabajar con documentos XML.
En un documento HTML .html() se utiliza para insertar contenido HTML a un selector.
$("div.demo-container").html("<strong>TEXTO HTML</strong>");$(".demo-container").html("<strong>TEXTO HTML</strong>");$("body > .demo-container").html("<strong>TEXTO HTML</strong>");
.text()A diferencia del método .html(), .text() se puede usar en ambos documentos XML y HTML. El resultado del método .text() es una cadena que contiene el texto combinado de todos los elementos coincidentes.
(Debido a las variaciones en los analizadores HTML en diferentes navegadores, el texto devuelto puede variar según los saltos de línea y espacios en blanco.)
$("div.demo-container").text("TEXTO HTML");$(".demo-container").text("TEXTO HTML");$("body > .demo-container").text("TEXTO HTML");
.attr()El método .attr() obtiene el atributo de un objeto HTML y lo puede manipular.
Ventaja: Se puede llamar directamente sobre un objeto jQuery y encadenado a otros métodos de jQuery.
.attr()<style>
em {color: blue;font-weight: bold;}div {color: red;}
</style><script>
var titulo = $("em").attr("title");$("div").text(titulo);
</script>
.addClass() y .removeClassEl metodo .addClass() puede agregar una clase de css a un objeto html que no tenga una clase definida o agregar otra clase a un objeto existente.
El metodo .removeClass() es el contrario de .addClass, quita clases a objetos html.
.addClass() y .removeClassejemplo2-mod3.html
EjerciciosUsando un template de Bootstrap realice lo siguiente:
Transicion de imagenes en la carga del documento.Un botón que agregue borde a las imagenes de transición.