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

https://jquery.com/download/

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

Iteração entre Objetos

$('li').each(function(index, element) {
   console.log(index, element);
})