Селекторы имеют жизненно важное значение. Большинство методов jQuery требуют какого-либо выбора элемента для любого использования. Например, для присоединения события click к кнопке необходимо сначала выбрать кнопку.
Поскольку обычные селекторы jQuery основаны на существующих селекторах CSS, вы можете хорошо разбираться в них. Однако есть также несколько селекторов, которые используются не так часто. В этом уроке я остановлюсь на этих менее известных, но важных селекторах.
Весь селектор (*)
Этот селектор по праву называется универсальным селектором, потому что он выбирает все элементы в документе, включая теги <head> , <body> , <script> или <link . Эта демонстрация должна проиллюстрировать мою точку зрения.
|
1
2
3
4
|
$(«section *») // Selects all descendants
$(«section > *») // Selects all direct descendants
$(«section > * > *») // Selects all second level descendants
$(«section > * > * a») // Selects 3rd level links
|
Этот селектор очень медленный, если используется в сочетании с другими элементами. Однако все зависит от того, как используется селектор и в каком браузере он выполняется. В Firefox $("#selector > *").find("li") медленнее, чем $("#selector > ul").find("li") . Интересно, что Chrome выполняет $("#selector > *").find("li") немного быстрее. Все браузеры выполняют $("#selector *").find("li") медленнее, чем $("#selector ul").find("li") . Я бы посоветовал вам сравнить производительность перед использованием этого селектора.
Вот демонстрация, которая сравнивает скорость выполнения всего селектора.
Анимированный селектор (анимированный)
Вы можете использовать :animated селектор, чтобы выбрать все элементы, анимация которых еще выполняется, когда этот селектор работает. Единственная проблема заключается в том, что он будет выбирать только те элементы, которые были анимированы с использованием jQuery. Этот селектор является расширением jQuery и не выигрывает от повышения производительности, связанного с собственным методом querySelectorAll() .
Кроме того, вы не можете обнаружить CSS-анимации, используя jQuery. Однако вы можете определить, когда заканчивается анимация, используя событие animationend .
Посмотрите на следующую демонстрацию .
В приведенной выше демонстрации перед выполнением $(":animated").css("background","#6F9"); только нечетные элементы div , В результате только те элементы div становятся зелеными. Сразу после этого мы вызываем функцию animate для остальных элементов div . Если вы button сейчас, все элементы div должны стать зелеными.
Атрибут Не Равный Селектор ([attr! = «Value»])
Обычные селекторы атрибутов обычно определяют, существует ли атрибут с данным именем или значением. С другой стороны, селектор [attr!="value"] выберет все элементы, которые не имеют указанного атрибута или где атрибут существует, но не равен определенному значению. Это эквивалентно :not([attr="value"]) . В отличие от [attr="value"] , [attr!="value"] не является частью спецификации CSS. В результате использование $("css-selector").not("[attr='value']") может повысить производительность в современных браузерах.
Фрагмент ниже добавляет класс mismatch ко всем элементам li чей атрибут data-category не равен css . Это может быть полезно во время отладки или установки правильного значения атрибута с помощью JavaScript.
|
1
2
3
4
5
6
7
|
$(«li[data-category!=’css’]»).each(function() {
$(this).addClass(«mismatch»);
// Adds a mismatch class to filtered out selectors.
$(«.mismatch»).attr(«data-category», attributeValue);
// Set correct attribute value
});
|
В демоверсии я просматриваю два списка и исправляю значение атрибутов категории элементов.
Содержит селектор (: содержит (текст))
Этот селектор используется для выбора всех элементов, которые содержат указанную строку. Соответствующая строка может быть непосредственно внутри соответствующего элемента или внутри любого из его потомков.
Пример ниже должен помочь вам лучше понять этот селектор. Мы будем добавлять желтый фон ко всем вхождениям фразы Lorem Ipsum .
Давайте начнем с разметки:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<section>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of <b>Lorem Ipsum</b>.</p>
<a href=»https://en.wikipedia.org/wiki/Lorem_ipsum»>Lorem Ipsum Wikipedia Link</a>
</section>
<section>
<p>This <span class=»small-u»>lorem ipsum
</section>
<ul>
<li>A Lorem Ipsum List</li>
<li>More Elements Here</li>
</ul>
|
Обратите внимание, что фраза Lorem Ipsum встречается в семи разных местах. Я специально использовал маленькие заглавные буквы в одном из этих случаев, чтобы показать, что сопоставление чувствительно к регистру.
Вот код JavaScript, чтобы выделить все совпадения:
|
1
2
3
4
5
|
$(«section:contains(‘Lorem Ipsum’)»).each(function() {
$(this).html(
$(this).html().replace(/Lorem Ipsum/g, «<span class=’match-o’>Lorem Ipsum
);
});
|
Кавычки вокруг строки не обязательны. Это означает, что в приведенном выше фрагменте кода допустимы как $("section:contains('Lorem Ipsum')") и $("section:contains(Lorem Ipsum)") . Я нацеливаюсь только на элемент section, поэтому текст Lorem Ipsum внутри элементов списка должен оставаться неизменным. Более того, из-за несовпадающего регистра текст внутри второго элемента section не должен выделяться. Как вы можете видеть в этой демонстрации , именно это и происходит.
Имеет Селектор (: имеет (селектор))
Этот селектор выберет все элементы, которые содержат хотя бы один элемент, соответствующий данному селектору. Селектор, которому нужно соответствовать, не обязательно должен быть прямым потомком. :has() не является частью спецификации CSS. В современных браузерах вы должны использовать $("pure-css-selector").has(selector) вместо $("pure-css-selector:has(selector)") для повышения производительности.
Одним из возможных применений этого селектора является манипулирование элементами, которые содержат в себе определенный элемент. В нашем примере я буду менять цвет всех элементов списка, которые содержат ссылку внутри них.
Это разметка для демо:
|
1
2
3
4
5
6
7
|
<ul>
<li>Pellentesque <a href=»dummy.html»>habitant morbi</a> tristique senectus.</li>
<li>Pellentesque habitant morbi tristique senectus.</li>
(… more list elements here …)
<li>Pellentesque habitant morbi tristique senectus.</li>
<li>Pellentesque <a href=»dummy.html»>habitant morbi</a> tristique senectus.</li>
</ul>
|
Вот код JavaScript для изменения цвета элементов списка:
|
1
2
3
|
$(«li:has(a)»).each(function(index) {
$(this).css(«color», «crimson»);
});
|
Логика этого кода довольно проста. Я перебираю все элементы списка, которые содержат ссылку, и устанавливаю их цвет малиновый. Вы также можете манипулировать текстом внутри элементов списка или удалить их из DOM. Я уверен, что этот селектор может быть использован во многих других ситуациях. Проверьте живую версию этого кода на CodePen .
Индексные селекторы
Помимо селекторов CSS, таких как :nth-child() , jQuery также имеет свой собственный набор селекторов на основе индекса. Эти селекторы :eq(index) :lt(index) и :gt(index) . В отличие от селекторов на основе CSS, эти селекторы используют индексацию с нуля. Это подразумевает, что в то время как :nth-child(1) выберет первого ребенка :eq(1) выберет второго ребенка. Чтобы выбрать первого ребенка, вы должны будете использовать :eq(0) .
Эти селекторы также могут принимать отрицательные значения. Когда указаны отрицательные значения, подсчет выполняется в обратном порядке, начиная с последнего элемента.
:lt(index) выбирает все элементы с индексом меньше указанного значения. Чтобы выбрать первые три элемента, вы будете использовать :lt(3) . Это потому, что первые три элемента будут иметь значения индекса 0, 1 и 2 соответственно. Использование отрицательного индекса выберет все значения до элемента, которого мы достигли после обратного отсчета. Аналогично :gt(index) выбирает все элементы с индексом, превышающим указанное значение.
|
1
2
3
4
5
6
7
|
:lt(4) // Selects first four elements
:lt(-4) // Selects all elements besides last 4
:gt(4) // Selects all elements besides first 5
:gt(-4) // Selects last three elements
:gt(-1) // Selects Nothing
:eq(4) // Selects fifth element
:eq(-4) // Selects fourth element from last
|
Попробуйте нажать на различные кнопки в демоверсии, чтобы лучше понять селекторы индекса.
Выбор форм
JQuery определяет множество селекторов для легкого выбора элементов формы. Например, селектор :button выберет все элементы кнопки, а также элементы с кнопкой типа. Точно так же :checkbox выберет все элементы ввода с флажком типа. Есть селекторы, определенные для почти всех элементов ввода. Рассмотрите форму ниже:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
<form action=»#» method=»post»>
<div>
<label for=»name»>Text Input</label>
<br>
<input type=»text» name=»name» />
<input type=»text» name=»name» />
</div>
<hr>
<div>
<label for=»checkbox»>Checkbox:</label>
<input type=»checkbox» name=»checkbox» />
<input type=»checkbox» name=»checkbox» />
<input type=»checkbox» name=»checkbox» />
<input type=»checkbox» name=»checkbox» />
</div>
</form>
|
Я создал два текстовых элемента здесь и четыре флажка. Форма довольно проста, но она должна дать вам представление о том, как работают селекторы форм. Мы посчитаем количество текстовых элементов, используя селектор :text , а также обновим текст при первом вводе текста.
|
1
2
3
4
|
var textCount = $(«:text»).length;
$(«.text-elements»).text(‘Text Inputs : ‘ + textCount);
$(«:text»).eq(0).val(‘Added programatically!’);
|
Я использую :text чтобы выбрать все текстовые входы, а затем метод длины, чтобы рассчитать их количество. В третьем утверждении я использую ранее обсужденный селектор :eq() для доступа к первому элементу, а затем задаю его значение.
Помните, что начиная с jQuery 1.5.2,: :text возвращает true для элементов, для которых не указан атрибут type.
Выбор заголовка (: заголовок)
Если вы хотите выбрать все элементы заголовка на веб-странице, вы можете использовать короткую версию $(":header") вместо многословного селектора $("h1 h2 h3 h4 h5 h6") . Этот селектор не является частью спецификации CSS. В результате, лучшая производительность может быть достигнута сначала с помощью чистого селектора CSS, а затем с использованием .filter(":header") .
Например, предположим, что на веб-странице есть элемент article и он имеет три разных заголовка. Теперь вы можете использовать $("article :header") вместо $("article h1, article h2, article h3") для краткости. Чтобы сделать это еще быстрее, вы можете использовать $("article").filter(":header") . Таким образом, у вас есть лучшее из обоих миров.
Для нумерации всех элементов заголовка вы можете использовать следующий код.
|
1
2
3
4
|
$(«article :header»).each(function(index) {
$(this).text((index + 1) + «: » + $(this).text());
// Adds numbers to Headings
});
|
Попробуйте это сопровождающее демо .
Последние мысли
В этом руководстве я рассмотрел необычные селекторы, с которыми вы можете столкнуться при использовании jQuery. Хотя большинство этих селекторов имеют альтернативы, которые вы можете использовать, все же полезно знать, что эти селекторы существуют.
Я надеюсь, что вы узнали что-то новое в этом уроке. Если у вас есть какие-либо вопросы или предложения, пожалуйста, оставьте комментарий.