jquery @ 01 - Introdução á jQuery

06 março, 2009 por Weber Amaral

Jquery, sem sombra de dúvida, veio a facilitar muito o trabalho dos desenvolvedores, agora podendo se concentrar mais nas lógicas dos sistemas Web e não nos problemas de incompatibilidade com os navegadores. Mas não é só isso, essa framework traz outras funcionalidades.


Funcionalidades tais como: Resolução da incompatibilidade entre navegadores, utilização do código através de plugins, além de uma grande quantidade de plugins criados por desenvolvedores, melhor implementação á CSS1, CSS2 e CSS3, trabalha com AJAX e DOM, redução de código, além de diversos efeitos para serem introduzidos.
São inúmeras as funcionalidades e vantagens de se trabalhar com jquery. Neste primeiro post relacionado á JQUERY irei dar uma breve introdução, aonde baixar, linkar a biblioteca em sua página e finalmente, como chamar a JQUERY.

Aonde baixar



Após sabermos as inúmeras vantagens de se usar jquery e estarmos dispostos a usá-la em nossos trabalhos, páginas pessoais, aplicações Web e etc., vamos primeiramente ao site oficial da Jquery e baixarmos a ultima versão da biblioteca ( Atualmente na versão 1.3.2 ), logo na página inicial, já podemos fazer o download, selecionando a opção Minified, com um tamanho de apenas 19Kb.
Nesta opção de download, vemos que o código da biblioteca está praticamente ilegível, sem comentários e escrito em apenas um linha. Isso, para que, ele seja totalmente otimizado e como é óbvio, carregado mais rápido. Já a versão "Development", o código traz comentários do desenvolvedor e esta todo indentado, trazendo mais facilidade para leitura e compreensão, porém seu tamanho é de aproximadamente 120Kb, sendo assim não recomendado para "linkagem" na página HTML.

Linkando a biblioteca



Após termos baixado a biblioteca e hospedado em nosso servidor de preferência iremos agora linkar ela com nosso documento HTML, assim quando chamarmos alguma função ela estará pronta para nos retornar algo.
O modo como ela será linkada é igual quando linkamos um javascript.

Linkando a jquery
<script type="text/javascript" src=".../jquery-1.3.2.js"/>


Ela deverá ser colocada entre as Tags <head> e </head>. Desse modo garantimos que ela será carregada antes que todo o site seja.

Chamando a jquery



Depois de hospedada a biblioteca e linkada no HTML é hora de chamar a JQUERY, para isso, quando vamos escrever um código, usaremos o seguinte:
$(document).ready(function() {
// Aqui vai seu cógigo
});


Assim o nosso script passa a ser executado, somente, depois que o DOM for carregado, evitando outros problemas.
Se verificarmos outros scripts, iremos notar que em alguns eles não começam dessa maneira e em outros são chamados de outra forma. Porém essa é a forma mais comum e a que utilizo para diversos scripts.
A forma de linkar no documento HTML, e similar á uma folha de estilos ( "para quem está mais habituado á CSS" ), e igual ao se inserir um script. Exemplo:
Linkagem do código dentro do HTML
<script language="javascript" type="text/javascript">
$(document).ready(function() {
//seu código aqui
});
</script>


Linkagem externa
<script type="text/javascript" src=".../suajquery.js"/script>


Sendo assim podemos agora começar a usar essa framework maravilhosa e dar uma incrementada em nossos sites, criarmos funções, efeitos como fadeIn, fadeOut, slides, animações, melhorarmos os eventos em formulários e etc.
Com isso termino essa pequena introdução e a partir dos próximos iremos conhecer alguns macetes.
Até a próxima.

Nenhum comentário

Postar um comentário

 
Todos direitos Reservados á Weber Amaral - 2009 - HOME | SOBRE | CONTATO