Estilos con jQuery
Estilos con jQuery
Estilos con jQuery es una lección gratuita de jQuery Academy en CoddyKit. Esta es la lección 1 de 1. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de jQuery Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de jQuery Academy incluye 1 lecciones en total.
Introducción
Hola:
En todos los ejemplos vistos hasta ahora, hemos trabajado con objetos del DOM HTML.
Con jQuery, también podemos manipular los estilos de los elementos HTML.
JQuery proporciona algunos métodos para lograrlo.
clase
En los primeros ejemplos que realizaremos, veremos el uso de clases con JQuery.
En el ejemplo siguiente, incorporamos nuestra biblioteca JQuery en HTML y definimos dos clases llamadas pink y yellow, que hacen que el texto sea rosa y amarillo.
Comencemos 🚀
Ejemplo
Hemos añadido un elemento <p> entre las etiquetas <body>.
Actualmente, este elemento todavía no tiene ninguna clase.
<style>
.pink{
color:pink;
}
.yellow{
color: yellow;
}
</style>
<p>lorem ipsum </p>Ejemplo 2
Ahora añadamos la clase pink al elemento de párrafo mediante el método addClass().
En la pantalla de vista previa, observaremos que el color del texto Lorem ipsum se vuelve rosa.
<style>
.pink{
color:pink;
}
</style>
<p>lorem ipsum</p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
//adding pink class to p element
$('p').addClass('pink');
});
</script>removeClass
Método removeClass()
Si queremos eliminar las clases de los elementos HTML, se utiliza el método removeClass().
Hemos modificado el ejemplo siguiente y, inicialmente, hemos definido la clase pink en nuestro elemento HTML. En cuanto se cargue el DOM, se eliminará la clase pink de nuestro elemento p.
<style>
.pink{color:pink;}
</style>
<p class="pink">lorem ipsum </p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
//removing pink class to p element
$('p').removeClass('pink');
});
</script>toggleClass
Método toggleClass()
Como su nombre indica, con este método,
si existe una clase en el elemento de destino, la elimina; de lo contrario, la añade.
<style>
.pink{color:pink;}
</style>
<p class="pink">lorem ipsum</p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
/*
Since p element has pink class,
pink class will be removed.
*/
$('p').toggleClass('pink');
/*
Since p element hasn't pink class,
pink class will be added.
*/
$('p').toggleClass('pink');
/*
Since p element has pink class,
pink class will be removed.
*/
$('p').toggleClass('pink');
});
</script>Método Css
Método css()
Hemos visto los métodos para añadir y eliminar clases.
Ahora aprendamos el método CSS, que se utiliza para definir estilos en línea para nuestros nodos HTML.
El método CSS recibe dos parámetros.
- El primer parámetro es el nombre de la propiedad que se asignará.
- El segundo parámetro es el valor de la propiedad que se asignará.
El ejemplo siguiente muestra distintos usos del método CSS.
<button>My Button</button>
<script>
/*
Below, the button element's color style
has been read and written
to the color variable.
*/
let color = $('button').css('color');
/*
Now let's change the button color by assigning
the red value to the second argument=
*/
$('button').css('color', 'red')
/*
If we want to change more than one style of
an element at the same time, we pass JSON type arguments.
*/
$("button").css({"color": "red", "padding": "20px"});
</script>
API de JQuery
Hemos aprendido muchas operaciones de manipulación del DOM con jQuery.
Además de los métodos que hemos aprendido, JQuery cuenta con muchos métodos de manipulación.
Puede consultar toda la API haciendo clic en el enlace siguiente.
Enhorabuena
Enhorabuena 🎉
Hemos aprendido a aplicar estilos con jQuery.
En la siguiente sección, aprenderemos la gestión de eventos en jQuery.
Preguntas frecuentes
¿La lección «Estilos con jQuery» es gratis?
Sí — el texto completo de «Estilos con jQuery» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de jQuery Academy, actualiza a CoddyKit PRO. El curso de jQuery Academy incluye 1 lecciones en total.
¿Qué aprenderé en «Estilos con jQuery»?
Estilos con jQuery Practicas jQuery Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar jQuery Academy?
No se requiere experiencia previa. jQuery Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 1.
¿Cuánto tiempo toma la lección «Estilos con jQuery»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de jQuery Academy?
Sí. Cada lección de jQuery Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.