Aprendendo a usar jQuery
A biblioteca jQuery tem funcionalidades muito interessantes para serem exploradas. jQuery permite que você manipule elementos no HTML, transversalmente dentro do documento, adicione eventos de som (por exemplo, quando você clica em um elemento), animações, execute solicitações e efeitos AJAX, e tudo com a confiança de que seu código funcionará em diferentes navegadores (compatibilidade cross-browsers).
Se você não sabe nada sobre jQuery e se alguns desses termos não significam nada para você, não se preocupe! Vamos falar sobre tudo isso no nosso Guia sobre jQuery para iniciantes.
O JavaScript é usado para adicionar interatividade à Interface de um site, aquela parte que fica visível ao usuário. Um termo usado frequentemente para descrever esse tipo de interatividade em um site é o comportamento.
O JavaScript funciona de forma um pouco diferente em cada navegador. Este é um dos motivos que levam as pessoas a utilizarem a jQuery, uma biblioteca JavaScript que visa suavizar algumas dessas inconsistências e incompatibilidades, além de facilitar muito o uso de recursos especiais.
Um framework (ou biblioteca) pode nos poupar tempo, isso porque muitas vezes o código que queremos usar na nossa página já foi escrito e, muitas vezes, escrito por um desenvolvedor com muitos anos a mais de experiência.
A jQuery é uma biblioteca de código aberto, mantida por desenvolvedores de todo o mundo. Você pode baixá-la do site oficial JQuery.com, ou, para facilitar, pode baixar diretamente da Hospedagem jQuery gratuita que a GoCache oferece no Brasil, basta clicar com o botão direito neste link e escolher “salvar como”: jquery-1.11.3.js (você pode também escolher outra versão da biblioteca, diretamente nesta página: https://jquery.gocache.net)
Salve isso no mesmo lugar que o seu HTML, a a maioria das pessoas ignora esse detalhe e salva em um lugar separado o JavaScript.
Faz parte das boas práticas incluir seus arquivos de JavaScript no final do seu HTML, antes da tag de fechamento do código, assim você garante que ela será baixada apenas depois que seu site já estiver sendo exibido ao seu visitante. No entanto, se você usar funções jQuery no meio da página, lembre-se de carregar a biblioteca algumas linhas acima dessas funções.
Se você baixou jQuery para uma pasta chamada js com o nome jquery.js, e seus arquivos HTML estavam no mesmo diretório que a pasta js, você o incluirá com o passo a passo abaixo.
…
<script src=“js/jquery.js”></script>
</body>
Se você quiser, pode criar um app.js, onde vamos colocar nosso código exemplo de jQuery.
…
<script src=“js/jquery.js”></script>
<script src=“js/app.js”></script>
</body>
As funções da jQuery
Agora que você incluiu jQuery na sua página, você precisa saber como selecionar elementos HTML com jQuery.
jQuery é uma função que pode usar em uma série de situações, o mais comum é uma string contendo um seletor de CSS.
Você aplica esses códigos exatamente nessa ordem para selecionar os elementos do HTML e aplicar o comportamento que deseja. Se você quiser selecionar todos os parágrafos em uma página, você coloca o seguinte código em um novo script ou, no nosso caso, app.js:
Uma vez que “p” é a tag CSS para selecionar todos os parágrafos, eu usei “p” no método jQuery. Se eu quisesse selecionar todos os elementos que apresentaram “erro” de código, eu escreveria o seguinte:
Embora você possa usar o método jQuery na íntegra toda vez que quiser alterar o HTML, existe um jeito mais simples de usar a jQuery, usando o operador “$”. Nossos dois exemplos anteriores podem ser reescritos como $ (“p”) e $ (“. error”).
Já que avançamos uma etapa neste tutorial de jQuery para Iniciantes e que você já conhece esse atalho, vamos usar $ no resto do post.
Para minimizar surpresas
Agora que você sabe como selecionar os elementos, é hora de adicionar comportamentos a eles. A jQuery tem uma interface bem simples para adicionar esse comportamento. Basta você adicionar o parâmetro que quer no final do código onde você selecionou os elementos.
Para ocultar um parágrafo com o retorno de “error” por exemplo, nós usamos o método hide(). Note que o texto de classe “error” não aparecerá na tela.
<p>Este está visível</p>
$(“p.error”).hide();
É bem simples! Esse é o princípio da jQuery, simplicidade!
Quer tornar visível um elemento oculto? Use show(). Quer alterar a velocidade? Coloque o número de milissegundos que você deseja que a animação dure ou use “fast” ou “slow”.
Então, se você quiser mostrar a mensagem de erro lentamente, você pode fazer o seguinte.
<p>Este está visível</p>
$(“p.error”).hide();
$(“p.error”).show(“slow”);
E pronto! Você criou seu primeiro efeito de jQuery
Usando tudo junto
jQuery permite que você mantenha seu código limpo, sem ser repetitivo. jQuery permite programar alguns métodos juntos para que o exemplo acima possa ser escrito também de uma maneira mais curta e simples:
Essa pode ser uma maneira de reduzir a quantidade de linhas do seu código e fazer mais.
jQuery para iniciantes: passo 2
Agora que você viu como é simples criar esses efeitos, vamos mostrar como fazer alguns. O termo “DOM” significa Modelo de Objeto de Documentos. É assim que um navegador representa o HTML na memória, como uma árvore.
<body>
<ul>
<li>Apple</li>
<li>Amazon</li>
<li>Google</li>
<li>Microsoft</li>
</ul>
</body>
</html>
O html tem que conter o <body> (corpo), o <body> tem que conter a lista não ordenada <ul>, e essa lista tem conter todos os itens <li>.
Você pode acessar esses elementos dentro da jQuery usando método parent(). Digamos que queremos esconder cada item da lista e, antes da lista, queríamos adicionar um link com o texto “Mostrar Empresas Gigantes”.
Vamos então construir nossa linha de comando.
Primeiro, queremos esconder os itens da lista, e os itens são representados por <li>
Então queremos ocultar todos os itens, representados por <li>
Em seguida, vamos selecionar o elemento “pai”, que é a lista onde estão estes itens.
Nós podemos então usar o método before() para inserir um texto antes do elemento “pai” (parent), que no caso é a nossa lista com itens:
Desta forma você usou os efeitos para esconder (os itens), e a “seleção transversal” para selecionar um elemento pai (ou parent), além de manipular o conteúdo adicionando um o novo código HTML.
Agora, vamos usar a jQuery para testar o evento de click em cima do texto que acabamos de incluir: “Mostrar Empresas Gigantes”.
$(“a”).click();
O método de clique leva um argumento que é uma função. Este é o código que você deseja que seja executado quando clicar naquele Texto/Link.
$(“a”).click(function(){
/** Código a ser executado **/
});
O código que vamos executar quando o link for clicado será um código bem simples, que irá exibir aqueles itens que havíamos escondido antes (quando usamos $(li).hide() ).
$(“a”).click(function(){
$(“li”).show();
});
O clique pode também ser vinculado a outros tipos de elementos (ou tags) do HTML, como um div, span ou qualquer um que você desejar. Você não está apenas restrito aos links, ou seja, não está restrito à tag “a”.
Concluindo
Depois de todo o nosso guia sobre jQuery para iniciantes, você viu como é fácil fazer efeitos, animações, acessar elementos, eventos e manipulação no jQuery.
E se você vai usar jQuery no seu site, utilize uma hospedagem jQuery de uma CDN, ao invés de hospedá-los em seu próprio site. Assim você garante que o navegador de seus usuários baixará rapidamente os arquivos, acelerando o carregamento do seu site.
Você pode usar a CDN JQuery da GoCache, é gratuita e é a única que possui dezenas de servidores espalhados pelo Brasil: CDN JQuery Gratuita no Brasil.