O principal objetivo do jQuery é facilitar o uso de JavaScript (JS) em seu site. Esta é a linguagem preferida dos desenvolvedores quando se trata de elaborar aplicações web.   

Quer saber mais sobre o jQuery, sua criação e como ele funciona? Então continua com a gente nesse post para ficar por dentro de tudo sobre essa linguagem de programação.

O que é jQuery?

A linguagem foi criada nos anos 90 e alcançou muito espaço entre os profissionais da área de programação. Foi nesse cenário que o jQuery surgiu — a biblioteca JavaScript de código aberto, desenvolvida por John Resig. 

Ela foi apresentada em 2006 no encontro BarCamp NYC. O criador estava procurando uma maneira de pegar blocos de tarefas comuns e repetitivas em JS para reduzi-los em “receitas” curtas, inteligentes e compreensíveis, chamadas métodos.

Mais de uma década depois da criação do jQuery, o lema segue fiel ao propósito inicial: “escreva menos, faça mais”. Prova disso é que grandes marcas, como Twitter, Kickstarter e Uber, utilizam jQuery em seus produtos. 

Quais são as vantagens de aprender jQuery?

Além de tornar a programação mais rápida e eficiente, a biblioteca jQuery simplifica uma variedade de operações de programação. O jQuery ui tem código aberto, o que significa que qualquer pessoa pode contribuir ou modificá-lo, conquistando uma grande comunidade de usuários. 

Por isso, se você está decidindo se vale a pena começar a estudar jQuery, saiba que haverá diversas pessoas para dar suporte caso você tenha dúvidas.

Por fim, jQuery tem uma extensa documentação de métodos, que funciona em qualquer outra biblioteca JavaScript que você possa usar, e milhares de plugins que permitem estender a funcionalidade do jQuery. 

Quais são as desvantagens de usar jQuery? 

A desvantagem mais crítica do jQuery é ser uma grande biblioteca para importar. Ele é um único arquivo JS que contém todos os componentes DOM, eventos, efeitos e AJAX. Ao longo do tempo e do desenvolvimento, o arquivo ganhou uma quantidade significativa de kilobytes. 

O usuário interessado em utilizar a biblioteca deverá baixá-la inteira, o que requer mais tempo para abrir. Outra desvantagem é que o jQuery “esconde” as partes complexas do JavaScript, tornando o aprendizado do JavaScript muito mais difícil.

Quais são suas principais aplicações?

Atualmente, o jQuery é a biblioteca JavaScript mais popular que funciona em todos os navegadores. Manipular HTML DOM tornou-se uma prática comum para desenvolver e modificar páginas da web hoje em dia. Portanto, mesmo que o JavaScript esteja desabilitado, o conteúdo do navegador será renderizado. Alguns dos principais usos do jQuery são:

Plugins

Um plugin é um trecho de código escrito em um arquivo JavaScript padrão. Esses arquivos fornecem métodos jQuery úteis, que podem ser usados ​​junto dos mecanismos da biblioteca jQuery. Existem diversos plugins na web que tornam a criação de efeitos especiais simples e rápida para os desenvolvedores da web. Veja alguns muito utilizados abaixo.

• Effect: plugin jQuery que permite atribuir uma série de efeitos de animação a um elemento em uma página da web; 

• Taggings: você já adicionou uma “tag” de categorização a uma postagem de blog? Provavelmente, esse recurso foi possível com o código JavaScript. Esse script permite que você adicione um sistema de tagging ao seu site, ajudando na indexação e na classificação nos mecanismos de busca, o SEO;

• Autocomplete: a barra de pesquisa em sites famosos, como o Google, costuma ter um recurso de preenchimento automático que começa a oferecer sugestões para terminar o que você está digitando. Você pode adicionar uma dessas funcionalidades do JavaScript ao seu próprio projeto com esse plugin;

• Scrollmagic: usa o código jQuery para animar os elementos da página da web com base no posicionamento da barra de rolagem de um usuário (a barra no lado direito da janela do navegador, que permite mover a página para cima e para baixo);

• Fine uploader: permite que os desenvolvedores da web ignorem as etapas de construção de um novo uploader e usem as ferramentas jQuery para inserir um menu pré-construído diretamente em sua página da web;

• Blueimp gallery: galeria de imagens responsiva que pode ser controlada tanto por um teclado e mouse de mesa quanto passando o dedo em um telefone ou tablet. Esse plugin pode ser configurado para exibir imagens ou vídeos em formato de carrossel e modo lightbox;

• Slider: controles “deslizantes”, usados ​​para ajustar o volume e outros níveis em uma página da web. Esse plugin usa a biblioteca jQuery para atribuir valores numéricos em uma barra horizontal. O controle pode ser movido para cima e para baixo na barra, usando um mouse ou as teclas de seta do teclado.

Manipulação DOM

O jQuery tornou fácil selecionar, negociar e modificar elementos DOM, usando um mecanismo seletor de código aberto para vários navegadores, chamado Sizzle.

Animações e suporte AJAX

O jQuery vem com muitos efeitos de animação integrados, ajudando muito no desenvolvimento de um site responsivo e rico em recursos usando a tecnologia AJAX. 

Quais são os principais requisitos para utilizar o jQuery?

Antes de descobrir como usar o jQuery, é importante que você tenha um conhecimento bastante sólido de HTML e CSS. Também deve saber configurar um site simples e o que são seletores CSS, como ids e classes. Além disso, conhecimento em JS é essencial, principalmente variáveis ​​e tipos de dados. 

O jQuery é uma ferramenta poderosa, fazendo com que sua capacidade em JavaScript seja muito mais eficaz que se você codificasse cada recurso do zero. Ele também diz respeito à natureza da codificação — todos os plugins são criados individualmente por desenvolvedores da web com o objetivo de encontrar maneiras de maximizar os ganhos de JavaScript e jQuery, compartilhando esses resultados com a comunidade de programação. 

Se você estiver se perguntando por onde começar os estudos, o jQuery Learning Center é uma boa pedida. O repositório de tutoriais de implementação fornece diversas dicas para ajudar os desenvolvedores a se familiarizarem com a biblioteca. À medida que suas habilidades são aperfeiçoadas, você pode continuar utilizando esses recursos, tendo a oportunidade de retribuir à comunidade.

Como utilizar jQuery?

jQuery pode ser usado de duas maneiras principais, uma delas baseada em como inserir jQuery no HTML:

• instalação local: baixe a biblioteca jQuery em sua máquina local e inclua-a em seu código HTML; 
• versão baseada em CDN: você pode incluir a biblioteca jQuery em seu código HTML diretamente de uma rede de distribuição de conteúdo. 

O Content Delivery Network (CDN) é um sistema composto por vários servidores que entrega conteúdo da internet de acordo com a localização geográfica do usuário. Ao vincular um arquivo jQuery, hospedado via CDN, ele chega potencialmente mais rápido ao visitante do que se você o hospedasse em seu próprio servidor.

Para praticar, sugerimos um exercício para criar um pequeno projeto da web. Ele incluirá style.cssno css/diretório, scripts.jsno js/diretório e, em um principal index.html, na raiz do projeto.

project/

├── css/

|   └── style.css

├── js/

|   └── scripts.js

└── index.html

Para começar, faça um esqueleto HTML e salve-o como index.html.

index.html

<!doctype html>

<html lang=”en”>

<head>

  <title>jQuery Demo</title>

  <link rel=”stylesheet” href=”css/style.css”>

</head>

<body>

</body>

</html>

Coloque link para jQuery CDN logo antes da </body>tag de fechamento, seguido por seu próprio arquivo JavaScript personalizado scripts.js.

index.html

<!doctype html>

<html lang=”en”>

<head>

  <title>jQuery Demo</title>

  <link rel=”stylesheet” href=”css/style.css”>

</head>

<body>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js”></script>

<script src=”js/scripts.js”></script>

</body>

</html>

Seu arquivo JavaScript (scripts.js) deve ser incluído abaixo da biblioteca jQuery no documento, caso contrário não funcionará. Nota: Se você baixou uma cópia local do jQuery, salve-a na sua js/pasta e crie um link para ela em js/jquery.min.js.

Neste ponto, a biblioteca jQuery está sendo carregada em seu site, e você terá acesso total a API jQuery. Abaixo, está uma breve visão geral de alguns dos seletores mais comumente usados no jQuery.

$(“*”)- Wildcard: seleciona todos os elementos da página;

$(this)- Corrente: seleciona o elemento atual que está sendo operado dentro de uma função;

$(“p”)- Tag: seleciona todas as instâncias da <p>tag;

$(“.example”)- Classe: seleciona cada elemento que possui a classe aplicada a ele;

$(“#example”)- Id: seleciona uma única instância do id único;

$(“[type=’text’]”)- Atributo: seleciona qualquer elemento com texto aplicado ao typeatributo,

$(“p:first-of-type”)- Pseudo elemento: seleciona o primeiro <p>.

Conclusão

Como você percebeu, o jQuery é construído em cima do JavaScript, fornecendo todas as funcionalidades dele. Podemos dizer que jQuery é uma “versão aprimorada do JavaScript”. O jQuery é frequentemente usado por web designers para tornar seus projetos muito amáveis ​​e elegantes. 

Ele minimiza as tarefas dos desenvolvedores da web em grande medida, fornecendo plugins instantâneos. Ainda assim, a principal vantagem do jQuery é a sua comunidade, na qual é possível encontrar outros desenvolvedores para trocar experiências e tirar dúvidas.

O que você está esperando para incorporar o jQuery às suas habilidades? Conte para a gente o que você achou deste conteúdo!

E não esqueça de assinar a nossa newsletter! Receba conteúdos como este no seu e-mail 🙂