Редко используемые jQuery селекторы

Сложно недооценить пользу селекторов. Большинство методов в jQuery были бы бесполезны без использования селекторов. К примеру, перед тем как прикрепить событие click к кнопке, нужно выбрать саму кнопку.

Поскольку множество jQuery селекторов базируются на CSS селекторах, то в них несложно разобраться. Однако, существует немало селекторов которые обделены вниманием публики. О них мы и поговорим.

Универсальный селектор (*)

Данный селектор выбирает все элементы, включая теги <head>, <body>, <script>, <link>. Демонстрация.

$("section *")     	// Выбор всех дочерних элементов
$("section > *")   	// Выборка всех дочерних элементов
$("section > * > *")   // Выборка дочерних элементов второго уровня
$("section > * > * a") // Выбор ссылок третьего уровня

В комбинации c каким-то другим элементом универсальный селектор работает очень медленно. Справедливо будет отметить, что скорость зависит и от браузера. В Firefox, $("#selector > *").find("li") будет выполняться значительно медленнее чем $("#selector > ul").find("li"). Chrome выполнит $("#selector > *").find("li") значительно быстрее. Во всех браузерах селектор $("#selector *").find("li") будет отрабатывать дольше чем $("#selector ul").find("li"). Совет: перед тем как использовать селектор, протестируйте его производительность.

Демонстрация сравнения скорости работы универсального селектора.

Селектор Animated (:animated)

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

Так же в выборку не будут включены элементы анимированные через CSS. Однако вы можете отловить завершение анимации, прослушав событие animationend.

Взгляните на следующий демо пример.

В данном примере только нечётные элементы div анимируется перед вызовом $(":animated").css("background","#6F9");. Поэтому именно они изначально окрашены в зелёный цвет. Только после этого происходит анимированные всех остальных элементов div. Если нажать на кнопку button, то все div элементы станут зелёными.

Селектор по неравенству атрибута ([attr!="value"])

Обычно подобные селекторы используются для определения присутствия на страницы атрибута с заданным значением. С другой стороны мы можем использовать запись [attr!="value"] для выборки элементов у которых данный атрибут отсутствует или не равен заданному значению. Эквивалент :not([attr="value"]). В отличии от [attr="value"], [attr!="value"] не входит в CSS спецификацию, поэтому чтобы увеличить скорость выборки используйте запись $("css-selector").not("[attr='value']").

В примере, представленном ниже, ко всем элементам у которых атрибут data-category не равен css, будет добавлен класс mismatch. Данный финт может пригодиться при отладке через JavaScript.

$("li[data-category!='css']").each(function() {
  $(this).addClass("mismatch");

  $(".mismatch").attr("data-category", attributeValue);
  // Установка значения атрибута
});

Демонстрация похожего примера.

Селектор проверки содержания текста (:contains(text))

Данный селектор будет выбирать элементы где присутствует искомый текст. К примеру давайте окрасим в жёлтый цвет все фразы Lorem Ipsum.

Наш HTML:

<section>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    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</span> should not be highlighted.</p>
</section>
<ul>
  <li>A Lorem Ipsum List</li>
  <li>More Elements Here</li>
</ul>

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

А вот код, который выделит все варианты:

$("section:contains('Lorem Ipsum')").each(function() {
  $(this).html(
      $(this).html().replace(/Lorem Ipsum/g, "<span class='match-o'>Lorem Ipsum</span>")
    );
});

Заключать искомую фразу в кавычки не обязательно. Это значит что записи $("section:contains('Lorem Ipsum')") и $("section:contains(Lorem Ipsum)") абсолютно эквивалентны. Поиск идёт только в элементе section. Демонстрация данного примера.

Проверка наличия селектора (:has(selector))

Данный селектор выберет все элементы в которых содержится искомый селектор. Искомый элемент не обязательно должен быть прямым потомком. :has(), не входит в CSS спецификацию. Для улучшения производительности в более новых версиях браузеров используйте запись вида: $("pure-css-selector").has(selector), а не $("pure-css-selector:has(selector)").

Пример: меняем цвет элементов в которых есть ссылки.

HTML:

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

$("li:has(a)").each(function(index) {
  $(this).css("color", "crimson");
});

Логика данного фрагмента предельно проста: проходимся по всем элементам списка, проверяем наличие ссылки и если она там есть, окрашиваем элемент в заданный цвет. Демонстрация данного пример на 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) выберет все элементы, чья позиция больше заданного значения.

:lt(4)  // Выборка первых четырёх элементов
:lt(-4) // Выбирает все элементы, кроме последних 4
:gt(4)  // Выборка всех элементов, кроме первых 5
:gt(-4) // Выборка последних трёх элементов
:gt(-1) // Ничего не выберет
:eq(4)  // Выборка пятого элемента
:eq(-4) // Выборка четвёртого элемента с конца

Демонстрация.

Селектор для работы с формами

В jQuery есть куча селекторов для работы с элементами форм. К примеру :button выберет все кнопки. По аналогии, :checkbox выберет все элементы формы с типом checkbox:

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

Тут у нас два текстовых элемента и 4 чекбокса. Посчитаем количество элементов :text и обновим значение первого текстового поля.

var textCount = $(":text").length;
$(".text-elements").text('Text Inputs : ' + textCount);

$(":text").eq(0).val('Added programatically!');

Напомним, что начиная с jQuery 1.5.2, :text возвращает true для всех элементов у которых не задан атрибут type.

Демонстрация данного примера.

Селектор заголовков(:header)

Для выборки заголовка не обязательно писать $("h1 h2 h3 h4 h5 h6"), а можно прибегнуть к использованию селектора $(":header"). Не является частью CSS спецификации.

Представьте что у нас есть элемент article с различными заголовками. Селектора $("article :header") будет достаточно чтобы выбрать все заголовки. Чтобы ещё больше ускорить процесс можно воспользоваться записью $("article").filter(":header").

$("article :header").each(function(index) {
  $(this).text((index + 1) + ": " + $(this).text());
});

Демонстрация.

Заключение

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://code.tutsplus.com/tutorials/uncommon-jquery-selectors--cms-25812
Перевел: Станислав Протасевич
Урок создан: 19 Июля 2016
Просмотров: 9278
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^