Funções da Jquery - Capí­tulo - 1 - Cont…

Wouuuuuuu. Vortei povuuu…

Como prometido, continuemos nossa seqüenciada de posts sobre os métodos da jquery.

Onde paramos? Humm.. Espera, deixa ver aqui no post anterior.

Achei, foram estes não é mesmo?

get()
get(num)
gt(pos)
index(subject)
length
lt(pos)
size()

Estes últimos métodos já são bem conhecidos entre os programadores javascript, só que com outros nomes e as vezes um tanto mais complicado, mas como na Jquery as coisas são mais simples, ficará bem fácil sua utilização.

O método get() retorna todo o conteúdo que você selecionou, como?
assim ó:

$(”img”).get();

Digamos que em seu site tenha duas imagens apenas. E daí­ que você pede com a chamada acima para ele retornar todas as imagens. Ele retornaria um array com elas.

Pode complicar?

$(document).ready( function () {
minhas_imagens = $(”.minha_classe”).find(”#meu_div_id”).find(”img”).get();
alert( minhas_imagens);
});

<div class=”minha_classe”>
<div id=”meu_div_id”>
<img src=”test1.jpg”/> <img src=”test2.jpg”/>
<img src=”test1.jpg”/> <img src=”test2.jpg”/>
</div>
</div>

ân??Hein:???

Eu explico, eu sei que tem métodos nesta última chamada que ainda não estudamos:

find() -> Faz uma busca dentro de um determinado alvo.

E o que é isso? ($(document).ready( function () { });)

Lembra de nosso primeiro post? Esta é a chamada compatível com a (onload) , ela só executa, após o código DOM está totalmente carregado,
afinal, daria um erro ao buscar a classe(minha_classe) antes que ela existisse não é mesmo?

Neste exemplo o alvo foi a classe (minha_classe).

E como a jquery sabe que é uma classe?

Da mesma maneira que o css reconhece uma classe, usando o ponto (.) no começo:

No css

.minha_classe {
atributos
}

Na Jquery

$(.minha_classe)

Tão simples que parece brincadeira.

Voltando, esta última chamada retornaria um array com todas as imagens encontradas dentro do div (meu_div_id); coloquei este div dentro de outro com a classe (minha_classe), apenas para demonstrar como é simples trabalhar com a Jquery.

Agora vamos correndo para o método get(num)

Ele apenas pega um índice do array que você solicitou, usado igualmente como no exemplo anterior.

Só que imagine se você necessitasse achar a primeira imagem dentro de um div (meu_div_id) que está dentro de um outro div com classe (minha_classe), putz..seria uma ótima dor de cabeça.

Mas….Se você usa a Jquery, fica fácil fácil…

$(document).ready( function () {
minhas_imagens = $(”.minha_classe”).find(”#meu_div_id”).find(”img”).get(0);
alert( minhas_imagens);
});

E o gt(pos)??

Este método, de cara parece ser igualzinho nao get(num), só que ele, reduz um array, como? assim ó:

$(document).ready( function () {
minhas_imagens = $(”.minha_classe”).find(”#meu_div_id”).find(”img”).gt(2);
alert( minhas_imagens);
});

Retorno:

Apenas as três primeiras imagens econtradas.

Estamos terminando…

E continuando com a história de buscar grupos de elementos dentro de outros elementos, que tal então, sabermos o índice do elemento que encontramos.

Com o método index(subject), você será capaz de fazer uma busca pela posição de determinado alvo:

$(”*”).index( $(’#foobar’)[0] )

Seu código:

<div id=”foobar”><b></b><span id=”foo”></span></div>

Retornaria:

0

Que é a posição dele no corpo do documento.

Já neste exemplo:

$(”*”).index( $(’#foo’)[0] )

Seu código:

<div id=”foobar”><b></b><span id=”foo”></span></div>

Retornaria:

2

Que é a posição dele dentro do div (foobar) no corpo do documento.

$(”p”).lt(1) - Este método, reduz o array, a partir do índice setado.

Exemplo:

$(”p”).lt(1)

Seu código:

<p>Isto é um teste</p><p>vamos lá</p>

Retornaria:

<p>Isto é um teste</p>

E para finalizarmos , os métodos length e size() e o que eles têm em comum?

O fato de fazerem a mesma coisa. E como não se justifica ficarmos utilizando os dois, preferí utilizar o método size().

Ele retorna o número de índices de um grupo de elementos, enfim, de um array. Tudo quanto for lista, ele gera a quantidade de índices.

Exemplo?

$(”img”).size();

seu código:

<img src=”test1.jpg”/> <img src=”test2.jpg”/>

Retornaria:

2

Prontinho…Nosso primeiro artigo sobre os métodos da Jquery (código) está finalizado.

Próxima série, voltaremos com os métodos (DOM) - manipulando atributos e valores com Jquery.

Qualquer dúvida, sugestões, fofocas, broncas, bugs, desabafos, conselhos amorosos e tudo quanto achem que devo saber, manda um email ok??

Abraços e até a próxima.