GoCache
  • Produtos
    • CDN
    • WAF – Web Application Firewall
    • Lithio – Otimizador de Imagens
    • Rate Limit
    • API Discovery & Inventory
    • API Pública
    • Certificado SSL
    • Role Based Access Control
    • Plugin WordPress e Magento
  • Soluções
    • E-Commerce
    • Portais de Conteúdo e Notícias
    • Educação / Edtech
    • Startup
    • Outros
  • Planos
  • Parceiros
    • Parceiros de Tecnologia
  • Cases
  • Ajuda
    • Central de Ajuda – FAQ
    • Documentação Técnica
    • Documentação da API
  • Contato
  • Login
  • CADASTRE-SE
  • Menu Menu

Aprendendo a usar jQuery

27 de novembro de 2017/em Dicas

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 WhatsApp
  • Share on LinkedIn
  • Share on Tumblr
  • Share by Mail
https://www.gocache.com.br/wp-content/uploads/2017/11/jquery_logo.png 114 500 Go Cache https://www.gocache.com.br/wp-content/uploads/2021/11/gocache-nova-preta.png Go Cache2017-11-27 16:14:252022-05-25 11:11:52Aprendendo a usar jQuery

Baixe nosso Ebook

Procurar

Últimas publicações

  • Insufficient Logging & Monitoring – O que é? 23 de maio de 2022
  • Improper Assets Management – O que é? 23 de maio de 2022
  • Injection – O que é? 23 de maio de 2022
  • Security Misconfiguration – O que é? 23 de maio de 2022
  • Mass Assignment – O que é? 23 de maio de 2022

Produtos

  • Content Delivery Network
  • SSL
  • Web Application Firewall - WAF
  • Rate Limit
  • Lithio - Otimizador de Imagens
  • API Discovery & Inventory
  • Role Based Access Control
  • Plugin para WordPress e Magento

Soluções por vertical

  • Portais de conteúdo e notícias
  • E-Commerce
  • Educação / Edtech
  • Plataformas de E-Commerce
  • Startup
  • Outros

Empresa

  • Central de Ajuda
  • Carreiras
  • Parceiros
  • Blog
  • Contato
  • Planos
  • Cases de Sucesso
  • Datasheet GoCache

Documentação

  • Termos de Uso e Politica de Privacidade
  • API Pública da GoCache
  • Documentação Painel

Acompanhe nosso Blog!

  • Insufficient Logging & Monitoring – O que é?
  • Improper Assets Management – O que é?
  • Injection – O que é?
  • Security Misconfiguration – O que é?
  • Mass Assignment – O que é?
  • Broken Function Level Authorization (BFLA) – O que é?
  • Lack of Resources & Rate Limiting – O que é?
  • Excessive Data Exposure – O que é?
Como melhorar o ranking da sua página no Google? Bloquear seu site contra o acesso de IPs de outros países
Scroll to top

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.

AceitarRecusarTermo de uso

Cookie and Privacy Settings



How we use cookies

We may request cookies to be set on your device. We use cookies to let us know when you visit our websites, how you interact with us, to enrich your user experience, and to customize your relationship with our website.

Click on the different category headings to find out more. You can also change some of your preferences. Note that blocking some types of cookies may impact your experience on our websites and the services we are able to offer.

Essential Website Cookies

These cookies are strictly necessary to provide you with services available through our website and to use some of its features.

Because these cookies are strictly necessary to deliver the website, refusing them will have impact how our site functions. You always can block or delete cookies by changing your browser settings and force blocking all cookies on this website. But this will always prompt you to accept/refuse cookies when revisiting our site.

We fully respect if you want to refuse cookies but to avoid asking you again and again kindly allow us to store a cookie for that. You are free to opt out any time or opt in for other cookies to get a better experience. If you refuse cookies we will remove all set cookies in our domain.

We provide you with a list of stored cookies on your computer in our domain so you can check what we stored. Due to security reasons we are not able to show or modify cookies from other domains. You can check these in your browser security settings.

Google Analytics Cookies

These cookies collect information that is used either in aggregate form to help us understand how our website is being used or how effective our marketing campaigns are, or to help us customize our website and application for you in order to enhance your experience.

If you do not want that we track your visit to our site you can disable tracking in your browser here:

Other external services

We also use different external services like Google Webfonts, Google Maps, and external Video providers. Since these providers may collect personal data like your IP address we allow you to block them here. Please be aware that this might heavily reduce the functionality and appearance of our site. Changes will take effect once you reload the page.

Google Webfont Settings:

Google Map Settings:

Google reCaptcha Settings:

Vimeo and Youtube video embeds:

Other cookies

The following cookies are also needed - You can choose if you want to allow them:

Privacy Policy

You can read about our cookies and privacy settings in detail on our Privacy Policy Page.

Termos de Uso e Política de Privacidade – GoCache CDN
Accept settingsHide notification only