Artigos HTML e CSS jQuery básico: Visão geral da biblioteca

Aprendendo jQuery

jQuery é uma biblioteca do JavaScript que reduz em muito o trabalho de codificação e permite-nos fazer coisas complicadas como animações, event handlings, usar o AJAX, o objeto JSON, etc., de uma forma fácil.

jQuery pode rodar em qualquer navegador, como o firefox, internet explorer, safari, chrome, etc., sem nenhum impedimento.

Passos:

Essa característica do jQuery é conhecida como um intersuporte entre os navegadores. Para começar a trabalhar com o jQuery necessitamos do arquivo jQuery.js no nosso diretório. Podemos fazer o download do jQuery. Após isto, salve o arquivo .js como query-3.5.1.min.js.

Assim, precisamos adicionar este arquivo de download num diretório de nosso site, por exemplo /JQuery. Agora, o caminho deve se assemelhar com o seguinte: /jquery/jquery-3.5.1.min.js. Neste ínterim, vamos dar uma olhada nas características do jQuery acima citadas em detalhes e com exemplos.

Animações: O jQuery pode ser usado em animações de sites ou aplicações web, para tornar o site atrativo.

Curso de jQuery

1º Passo no jQuery

Neste passo aprenderemos como usar o jQuery na nossa página html e criar uma animação simples.

Podemos iniciar usando jQuery na nossa página html localizando o arquivo no qual nós fizemos o download, como é ilustrado:

Listagem 1: Iniciando com jQuery.
<script type="text/javascript"
src="/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">

A versão do .js pode variar conforme o download. Neste tutorial estamos usando o jquery-3.5.1.min.js.

Abaixo, está o esqueleto do que a nossa página html vai se parecer:

Listagem 2: Esqueleto html.
<html>
    <head>
        <title>Teste jQuery</title>
        <script type="text/javascript"
        src="/jquery/jquery-3.5.1.min.js"></script>
        <script type="text/javascript">
        </script>   
    </head>
    <body>
    </body>
</html>
Listagem 3: Código para executar o passo 1 - myanimation.html.
<html>
<head>
        <title>Iniciando com jQuery</title>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'700px'});
  });
});
</script> 
</head>
  
<body>
Clique no botão para animar a div.
<div style="background:red;height:10px;width:10px;position:absolute;">
</div>
<button>Clique aqui</button>
</body>
</html>

2º Passo no jQuery

Neste passo, aprenderemos como usar scripts customizados.

Crie um arquivo e nomeie como meuscript.js no mesmo diretório. Neste caso ele vai estar no diretório /JQuery.

O esqueleto de qualquer .js customizado vai se parecer com isso:

Listagem 4: Esqueleto .js.
$(document).ready(function() {
   // seu código sera adicionado aqui
 
 });

Aqui está o código para o nosso meuscript.js

Listagem 5: userdefined.js
$(document).ready(function() {
  $("div").click(function() {
    alert ("Parabéns, o código está funcionando.");
  });
});

Agora se pode incluir meuscript.js como segue:

Listagem 6: código para executar o passo 2.
<html>
<head>
<title>Animações com jQuery</title>
   <script type="text/javascript"
   src="/jquery/jquery-3.5.1.min.js"></script>
   <script type="text/javascript"
   src="/JQuery/meuscript.js "></script>
</head>
<body>
<div>
Clique aqui par aver a mensagem.
</div>
</body>
</html>

Manipulador de eventos (event handling): Usando o jQuery, podemos manipular eventos, como o clicar em um botão, o clicar de um menu, etc, sem atualizar toda a página html.

3º Passo no jQuery

Neste passo, aprenderemos sobre a manipulação de eventos em jQuery.

Eventos são ações como o apertar de um botão, o sobrepousar do mouse, etc, os quais são feitos na interface com o usuário.

O propósito de qualquer evento é iniciar alguma ação. O código abaixo é um bom exemplo para a manipulação de eventos em jQuery.

Listagem 7: Código para executar o passo 3.
<html>
<head>
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
Selecione seu personagem favorite:
<select name="Comics" multiple="multiple">
<option>Thor</option>
<option>Hulk</option>
<option>Spider man </option>
<option>Batman</option>
</select>
<div></div>
<script>
$("select").change(function () {
var escolhido = "";
$("select option:selected").each(function () {
Escolhido += $(this).text() + " ";
});
 alert("Você prefere o "+escolhido);
})
.change();
</script>
</body>
</html>

No código acima, a tag do script chama a função que produz um box de alerta baseado no valor selecionado da lista de opções.

O valor selecionado é guardado na variável favourite e é mostrada com o valor da string que é anexada.

AJAX: se unirmos o jQuery com o Ajax nós podemos desenvolver interativas e ricas aplicações web.

4º Passo no jQuery

Neste passo aprenderemos como implementar funcionalidades do ajax no jQuery.

JavaScript e XML assíncronos, também conhecidos como AJAX (Assynchronus JavaScript and XML), ajudam-nos a carregar informações do servidor sem permitir que toda a página seja atualizada.

Vamos ver um exemplo.

Neste exemplo, iremos carregar dados estáticos usando o AJAX do jQuery.

Load() é um dos métodos mais importantes em jQuery usado para carregar os dados.

Crie um arquivo html e nomeie como JQueryajax.html

Listagem 8: Código para executar o passo 4: JQueryajax.html.
<html>
<head>
<title>jQuery e Ajax</title>
   <script type="text/javascript"
   src="/jquery/jquery-3.5.1.min.js"></script>
   <script type="text/javascript" language="javascript">
   $(document).ready(function() {
      $("#driver").click(function(event){
          $('#stage').load('/JQuery/conteudo.html');
      });
   });
   </script>
</head>
<body>
   <p>Clique no botão abaixo para carregar o conteúdo:</p>
   <div id="stage" style="background-color:red;">
          Conteúdo
   </div>
   <input type="button" id="driver" value="Carregar" />
</body>
</html>

Para executar este código nós devemos criar um arquivo html no diretório JQuery que já foi criado anteriormente. Temos de nomear o arquivo como conteudo.html. O código para conteudo.html é dado abaixo.

Listagem 9: conteudo.html.
<html>
<head>
<title>Página para teste</title>
</head>
<body>
Texto da página de conteúdo.
</body>
</html>

No clique no botão "Load Some Text" no JQueryajax.html, será carregada a informação estática, do corpo de output.html.

Vamos dar uma olhada acima, no JQueryajax.html, mais em detalhes. Vamos olhar o método load().

$('#stage').load('/JQuery/conteudo.html');

O método load() aceita o caminho do output.html como um parâmetro seu e pede que o conteúdo seja carregado no estágio. Isto permite com que o arquivo html carregue os conteúdos de outro arquivo html.

JSON: Podemos trabalhar com dados de JSON usando jQuery.

5º Passo no jQuery

Neste passo aprenderemos como carregar dados de um arquivo .json.

Crie um arquivo html e nomeie como JQueryson.html. Abaixo está o código para carregar os dados de JSON.

Listagem 10: Código para executar o passo 5: JQueryson.html.
<html>
<head>
<title>Trabalhando com JSON</title>
   <script type="text/javascript"
   src="/jquery/jquery-3.5.1.min.js"></script>
   <script type="text/javascript" language="javascript">
   $(document).ready(function() {
      $("#driver").click(function(event){
          $.getJSON('/JQuery/dados.json', function(v) {
             $('#stage').html('<p> Filme 1: ' + v.filme1 + '</p>');            $('#stage').append('<p>Filme 2 : ' + v.filme2+ '</p>');
        $('#stage').append('<p> Filme 3: ' + v.filme3+ '</p>');
          });
      });
   });
   </script>
</head>
<body>
   <p>Clique no botão para carregar os dados</p>
   <div id="stage" style="background-color:red;">
          Filmes:
   </div>
   <input type="button" id="driver" value="Carregar " />
</body>
</html>

Crie um arquivo dados.json no diretório /JQuery. O arquivo json deve parecer com este:

Listagem 11: Arquivo json.
{
"filme1": "O Homem de Aço",
"filme2" : "Os Mercenários",
"filme3": "O Hobbit"
}

Vamos olhar o código acima em detalhes: Vamos olhar o método $.getJSON da página html acima em maiores detalhes.

No código acima, a função $.getJSON() pega o caminho /JQuery/dados.json, que é o caminho do arquivo json, em outras palavras, o arquivo que criamos no diretório JQuery.

Então a função $.getJSON() aceita outra função com parâmetro v como seu próprio parâmetro.

A variável v guarda os valores que são pegos do arquivo. Os valores guardados na variável v são filme1, filme2, filme3. Então, quando o código chama o valor pela chamada de suas respectivas chaves, digamos v.filme1, etc, os nomes respectivos são mostrados.

Mais do que as ferramentas que estão disponíveis em jquery-3.5.1.min.js o qual nós fizemos o download para este tutorial, existem muitos plugins disponíveis que podem também ser adicionados na mesma maneira como nós fizemos no passo 1 do nosso código html. Estes plugins têm mais ferramentas jQuery.

Confira também

Curso de Introdução ao JavaScript

Curso de Introdução ao JavaScript

Curso
Primeiros passos com a jQuery

Primeiros passos com a jQuery

Curso
jQuery: funções - toggleClass, addClass, removeClass

jQuery: toggleClass, addClass, removeClass

Curso