Tempo de leitura: 8 minutos
Se você já tem uma base ou não tem a mínima ideia sobre o que é JQuery, não se preocupe pois vamos te entregar um passo a passo neste artigo, mostrando desde os fundamentos do JQuery, sua usabilidade e mostrar onde podemos aplicá-lo com mais eficácia.
Não podemos começar falando de JQuery sem antes falarmos de JavaScript, pois é dele que o JQuery deriva.
Das linguagens mais famosas, o JavaScript talvez seja a linguagem menos compreendida.
Quando Brendan Eich desenvolveu a primeira versão do JavaScript para o browser Mozilla, em 1995, a ideia era que a linguagem tivesse uma sintaxe parecida com o Java, pegando emprestado até mesmo alguns objetos e métodos com nomes iguais.
O Próprio nome, JavaScript, foi uma jogada de marketing para que a linguagem pudesse pegar carona no sucesso do Java, quebrando a resistência das pessoas em aprender uma nova linguagem.
No entanto, o JavaScript como o próprio nome já diz, é uma linguagem de script, já o Java é uma linguagem de programação bem mais complexa.
Você pode muito bem utilizar o JavaScript para ajudar os usuários a interagirem com mais dinamicidade e praticidade nas páginas da Web.
O JavaScript pode também ser utilizado para controlar o navegador, fazer comunicação de forma assíncrona com o servidor, mudar de forma dinâmica o conteúdo de uma página Web e para desenvolver jogos e aplicações, tanto móveis como desktop.
Que apesar de ser para iniciantes, você já sai com uma boa base da linguagem.
O que iremos aprender neste artigo?
// O primeiro comando com o jQuery
// Como chamar um jQuery Library Functions
Pronto para aprender os fundamentos dessa incrível biblioteca JavaScript?
O que é JQuery
Primeiramente vou trazer alguns pontos afirmando o que é o JQuery, para desmistificar de uma vez por todas muitas formas errôneas de se apresentar o JQuery.
- jQuery é sim uma biblioteca JavaScript.
- O JQuery é um grande arquivo .js que possui muitos métodos e objetos pré-construídos que simplificam nosso fluxo de trabalho.
- O jQuery foi criado como uma maneira de ajudar a simplificar as interações com o DOM (quando o jQuery foi criado, os métodos convenientes, como .querySelector (), não existiam).
- Uma das principais características dele é o uso de $ sign.
Você também pode utilizar o jQuery para:
- Manipulação de DOM – O jQuery facilitou a seleção de elementos DOM, manipulá-los e modificar seu conteúdo usando o mecanismo seletor de código aberto de vários navegadores chamado Sizzle .
- Manipulação de eventos – O jQuery oferece uma maneira bem interessante de capturar uma ampla variedade de eventos, como um usuário clicando em um link, sem a necessidade de confundir o próprio código HTML com manipuladores de eventos.
- Suporte a AJAX – O jQuery ajuda muito você a desenvolver um site responsivo e completo usando a tecnologia AJAX.
- Animações – O jQuery vem com muitos efeitos de animação incorporados que você pode usar em seus sites.
- Suporte cross-browser – O jQuery tem suporte a vários navegadores.
- Tecnologias mais recente – O jQuery suporta seletores CSS3 e sintaxe XPath básica.
O JQuery é uma biblioteca JavaScript que foi desenvolvida por John Resig, e que hoje é uma das bibliotecas JavaScript de código aberto mais populares.
Além do mais é disponibilizada sobre as licenças GPL e MIT. Dessa forma podemos utilizar a biblioteca tanto para fins pessoais como para comerciais também, sem precisar ter que pagar licenças de uso.
O principal objetivo da sua criação foi o de facilitar a nossa vida no desenvolvimento de aplicações que necessitam de muitas linhas de código para obtermos um determinado resultado, ou efetuarmos uma requisição Ajax.
No JQuery tudo que você escreveria utilizando linhas e linhas de comando é feito com pouquíssimas instruções, o que até facilita a vida de desenvolvedores que têm pouco conhecimento em JavaScript.
JQuery: Uma biblioteca de código fonte aberto, ou seja, Open Source
Como já falamos agora a pouco, ela faz uso de licença dual, utilizando a Licença MIT ou a GNU General Public License.
A sintaxe do JQuery foi toda arquitetada pensando em simplificar a navegação nos documentos HTML, seleção de elementos no DOM, manipular eventos, fazer animações, criar aplicações AJAX.
Além de ser uma biblioteca muito leve, de mais ou menos 30kb, extensível, oferece suporte a plugins, e possui uma enorme equipe de desenvolvedores, que diariamente adiciona novos recursos e funções a biblioteca, que nos deixa com várias opções de controle para interface.
Como usar JQuery?
É essencial que você já tenha algum conhecimento básico de HTML para fazermos o exercício seguinte.
Primeiramente iremos começar baixando a versão da biblioteca, que tanto pode ser uma versão compilada, que é bem mais leve, ou o código fonte puro, que é um pouco maior.
Depois de termos baixado o jQuery, temos que colocá-lo no final do body da nossa página html:
<html> <head> <title>Danki Code</title> </head> <body> <h1>O que é jQuery</h1> <script src="javascript/jquery.js> </script> </body> </html>
Lembre-se de colocar o caminho exato do arquivo .js que você salvou.
O primeiro comando com o jQuery
Vamos aprender primeiramente a imprimir um “Olá mundo” quando se clica em um botão. Lembre-se sempre que o aconselhável é você tratar os elementos da sua página com seus IDs, que devem ser únicos.
<button id="botao">Clique aqui</button>
Código jQuery:
<script type="text/javascript">
$(document).ready(function(){
$("#botao").click(function() {
alert('Olá mundo');
});
});
</script>
- $(): Usado em todas as funções que devem ser referenciadas no jQuery.
- ready(): Associado a leitura do documento enquanto ele é carregado.
- function{}: Dentro das chaves {}, se coloca os comandos javascript ou jQuery que serão interpretados pelo navegador/browser (O browser é um excelente interpretador de comandos).
Na primeira linha temos o evento ready que age sobre o documento html $(document).ready(), ele será o responsável por atribuir os eventos das funções que definimos apenas quando o DOM estiver preparado pelo navegador.
Na segunda linha de comando estamos definindo um evento ao clicar no botão com ID #botao, mostrando uma caixa de alerta.
Porém, isso é apenas uma pequena amostra do que é possível fazer com o jQuery. Vamos ver um outro exemplo.
Como chamar um jQuery Library Functions?
Quase tudo o que fazemos ao utilizar o jQuery, lê ou manipula o modelo de objeto de documento (DOM), precisamos garantir que começamos a adicionar eventos, etc., assim que o DOM estiver pronto.
Se você quiser que um evento funcione em sua página, você deve chamá-lo dentro da função $(document).ready(). Tudo dentro dele será carregado assim que o DOM for carregado e antes do conteúdo da página ser carregado.
Para fazer isso, registramos um evento pronto para o documento da seguinte forma –
$(document).ready(function() {
// do stuff when DOM is ready
// Ou em português: Faça alguma coisa quando o DOM estiver pronto :)
});
Para chamar qualquer função de biblioteca do jQuery, use tags de script HTML como mostrado abaixo –
<html> <head> <title>Danki Code - Exemplo jQuery</title> <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type = "text/javascript"> $(document).ready(function() { $("div").click(function() {alert("Olá, Mundo!");}); }); </script> </head> <body> <div id = "mydiv"> Clique aqui para ver uma caixa de diálogo. </div> </body> </html>
Conclusão sobre o que é jQuery
Entendeu o que é jQuery? Aprendeu como é simples você manipular o seu documento com poucas linhas de comando?
Espero que você tenha compreendido os fundamentos do jQuery, e como utiliza-lo em seu documento, em próximos artigos iremos nos aprofundar mais em sua utilização.
