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 objetosVocê pode selecionar um objeto pela sua
classe$('.myCssClass')ou por seu
id$('#myId')ou até mesmo pelo nome da
tag html$('a')EventosVocê também pode setar eventos como por exemplo click de um elemento.
$(document).ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
});
});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 CSSVocê 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.
Twitter
RSS
