Primeiros Passos com jQuery
Primeiros Passos com jQuery
Primeiros Passos 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á,
Para usar a biblioteca jQuery, primeiro precisamos adicioná-la ao documento HTML.
No exemplo abaixo, o endereço da biblioteca jQuery foi adicionado como valor do atributo src entre as tags head.
Agora a biblioteca jQuery está pronta para ser usada em nosso projeto.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
</head>
<body>
</body>
</html>Seleção com jQuery
Para operar em elementos HTML (que, a partir de agora, chamaremos de DOM), primeiro precisamos selecionar o elemento.
No jQuery, o método $() ou jQuery() é usado para fazer uma seleção.
O método $() é o mais utilizado pelos desenvolvedores de software.
Com o parâmetro que atribuímos a esse método, decidimos qual elemento queremos selecionar.
XPath
A expressão que passamos para o método $ é o seletor XPath, que também conhecemos do CSS.
Em outras palavras, selecionamos elementos HTML no jQuery da mesma forma que fazemos seleções no CSS.
Exemplos de XPath
Suponha que nosso código HTML seja o seguinte.
<div id="my-box" class="my-box">
<p class="my-p">
<span class="my-text">Hello jQuery</span>
</p>
</div>
Vamos selecionar elementos HTML usando jQuery
// Dummy $ to demonstrate jQuery selectors in Node.js
function $(selector) {
console.log("Selector:", selector);
return [];
}
// Selects the element with the id of my-box.
$('#my-box')
// Selects the element with the my-box class.
$('.my-box')
// Selects all p elements that are descendants of the element with my-box id
$('#my-box p')
// Select the element with the .my-p class that is the child of the element with my-box class.
$('.my-box > .my-p')jQuery permitiu escrever nosso código de forma mais concisa
Se quiséssemos fazer o mesmo com JavaScript Vanilla (puro), teríamos de escrever mais linhas de código.
O jQuery permitiu escrever nosso código de forma mais concisa por meio de seus próprios métodos.
Aviso
jQuery é apenas uma biblioteca e, na prática, torna o desenvolvimento da Web mais fácil do que o JavaScript Vanilla.
Informação
Outra vantagem do jQuery é que todos os navegadores modernos oferecem suporte ao código que escrevemos.
Alguns códigos que escrevemos com VanillaJS podem causar efeitos colaterais em determinados navegadores, enquanto o jQuery garante o mesmo comportamento em todos eles por meio da abstração que oferece.
O jQuery nos poupa de ter de pensar em especificidades dos navegadores ao escrever código.
$(document).ready
Antes de aprendermos os fundamentos do jQuery, vamos conhecer o método $(document).ready.
Como devemos nos lembrar do HTML, dissemos que os códigos JavaScript podem ser colocados em qualquer lugar entre a tag head ou entre as tags body no HTML.
$(document).ready 2
Vamos supor que tenhamos um código HTML como o abaixo.
Nosso navegador interpretará o código desde a tag <!DOCTYPE html> até a tag de fechamento </html>.
A instrução <script src = "https://code.jquery.com/jquery-3.5.1.slim.js"> </script> começará a baixar a biblioteca por meio de code.jquery.com.
Na linha seguinte, o método $ do jQuery selecionou o DOM. No entanto, há um problema aqui. Se o documento HTML não estiver totalmente carregado quando o método $ ('# test') for chamado, nosso código JS falhará.
Nesse caso, o método $(document).ready é usado para garantir que o documento esteja totalmente carregado.
<div id="test">Hello Coddy</div>
<script>
$('#test').text('Hello Coddy')
</script>
$(document).ready 3
Após a definição acima,
Tudo o que precisamos fazer é usar o método $(document).ready(). Esse método aguardará todo o conteúdo ser carregado e, então, será executado.
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div id="test">Hello Coddy</div>
<script>
$(document).ready(function(){
$('#test').text('Hello Coddy')
})
</script>
</body>
</html>Pergunta
Vamos, responda à pergunta!
Parabéns
Parabéns 🎉
Nesta seção, começamos a aprender a biblioteca jQuery e seu método $(document).ready().
Na próxima seção, aprenderemos os seletores do jQuery.
Perguntas Frequentes
A aula “Primeiros Passos com jQuery” é grátis?
Sim — o texto completo de “Primeiros Passos 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 “Primeiros Passos com jQuery”?
Primeiros Passos 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 “Primeiros Passos 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.