Simples Idéias. Por Nando Vieira.

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
Comentários (12)
Ao som de: New Found Glory – Never Give Up

Redescobrindo o Javascript com JQuery

08/09/06

Tags: , AJAX, DOM, Framework, Javascript, JQuery

Já ouviu falar em JQuery? Não?!? Então não sabe o que está perdendo. Hoje, não consigo me imaginar fazendo Javascript de outra maneira. Só para você ter uma idéia, um script que eu tinha feito para um projeto que pretendo colocar no ar em breve tinha por volta de 130 linhas de código. Utilizando JQuery caiu para 20 linhas!!!

Toda a parte burocrática do DOM (criar elementos, selecioná-los, etc) é feito de maneira genial, utilizando notação CSS 1.3 ou XPath básico. Não sabe do que estou falando? Veja um exemplo:

<div id="content">
	<p>This is the first line.</p>
	<p>And this is the <strong>second one</strong>.</p>
</div>

Se quisessemos adicionar um terceiro parágrafo, da maneira tradicional teríamos algo como:

var p = document.createElement('p');
p.appendChild(document.createTextNode("Hi! I'm the third paragraph"));
 
var div = document.getElementById('content');
div.appendChild(p);

ou, se você não liga muito para DOM:

var div = document.getElementById('content');
div.innerHTML += "<p>Hi, I'm the third paragraph.</p>";

Agora, se fossemos fazer isto em JQuery, seria mais ou menos assim:

$('div#content').append("<p>Hi, I'm the third paragraph. And powered by JQuery.</p>");

Sentiu a diferença? Você pode dizer que utilizando innerHTML nem fica tão dispendioso, mas algo muito errado poderia acontecer (anular eventos adicionados ao elemento, por exemplo). Com JQuery, isso nunca acontecerá, pois ele cria um elemento temporário e depois clona cada nodo, adicionando-o ao elemento-alvo. Simplesmente, perfeito!

Quer mais? Ele possui apenas 16kb, já com o módulo de AJAX. Nada mal se compararmos com os 60kb do Prototype (somente ele, sem o Script.aculo.us).

Uma coisa é certa: você ainda vai ouvir falar muito bem de JQuery.

Permalink
Trackback
Comentários (22)
Ao som de: Between the Trees – You Cry A Tear To Start A River