Jquery Modulo 3
Click here to load reader
-
Upload
-xzombiedev -
Category
Design
-
view
144 -
download
0
description
Transcript of Jquery Modulo 3
![Page 1: Jquery Modulo 3](https://reader038.fdocuments.net/reader038/viewer/2022100601/557ae633d8b42a1a358b457d/html5/thumbnails/1.jpg)
Módulo 3Manipulando DOM en IDs y Class
![Page 2: Jquery Modulo 3](https://reader038.fdocuments.net/reader038/viewer/2022100601/557ae633d8b42a1a358b457d/html5/thumbnails/2.jpg)
Índice● Método ready ● Método html ● Método text ● Método attr ● Métodos addClass y removeClass● Ejercicios
![Page 3: Jquery Modulo 3](https://reader038.fdocuments.net/reader038/viewer/2022100601/557ae633d8b42a1a358b457d/html5/thumbnails/3.jpg)
.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="">.
![Page 4: Jquery Modulo 3](https://reader038.fdocuments.net/reader038/viewer/2022100601/557ae633d8b42a1a358b457d/html5/thumbnails/4.jpg)
.ready()$(document).ready(function() {
// funciones a ejecutarse cuando esté lista la página});
![Page 5: Jquery Modulo 3](https://reader038.fdocuments.net/reader038/viewer/2022100601/557ae633d8b42a1a358b457d/html5/thumbnails/5.jpg)
.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>");
![Page 6: Jquery Modulo 3](https://reader038.fdocuments.net/reader038/viewer/2022100601/557ae633d8b42a1a358b457d/html5/thumbnails/6.jpg)
.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");
![Page 7: Jquery Modulo 3](https://reader038.fdocuments.net/reader038/viewer/2022100601/557ae633d8b42a1a358b457d/html5/thumbnails/7.jpg)
.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.
![Page 8: Jquery Modulo 3](https://reader038.fdocuments.net/reader038/viewer/2022100601/557ae633d8b42a1a358b457d/html5/thumbnails/8.jpg)
.attr()<style>
em {color: blue;font-weight: bold;}div {color: red;}
</style><script>
var titulo = $("em").attr("title");$("div").text(titulo);
</script>
![Page 9: Jquery Modulo 3](https://reader038.fdocuments.net/reader038/viewer/2022100601/557ae633d8b42a1a358b457d/html5/thumbnails/9.jpg)
.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.
![Page 10: Jquery Modulo 3](https://reader038.fdocuments.net/reader038/viewer/2022100601/557ae633d8b42a1a358b457d/html5/thumbnails/10.jpg)
.addClass() y .removeClassejemplo2-mod3.html
![Page 11: Jquery Modulo 3](https://reader038.fdocuments.net/reader038/viewer/2022100601/557ae633d8b42a1a358b457d/html5/thumbnails/11.jpg)
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.