jQuery - Visão geral

O que é jQuery?

jQuery é uma biblioteca JavaScript rápida e concisa criada por John Resig em 2006 com um bom lema: Write less, do more. jQuery simplifica a passagem de documentos HTML, manipulação de eventos, animação e interações Ajax para um desenvolvimento web rápido. jQuery é um kit de ferramentas JavaScript projetado para simplificar várias tarefas escrevendo menos código. Aqui está a lista de recursos básicos importantes suportados pelo jQuery -

DOM manipulation - O jQuery facilitou a seleção de elementos DOM, negociá-los e modificar seu conteúdo usando o mecanismo de seleção de código aberto cross-browser chamado Sizzle.
Event handling - O jQuery oferece uma maneira elegante 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.
AJAX Support - O jQuery te ajuda muito a desenvolver um site responsivo e cheio de recursos usando a tecnologia AJAX.
Animations - O jQuery vem com muitos efeitos de animação integrados que você pode usar em seus sites.
Lightweight - O jQuery é uma biblioteca muito leve - cerca de 19 KB de tamanho (Minificado e gzipado).
Cross Browser Support - O jQuery tem suporte para vários navegadores e funciona bem no IE 6.0+, FF 2.0+, Safari 3.0+, Chrome e Opera 9.0+
Latest Technology - O jQuery suporta seletores CSS3 e sintaxe XPath básica.

Como usar o jQuery?

Existem duas maneiras de usar o jQuery.

Local Installation - Você pode baixar a biblioteca jQuery em sua máquina local e incluí-la em seu código HTML.
CDN Based Version - Você pode incluir a biblioteca jQuery em seu código HTML diretamente da Content Delivery Network (CDN).

Instalação Local

Vou ao https://jquery.com/download/ para baixar a versão mais recente disponível.
Agora coloque baixado jquery-2.1.3.min.js arquivo em um diretório do seu site, por exemplo, / jquery.

Exemplo

Agora você pode incluir a biblioteca jquery em seu arquivo HTML da seguinte maneira -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" src = "/jquery/jquery-2.1.3.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

Isso produzirá o seguinte resultado -

Versão baseada em CDN

Você pode incluir a biblioteca jQuery em seu código HTML diretamente da Content Delivery Network (CDN). O Google e a Microsoft fornecem entrega de conteúdo para a versão mais recente.

Estamos usando a versão Google CDN da biblioteca em todo este tutorial.

Exemplo

Agora vamos reescrever o exemplo acima usando a biblioteca jQuery do Google CDN.

<html>
   <head>
      <title>The jQuery Example</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() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

Isso produzirá o seguinte resultado -

Como chamar funções da biblioteca jQuery?

Como quase tudo o que fazemos ao usar o jQuery, lê ou manipula o modelo de objeto de documento (DOM), precisamos ter certeza de 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 que o conteúdo da página seja carregado.

Para fazer isso, registramos um evento pronto para o documento da seguinte forma -

$(document).ready(function() {
   // do stuff when DOM is ready
});

Para chamar qualquer função de biblioteca jQuery, use tags de script HTML como mostrado abaixo -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function() {alert("Hello, world!");});
         });
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Como usar scripts personalizados?

É melhor escrever nosso código personalizado no arquivo JavaScript personalizado: custom.js, como segue -

/* Filename: custom.js */
$(document).ready(function() {

   $("div").click(function() {
      alert("Hello, world!");
   });
});

Agora podemos incluir custom.js arquivo em nosso arquivo HTML da seguinte forma -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" src = "/jquery/custom.js">
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Usando várias bibliotecas

Você pode usar várias bibliotecas juntas sem entrar em conflito umas com as outras. Por exemplo, você pode usar as bibliotecas jQuery e MooTool javascript juntas. Você pode verificar o Método jQuery noConflict para obter mais detalhes.

O que vem a seguir?

Não se preocupe muito se você não entendeu os exemplos acima. Você as compreenderá muito em breve nos capítulos subsequentes.

O próximo capítulo tentaria cobrir alguns conceitos básicos que vêm do JavaScript convencional.