JQuery 1.4

by Fabiano 27. janeiro 2010 18:53

Olá pessoal, hoje vou escrever sobre a nova versão do JQuery versão 1.4. Vejamos o que melhorou nesta versão, uma coisa que podemos notar e que depois que a Microsoft começou a apoiar a FrameWork vem crescendo bastante e nos que ganhamos com isso!!! 

No inicio do mês eu já dei uma Twitada sobre a nova versão que foi lançada no dia 14 de janeiro, achei bem legal o que foi feito no lançamento, pois o lançamento foi feito no dia do aniversario do JQuery, para celebrar o lançamento eles lançaram um site http://jquery14.com/.

Nota Oficial do Site: Nós estamos empolgados em trazer por 14 dias consecutivos novas liberações para celebrar a versão 1.4 do jQuery. Você observará que nós estamos empolgados com o número 14 desde que a versão 1.4 do jQuery foi liberada no aniversário do jQuery (14 de janeiro). Por isso não deixe de voltar a cada dia porque outro anúncio é feito e um novo conteúdo é liberado

Tem coisas bem legais nesse site, pretendo explorar mais artigos falando dessas mudanças.

Uma das principais mudanças foi a melhoria de performance dos principais métodos do FrameWork, se você já achava rápido imagina agora...

Nota Oficial do Site: Muitos dos principais métodos do jQuery sofreram alterações significantes na nova versão. Quando analisamos o código descobrimos que estávamos aptos à fazer alguns significantes ganhos de performance comparados com a versão anterior: Vendo quantas chamadas para funções internas estavam sendo feitas e o trabalho para reduzir a complexidade do código

Um outro ponto em que a equipe de DEV de preocupou bastante foi com  cobertura de testes e o suporte a uma quantidade maior de browsers.

Nota Oficial do Site: Na versão 1.4 corrigimos cerca de 207 bugs (comparados com 97 na versão 1.3). Adicionalmente nos melhoramos nossa cobertura de testes de 1504 testes no jQuery 1.3.2 para 3060 testes na versão 1.4. A suite de testes do jQuery está passando 100% na maioria dos browsers (Safari 3.2, Safari 4, Firefox 2, Firefox 3, Firefox 3.5, IE 6, IE 7, IE 8, Opera 10.10, e Chrome).

Um outro ponto muito importante foi a reescrita de toda a documentação oficial do jQuery 1.4 e a liberação de um novo fórum de discussão.

Nota Oficial do Site: Nós utilizamos listas de discussões, e posteriormente Grupos do Google, ao longo dos 4 anos para gerenciar as discussões e comunidades em volta do jQuery. Essa solução em particular não tem sido capaz de escalar nossas discussões tanto em termos de participação e no gerenciamento de spam

Você já pode baixar a nova versão clicando aqui e também disponível no Google e Microsoft

Bons Codigos...

Fabiano Belmonte

Twitter.com/fabianobelmonte

 

Tags:

JQuery

Introdução ao JQuery

by Fabiano 30. dezembro 2009 09:32

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:

google.load("jquery", "1.3.2");

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:

<script src="script/jquery.js" type="text/javascript"></script>

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:

jQuery(document).ready(function() { 

});

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

Tags:

JQuery

Powered by BlogEngine.NET 1.5.0.7
Theme by Mads Kristensen

Fabiano Belmonte

Senior Architect, especialista em aplicações e-business com larga experiência em B2B (Submarino. Com e Saraiva.Com). Trabalha há 5 anos com a tecnologia .Net, aplicando conhecimentos nas diversas áreas: instituições financeiras (sistema SPB), e-commerce, gerenciamento logístico entre outras.