Skip to content

Latest commit

 

History

History
198 lines (137 loc) · 5.67 KB

jquery.md

File metadata and controls

198 lines (137 loc) · 5.67 KB

jQuery

Este guia fornece informações essenciais sobre como usar o jQuery para interagir com elementos HTML, manipular eventos, fazer animações e realizar requisições AJAX. jQuery é uma biblioteca JavaScript rápida, pequena e rica em recursos, que simplifica tarefas como manipulação do DOM, controle de eventos e animações, garantindo compatibilidade entre navegadores.

Índice

Introdução ao jQuery

jQuery é uma biblioteca JavaScript rápida e leve projetada para simplificar o processo de manipulação do Document Object Model (DOM), manipulação de eventos e requisições HTTP assíncronas. Ela oferece uma API fácil de usar que funciona em múltiplos navegadores, tornando-a uma excelente ferramenta para o desenvolvimento web.

Algumas das funcionalidades do jQuery incluem:

  • Sintaxe simplificada para manipulação do DOM.
  • Métodos fáceis para manipulação de eventos como cliques, hover, etc.
  • Compatibilidade entre navegadores.
  • Suporte a animações e efeitos.
  • Simplificação de manipulação de AJAX.

Configurando o jQuery

Para começar a usar o jQuery em seu projeto, você pode baixar o arquivo do jQuery ou incluí-lo através de um CDN.

Usando CDN (Recomendado)

Adicione a seguinte tag de script no seu <head> para incluir o jQuery a partir de um CDN:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Isso carregará a versão mais recente e estável do jQuery.

Manipulação do DOM

O jQuery permite interagir e modificar elementos HTML de forma rápida e fácil. Aqui estão alguns exemplos de tarefas comuns de manipulação do DOM:

Exemplo: Alterando o Texto

<button id="change-text">Mudar Texto</button>
<p id="message">Texto Original</p>

<script>
  $("#change-text").click(function() {
    $("#message").text("Texto Alterado!");
  });
</script>

Exemplo: Adicionando uma Classe

<button id="add-class">Adicionar Classe</button>
<p id="text">Este é um parágrafo.</p>

<script>
  $("#add-class").click(function() {
    $("#text").addClass("highlight");
  });
</script>

Manipulação de Eventos

O jQuery simplifica a manipulação de eventos como cliques, pressionamentos de teclas, eventos de mouse, etc. Você pode vincular manipuladores de eventos aos elementos e responder às ações do usuário.

Exemplo: Evento de Clique

<button id="alert-button">Clique em Mim</button>

<script>
  $("#alert-button").click(function() {
    alert("Botão clicado!");
  });
</script>

Exemplo: Evento de Hover

<p id="hover-text">Passe o mouse sobre este texto.</p>

<script>
  $("#hover-text").hover(
    function() {
      $(this).css("color", "red");
    }, function() {
      $(this).css("color", "black");
    }
  );
</script>

Requisições AJAX

O jQuery simplifica a realização de requisições assíncronas usando o método $.ajax(), que pode ser usado para buscar dados de um servidor sem atualizar a página.

Exemplo: Requisição AJAX GET Simples

<button id="load-data">Carregar Dados</button>
<div id="data"></div>

<script>
  $("#load-data").click(function() {
    $.ajax({
      url: "https://jsonplaceholder.typicode.com/posts/1", // API de exemplo
      method: "GET",
      success: function(response) {
        $("#data").html("<p>" + response.title + "</p>");
      }
    });
  });
</script>

Animações

O jQuery oferece vários métodos para criar animações, incluindo fade in e fade out de elementos, deslizar para cima e para baixo, e mais.

Exemplo: Desaparecendo Elementos com Fade

<button id="fade-button">Desaparecer</button>
<p id="fade-text">Este é um texto.</p>

<script>
  $("#fade-button").click(function() {
    $("#fade-text").fadeOut();
  });
</script>

Exemplo: Deslizando Elementos

<button id="slide-button">Deslizar Para Baixo</button>
<div id="slide-box" style="display:none; background-color: lightblue; width: 100px; height: 100px;"></div>

<script>
  $("#slide-button").click(function() {
    $("#slide-box").slideDown();
  });
</script>

Exemplos de Casos Comuns de Uso do jQuery

Aqui estão alguns casos comuns de uso do jQuery:

  • Validação de Formulários: Usar jQuery para validar formulários antes de enviá-los.
  • Sliders de Imagens: Criar sliders de imagens responsivos com animações.
  • Mostrar/Ocultar Conteúdo: Alternar a visibilidade de seções de conteúdo com cliques ou outros eventos.
  • Navegação Interativa: Criar menus de navegação dinâmicos e interativos que respondem à entrada do usuário.

Recursos Adicionais