Советы по написанию селектора jQuery

Question

Мне кажется, что самая важная, но сложная вещь, которую нужно понять при написании jQuery, это селектор .

Какие у вас есть советы по написанию точного селектора?

Answer 1

Изучите руководство .

Answer 2

Тест производительности ваших селекторов

Да, для меня все безумно дорого на моих 8 Ядрах добра в Хроме. Но потом я притворяюсь, что я клиент, и посещаю на машине IE6 с частотой 900 МГц (не смейтесь, я держу один из этих рядом со мной , чтобы проверить это), и внезапно я могу получить обед в то время, когда мой селектор возвращается .

Я изменил некоторый код из этого: $ ('. Class, .class2, .class3'). Show ()

Примерно так: array.push ($ (this)) ... $ (array) .show () И ускорил это 100x

Answer 3

вот мой совет ...

оставьте это в своих закладках:

http://www.learningjquery.com/2006/11/how-to-get-anything-you-want-part-1

Answer 4

Не прямой ответ на ваш вопрос, но в отношении производительности селектор является 2-ой самой важной вещью, чтобы получить право.

Важнейшей самой является context параметр до $(). Если не предоставлено, jQuery по умолчанию имеет значение document. Это означает, что вы пересекаете все дерево DOM . С заданным контекстом jQuery проходит только под ним:

$('whatever'); // scans the entire `document`
$('whatever', element); // scans only within element

Answer 5

Имейте в виду Специфичность CSS , поэтому вы не выбираете ни много, ни несколько элементов.

Answer 6

Упростите написание селекторов, используя декораторы классов для идентификации похожих элементов.

 <div class="clickable">.....</div>
 <a class="clickable">...</a>
 <span class="clickable">...</span>

 $('.clickable').click( function() { some common click action } );

Answer 7

Взгляните на презентации Джона Ресига о jQuery , особенно те, которые касаются его производительности.

Суть в том, что jQuery обрабатывает селектор справа налево, а не слева направо. Таким образом, селектор foo bar выберет все bar элементы и отфильтрует те, которые имеют элемент foo в качестве предка, вместо того, чтобы сначала выбрать все элементы foo и затем выбрать все элементы bar для каждого из этих foo элементы. Этот метод позволяет избежать дорогостоящего слияния.

Так что ваш последний суб-селектор должен быть наиболее выразительным, в то время как другие могут быть менее выразительными.

Answer 8

Я использовал SelectorGadget . Он работает довольно хорошо, если HTML не слишком сложен.

Answer 9

Хотя class и id проще всего планировать, я обнаружил, что все больше внимания уделяю селекторам атрибутов и псевдоклассам jQuery. В частности, в последнее время необходимы две категории: :has() и :not(). Селекторы атрибутов также очень удобны, если вы знаете, как их использовать, хотя они довольно ограничены в своих возможностях. Одним из улучшений, которое я хотел бы видеть в двигателе селектора, является отрицание :has() и отрицание [attribute].

Answer 10

Как и все остальное, понимает, как работает библиотека, прежде чем использовать ее .