Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Seleção contextual com jQuery

Publicado em: 2009-06-29 — 39.991 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

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

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. Paulo de SouzaNo Gravatar disse:

    muito bom!

  2. A Galera do DownloadNo Gravatar disse:

    Parabéns pelo blog,

    Ótimo conteudo.

    Sucesso e abraços.

  3. CarlosNo Gravatar disse:

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

  4. deglierNo Gravatar disse:

    nem eu!! to muito ancioso õ/

  5. Sérgio RodriguesNo Gravatar disse:

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

  6. MauroNo Gravatar disse:

    Muito bom Maujor!

Comentário:





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

Subscribe without commenting

topo