Posts

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.

jQuery

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.

<body>

<script src=“js/jquery.js”></script>
</body>

 

Se você quiser, pode criar um app.js,  onde vamos colocar nosso código exemplo de jQuery.

<body>

<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:

jQuery(“p”);

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:

jQuery(“.error”);

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 class=“error”>Inicialmente Oculto.</p>
<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 class=“error”>Inicialmente Oculto e depois revelado.</p>
<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:

$(“p.error”).hide().show(“slow”);

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.

<html>
    <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>

$(“li”);

Então queremos ocultar todos os itens, representados por <li>

$(“li”).hide();

Em seguida, vamos selecionar o elemento “pai”, que é a lista onde estão estes itens.

$(“li”).hide().parent();

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:

$(“li”).hide().parent().before(“<a href=’#’>Mostrar Empresas Gigantes</a>”);

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”.

$(“li”).hide().parent().before(“<a href=’#’>Mostrar Empresas Gigantes</a>”);
$(“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.

$(“li”).hide().parent().before(“<a href=’#’>Mostrar Empresas Gigantes</a>”);
$(“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() ).

$(“li”).hide().parent().before(“<a href=’#’>Mostrar Empresas Gigantes</a>”);
$(“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.

 

CDN JQuery Gratuita no Brasil

Nova CDN JQuery Gratuita no Brasil

A GoCache tem o prazer de anunciar a mais nova CDN JQuery do Brasil. E melhor, totalmente gratuita!

Com a constante meta de tornar mais rápida a internet no Brasil, a GoCache traz mais uma importante novidade: A primeira CDN JQuery espalhada por todo o território brasileiro.

Isso mesmo, ao contrário de outras CDNs como Google, MaxCDN, CDNJS, CloudFlare, que possuem apenas um ou dois pontos de presença no Brasil, a GoCache conta com diversos servidores espalhados por todo o país.

Com isso, a CDN da GoCache garante que os usuários de seu site sempre terão um servidor JQuery por perto, acelerando muito o carregamento dos arquivos.

CDN

Para você entender melhor, vejamos um exemplo:

  • Um usuário de seu site mora no Nordeste, digamos Fortaleza. Se você utiliza outras CDNs, os arquivos JQuery estarão em servidores no Rio de Janeiro ou São Paulo, então a requisição de seu usuário deverá percorrer milhares de quilômetros, até ir e voltar, de Fortaleza a São Paulo, podendo levar vários segundos (que somados, derrubam o desempenho do seu site).
  • Se você estiver utilizando a CDN Jquery da GoCache, certamente haverá um servidor muito próximo deste mesmo usuário. Desta forma, ao invés de milhares de quilômetros, a requisição deste usuário percorrerá apenas algumas dezenas de quilômetros, obtendo os dados em milésimos de segundos e aumentando muito a performance e velocidade do seu site.
  • O mesmo ganho de desempenho você terá com todos os usuário do seu blog, site ou e-commerce, independente de estarem em Manaus, Porto Alegre, Cuiabá ou qualquer outra cidade do Brasil.

E o melhor de tudo, essa CDN JQuery é Grátis, reafirmando o compromisso da GoCache em deixar a internet brasileira cada dia mais rápida.

Portanto, utilizando a CDN para hospedar seus arquivos JQuery, você aumenta o desempenho do seu site e ainda economiza com banda, ou seja, diminuiu o tráfego de dados em seu servidor web, economizando na sua conta no final do mês.

Por fim, os arquivos JQuery hospedados na CDN utilizam tanto o protocolo HTTP quanto o protocolo HTTPS, permitindo que você aumente o nível de segurança em seu site, utilizando certificados SSL.

Se você já usa outra CDN, veja como é simples mudar para a CDN JQuery da GoCache:

Com apenas algumas pequenas alterações em seus scripts, você pode mudar rapidamente para a CDN Jquery da GoCache, usufruindo da velocidade dos diversos servidores espalhados pelo país.

 

Suponha que você está usando a CDN do Google, você encontrará alguma linha semelhante a esta em seus scripts (colocamos cores para ajudar na explicação):

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js’ type=’text/javascript’/>

Bastará substituir o servidor CDN do Google (que está em azul) pelo da GoCache e colocar a versão, que está em verde, junto com o nome da bliblioteca JQuery que quer usar, desta forma:

<script src=’https://jquery.gocache.net/jquery-1.4.3.min.js’ type=’text/javascript’/>

 

Se você estiver usando os arquivos do próprio site da JQuery (que é provido pela MaxCDN), a alteração é ainda mais simples:

<script src=’https://code.jquery.com/jquery-1.4.3.min.js’ type=’text/javascript’/>

Basta alterar apenas o nome do servidor da CDN, pois o nome da bliblioteca JQuery continua o mesmo:

<script src=’https://jquery.gocache.net/jquery-1.4.3.min.js’ type=’text/javascript’/>

 

Utilizando outras bibliotecas JQuery da CDN GoCache:

Você pode também navegar diretamente pelo repositório com todos os arquivos .CSS e versões das bibliotecas .JS pertencentes ao projeto JQuery, como “color“, “JQuery UI“, etc.

Para visualizar todas as bibliotecas existentes na CDN, basta acessar diretamente o diretório raiz, em https://jquery.gocache.net e você verá algo como abaixo:

bibliotecas jquery

Desta forma, basta você escolher a versão que mais te agrada e usar a hospedagem JQuery da GoCache pra acelerar seu site e economizar tráfego e banda de seu servidor!

 

Qualquer dúvida ou sugestão, não deixe de colocar nos comentários abaixo: