GoCache CDN
  • Produtos
    • CDN
      • Pontos de Presença
    • WAF – Web Application Firewall
    • Rate Limit
    • Lithio – Otimizador de Imagens
    • WPO – Web Performance Optimization
    • Certificado SSL
  • Soluções
    • E-Commerce
    • Cloud
    • CMS – Content Management System
    • Segurança
  • Planos
  • Ajuda
  • Contato
  • Login
  • CADASTRE-SE

Aprendendo a usar jQuery

27 de novembro de 2017/0 Comentários/em jquery /por Valdiney Pimenta

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.



Tags: jquery, jquery cdn, jquery cdn no brasil
Share this entry
  • Share on Facebook
  • Share on Twitter
  • Share on Google+
  • Share on Linkedin
  • Share on Tumblr
  • Share by Mail
https://www.gocache.com.br/wp-content/uploads/2017/11/jquery_logo.png 114 500 Valdiney Pimenta https://www.gocache.com.br/wp-content/uploads/2016/11/logo_cor_menu-1-1.png Valdiney Pimenta2017-11-27 16:14:252020-10-21 18:26:03Aprendendo a usar jQuery

Procurar

Últimas publicações

  • Por que a velocidade de um site é importante? Google Playbook 12 de janeiro de 2021
  • Web Scraping: O que é, e suas aplicações 7 de janeiro de 2021
  • Quais as verticais mais exploradas por bad bots? 5 de janeiro de 2021
  • Histórico de Alterações – Novo recurso da GoCache 22 de dezembro de 2020
  • Como usar o ISPTools? 17 de dezembro de 2020
  • CDN para Elementor – Como reduzir tempo de carregamento do WordPress 14 de dezembro de 2020
  • CDN para WooCommerce com integração via Plugin 10 de dezembro de 2020
  • Como melhorar o resultado orgânico do meu site 8 de dezembro de 2020
  • Queda de tráfego orgânico? Pontos em que a CDN pode ajudar 2 de dezembro de 2020
  • Site fora do ar/indisponível? Saiba como a CDN pode dar mais poder de escala para sua aplicação 26 de novembro de 2020

Produtos

  • Content Delivery Network
  • SSL
  • Web Performance Optimization
  • Web Application Firewall

Soluções

  • E-commerce
  • Cloud
  • CMS
  • Segurança

Empresa

  • Central de Ajuda
  • Carreiras
  • Blog
  • Contato
  • Planos
  • Calculadora de Preços
  • Termos de Uso e Politica de Privacidade

Acompanhe nosso Blog!

  • Por que a velocidade de um site é importante? Google Playbook
  • Web Scraping: O que é, e suas aplicações
  • Quais as verticais mais exploradas por bad bots?
  • Histórico de Alterações – Novo recurso da GoCache
  • Como usar o ISPTools?
© Copyright - GoCache - 2020
  • Linkedin
  • Facebook
  • Twitter
Como melhorar o ranking da sua página no Google? Bloquear seu site contra o acesso de IPs de outros países
Este site utiliza cookies para aprimorar sua navegação. Na GoCache o uso de cookies é feito apenas para reconhecer um visitante constante e melhorar a experiência no uso dos Serviços. Os cookies são pequenos arquivos de dados transferidos de um site da web para o disco do seu computador, e não armazenam dados pessoais. Se preferir, você pode apagar os cookies existentes em seu computador através do browser utilizado. Leia nossos termos de usoOkRecusar
Scroll to top