Bom caso você tenha acessado essa página por acaso ou então ouviu falar sobre JQUERY mas não faz nem idéia do que seja, está no lugar certo! Vou comentar o que é o JQUERY e então aprofundar mais no seu uso.
JQUERY PARA LEIGOS

Antes de falar sobre JQUERY vamos lembrar o que é uma biblioteca de scripts: uma biblioteca de scripts é um conjunto de classes (como se fossem livros) que por sua vez possuem um conjunto de funções (como se fossem páginas dos livros). Agora vamos imaginar que todas essas classes falam de uma mesma línguagem (como se fossem todos os livros falando do mesmo assunto e no mesmo idioma). Enfim teremos então o JQUERY que é uma biblioteca de funções para a línguagem JAVASCRIPT, ou seja, é um conjunto de rotinas pré-programadas para facilitar o trabalho de quem pretende desenvolver algo em JavaScript.

JQUERY possui uma línguagem própria que a diferencia um pouco da programação pura em JavaScript, por isso devemos entender que mesmo sabendo JavaScript teremos que aprender a SINTAXE do JQuery para poder criar nossos próprios scripts. O JQuery nos facilitará muito no uso das funções, nos dando rotinas basicas de forma fácil e amigavel para que não tenhamos que gastar tempo escrevendo funções e sim criando os scripts para executar as ações. Vamos a um exemplo… no ínicio a TV não possuia Controle Remoto… então sempre que era necessário mudar de canal você tinha que se levantar e ir até o aparelho para apertar um botão que iria te mudar de canal, com o controle remoto você minimiza esse tempo e vai direto a AÇÃO que é mudar de canal. No caso do JQUERY poderiamos citar o uso de uma rotina simples como ocultar ou exibir um objeto na tela. Vamos ter como exemplo um quadro azul na tela e você quer ocultar esse quadro através do JavaScript, terá que usar a seguinte sintaxe:
document.getElementById(‘#nome_do_objeto’).style.display=”none”;
Em JQUERY para não ter que escrever tudo isso.. basta que você informe a seguinte linha:

$(‘#nome_do_objeto’).hide();

e para exbir seria:

 $(‘#nome_do_objeto’).show();

Enfim, o JQuery possui muitas funções para facilitar a sua programação e assim aumentar seu ganho de produção.

Agora que ja temos uma breve introdução em JQUERY, vamos aprender alguns pontos básicos.

Sempre que você quiser fazer referência a um objeto da página, deverá usar a seguinte sintaxe?

 

HTML:
<div>Olá</div>

JQUERY:
$(‘div’) << seleciona todos os div’s da página

HTML:
<div class=”classeCSS”>Olá</div>

JQUERY:
$(‘.classeCSS’) << seleciona todas as classes da página

HTML:
<div id=”idOBJ”>Olá</div>

JQUERY:
$(‘#idOBJ’) << seleciona o objeto com o ID idOBJ

Como podem ver é bem simples e direto fazer uso do JQUERY para selecionar os objetos da página.

O JQuery possui funções para todos os tipos de casos e necessidades. Porém caso você queira fazer algo que ainda não é suportado pelo JQUERY você pode tentar procurar por um PLUGIN para Jquery.

Plugin são códigos feitos por outros programadores e que são capazes de funcionar em conjunto com o sistema básico do JQUERY. E é claro você poderá contribuir para essa grande comunidade enviado seu próprio plugin em um futuro próximo.

As principais páginas do JQUERY são:

http://docs.jquery.com/ | DOCUMENTAÇÃO JQUERY, TODOS AS FUNÇÕES NATIVAS DO JQUERY
http://plugins.jquery.com/ | PROGRAMAS EXTRAS DESENVOLVIDOS POR OUTROS PROGRAMADORES PARA COMPLEMENTAR O JQUERY

Enfim, vamos colocar a mão na massa… vamos aprender como fazemos para aplicar o JQUERY em nossa página e começar a desenvolver usando JQUERY.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>Meu primeiro JQUERY</title>

<script type=”text/javascript” src=”jquery.js”></script>

</head>

<body>

</body>

</html>

Notem que na linha
<script type=”text/javascript” src=”jquery.js”></script>

Estamos dizendo que o que estamos importando para a página é um SCRIPT do tipo TEXT/JAVASCRIPT e que o nome do arquivo a ser importado é “jquery.js” esse arquivo deverá ser baixado em http://docs.jquery.com/Downloading_jQuery e poderá ter outro nome e você poderá salvar ele em outro local, lembrando de modificar a linha script, exemplo:

<script type=”text/javascript” src=”http://www.studioaweb.com.br/scripts/jquery-1.3.2.min.js”></script>

Bom, após essa etapa vamos então criar uma pequena rotina para nosso site:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>Meu primeiro JQUERY</title>

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

});

</script>

</head>

<body>

</body>

</html>

As linhas:

$(document).ready(function(){

});

Querem dizer que somente quando o “documento” estiver PRONTO é que iremos executar alguma coisa. Essa rotina é útil para que venhamos a executar o JQUERY apenas após TODA a página ter sido carregada, não correndo o risco de fazer referência a um objeto que ainda não está pronto para o uso. Todo o código JQUERY deverá ser escrito dentro dessa rotina.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>Meu primeiro JQUERY</title>

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

alert(‘Site carregado com sucesso! Meu JQUERY funciona!’);

});

</script>

</head>

<body>

</body>

</html>

Agora vamos melhorar, ou melhor, complicar um pouco mais hehe.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>Meu primeiro JQUERY</title>

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

var txtBox = $(‘#box’).text();

alert(txtBox);

});

</script>

</head>

<body>

<div id=”box”>Esse quadro é bonito!</div>

</body>

</html>

No exemplo acima ele vai pegar o conteúdo do DIV #box e vai exibir em forma de mensagem na tela, é um ótimo exemplo de como o Jquery faz para resgatar o conteúdo de algum objeto na página.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>Meu primeiro JQUERY</title>

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(‘#box’).append(‘ E também é muito veloz!’);

});

</script>

</head>

<body>

<div id=”box”>Esse quadro é bonito!</div>

</body>

</html>

No exemplo acima podemos ver como fazemos para incluir um texto ou HTML junto a outro objeto HTML ja existente, no caso do exemplo estamos adicionando o texto ‘ E também é muito veloz!’ ao texto ‘Esse quadro é bonito!’ que ja se encontra dentro do DIV, formando assim: Esse quadro é bonito! E também é muito veloz!

Bom, creio que agora já temos uma pequena idéia de como funciona o JQUERY , recomendo fortemente um estudo em cima do link http://docs.jquery.com para que você possa aprender novas rotinas e novos comandos para JQUERY.

Em breve irei postar soluções para problemas cotidianos em websites, bem como exemplos práticos de uso para JQUERY…

Bons estudos e até breve…
 
 

 


terça-feira, 28 abril - 2009
por


  1. […] o máximo possivel, qualquer dúvidas comentem ai, blz? Se você nao tem conhecimento de jquery click aqui para ver um outro […]

  2. Ronaldo Santiago on terça-feira 28, 2009

    Muito bom tutorial, acho este tutorial esta perfeito para quem quer começar a dar os primeiros passos com jquery assim como eu.

  3. maria luiza henrique on terça-feira 28, 2009

    não entendi direito a função jquery colokei no lugar certo mas ainda sim ela não funcionou fiz o download das bibliotecas jquery mas não funciona que que eu devo fazer? eh pra um slideshow do meu site de tcc

  4. LucasRsillva on terça-feira 28, 2009

    Muito bom seus tópicos!
    Estou acompanhando seus tutoriais de Jquery.
    Um abraço.

    Lucas Rodrigues.

  5. Willian on terça-feira 28, 2009

    Parabéns pelo tutorial.
    o Jquery é muito útil e este tutorial caiu como uma luva.

  6. Hugo Soares on terça-feira 28, 2009

    eu passei o dia inteiro tentando fazer isso e nada
    ja baixei os arquivos que tinha que baixar fiz tudo e nada =/

  7. Maria Rita Rossi on terça-feira 28, 2009

    Hugo, tente elaborar melhor quais são suas dúvidas e dificuldades pra que a gente possa tentar te ajudar, blza?! abraço

  8. Augusto César on terça-feira 28, 2009

    Show de bola… bom seria se tivesse mais tutoriais desse ai. Sei que da muito trabalho escrever material, mas quem começa tá um pouco carente de material gratuito para jquery com passo a passo em portugues. VLW e parabéns !!!

  9. Dhiego Ribeiro on terça-feira 28, 2009

    Muito bom, demorei pra achar um que mostrasse bem detalhado para os iniciantes … parabens !!!

  10. victor on terça-feira 28, 2009

    até q enfim um tutorial explicativo simples para iniciantes!!

  11. Reinaldo on terça-feira 28, 2009

    Muito bom explicado, de fácil entendimento,
    disato um nó aq da minha cabeça…kkk
    continue assim falow!!

  12. Rodrigo on terça-feira 28, 2009

    Jquery é uma ferramenta essencial. Obrigado pelo artigo!


0

Spam protection by WP Captcha-Free


Tweetar