Редко используемые 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
Просмотров: 9407
Правила перепечатки
5 последних уроков рубрики "jQuery"
-
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
-
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
-
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
-
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
-
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.