Blog do Maujor - Tutoriais e pensamentos, CSS, web standards, acessibilidade, tableless


Seleção contextual com jQuery

Publicado em: 2009-06-29 — 4.560 visualizacoes

Para fazer uma seleção com uso de jQuery podemos usar um segundo argumento opcional chamado de contexto. O argumento opcional contexto destina-se a limitar a busca a um nó específico do DOM. Uma busca limitada a um contexto é muito útil quando trata-se de uma árvore do DOM muito extensa e estamos interessados em encontrar, por exemplo, todos os elementos a localizados em uma parte específica do DOM. Existem vários artigos na web ensinando que você deve fazer uma busca contextual sempre que desejar aumentar a performance da busca. E, realmente é verdade que seleção contextual poderá aumentar a performence de uma busca, contudo a maioria daqueles artigos interpretam equivocadamente o uso de tal seleção.

Definindo o contexto

A partir da versão 1.3, inclusive, da jQuery o contexto é considerado como uma propriedade jQuery. Observe a seguir uma demonstração do que é contexto.

$('a').context; // => document

Se você executar o código mostrado irá receber como resposta document. De fato o contexto padrão para todas as coleções de objetos jQuery é o documento carregado. Ou seja, por padrão, seleção jQuery é feita em todo o documento.

Alterando o contexto

Para funcionar como esperado é necessário que o contexto seja um nó do DOM. Este conceito é que tem sido mal interpretado na maioria dos artigos relacionados encontrados na web. Eu também, no passado, interpretei equivocadamente este conceito. Vários exemplos disponíveis na web ensinam que basta passar um segundo argumento para o seletor de modo a que se execute uma busca contextual. Embora aparentemente certo, isto não é suficiente e nestes casos a busca continuará sendo em todo o documento.

Observe a seguir um exemplo mostrando a simples passagem de um segundo argumento para atuar como contexto. Executando o código do exemplo você verá que o contexto continua sendo o documento.

$('a', '#myContainer').context; // => document

Quando jQuery encontra um segundo seletor para o contexto tudo se passa como se a seleção fosse conforme a seguir.

$('#myContainer').find('a');

Isto é verdade também quando o contexto é uma coleção de objetos jQuery.

Vejamos a seguir como alterar o contexto da busca para uma coleção jQuery.

// armazena o nó para o contexto
var context = $('#myContainer')[0];
// passa context como segundo argumento
$('a', context).context; // => <div id="myContainer">

Executando este exemplo fica demonstrado que ao passarmos um nó como segundo argumento o contexto é alterado.

jQuery 1.3.3 e o método live()

Nas versões 1.3.x da jQuery o método live() atrela eventos ao documento. Na próxima versão 1.3.3 com uso o método live() será possível atrelar eventos a um contexto para uma coleção jQuery. Isto significa que o método live() para eventos será mais específico e potencialmente mais rápido.

Créditos:
Author: Brandon Aaron
URL do artigo original: http://brandonaaron.net/blog/2009/06/24/understanding-the-context-in-jquery

Retweet this post

----------------x-x-x---------------    fim da matéria    ---------------x-x-x---------------

Logo twitter

Construindo sites com CSS e (X)HTML

Enquete

  • Lamento. Não há enquetes no momento.

Esta matéria foi publicada em: 2009-06-29 (segunda-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2009/06/29/selecao-contextual-com-jquery/trackback no seu site.



6 comentários na matéria: “Seleção contextual com jQuery”

  1. MauroNo Gravatar disse:

    Muito bom Maujor!

  2. Sérgio RodriguesNo Gravatar disse:

    mal posso esperar por a versão 1.3.3, resolverá diversos problemas!

  3. deglierNo Gravatar disse:

    nem eu!! to muito ancioso õ/

  4. CarlosNo Gravatar disse:

    Muito interessante o conteúdo do seu site, aceita parceria.

  5. A Galera do DownloadNo Gravatar disse:

    Parabéns pelo blog,

    Ótimo conteudo.

    Sucesso e abraços.

  6. Paulo de SouzaNo Gravatar disse:

    muito bom!

Comentário:






Subscrição de comentários sem comentar

Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Voltar ao topo

PR Tool


ir topo