Simples Idéias. Por Nando Vieira. » Arquivo

Usando jQuery na prática

29/03/08

Tags: , Framework, Javascript, JQuery

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

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

Simples Idéias.