Советы по ссылкам на DOM Elements, работающие с jQuery

Question

Нужны советы о том, как ссылаться на элементы с помощью jQuery (DOM / Traversing / Selectors). Иногда достаточно просто установить идентификатор на нужный элемент и сделать это:

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

Но иногда его просто нельзя использовать, например, при работе со списком из n элементов, я видел, как некоторые люди прикрепляли класс к каждому элементу списка, например:

<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>

А затем сделайте это с помощью jQuery:

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

Некоторые другие делают то же самое, но с атрибутом rel и т. д.

Некоторые другие люди делают это настолько обобщенно, что это страшно, если это сценарий:

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

Если я хочу прикрепить событие к якору:

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

Например, если предположить, что внутри этого DIV будет только одна ссылка.

То, что вы, ребята, думаете, на самом деле полностью зависит от сценария, или есть несколько хороших методов для этого.

Answer 1

Ищите самые быстрые конструкции. ID самый быстрый. Получите самый маленький контекст быстро - вы даже можете использовать идентификатор в DIV, а затем выбирать там - избегать полного поиска DOM, когда это возможно.

Например, поиск элемента с классом будет быстрее, чем просто класс.

Отчасти это НЕ интуитивно понятно. Посмотрите на некоторые примеры в StackOverflow, чтобы понять, что работает.

Например:

<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>

затем выберите: (отредактировано для заметок)

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

Затем он ищет ссылки только в этом контексте.

Изменить на заметки:

Для синтаксиса выбора есть некоторые настройки, такие как:

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

Некоторое исследование с моей стороны необходимо, поскольку документация для jQuery здесь немного двусмысленна: & Quot; родитель > ребенок возвращается: массив Соответствует всем дочерним элементам, указанным как " child " элементов, указанных как "родительский". & Quot; а также & Quot; children (expr) Возвращает: jQuery Получите набор элементов, содержащий все уникальные непосредственные дочерние элементы каждого соответствующего набора элементов. & Quot;

Вопрос, который необходимо прояснить в МОЕМ уме, - возвращает ли первая форма ВСЕХ детей / внуков или только непосредственных детей, как указывает вторая форма, верно. Одним из них является " селектор " форма и другие в разделе «обход», которые для меня являются схожими функциональными задачами, но не совсем одинаковыми.

Answer 2

Я бы сказал, что это зависит от ситуации, но, как сказал Марк Шультхайс, это помогает понять, как jQuery выполняет ваши селекторы для получения элементов.

Выбор по className без указания контекста в IE будет медленным, поскольку он не поддерживает getElementsByClassName . См. Эту статью а>. Это помогает добавлять в начало имя элемента (например, div.className ) или ограничивать поиск меньшей областью, например: $ ('. Class', '#myDiv')

То же самое относится и к селекторам атрибутов. Злоупотребление атрибутом rel хуже, чем злоупотребление атрибутом class , поскольку ни в одном браузере нет встроенной функции поиска по атрибутам.