Dicas para referência DOM elementos que trabalham com jQuery

Question

preciso de alguns conselhos sobre como elementos de referência com jQuery (DOM / Atravessando / Seletores). Às vezes é apenas o suficiente para definir um ID no elemento desejado e fazer isso:

$('#elementID').hide();

Mas às vezes ele simplesmente não pode ser usado, por exemplo, quando se trabalha com lista de n elementos, eu vi algumas pessoas atribuem uma classe para cada elemento da lista como:

<a class="selectMe" href="http://jquery.com/">jQuery1</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>

E, em seguida, fazer isso com jQuery:

$('.selectMe').hide();

Alguns outros fazer o mesmo, mas com o atributo rel e assim por diante ..

Algumas outras pessoas fazem isso tão genérica que é assustador, se este é o cenário:

<div id="MyID">
<span>Some Text Here</span><a href="http://jquery.com/">jQuery1</a>
</div>

Se eu quiser anexar um evento para a âncora:

$('#MyID a').show();

Como assumindo que haverá apenas um link dentro que DIV.

O que vocês acham que realmente depende totalmente do cenário ou existem algumas boas práticas para fazer isso.

Answer 1

Procure as construções mais rápidas. ID é mais rápido. Obter o menor contexto rápido - você ainda pode usar um ID em uma DIV, em seguida, selecione a partir daí -. Busca evitar completo DOM quando possível

Por exemplo, será mais rápido para procurar um elemento com uma classe do que apenas uma classe.

Alguns de este não é intuitiva. Olhada em alguns dos exemplos em StackOverflow para começar uma sensação para o que funciona.

Por exemplo:

<div id='mydiv'>
<a class="selectMe" href="http://jquery.com/">jQuery1</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>
</div>

, em seguida, fazer o select: (Editado por notas)

$('#mydiv').children('a.selectMe').hide();

Isso, então, apenas pesquisas dentro desse contexto para as ligações.

Editar por notas:

Existem algumas preferências para a sintaxe de seleção, tais como:

 $('#mydiv').children('a.selectMe').hide();
 $('#mydiv > a.selectMe').hide();

Algumas pesquisas da minha parte necessária como a documentação do jQuery é um pouco ambígua aqui: " pai> Devoluções criança: Array Combina todos os elementos filho especificados por "criança" de elementos especificados pelo "pai". " e " crianças (expr) Retorna: jQuery Obter um conjunto de elementos que contêm todos os únicos filhos imediatos de cada um dos conjunto combinado de elementos. "

A pergunta que precisa ser esclarecido em minha mente é se a primeira forma retorna todas as crianças / netos ou apenas os filhos imediatos como a segunda forma indica é verdade. Uma delas é a forma "selector" e outro em "travessia", o que para mim são tarefas funcionais semelhantes, mas não exatamente a mesma coisa.

Answer 2

Eu diria que depende da situação, mas como Mark Schultheiss disse, ele ajuda a entender como jQuery executa seus seletores para obter os elementos.

Selecionar por className sem dar qualquer contexto vai ser lenta no IE, uma vez que não faz getElementsByClassName apoio. Veja este artigo http://ejohn.org/blog/getelementsbyclassname-speed-comparison/. Ela ajuda a preceder com o nome do elemento (como div.className) ou limitar a pesquisa a um escopo menor como esta - $('.class', '#myDiv')

O mesmo acontece com seletores de atributo. abuso atributo rel é pior do que abuso atributo class uma vez que não é uma função nativa pesquisa by-atributos em qualquer navegador.