jQuery: Prática e Exemplos

Prévia do material em texto

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
Sintaxe Básica do jQuery
Seleção
$(seletor) escolhe os elementos do HTML.
• #id
• .classe
• elemento como 
Ações
Defina o que fazer com os elementos selecionados.
• hide(), show()
• css(), text()
• fadeIn(), animate()
Manipulação do DOM com jQuery - Prática
Selecionar Elementos
• $('p'): todos os parágrafos
• $('#meuId'): elemento por ID
• $('.minhaClasse'): elementos por classe
Modificar Conteúdo
• text('Novo texto')
• html('Novo parágrafo')
• 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
$.ajax() permite chamadas assíncronas.
• $.get(), $.post() facilitam requisições comuns.
Vantagens
Atualize a página sem recarregar todo o conteúdo.
Exemplo:
$.get('meu_arquivo.php', function(data) { 
$('#resultado').html(data); });
Plugins jQuery
O que são?
Extensões para funcionalidades 
extras no jQuery.
Exemplos
Sliders, validadores de 
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!
Parágrafo destacado
Parágrafo único
$("p").css("color", "blue"); 
$(".destaque").css("font-weight", "bold"); 
$("#unico").css("text-decoration", "underline");
$("#container").html("Conteúdo inserido via 
jQuery!");
$("#container").append("Clique 
aqui");
Clique-me
$("#mostrarAlerta").on("click", function () {
alert("Você clicou no botão!");
});
Exibir Nome
$("#pegarNome").click(function () {
const nome = $("#nome").val();
alert("Nome digitado: " + nome);
});
Esconder
Mostrar
$("#esconder").click(function () {
$("#caixa").fadeOut();
});
$("#mostrar").click(function () {
$("#caixa").fadeIn();
});
Texto de exemplo
Destacar
$("#destacar").click(function () {
$("#meuTexto").toggleClass("negrito");
});
.negrito {
font-weight: bold;
color: red;
}
Item 1
Item 2
$("li").each(function (index) {
$(this).append(" (índice: " + index + ")");
});
Exercícios:
Refazer uma lista de Javascript ou a AC2, utilizando 
apenas jQuery!