jQuery: Como iniciar a utilização do jQuery

15
May 08

jQuery: Como iniciar a utilização do jQuery

:: articles :: by Gilberto Saraiva

Camaradas,

Vou tentar ser o mais objetivo o possível, então qualquer dúvida utilize a parte de comentários para tal.

Vou fazer diferente dos artigos em inglês, aonde eu so coloco uma breve explicação e o código. Vou fazer todos os artigos em português com o seguinte esquema: “Pergunta de como fazer” e a “Resposta com o código e o exemplo”. Então mãos a obra.

Como eu posso começar a utilizar o jQuery nas minhas páginas?

É mais simples do que você imagina, o jQuery foi estruturado para trabalhar através de Querys, ou seja, requisições, podendo essas requisições conterem filtros dos mais diversos tipo.

Um coisa bem simples a se entender é que se você deseja obter todos os objetos da página (Elementos DOM) de um certo tipo, você deve informar apenas o tipo do objeto, funciona igual a você chamar alguem pelo nome. Se você quer todos os objetos INPUT você chama jQuery(”INPUT”), se você está numa sala aonde tem 20 pessoas com nome João na hora que você chamar: – JOÃO!! é bem provável que todos olhem, não é verdade?

Mas e no caso da necessidade de filtrar mais a requisição?
Então, nesse caso temos que ser mais específicos, seria semelhante a chamar: JOÃO JOSE!!, ou então: JOÃO, O FILHO DA MARIA!!
Vamos entender um pouco a estrutura:

 HTML |   copy code | ?  
01 
02 <div>
03   <div>
04     <span>Texto</span>
05     <li>Tópico</li>
06     <dd>Texto avançado</dd>
07   </div>
08   <li><span>2º</span> Tópico </li>
09 </div>
10

Essa estrutura HTML nos permite criar uma série de filtros, e vejam que ela é bem básica.

Alguns filtros possíveis:

 Javascript |   copy code | ?  
01 
02   jQuery("div div").map(function(){
03     // aqui eu recebo o segundo DIV
04   });
05   jQuery("div dd").map(function(){
06     // aqui eu recebo o DD
07   });
08   jQuery("li").map(function(){
09     // aqui eu recebo os 2 LIs
10   });
11   jQuery("div li").map(function(){
12     // aqui eu também recebo os 2 LIs
13   });
14   jQuery("div div li").map(function(){
15     // aqui eu recebo somente o primeiro LI
16   });
17   jQuery("span").map(function(){
18     // aqui eu recebo os 2 SPANs
19   });
20   jQuery("div span").map(function(){
21     // aqui eu recebo somente o primeiro SPAN
22   });
23   jQuery("div div span").map(function(){
24     // aqui eu recebo somente o primeiro SPAN
25   });
26   jQuery("li span").map(function(){
27     // aqui eu recebo somente o segundo SPAN
28   });
29   jQuery("div li span").map(function(){
30     // aqui eu recebo somente o segundo SPAN
31   });
32

Podemos entender então que quanto melhor for nossa estrutura mais fácil ficará para fazermos os filtros.

Colocar propriedades nas TAGs também facilita a criação dos filtros. 2 dessas propriedades o jQuery tem como cargo chefe, a propriedade ID e a propriedade CLASS.
Como descrito na documentação do jQuery (http://docs.jquery.com/Selectors) você terá 3 tipos de filtros curtos:

Por nome da tag. (O que nos utilizamos nos exemplos acima)

Por ID. Funciona em cima da propriedade ID da TAG declarada, exemplo: < INPUT ID="UserName" >

Por CLASS. Funciona em cima da propriedade CLASS da TAG declarada, exemplo: < INPUT CLASS="TextInput" >

Exemplo:

 HTML |   copy code | ?  
01 
02 <script language="JavaScript">
03 <!--
04   // Ativação em safemode.
05   jQuery(function( $ ){
06     TableStructure = "";
07     $("table#RegTable").each(function(){
08       TableStructure += "Header: " + $(this).find("#Header").find("th").html() + "\r\n";
09       $(this).find(":not(#Header)tr").each(function(){
10         TableStructure += $(this).find("td:first").html() + " " + 
11           $(this).find("span:first").html() + "\r\n";
12       });
13     });
14     alert(TableStructure);
15   });
16 //-->
17 </script>
18 <table id="RegTable">
19 <tr id="Header"><th colspan="2">Registros</th></tr>
20 <tr><td>Data:</td><td><span class="DataDisplay">17/05/2008</span></td></tr>
21 <tr><td>Preço:</td><td><span class="MoneyDisplay">R$ 10,00</span></td></tr>
22 </table>
23

Será exibida uma mensagem contendo a estrutura da tabela que nos criamos.

Você pode perceber que foram utilizados vários comandos internos do jQuery para filtrarmos melhor o conteúdo, então analise bem o código e até o próximo artigo sobre jQuery e suas maravilhas.

Código completo para teste:

 HTML |   copy code | ?  
01 
02 <html>
03 <head>
04 <title>Demostração de Requisições no jQuery</title>
05 <script type="text/javascript" src="http://projects.pro.br/javascripts/jquery/"></script>
06 <script language="JavaScript">
07 <!--
08   // Ativação em safemode.
09   jQuery(function( $ ){
10     TableStructure = "";
11     $("table#RegTable").each(function(){
12       TableStructure += "Header: " + $(this).find("#Header").find("th").html() + "\r\n";
13       $(this).find(":not(#Header)tr").each(function(){
14         //alert(this.tagName);
15         TableStructure += $(this).find("td:first").html() + " " + 
16           $(this).find("span:first").html() + "\r\n";
17       });
18     });
19     alert(TableStructure);
20   });
21 //-->
22 </script>
23 <body>
24 <table id="RegTable">
25 <tr id="Header"><th colspan="2">Registros</th></tr>
26 <tr><td>Data:</td><td><span class="DataDisplay">17/05/2008</span></td></tr>
27 <tr><td>Preço:</td><td><span class="MoneyDisplay">R$ 10,00</span></td></tr>
28 </table>
29 </body>
30 </html>
31

Próximo artigo:

Utilizando os Seletores do jQuery

Artigos jQuery relacionados:

Como iniciar a utilização do jQuery

Tudo que você precisa é o link

Os Seletores (Selectors)

Criando códigos facilitadores

Abraços a todos.

This entry was posted on Thursday, May 15th, 2008 at 10:22 pm and is filed under articles. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Step by step