Prof. Alan Ferreira dos Santos
jQuery
Introdução ao jQuery
jQuery
- Biblioteca JavaScript mais popular da internet
- Código aberto
- Criada para simplificar os códigos JavaScript
- Utilizada por 77% dos 10 mil sites mais visitados no mundo
- Simplifica a seleção de elementos do DOM, a criação de animações, a manipulação de eventos e a comunicação com o back-end
- Funciona em todos os navegadores
DOM
- Modelo de Objeto de Documento
- Fornece uma árvore estruturada do documento com seus elementos
Como utilizar
Como utilizar
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Arquivo Local -->
<script type="text/javascript" src="libs/jquery-3.5.1.min.js"></script>
<!-- Arquivo Remoto (CDN) -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
</body>
</html>Construtor jQuery
$(alvo)
$('h1')
$('p')
$('#conteudo')
$('.text-center')Esperar até carregar
// A função ready é responsável por aguardar o carregamento completo dos elementos HTML
$(document).ready(function() {
// Seu código vai aqui
});Manipulação
// Classes
$('h1').addClass('className');
$('h1').removeClass('className');
$('h1').hasClass('className');
// Atributos
$('p').attr('atributo', valor);
$('p').removeAttr('atributo');
// Manipulando o HTML do elemento
$('#conteudo').html();
$('#conteudo').html('text or element');
// Manipulando valores de formulários
$('input').val();
$('input').val('valor');
// Adicionando elementos
var newElement = $('div')
$('#conteudo').append(newElement);
// Removendo elementos
$('#conteudo').remove();
// Ocultando elementos
$('#conteudo').hide();
// Exibindo elementos
$('#conteudo').show();CSS
$('.square').css('propriedade', 'valor');Eventos
$('#btnExemplo').click(function(e) {
console.log('Evento de click');
})Iteração em Objetos
$('li').each(function(index, element) {
console.log(index, element);
})jQuery
By Alan Ferreira dos Santos
jQuery
Programação Web
