jQuery
jQuery de forma prática com exemplos.
Manipulação DOM, eventos, AJAX e mais.
Fabrício Tonetto Londero
O Que É jQuery?
Leve e rápida
Biblioteca JavaScript para facilitar o desenvolvimento web.
Manipulação fácil
Simplifica o trabalho com HTML DOM, animações e AJAX.
Multinavegador
Compatível com todos os principais navegadores.
Produtividade
Menos código, mais eficiência no desenvolvimento.
Configurando o jQuery
1 Incluir Biblioteca
Adicione o jQuery ao seu projeto para começar.
2 Download
Obtenha via jquery.com para uso local.
3 CDN
Carregue rapidamente pela rede pública, exemplo abaixo:
4 Exemplo Código
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
Sintaxe Básica do jQuery
Seleção Ações
$(seletor) escolhe os elementos do HTML. Defina o que fazer com os elementos selecionados.
• #id • hide(), show()
• .classe • css(), text()
• elemento como <p> • fadeIn(), animate()
Manipulação do DOM com jQuery - Prática
Selecionar Elementos Modificar Conteúdo
• $('p'): todos os parágrafos • text('Novo texto')
• $('#meuId'): elemento por ID • html('<p>Novo parágrafo</p>')
• $('.minhaClasse'): elementos por classe • attr('src', 'nova_imagem.jpg')
Eventos jQuery - Prática
Escutar Eventos
Use on(evento, função) ou evento(função)
Eventos Comuns
• click()
• hover()
• submit()
• keydown()
Exemplo
$('button').click(function() { alert('Botão clicado!'); });
Efeitos e Animações com
jQuery - Prática
Visibilidade
hide(), show(), toggle() para controlar exibição.
Fade
fadeIn(), fadeOut(), fadeToggle() criam suavidade.
Slide
slideUp(), slideDown(), slideToggle() mostram efeito deslizante.
Animação Personalizada
animate() permite animar propriedades CSS específicas.
Exemplo: $('#meuId').fadeOut('slow');
AJAX com jQuery - Prática
Função Principal Vantagens
$.ajax() permite chamadas assíncronas. Atualize a página sem recarregar todo o conteúdo.
• $.get(), $.post() facilitam requisições comuns. Exemplo:
$.get('meu_arquivo.php', function(data) {
$('#resultado').html(data); });
Plugins jQuery
O que são? Exemplos
Extensões para funcionalidades Sliders, validadores de
extras no jQuery. formulários e tooltips.
Como usar
Inclua o arquivo e siga a documentação do plugin.
Vamos ver alguns exemplos em breve.
Recursos e Próximos
Passos
Documentação
Visite api.jquery.com para referência oficial.
Tutoriais Online
W3Schools, Codecademy oferecem cursos interativos.
Comunidades
Participe de fóruns como Stack Overflow para dúvidas.
Pratique
Experimente e explore para dominar jQuery!
<p class="destaque">Parágrafo destacado</p>
<p id="unico">Parágrafo único</p>
<script>
$("p").css("color", "blue");
$(".destaque").css("font-weight", "bold");
$("#unico").css("text-decoration", "underline");
</script>
<div id="container"></div>
<script>
$("#container").html("<p>Conteúdo inserido via
jQuery!</p>");
$("#container").append("<button>Clique
aqui</button>");
</script>
<button id="mostrarAlerta">Clique-me</button>
<script>
$("#mostrarAlerta").on("click", function () {
alert("Você clicou no botão!");
});
</script>
<input type="text" id="nome">
<button id="pegarNome">Exibir Nome</button>
<script>
$("#pegarNome").click(function () {
const nome = $("#nome").val();
alert("Nome digitado: " + nome);
});
</script>
<!-- Efeitos Visuais-->
<button id="esconder">Esconder</button>
<button id="mostrar">Mostrar</button>
<div id="caixa" style="width:100px; height:100px; background:red;"></div>
<script>
$("#esconder").click(function () {
$("#caixa").fadeOut();
});
$("#mostrar").click(function () {
$("#caixa").fadeIn();
});
</script>
<p id="meuTexto">Texto de exemplo</p>
<button id="destacar">Destacar</button>
<script>
$("#destacar").click(function () {
$("#meuTexto").toggleClass("negrito");
});
</script>
<style>
.negrito {
font-weight: bold;
color: red;
}
</style>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<script>
$("li").each(function (index) {
$(this).append(" (índice: " + index + ")");
});
</script>
Exercícios:
Refazer uma lista de Javascript ou a AC2, utilizando
apenas jQuery!
