19 de fev de 2010

O que é/Como usar JQuery?

JQuery é um framework javascript que enfatiza a interação entre HTML e Javascript, usado em vários sites mais acessados se tornou o framework javascript mais popular do mundo.

Por que usar?
JQuery é Open Source (ô Beleza!) e tem uma sintaxe que torna muito mais fácil a seleção de elementos via DOM, criar animações (Sem flash, é claro!) e torna o AJAX bem simples, e o melhor te deixa criar plugins para facilitar ainda mais o desenvolvimento de todos.

Quem está de olho?
Além de nós(Desenvolvedores), a Microsoft e Nokia já estão de olha para adicionar o JQuery em suas plataformas.

Como usar?

- Faça o download da versão mais recente do JQuery.

- Importe o código em sua página HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>


A maioria dos desenvolvedores quando precisam executar algo quando a página está pronta utiliza o método abaixo
window.onload = function(){ alert("welcome"); }

Porém este código executa antes da página ser completamente carregada, por isso com JQuery é simples resolver este problema, apenas utilize:
$(document).ready(function(){
// Your code here
});

Seleção de objetos
Você pode selecionar um objeto pela sua classe
$('.myCssClass')
ou por seu id
$('#myId')
ou até mesmo pelo nome da tag html
$('a')
Eventos
Você também pode setar eventos como por exemplo click de um elemento.
$(document).ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
});
});

Não é mágica, é JQuery
Então o exemplo completo fica assim, copie e salve como .html e veja a mágica do jquery:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
alert("Não é mágica, é JQuery. (Web como um todo)");
event.preventDefault();
});
});

</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>

Gostou de utilizar um evento como o click? Nesta página tem a descrição de todos eventos da biblioteca JQuery.

Classes CSS

Você pode adicionar ou remover uma classe CSS a um objeto em tempo de execução
$("a").addClass("test");
$("a").removeClass("test");

Aqui neste link você pode ver a FAQ do JQuery onde poderá retirar as dúvidas e com certeza aprender o básico do JQuery.

Bom por hoje é isso pessoal, se tiverem dúvidas é só deixar nos comentários.

Abraços.

0 comentários: