Jquery é um framework para desenvolvimento em javascript, com ele podemos trabalhar com javascript de forma muito mais pratica e produtiva. Pois já esta integrado em seu código funções para ajax, manipulação de elementos, css, efeitos, eventos entre outras. Sem falar da comunidade que cada vez mais desenvolve novos plugins que podem ser compartilhados e utilizados de forma simples.
Site oficial do Jquery – http://jquery.com/
Versão atual – 1.4
Como funciona : Para isso vamos desenvolver um passo a passo com um exemplo simples.
1 – Realizar download do jquery 1.4 em http://docs.jquery.com/Downloading_jQuery
2 – Criar um novo arquivo HTML como o abaixo e carregue o script do jquery:
OBS: O caminho deve ser o local onde o arquivo “jquery.js” está em relação ao html que você criou.
<!doctype html>
<html>
<head>
<!– Carregando o script do jquery –>
<script type=”text/javascript” src=”jquery.js”></script>
</head>
<body>
<p>jQuery</p>
</body>
</html>
3 – Pronto, agora você já pode manipular completamente sua página com jquery. Vamos adicionar ao exemplo o trecho de código abaixo:
<script type=”text/javascript”>
$(document).ready(function(){
$(“a”).click(function(event){
alert(“Thanks for visiting!”);
});
});
</script>
Ficando assim:
<!doctype html>
<html>
<head>
<!– Carregando o script do jquery –>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“p”).click(function(event){
alert($(‘p’).html());
});
});
</script></head>
<body>
<p>jQuery</p>
</body>
</html>
O que acontece é que quando clicarmos em qualquer tag <p> no html irá exibir um alert com seu código html. Visualize o seu html em algum browser. Em breve estarei explicando com mais detalhes como isso aconteceu, sobre o evento click e o método html.
