O jQuery é um biblioteca em JavaScript que nos auxilia e simplifica em muito nossa vida, tornando mais fácil manipular eventos, seletores css, ajax, criar efeitos e muito mais!
Nesse primeiro artigo sobre jQuery vou apresentar um exemplo trivial de manipulação de um elemento utilizando o nosso famoso getElementById e logo após um exemplo utilizando a biblioteca jQuery.
Exemplo 1 – Manipulação sem jQuery
<script language="javascript">
function alteraFonte(id){
x=document.getElementById(id);
x.style.textTransform='uppercase';
x.style.color='#FF0000';
}
</script>
<a href="#" onclick="javascript:alteraFonte('paragrafo')"> Clique </a>
<p id="paragrafo">
Ao Clicar no link iremos alterar as propriedades deste parágrafo
</p>
Exemplo 2 – jQuery
<script src="jquery-1.3.1.min.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function(){
$("a").click(function(){
$("#paragrafo").css({"text-transform":"uppercase", "color":"#FF0000"});
});
});
</script>
<a href="#"> Clique </a>
<p id="paragrafo">
Ao Clicar no link iremos alterar as propriedades deste parágrafo
</p>
Opa, a coisa começou a ficar interessante, como diria Jack o Estripador, vamos explicar o código jQuery por partes:
<script src="jquery-1.3.1.min.js" type="text/javascript"></script>
Inclusão da biblioteca do jQuery, a mesma pode ser obtida neste endereço: http://docs.jquery.com/Downloading_jQuery
<a href="http://docs.jquery.com/Downloading_jQuery">
</a>$(document).ready(function(){
// seu código
};
O chamado Ready Event substitui nosso famoso window.onload, ele verifica se o DOM esta totalmente carregado para poder manipular o mesmo.
$("a").click(function(){
$("#paragrafo").css({"text-transform":"uppercase", "color":"#FF0000"});
});
$ ( “a”) é um seletor do jQuery, neste exemplo estamos selecionando todos os elementos que possuam um link, o sinal de $ é um alias para a classe jQuery , fazendo com que $( ) gere um novo objeto. A função click que chamamos a seguir é um método do objeto jQuery. Ela liga um evento de clique para todos os objetos selecionados e executa a função fornecida quando o evento ocorrer.
Bom pessoal, espero ter ajudado com este tutorial, é fácil ver várias vantagens do jQuery, entre elas a manipulação de eventos (não precisamos escrever um onclick para cada elemento) e conseguimos separar com sucesso a estrutura html do nosso código javascript.
Vou escrever vários posts sobre jQuery ainda, explicando mais sobre sua estrutura e funcionalidades 
