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

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

От автора: селекторы в JQuery играют главенствующую роль. Большинство методов в JQuery работают только на каких-то элементах, поэтому перед их использованием необходимо выбрать какой-либо тег. К примеру, чтобы прикрепить событие click к кнопке, эту кнопку сначала необходимо выбрать.

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

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

Селектор по праву называется универсальным, с его помощью можно выбрать все элементы на странице, в том числе head, body, script или link. Посмотрите мое демо, чтобы понять, о чем я говорю.

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

Данный селектор в паре с другими элементами сильно замедляет работу. Однако скорость работы также зависит от того, как используется селектор и в каком браузере открыта страница. В Firefox следующая запись $(«#selector > *»).find(«li») работает медленнее, чем $(«#selector > ul»).find(«li»). Интересен и тот факт, что Chrome чуть-чуть быстрее Firefox выполняет запись $(«#selector > *»).find(«li»). Запись $(«#selector *»).find(«li») во всех браузерах выполняется медленнее, чем запись $(«#selector ul»).find(«li»). Советую сравнивать производительность перед использованием селекторов.

В этом демо сравнивается скорость выполнения всех селекторов.

Селектор анимации (:animated)

С помощью данного селектора можно получить доступ ко всем элементам, чья анимация еще не закончилась на момент запуска селектора :animated. Есть одна проблема – будут выбраны только элементы, анимированные с помощью JQuery. Данный селектор является расширением JQuery и не увеличивает производительность кода в отличие от родного метода querySelectorAll().

С помощью JQuery также нельзя засечь CSS анимацию, но можно засечь момент ее завершения с помощью события animationend. Взгляните на следующее демо.

В демо выше до выполнения $(«:animated»).css(«background»,»#6F9″); анимируются только нечетные теги DIV, поэтому они зеленого цвета. После этого функция анимации вызывается для оставшихся элементов DIV. Если кликнуть на кнопку button, все DIV’ы станут зелеными.

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

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

В коде ниже ко всем тегам li с атрибутом data-category равным css добавляется класс mismatch. Полезная штука для отладки или установки нужного значения атрибута через JS.

$("li[data-category!='css']").each(function() {
  $(this).addClass("mismatch");
  // Добавляем класс mismatch class к отфильтрованным селекторам.
   
  $(".mismatch").attr("data-category", attributeValue);
  // Устанавливаем нужное значение атрибута
});

В демо ниже я пробегаю по двум спискам и исправляю значения атрибута category.

Селектор :contains(text)

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

Пример ниже поможет вам понять принцип работы данного селектора. Мы поставим желтый фон для всех вхождений фразы Lorem Ipsum в тексте. Сначала разметка:

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

$("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, а текст Lorem Ipsum ищется именно в такой форме. Более того, так как селектор регистрозависимый, текст во втором теге section не должен подсветиться. В этом демо наглядно видно, что все работает.

Селектор :has(selector)

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

Один из возможных способов применения – манипуляция элементами с заданными дочерними элементами. В примере ниже я буду менять цвет всех элементов списка со ссылкой внутри. Разметка демо:

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

JS код для смены цвета элементов списка:

$("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) выбирает все элементы выше заданного индекса.

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

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

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

В JQuery есть множество селекторов для легкого получения доступа к элементам формы. К примеру, селектор :button выберет все теги button и все элементы с типом button. Точно так же селектор :checkbox выберет все input’ы с типом checkbox. В JQuery есть селекторы почти для всех инпутов.

Рассмотрим форму ниже:

<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!');

Для выбора всех текстовых инпутов я использовал :text, затем я посчитал их количество с помощью метода length. В третьем выражении я с помощью :eq() получаю доступ к первому элементу и задаю ему значение.

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

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

Если у вас когда-либо возникала задача выбрать все заголовки на странице, то сделать это можно с помощью $(«:header»), а не расписывать $(«h1 h2 h3 h4 h5 h6″). Селектор не входит в спецификацию CSS, а значит, можно повысить производительность, сначала используя селектор CSS, а затем .filter(«:header»).

К примеру, на странице есть тег article и три заголовка. В таком случае можно было бы использовать $(«article :header»), а не $(«article h1, article h2, article h3″). А сделать код еще быстрее можно с помощью $(«article»).filter(«:header») – берем лучшее от обоих миров. Для нумерации заголовков можно использовать следующий код.

$("article :header").each(function(index) {
  $(this).text((index + 1) + ": " + $(this).text());
  // Добавляем номер к заголовку
});

И демо

Заключительные мысли

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

Автор: Monty Shokeen

Источник: http://code.tutsplus.com/

Редакция: Команда webformyself.

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree