Usando jQuery na prática

29 de Março de 2008

Leia em 4 minutos

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!