Usando jQuery na prática

29 de Março de 2008

O jQuery, sem sombra de dúvidas, revolucionou a maneira como escrevemos Javascript. Baseado no atalho $ para document.getElementById, o jQuery estendeu-o muito além do que se podia imaginar, misturando-o com a função document.getElementsBySelector.

Além do evidente aumento de produtividade, o tamanho da biblioteca impressiona: a versão 1.2.3 tem apenas 29kb para fazer tudo o que você precisa: requisições AJAX, iteração e criação de elementos DOM, tratamento de eventos... resumindo, é uma biblioteca completa, sem deixar a simplicidade de lado.

Uma coisa que deve ficar muito clara quando você começa a trabalhar com jQuery são os seletores disponíveis, baseados em CSS 1-3 e alguns adicionados pelo próprio jQuery. Sem eles, você não tem por onde começar. Então, aqui vai uma lista super-detalhada dos seletores disponíveis no jQuery.

Seletores

Os exemplos que mostrarei são baseados no seguinte markup:

<body>
    <h1>jQuery Selectors</h1>
    <h2>This is a visible H2</h2>
    <h2 style="display: none;">This is a hidden H2</h2>
    <p>This is just a dummy text.</p>
    <p>This is just a dummy text too.</p>
 
    <ul id="list" class="list-class">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
 
    <p>
        <strong>Sample:</strong> Visit our 
        <a href="#" target="_blank" id="sample">sample page</a>!
    </p>
 
    <div id="empty-div"></div>
    <div>
        <p>
            <span>
                <em>Inside a span</em>
            </span>
        </p>
        <p>
            <em>Inside a paragraph</em>
        </p>
    </div>
 
    <p>
        <input type="button" disabled="disabled" value="Disabled button" />
        <input type="button" value="Click me!" />
        <button>Click me too!</button>
    </p>
 
    <p>
        <input type="checkbox" id="checkbox" checked="checked" />
        <label for="checkbox">I'm checked</label>
    </p>
 
    <p>
        <select>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3" selected="selected">Option 3</option>
        </select>
    </p>
 
    <dl>
        <dt>Colors</dt>
        <dd class="color">Blue</dd>
 
        <dt>Shapes</dt>
        <dd class="shape">Circle</dd>
 
        <dt>Words</dt>
        <dd class="word">Power</dd>
    </dl>
</body>

CSS 1-3

*: qualquer elemento.

$('p.comment-meta *'); // get all elements inside p.comment-meta

E: pega qualquer elemento com o nome E.
```
$('div'); // get all div tags
```
E:nth-child(n): em um elemento E, pega o elemento n de seu pai.
```
$('li:nth-child(2)'); // get <li>Item 2</li>
```
E:first-child: em um elemento E, pega o primeiro filho de seu pai.
```
$('li:first-child'); // get <li>Item 1</li>
```

E:empty: um elemento E que não possui filhos.

$('div:empty'); // get <div id="empty-div"></div>

E:enabled: um elemento E que está ativo.

$('input:enabled'); // get <input type="button" value="Click me!" />

E:disabled: um elemento E que está inativo.

$('input:disabled'); // get <input type="button" disabled="disabled" value="Disabled button" />

E:checked: um elemento E (radio ou checkbox) que está selecionado.

$('input:checked'); // get <input type="checkbox" checked="checked" />

E:selected: um elemento E (option) que está selecionado.

$('option:selected'); // get <option value="3">Option 3</option>

E F: um elemento E que tenha um filho F.

$('p strong'); // get <strong>Sample:</strong>

E > F: um elemento F dentro de E.

$('p > em'); // get <em>Inside a paragraph</em> but not <span><em>Inside a span</em></span>

E + F: elemento F imediatamente precedido por um elemento E.
```
$('h1 + p'); // get <p>This is just a dummy text.</p>
```

E ~ F: elementos F precedido por um elemento E.

$('h1 ~ ul'); // get <ul id="list" class="list-class">

E,F,G: elementos E, F e G.
```
$('h1,ul'); // get <h1> and <ul>
```

E[attr]: elementos E que possuam o atributo attr.

$(':checkbox[checked]'); // get <input type="checkbox" id="checkbox" />

E[attr^=value]: elementos E que possuam um atributo attr cujo valor inicie-se por value.
```
$('[id^=empty]'); // get <div id="empty-div"></div>
```
E[attr$=value]: elementos E que possuam um atributo attr cujo valor termine com value.
```
$('[id$=div]'); // get <div id="empty-div"></div>
```
E[attr*=value]: elementos E que possuam um atributo attr cujo valor contenha value.
```
$('dd[class*=o]'); // get <dd class="color"> and <dd class="word">
```
E[attr=value]: elementos cujo atributo attr tenham valor igual a value.
```
$('dd[class=word]'); // get <dd class="word">
```

Adicionados pelo jQuery

:even: todos os elementos de índice par. Os índices se iniciam em zero.
```
$('option:even'); // get <option value="1"> and <option value="3">
```

:odd: todos os elementos de índice ímpar.

$('option:odd'); // get <option value="2">

:eq(N) e :nth(N): seleciona o elemento de índice N.

$('option:eq(0)'); // get <option value="1">
$('option:nth(1)'; // get <option value="2">

:gt(N): seleciona os elementos cujo índice sejam maior que N.
```
$('li:gt(1)'); // get <li>Item 3</li>
```
:lt(N): seleciona os elementos cujo índice seja menores que N.
```
$('li:lt(1)'); // get <li>Item 1</li>
```
:first: equivalente a :eq(0).
```
$('li:first'); // get <li>Item 1</li>
```
:last: seleciona o último elemento.
```
$('li:last'); // get <li>Item 3</li>
```
:parent: seleciona os elementos que têm filhos (incluindo textos).
```
$('h1:parent'); // get <h1>jQuery Selectors</h1>
```
:contains('text'): seleciona os elementos que têm o texto especificado.
```
$('li:contains("Item 1")'); // get <li>Item 1</li>
```
:visible: seleciona todos os elementos visíveis (não inclui elementos de formulário hidden).
```
$('h2:visible'); // get <h2>This is a visible H2</h2>
```

:hidden: seleciona campos de formulário hidden e elementos não-visíveis.

$('h2:hidden'); // get <h2 style="display: none;">This is a hidden H2</h2>

Formulários

O jQuery fornece alguns atalhos para se trabalhar com campos de formulário, evitando que você tenha que usar um seletor de atributo (input[type=radio], por exemplo). Veja como é simples:

:input: seleciona qualquer tipo de campo de formulário (input, button, textarea, select).
:text: seleciona campos com type="text".
:password: seleciona campos com type="password".
:radio: seleciona campos com type="radio".
:checkbox: seleciona campos com type="checkbox".
:file: seleciona campos com type="file".
:submit: seleciona campos com type="submit".
:image: seleciona campos com type="image".
:reset: seleciona campos com type="reset".
:button: seleciona campos com type="button" ou <button></button>.

Exemplos práticos

Agora você conhece os seletores do jQuery, veja alguns exemplos mostrando como usar este framework.

Executando códigos no após o carregamento da página (onload) - ready.html
Zebrar uma tabela, adicionando uma classe de CSS - zebra-table.html
Adicionar um evento onmouseover nas linhas de uma tabela, alterando a cor de fundo - table-row.html
Iterar em uma lista de elementos retornados - iteration.html
Mover itens de uma lista para outra - list-items.html
Carregar HTML em um elemento - html-content.html
Carregar dados em formato JSON - json-content.html
Exibir/Esconder elementos - show-hide.html

O jQuery possui uma série de outras funcionalidades que não foram citadas aqui. Para mais informações, você deve acessar a documentação do projeto. Ela também está disponível em um formato muito fácil de vsualizar em Visual jQuery. Vale a pena conferir!

E se você tem dúvidas em usar ou não o jQuery em seu próximo projeto, não se preocupe. Em relação ao Javascript, será a melhor escolha que você poderia ter feito!

Permalink
Trackback
Feed dos comentários
Ao som de: New Found Glory – Never Give Up

Posts relacionados: Redescobrindo o Javascript com JQuery

Comentários #

#1 rascunho » Blog Archive » links for 2008-03-29 disse:: 29 Mar 08, 05:40PM; [...] Simples Idéias. Por Nando Vieira. » Arquivo » Usando jQuery na prática O jQuery, sem sombra de dúvidas, revolucionou a maneira como escrevemos Javascript. Baseado no atalho $ para document.getElementById, o jQuery estendeu-o muito além do que se podia imaginar, misturando-o com a função document.getElementsBySelector. (tags: simplesideias.com.br 2008 mes2 dia29 at_home JQuery javascript ***** blog_post explicação_introdutória) [...]

#2 Rafael Marin disse:

30 Mar 08, 09:34AM

Mesmo para os que, como eu, não manjam muito de Javascript,
o jQuery é muito mais fácil, justamente por causa do getElementsBySelector,
ou apenas $().

Tem gente que não gosta, mas eu gostei muito e é
o meu framework de desenvolvimento client-side hoje.

Abraço!

#3 Ricardo Panaggio disse:

30 Mar 08, 06:48PM

Opa! Ótimo post sobre jQuery!

Coloquei no meu material para indicar para quem quer conhecer jQuery. Muito bom! Parabéns!

Só que há um pequeno erro (besta, que qualquer um percebe, mas não custa avisar): Nas opções de selção por paridade, :even e :odd estão trocados!

Abraço!

#4 Nando Vieira disse:: 30 Mar 08, 08:44PM; @Ricardo, já atualizei o texto! ;)

#5 Rails Podcast Brasil - Epis disse:: 07 Abr 08, 10:32AM; [...] Usando jQuery na pr

#6 Rogerio G Miranda disse:

15 Abr 08, 11:57AM

Nando,
Seguinte, eu tenho uma dúvida: eu carrego uma pagina, utilizando o .post, quando a página é executada eu quero que retorne 3 valores. Como Fazer isso? (pode ser utilizando php, ou asp, ou outra server-side qq).
E ao retornar, ainda no javascript que chamou a pagina, como tratar esses valores retornados.

pode ser através de DOM ou XML mesmo
Thanks
Rogerio

#7 Sérgio Berlotto disse:: 15 Abr 08, 07:43PM; Parabéns.. muito legal este post e realmente muito util !
Jah utilizei o JQuery antes, e voltatei a utilizá-lo.... é realmente muito prático !

#8 Nando Vieira disse:: 17 Abr 08, 03:38PM; #6 Rogério: Você tem um callback como parâmetro que retorna os dados da requisição. A sintaxe é $.post('/path/to/request', {arg: value}, callback), onde callback é uma função.

#9 Luciano disse:

22 Abr 08, 04:59PM

Opa, ótimo post..
estava navegando nos links práticos o 3 link esta quebrado
http://f.simplesideias.com.br/jquery/table-row.html

valew

#10 Nando Vieira disse:: 22 Abr 08, 10:25PM; Luciano, eu tinha esquecido de subir este exemplo. Já corrigi! ;)

#11 Luiz Carlos disse:: 27 Maio 08, 05:45PM; Pessoal, estou com uma dificuldade, ou seja, estou criando uma função do click do botão no evento ready, aonde, captura os dados do botão e monta as instruções para submeter o form, porém, preciso saber antes o formulario o qual esse botão pertence para assim estar submetendo o mesmo, alguem se habilita em me ajudar.

#12 Fernando disse:: 12 Jun 08, 05:05PM; O melhor site de referência JQuery do toda a NET.

#13 Hebertphp disse:: 04 Ago 08, 11:17AM; Parabéns pelo post, me ajudou muito!!

#14 pricca disse:: 11 Ago 08, 11:48AM; genial! Post mto. bem estruturado, muito util, e btw adoro o theme do blog!

#15 Marqueti disse:: 08 Out 08, 11:20PM; Valeu pelo post fernando, está muito bom!
abracos

#16 Domingos Bernardo disse:

12 Out 08, 09:46PM

Parabéns Nando, ótimo site,

JQuery é uma ferramenta excelente para desenvolvimento web,

obrigado por disponibilizar as informações.

#17 qosmiotech disse:: 26 Nov 08, 12:40PM; Muito bom o post, principalmente para quem esta iniciando.Parabéns

#18 Rafael Bittencourt disse:

17 Jan 09, 06:00PM

Gostei muito do Post sobre jQuery Library!
Acabei de testar os exemplos e achei bem práticos.

Abraços.

#19 alysson disse:: 22 Jan 09, 12:23PM; Esse seus comentarios foram simplimente JQUERY !!!
parabéns !

#20 PChesini disse:: 30 Jan 09, 01:37AM; kara.
como eu faço para pegar o campo de um input text e automaticamente atualizalo em outro campo?

#21 Nando Vieira disse:: 30 Jan 09, 06:39AM; PChesini: você pode fazer algo como $("#field2").val($("#field1").val());

#22 Tecnologia de Programação 1 e 2 (2009) » Aula 02 - 19/02/... disse:: 19 Fev 09, 06:45PM; [...] Artigo sobre jQuery voltado na parte de seletores [...]

#23 Alexandre Martins » Blog Archive disse:: 07 Mar 09, 12:53PM; [...] Usando jQuery na prática Tutorial sobre seletores com exemplos práticos [...]

#24 jQuery - Um novo jeito de escrever JavaScript - atualizado | Cesa... disse:: 15 Abr 09, 01:45PM; [...] Usando jQuery na prática Tutorial sobre seletores com exemplos práticos [...]

#25 Louis Perner disse:: 30 Abr 09, 09:31AM; Muito bom o post, parabens =]

#26 Marcelo Lopes disse:: 21 Maio 09, 10:42AM; No caso do $('dd[class=word]') para checar valor do atributo, como substitiria o 'word' por uma variável?

#27 Nando Vieira disse:: 23 Maio 09, 02:06PM; Marcelo, basta fazer algo como $('dd[class=' + variavel + ']');

#28 Jamesmaster disse:: 10 Jun 09, 09:41PM; ainda naum sei nada de jquery, mas so por olhar essas sitaxe vejo que vai diminuir muito o tempo de desenvolvimendo dos scripts

#29 Justo disse:: 26 Jun 09, 12:13AM; Muito bom mesmo, é uma biblioteca muito interessante

#30 Maicon Fernandes disse:

05 Set 09, 12:44AM

Uma coisa que me atraiu no Jquery, além de executar tarefas complexas de forma muito simples, é a iteroperabilidade entre os navegadores - cross-browser - programando direto em javascript é muito provável que um script que rode normal no firefox vai dar erro no iexplore, já utilizando jquery nunca mais me encomodei com isso.

Belo post

#31 Edvaldo Moreira disse:: 11 Set 09, 10:28AM; Cara, preciso fazer algo, sei que tem jeito mais não lembro como é.
è o seguinte, ao clicar em um link, preciso pegar o nome da Class, caso alguem puder ajudar agradeço.. valeu galera..

#32 Nando Vieira disse:: 11 Set 09, 10:52AM; Pode fazer algo como $("a").click(function(){ alert(this.className); });

#33 jQuery – Write less, do more. « Disseminando idéias disse:: 21 Set 09, 04:28PM; [...] de jQuery na prática? Veja aqui. Posted by Zarpa! Filed in jQuery Tags: Desenvolvimento Web, jQuery Leave a Comment [...]

#34 jQuery: apresentação | desenvolvimento para web disse:: 25 Dez 09, 05:05AM; [...] Usando jQuery na prática Outro tutorial interessantíssimo para se começar; aborda os conceitos básicos e mostra, de forma progressiva e “suave”, o início do caminho do jQuery. [...]

#35 Tom disse:: 06 Jan 10, 02:08PM; Muito bom o artigo, parabéns, apenas uma dica: diminuir o contraste das caixas de código e o background da pagina, pois nesse caso o cinza escuro com o branco fica um tanto dolorido pra visão, principalmente quando se rola a página =p

#36 Israel Trindade disse:

09 Jan 10, 03:28PM

Adicionados pelo jQuery
* :even: todos os elementos de índice par. Os índices se iniciam em zero.
$('option:even'); // get and
* :odd: todos os elementos de índice ímpar.
$('option:odd'); // get

Ae amigo, você inverteu as bolas ae.. =]

Muito bom, adorei a explicação.

Fui..