jQuery para Iniciantes
jQuery para Iniciantes
jQuery para Iniciantes é 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á,
Boas-vindas ao curso de jQuery para iniciantes .
Nesta seção, começaremos a aprender informações detalhadas sobre jQuery.
Introdução 2
Antes de iniciar este curso,
é necessário ter concluído os seguintes cursos.
- Primeiros passos com HTML
- Primeiros passos com CSS
- Fundamentos de JavaScript
- Se já tiver conhecimento desses tópicos, poderá continuar o curso.
Vamos começar
Vamos começar.
Antes de tudo, vamos responder à pergunta: para que serve o jQuery?
Antes de responder à pergunta, vamos revisar nossos fundamentos
Antes de responder à pergunta, vamos revisar nossos fundamentos.
A linguagem HTML é uma linguagem de marcação. Portanto, é uma linguagem de marcação de texto, não uma linguagem de programação. Ela está distante de conceitos como orientação a objetos. Em outras palavras, não há objetos em sua estrutura; o que conhecemos são tags HTML, atributos etc.
JavaScript realiza operações no DOM
Muitas vezes, precisamos realizar operações em elementos HTML de páginas da Web. Para possibilitar isso e tornar os elementos HTML acessíveis ao JS, usamos uma representação chamada DOM (Document Object Model).
JavaScript realiza operações no DOM, que é o equivalente em objetos da página da Web. Chamamos isso de manipulação do DOM.
Exemplo
Vamos dar um exemplo.
Temos um elemento de botão como no exemplo abaixo, e ele contém o texto 'Não clicado' . Quando clicarmos no botão, faremos o texto do botão mudar para 'Clicado'.
Para conseguir isso, precisamos fazer a manipulação do DOM usando a linguagem JavaScript.
No curso de Introdução ao JavaScript, aprendemos a manipular um documento da Web com JavaScript. jQuery é uma biblioteca que permite tornar a manipulação do DOM mais concisa e simples do que quando a fazemos com JavaScript.
<!--Initial Element -->
<button id="my-button">Not Clicked</button>
<!---Desired Element after clicking the button-->
<button id="my-button">Clicked</button>Pergunta
Uma pergunta para você!
Exemplo 2
No exemplo abaixo, definimos um botão com o identificador my-button.
Agora vamos acessar esse elemento com JavaScript por meio do DOM.
Quando clicarmos no botão, acessaremos o DOM com o código JS e alteraremos a propriedade innerHTML do elemento com o identificador my-button para click.
<button id="my-button">
Not Clicked
</button>
<script>
let myButton = document.getElementById('my-button');
myButton.addEventListener("click",
function(){
myButton.innerHTML = "Clicked"
})
</script>Aviso
jQuery nada mais é do que uma biblioteca criada para simplificar o uso de funções e métodos do núcleo do JS.
Em outras palavras, ela permite fazer, com uma sintaxe mais simples e fácil de ler, muitas coisas que podemos fazer com VanillaJS.
Explicação do exemplo
Vamos explicar o código.
let myButton = document.getElementById('my-button');
Atribuímos o objeto document do JavaScript à variável chamada myButton usando o método getElementById.
myButton.addEventListener("click", function(){
myButton.innerHTML = "Clicked"
})
Depois, escutamos o evento de clique do botão e fizemos alterações nele.
Fizemos a manipulação do DOM usando os recursos básicos da linguagem sem utilizar nenhuma biblioteca ou estrutura, o que é chamado acima de nativo ou VanillaJS.
Vamos escrever o mesmo código com jQuery e aproveitar os recursos que a biblioteca jQuery oferece.
Aviso
O conceito, expresso como VanillaJS em muitos lugares, na verdade consiste apenas nos objetos, métodos e funções essenciais do Javascript puro, além do uso dos recursos oferecidos pelo navegador.
Exemplo de jQuery
Abaixo, refizemos nosso exemplo anterior usando jQuery.
Tenha cuidado para não encurtar demais o código ignorando a sintaxe.
<script>
$('#my-button').on('click', function(){
$(this).text('Clicked');
})
</script>
<button id="my-button">Not Clicked</button>Parabéns
Parabéns 🎉
Nesta seção, começamos a aprender jQuery e entendemos o quanto o jQuery pode facilitar nossa vida.
Até a próxima seção!
Perguntas Frequentes
A aula “jQuery para Iniciantes” é grátis?
Sim — o texto completo de “jQuery para Iniciantes” é 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 “jQuery para Iniciantes”?
jQuery para Iniciantes 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 “jQuery para Iniciantes”?
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.