Estilização com jQuery
Estilização com jQuery
Estilização com jQuery é uma aula grátis de jQuery Academy no CoddyKit. Esta é a aula 1 de 1. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de jQuery Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de jQuery Academy inclui 1 aulas no total.
Introdução
Olá,
Em todos os exemplos anteriores, trabalhamos com objetos HTML DOM.
Com jQuery, também podemos manipular os estilos dos elementos HTML.
jQuery fornece alguns métodos para isso.
classe
Nos primeiros exemplos que faremos, veremos o uso de classes com jQuery.
No exemplo abaixo, inserimos nossa biblioteca jQuery no HTML e definimos duas classes chamadas pink e yellow, que deixam o texto rosa e amarelo.
Vamos começar 🚀
exemplo
Adicionamos um elemento <p> entre as tags <body>.
Atualmente, esse elemento ainda não tem uma classe.
<style>
.pink{
color:pink;
}
.yellow{
color: yellow;
}
</style>
<p>lorem ipsum </p>exemplo 2
Agora vamos adicionar a classe pink ao elemento de parágrafo usando o método addClass().
Na tela de visualização, observaremos que a cor do texto Lorem ipsum ficará 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()
Se quisermos remover classes de elementos HTML, usamos o método removeClass().
Alteramos o exemplo abaixo e definimos inicialmente a classe pink em nosso elemento HTML. Assim que o DOM for carregado, a classe pink do nosso elemento p será removida.
<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>alternar classe
método toggleClass()
Como fica claro pelo nome, com este método,
se existir uma classe no elemento de destino, ela será removida; caso contrário, será adicionada.
<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()
Vimos os métodos para adicionar e remover classes.
Agora vamos aprender o método CSS usado para definir estilos inline para nossos nós HTML.
O método CSS recebe dois parâmetros.
- O primeiro parâmetro é o nome da propriedade a ser atribuída.
- O segundo parâmetro é o valor da propriedade a ser atribuída.
O exemplo a seguir mostra diferentes usos do 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 do jQuery
Aprendemos muitas operações de manipulação do DOM com jQuery.
Além dos métodos que aprendemos, o jQuery possui muitos outros métodos de manipulação.
Você pode consultar toda a API clicando no link abaixo.
Parabéns
Parabéns 🎉
Aprendemos como estilizar com jQuery.
Na próxima seção, aprenderemos o gerenciamento de eventos em jQuery.
Perguntas Frequentes
A aula “Estilização com jQuery” é grátis?
Sim — o texto completo de “Estilização com jQuery” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de jQuery Academy, atualize para CoddyKit PRO. O curso de jQuery Academy inclui 1 aulas no total.
O que vou aprender em “Estilização com jQuery”?
Estilização com jQuery Você pratica jQuery Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar jQuery Academy?
Nenhuma experiência prévia é necessária. jQuery Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 1.
Quanto tempo leva a aula “Estilização com jQuery”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de jQuery Academy?
Sim. Cada aula de jQuery Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.