Статьи

Комплексный взгляд на селекторы jQuery

Октябрь 17, 2018

Эта статья была рецензирована Мэттом Смитом и Тимом Севериеном . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!

Если вы хотите манипулировать содержимым элемента на веб-странице, прикрепить к нему событие или сделать что-то еще, вам сначала нужно выбрать его. Именно здесь в игру вступают селекторы jQuery: они составляют важную часть библиотеки.

В этом уроке я расскажу обо всех этих селекторах и укажу на важные вещи, которые необходимо учитывать при их использовании.

Селекторы jQuery

Основная цель этих селекторов — выбрать элементы на веб-странице, которые соответствуют определенным критериям. Критериями могут быть что угодно, например, их идентификатор, имя класса, атрибуты или комбинация любого или всех из них. Большинство селекторов в jQuery основаны на существующих селекторах CSS, но библиотека также имеет свои собственные селекторы.

Основные селекторы

Вы можете выбрать элементы на веб-странице, используя их идентификатор $("#id") , их класс $(".class") или имя тега $("li") . Вы также можете использовать комбинацию этих селекторов, таких как $(".class tag") или выбрать комбинированный результат из нескольких селекторов, таких как $("selectorA, selectorB, selectorC") .

JQuery также предлагает несколько других основных селекторов, которые я перечислил ниже:

  • Селектор заголовка — допустим, вы должны выбрать все заголовки, такие как <h1> , <h2> , <h3> в <section> . В этом случае вы можете использовать либо многословный селектор $("section h1, section h2, section h3") , либо гораздо более короткий селектор $("section :header") . Оба будут выполнять одинаковую работу, а последний сравнительно легче читать. Селектор заголовка установил фон всех заголовков на желтый в этой демонстрации .

  • : target Selector — этот селектор возвращает элемент, id которого совпадает с идентификатором фрагмента или хэшем URI документа. Например, если URI «https://sitepoint.com/#hash». Затем селектор $("h2:target") выберет элемент <h2 id="hash"> .

  • : animated Selector — этот селектор возвращает все элементы, у которых выполняется анимация при запуске селектора. Это означает, что любой элемент, анимация которого начинается после выполнения селектора, не будет возвращен. Также имейте в виду, что если вы используете пользовательскую сборку jQuery без модуля эффектов, этот селектор выдаст ошибку. В этой демонстрации только анимированная рамка становится оранжевой из-за селектора.

Индексные селекторы

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

Вот список всех селекторов на основе индекса:

  • : eq (n) Selector — этот селектор вернет элемент с индексом n . Начиная с версии 1.8, он принимает как положительные, так и отрицательные значения индекса. Когда задано отрицательное значение, отсчет происходит назад от последнего элемента.
  • : lt (n) Selector — этот селектор вернет все элементы с индексом меньше n . Он также принимает как положительные, так и отрицательные значения начиная с версии 1.8. Как и селектор :eq(n) , когда предоставляется отрицательное значение, отсчет происходит в обратном направлении от последнего элемента.
  • : gt (n) Selector — этот селектор похож на :lt(n) . Единственное отличие состоит в том, что он возвращает все элементы с индексом, большим или равным n .
  • : first Selector — возвращает первый соответствующий элемент DOM на веб-странице. Это эквивалентно :eq(0) и :lt(1) . Одно из различий между селектором :first и :first-child заключается в том, что :first-child может выбирать несколько элементов, каждый из которых является первым потомком своего родителя.
  • : last Selector — Этот аналогичен селектору :first , но возвращает последнего потомка.
  • : Even Selector — Это вернет все элементы с четным индексом. Поскольку индексирование в jQuery начинается с нуля, селекторы выбирают первый дочерний, третий дочерний и так далее. Это кажется нелогичным, но вот как это работает.
  • : odd Selector — Этот работает как селектор :even , но возвращает элементы с нечетными индексами.

В следующем примере вы можете нажать на три кнопки :lt :gt и :eq и они будут случайным образом генерировать индекс и применять полученный селектор к списку:

Как видите, использование :first и :last выбирает только первый и последний элементы на веб-странице, а не внутри каждого родителя.

Дочерние селекторы

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

Вот список всех дочерних селекторов:

  • : first-child — Этот селектор возвращает все элементы, которые являются первыми дочерними элементами их родителей.

  • : first-of-type — Этот выбирает все элементы, которые являются первыми в своем роде среди многих других.

  • : last-child — это выберет последнего потомка родителя. Так же, как :first-child , он может выбрать несколько элементов в случае многих родителей.

  • : last-of-type — выбирает всех потомков, которые являются последними в своем типе в родителе. В случае нескольких родителей, он может выбрать несколько элементов.

  • : nth-child () — Это немного сложно. Он может принимать различные значения в качестве параметра, такие как число, большее или равное 1, even и odd строки или уравнение, подобное 4n+1 .

  • : nth-last-child () — Этот селектор похож на предыдущий и принимает те же параметры. Разница лишь в том, что он начинает считать с последнего ребенка.

  • : nth-of-type () — этот селектор возвращает все элементы, которые являются n-ными дочерними элементами их родителей по отношению к их братьям и сестрам с одинаковыми именами.

  • : nth-last-of-type () — этот селектор функционирует так же, как селектор :nth-of-type() , но отсчет начинается с конца.

  • : only-child — Как следует из его названия, этот селектор возвращает все элементы, которые являются единственным потомком своего родителя. Если у родителя более одного ребенка, ничего не будет выбрано.

  • : only-of-type — этот селектор возвращает все элементы, у которых нет родных элементов одного типа.

Эта интерактивная демонстрация покажет вам, как работают все эти селекторы. Как и в предыдущем демо, все, что вам нужно сделать, это нажать на кнопки:

Следует отметить, что на этот раз границы добавляются к first и last дочернему div в каждом div отдельно.

Селекторы атрибутов

Вы также можете выбрать элементы на основе значения их атрибутов. При работе с этими селекторами следует помнить одну очень важную вещь: эти селекторы рассматривают несколько значений, разделенных пробелом, как одну строку. Например, $("a[rel='nofollow']") не будет совпадать с $("a[rel='nofollow other']") .

Вот список всех селекторов на основе атрибутов:

  • $ («[Attribute | = ‘value’]») — «Атрибут содержит префикс выбора» возвращает все элементы с атрибутами, значение которых равно или начинается с данной строки, за которой следует дефис.

  • $ («[Attribute * = ‘value’]») — этот «атрибут содержит селектор» возвращает все элементы с атрибутами, значение которых содержит данную подстроку. Расположение значения не имеет значения. Пока это соответствует данному значению, селектор будет выбирать элемент.

  • $ («[Attribute ~ = ‘value’]») — этот селектор возвращает все элементы с атрибутами, значение которых содержит данное слово, разделенное пробелами.

  • \ $ («[Attribute $ = ‘value’]») — этот селектор возвращает все элементы с атрибутами, значение которых заканчивается данной строкой.

Эта демонстрация показывает, как каждый из этих селекторов ведет себя с различными значениями атрибутов: http://codepen.io/brathi/pen/aZovZN

  • $ («[Attribute = ‘value’]») — этот селектор возвращает все элементы с атрибутами, значение которых в точности равно заданной строке.

  • («[Attribute ^ = ‘value’]») — этот селектор вернет все элементы с атрибутами, значение которых начинается именно с заданной строки.

  • («[Attribute! = ‘Value’]») — этот селектор возвращает все элементы, которые либо не имеют заданного атрибута, либо значение атрибута не равно значению, указанному в селекторе.

Эта демонстрация показывает три последних селектора в действии.

Если вы просто хотите проверить, имеет ли элемент указанный атрибут и не заботится о его значении, вы можете использовать селектор $("[attribute]") .

Селекторы контента

Эти селекторы основаны на содержании внутри элементов. В этой категории четыре селектора.

  • : содержит (текст) — этот селектор возвращает все элементы, которые имеют указанный текст. Текст может появляться либо непосредственно внутри элемента, либо внутри одного из его потомков. При выборе элементов с помощью этого селектора следует учитывать, что текст чувствителен к регистру.

  • : has (селектор) — Этот возвращает все элементы, которые имеют по крайней мере один элемент внутри них, который соответствует указанному селектору. Например, $("section:has(h2)") выберет все разделы, которые имеют элемент h2 . h2 не должен быть прямым ребенком. Он может существовать где угодно среди потомков.

Эта демонстрация иллюстрирует, как :contains(text) и :has(selector) работу в различных ситуациях:

Демонстрация ясно показывает, как селектор :contains(text) заботится только о случае текста, который вы предоставляете. Пока текст и регистр совпадают идеально, селектор не заботится о том, что будет до или после текста.

  • : empty — возвращает все элементы, которые не имеют дочерних элементов, включая текстовые узлы.

  • : parent — этот селектор возвращает все элементы, которые имеют хотя бы один дочерний узел. Дочерний узел может быть элементом или текстовым узлом. В этом смысле, это обратный :empty селектор.

Селектор иерархии

Эти селекторы используют иерархию DOM в качестве критерия для выбора элементов, который объясняет название категории. Вот список всех таких селекторов:

  • $ («Потомок предка») — этот селектор возвращает все элементы-потомки данного родителя. Потомок может быть ребенком, внуком и тд.

  • $ («Parent> child») — этот селектор более специфичен, чем предыдущий, и возвращает только прямые потомки родителя.

  • $ («Предыдущая + следующая») — этот селектор возвращает все элементы, соответствующие next селектору, имеют тот же родительский элемент, что и prev и непосредственно перед ним предшествует родственный элемент prev .

  • $ («Prev ~ siblings») — этот возвращает всех братьев и сестер, которые идут после элемента prev , имеют того же родителя, что и prev и соответствуют селектору siblings .

Эта демонстрация показывает все селекторы иерархии в действии.

Как видно из демонстрации, следующие селекторы соседних братьев и сестер не влияют на братьев и сестер перед ними. Вот почему второй абзац просто синий, даже если он соседствует с элементом <h2> .

Селекторы форм

jQuery предоставляет более короткую версию селекторов для большинства элементов ввода в форме. Они классифицируются как селекторы форм .

Например, чтобы выбрать элемент кнопки или элементы с типом button, вы можете использовать более короткий селектор $(":button") вместо более длинной версии $("button, input[type='button']") . Аналогично, чтобы выбрать все элементы с типом radio, вы можете использовать селектор $(":radio") вместо $("[type=radio]") .

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

Вы также можете выбрать все элементы, которые включены или отключены с помощью селекторов $(":enabled") и $(":disabled") соответственно. Эти селекторы следует использовать только для элементов, которые поддерживают атрибут disabled, таких как <button> , <input> и <textarea> и т. Д.

Также имеется селектор $(":checked") , который будет выбирать все элементы, которые либо отмечены, либо выбраны. Это относится к флажкам, переключателям и опциям select элементов. Если вы просто хотите получить параметры select элементов, вы должны использовать вместо этого $(":selected") .

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

Селекторы видимости

Есть еще два важных селектора, о которых вы должны знать :: visible и : hidden . Как следует из названия, они возвращают все элементы, которые являются видимыми или скрытыми, соответственно.

В jQuery элемент считается скрытым в четырех случаях:

  • его свойство display установлено в none ,
  • его width и height установлены на ноль,
  • любой из его предков скрыт, или
  • это элемент формы с type="hidden" .

Правило о высоте и ширине изменилось в jQuery 3, и это будет обсуждаться в следующем разделе.

Так как элементы с непрозрачностью, установленной на 0, или видимостью, скрытой, по-прежнему занимают место, они считаются видимыми. Это означает, что $("elem").css( "visibility", "hidden" ).is( ":hidden" ) вернет false .

Любой элемент с нулевой непрозрачностью будет по-прежнему считаться видимым, как видно из демонстрации ниже, где прозрачный div получает оранжевый цвет от селектора: :visible :

Изменения в jQuery 3

С выпуском jQuery 3 кое-что изменилось в отношении селекторов. Пользовательские селекторы, такие как :visible и :hidden , теперь в некоторых случаях работают в 17 раз быстрее .

Кроме того, теперь элемент будет считаться видимым, если у него есть поле макета, возвращаемое методом getClientRects из DOM, независимо от того, getClientRects ли высота или ширина элемента нулю.

Библиотека теперь также будет выдавать ошибки, если строка селектора содержит только хеш-символ. В предыдущих версиях $("#") возвращал пустую коллекцию и find("#") выдавал ошибку, но теперь они оба будут считаться недействительными.

Кэширование возвращаемых элементов

jQuery позволяет действительно легко выбрать любой элемент, используя сложные селекторы. Например, чтобы выбрать все ссылки с классом externalLink , вы можете просто использовать $("a .externalLink") . Тем не менее, выбор таких элементов — задача, требующая высокой производительности, потому что jQuery должен повторно сканировать DOM для каждого такого вызова.

Когда вам приходится использовать один и тот же селектор много раз, гораздо лучше кэшировать возвращаемый элемент (ы) в переменной. Это позволит избежать многократного сканирования и повысить производительность.

В качестве примера: 

 $("a .externalLink").click( function () { $("a .externalLink").removeClass("marked"); $("a .externalLink").addClass("visited"); });

можно записать как: 

 var $linkExternal = $("a .externalLink"); $linkExternal.click( function () { $linkExternal.removeClass("marked"); $linkExternal.addClass("visited"); });

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

Кстати, производительность селектора :visible также была улучшена за счет использования кэширования .

Резюме

В этом руководстве рассматриваются почти все селекторы jQuery, которые вы можете использовать в проекте. Я также попытался указать на тонкие различия, которые вы должны иметь в виду при использовании этих селекторов. Если у вас есть какие-либо вопросы, связанные с этой статьей, пожалуйста, дайте мне знать в комментариях!

32
Share: