Introdução ao JQuery

Olá Amigos depois de um longo tempo de ausência estou de volta!
Quero me desculpar pelo relaxo, RS e que também peguei uma faze dura no trampo nossa! Paulera total!!!
Mais estou de volta, e vamos parar de lero lero!  Vamos ao que interessa!
A algum tempo j&  ;aacute; venho utilizando profundamente o JQuery, e quanto mais eu uso mais eu curto a ferramenta, ferramenta bacana que facilita a vida do DEV e o que mais eu curto e a facilidade com que conseguimos fazer as coisas.

Vou começar a falar mais de JQuery aqui no BLOG quero fazer uma serie de artigos vou do básico ate onde der e aceito sugestões...
Vamos la!!!!

O QUE É JQUERY

A biblioteca jQuery é disponibilizada como Open Source, ou seja como código aberto, você pode baixar o código e fazer novas implementações caso precise ou queira criar coisas novas para seu projeto.

O seu criador John Resig, resume o jQuery assim:
“O foco principal da biblioteca jQuery é a simplicidade. Por que submeter os desenvolvedores ao martírio de escrever longos e complexos códigos para criar efeitos simples.”

E quem é desenvolvedor dos "primordios" sabe  muito bem o que isso quer dizer... Quem nunca teve que escrever linhas e linhas de JavaScript para fazer validações de um form por exemplo, mais vamos ao novo!!!

JQuery é uma maneira mais fácil, simples, elegante e sofisticada de codificar javascript; é, nada mais, nada menos, que, segundo minha opinião, um dos melhores  frameworks já desenvolvidos para facilitar a vida dos Devs! 

É um Framework JavaScript que simplifica o modo como você trabalha com documentos XHTML, manipula eventos, cria animações, e principalmente interações AJAX.

Podemos dizer que o nome jQuery significa "javascriptQuery" ou "consultas javascript". Como veremos a seguir, é através de "consultas" a seletores CSS que acessamos os objetos da página e os manipulamos.

A sintaxe do jQuery fundamenta-se nos seletores: CSS2.1 e CSS3.

Benefícios

Por exemplo, com apenas um mecanismo, conseguimos utilizar AJAX de forma CrossBrowser ( Universal, funcionando na maioria dos navegadores atuais ), além de facilitar o desenvolvimento e o tratamento dos dados nas camadas cliente/servidor.

Existem Frameworks que são especialistas em somente um determinado comportamento ou mecanismo do conjunto de tecnologias web, como por exemplo: especialistas em efeitos ou somente em Ajax e etc.

jQuery e os Padrões Web

JQuery foi criado para andar de acordo com os Padrões Web, ou seja, compatível com qualquer navegador em qualquer sistema operacional, além de oferecer total suporte a CSS3 ( Usa-se os seletores CSS3 para selecionar elementos e não estilizar ).

Vantagens de se trabalhar com jQuery

São várias, mas listaremos as principais:

• Compatibilidade com qualquer navegador.
• O tamanho do arquivo .JS do jQuery é bem pequeno.
• Encapsulamento da complexidade, você evita de programar linhas e linhas de código.
• Você consegue acessa  r a qualquer elemento ou combinações de elementos.
• Interação CrossBrowser Perfeita, compatível com todos os browsers atuais.
• Infinitas as possibilidades de se realizar requisições com Ajax
• Open Source, jQuery é Open Source e está atualmente disponível s  obre as licenças MIT e GPL.

Iniciando com jQuery

Primeiramente, devemos baixar o jQuery, para isso acesse:

www.jquery.com 

Clique no botão:

Temos estas duas opções para download: A compactada, onde é usado um compressor de JavaScript, ficando ilegível para humanos. E a outra versão não compactada, esta que é um pouco maior em Kbs. Mas no final das contas, a versão não compactada é a melhor escolha, por alguns motivos:

O tempo de carregamento é praticamente o mesmo da versão compactada, pelo fato do tempo gasto na descompressão quando o usuário recebe a página. 

A versão compactada tem a desvantagem de não ir para o cache, tendo que ser carregada novamente toda vez que o usuário voltar ao site. Portanto, quando for utilizar em seu site  ou projeto, recomendo o uso da versão não compactada.  

INSTALANDO JQUERY

A API AJAX de bibliotecas do Google fornece aos seus aplicativos um acesso em alta velocidade, estável, confiável   e disponível globalmente a todas as bibliotecas JavaScript de código aberto mais populares. Seu aplicativo pode usar nosso carregador super flexível google.load() ou o acesso direto, baseado em caminhos, para os scripts

A melhor maneira de carregar as bibliotecas é usando o google.load() para nomear uma biblioteca e a versão de sua preferência. Exemplo:

Como você pode ver nos snippets de código acima, o primeiro argumento para google.load é o nome de uma biblioteca. O segundo argumento é a especificação de uma versão. A lista completa de bibliotecas Ajax é uma coleção crescente das bibliotecas JavaScript de código aberto mais populares.

Você pode utilizar também da maneira tradicional de inclusão de script JS em sua pagina como no snippets de código abaixo:

Utilizando a função jQuery ou $

Para utilizar o JQuery, você precisa utilizar as chaves "JQuery" ou "$" para utilizar suas funções, exemplo JQuery("#Id do elemento") ou $("#Id do elemento").

Observação: Alguns desenvolvedores, usam outras Frameworks (Bibliotecas) numa mesma página com jQuery, como por exemplo, a Framework Scriptaculous , neste caso, acessar elementos com o "símbolo do dólar" $ causa conflitos na página, portanto é recomendado utilizar jQuery("").

A Primeira Função ("Olá Mundo!!!!")

Quase tudo o que fazemos com jQuery lê ou manipula (DOM), primeiramente, antes de inciarmos as interações, manipulação de eventos e etc, devemos certificar se o DOM está pronto ( Se o documento já foi lido, em outras palavras, se o documento já foi carregado ). 

Para faze  rmos isso, devemos registr  ar o evento ready (pronto) para o documento. Veja:

Colocar um Alert() no ready do documento, não faz sentido, pelo fato que de que o Alert não manipula nada no DOM e sim é um método do objeto window , assim como close() também é um método do objeto window. Agora, se quisermos colocar um Alert() ao clicar num link, aí sim, devemos usar o ready   do documento. Como por exemplo:

JQuery("#linkalert") é um seletor do JQuery ( Aprenderemos seletores a seguir ), neste caso, ele seleciona unicamente o elemento de id  "linkalert". O  jQuery  por si só é um alias para a "classe" jQuery, por outro lado o  JQuery() constrói um novo objeto jQuery. A função  click() que chamamos depois é um método do objeto jQuery. Ele liga o evento clique ao elemento selecionado ( Ou seja, o elemento <a>  que selecionamos ) e executa a função fornecida quando o evento ocorrer. 

Outro detalhe importante: Com jQuery, separamos o conteúdo em camadas: Apresentação(XHTML) X Comportamento(JS), por exemplo, ao invés de:

Usamos jQuery, e acessamos este elemento, a partir de sua identificação id  "linkalert".

Vou para por aqui mais vou me aprofundando mais em outros artigos.

Espero que gostem.

Bons Códigos...
Fabiano Belmonte