Curso jQuery: 9 Aplicando estilos y añadiendo componentes
Nueva noticia publicada en https://amdisenoweb.es/curso-jquery-9-aplicando-estilos-anadiendo-componentes/
Curso jQuery: 9 Aplicando estilos y añadiendo componentes
Vamos a ver como podemos cambiar los estilos css de un componente web, así como recuperar su valor, también vamos a ver como podemos añadir más contenido a la página web.
jQuery tiene una función que nos permite ver el valor de un estilo css o cambiar el valor de dicha propiedad, para ello usamos la funcion .css(), la cual entre parentesis se la pueden pasar distintos parametros dependiendo de lo que queramos hacer.
Si queremos que nos devuelva el valor css de un componente utilizaremos
.css(‘nombre’) y nos devolverá el valor de la propiedad nombre del elemento seleccionado.
Si queremos añadir una propiedad a un elemento lo haremos como sigue:
.css(propiedad, valor)
Si por el contrario queremos añadir mas de una propiedad css a un elemento dichas propiedades van encerradas entre llave y cara pareja propiedad : valor va separada por una coma, siendo algo similar a:
.css(‘propiedad1′:’valor1′,’propiedad2’:’valor2’…..)
Por ejemplo si queremos que todos los div tengan un mismo color de fondo y un mismo color de letra usaremos:
$("div").css("bakcground-color":"red","color":"white");
En otras ocasiones lo que nos puede interesar es añadir, quitar o comprobar si un elemento tiene un estilo css, en este caso podemos utilizar una de las siguientes funciones.
.addClass(clasecss); añade la clase al componente seleccionado
.removeClass(clasecss); quita la clase al componente seleccionado
.hasClass(clasecss); comprueba si el elemento seleccionado tiene la clase o no, devolviendo true o false
.toggleClass(clasecss); si el elemento seleccionado no tiene la clase se la añade y si la tiene se la quita.
Por ejemplo, si tenemos una clase que se llama border-rojo podemos añadirsela a todos los div con la orden
$(“div”).addClass(“borde-rojo”);
Añadir o cambiar contenido
Para cambiar el contenido de un elemento usaremos la función
.html(“contenido nuevo”)
De esta manera cambiamos el contenido del elemento seleccionado por el “contenido nuevo”, pero si lo que queremos es añadir mas contenido a un elemento usaremos la funcion
.append(“contenido añadido”)
De esta forma se añade “contendio añadido” al elemento seleccionado.
Supongamos que tenemos un div cuya clase es caja1 y queremos añadirle dos párrafos, lo haríamos como sigue:
$(".caja1").append("<p>parrafo 1</p>"); $(".caja1").append("<p>parrafo 2</p>");
Con la función remove nos sirve cuando queremos quitar todos los elementos seleccionados, por ejemplo si queremos borrar la caja1 pondríamos:
$(".caja1").remove();
Atributos
Cuando queremos podemos acceder a la manipulación de los atributos de las etiquetas de html mediante la función attr, con dicha función nos permite recuperar el valor de un atributo o cambiar el valor de un atributo por el que nosotros queramos.
.attr(nombre); nos devuelve el valor de atributo nombre de los elementos seleccionados
.attr(nombre,valor); cambia el atributo nombre del elemento seleccionado por valor
.removeAttr(nombre); elimina el atributo nombre del elemento seleccionado
Por ejemplo si queremos que al situarnos encima de una imagen cambie por otra podríamos usar lo siguiente
<img src="manuel.jpg" width="200" height="200" class="foto"> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(e) $(".foto").hover(function(e) $(".foto").attr("src","maria.jpg"); ); ); </script>
usar algo similar a: