Большинство JQuery селекторов основаны на существующих CSS селекторах, поэтому вы скорее всего хорошо разбираетесь в них. Тем не менее, есть ряд селекторов, которые используются не часто. В этой статье я остановлюсь на менее известных, но все же важных селекторах.
Давайте перейдем к списку!
1. [href^="http"]
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
Это отличные подсказки пользователю о том, что ссылка ведет на другой сайт.
Делается это с помощью символа ^. Он обычно используется в регулярных выражениях для обозначения начала строки. Если мы хотим отобрать ссылки, у которых атрибут href начинается с http, то мы можем использовать селектор из примера выше. Обратите внимание, что мы не ищем http. Это необязательно и, к тому же, не учитывает ссылки по протоколу https.
2. ::pseudoElement
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
Псевдоэлементы можно использовать для придания стилей фрагменту элемента, например, первой строке или первой букве. Применяется только к блочным элементам. Тут мы выбираем первую букву параграфа:
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
Этот кусок кода найдет все параграфы на странице и применит к первой букве каждого из них указанные стили. Часто это используется для создания эффекта «газетного заголовка». Выбираем первую строку параграфа:
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
Работает аналогично предыдущему примеру, но в данном случае будет выбрана первая строка каждого параграфа.
3. [href*="example"]
a[href*="example"] {
color: red;
}
Звездочка значит, что искомое значение может находиться в любой части атрибута href. Таким образом, мы можем отобрать и
http://www.example.com и www.example.com и example.com.
4. [data-*="foo"]
a[data-filetype="image"] {
color: red;
}
Чтобы охватить различные типы изображений мы можем создать, несколько селекторов:
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
Но это достаточно громоздко есть способ проще — это создать собственный атрибут data-filetype и добавить его к каждой ссылке, ведущей на изображение.
<a href="path/to/image.jpg" data-filetype="image">Ссылка</a>
Таким образом, мы можем использовать данный код:
a[data-filetype="image"] {
color: red;
}
5. :animated
Для выборки всех элементов, которые в данный момент анимируются следует воспользоваться селектором :animated. Единственный нюанс: выборка будет осуществляться только по элементам, которые анимируются через jQuery.
Так же в выборку не будут включены элементы анимированные через CSS. Однако вы можете отловить завершение анимации, прослушав событие animated.
Как это реализовано можете посмотреть по ссылке. В данном примере только нечётные элементы div анимируется перед вызовом:
$(":animated").css("background","#6F9");
Поэтому именно они изначально окрашены в зелёный цвет. Только после этого происходит анимированные всех остальных элементов div. Если нажать на кнопку button, то все div элементы станут зелёными.
6. :header
Для того чтобы выбрать заголовок не обязательно прописывать $("h1 h2 h3 h4 h5 h6"), можно использовать селектор $(":header"). Представьте что у вас есть элемент article с различными заголовками. Будет достаточно селектора $("article :header") чтобы выбрать все заголовки. Дабы ускорить процесс можно воспользоваться записью $("article").filter(":header").
$("article :header").each(function(index) {
$(this).text((index + 1) + ": " + $(this).text());
});
Пример на CodePen.
В jQuery есть куча селекторов для работы с элементами форм. К примеру :button выберет все кнопки, а :checkbox выберет все элементы формы с типом checkbox.
7. [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);
});
Демонстрация похожего примера.
8. :contains(text)
Этот селектор выбирает элементы где присутствует искомый текст. К примеру мы хотим в определенный цвет все фразы Lorem Ipsum. Данная выборка чувствительная к регистру.
HTML:
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat<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>
JavaScript Код, который выделит все варианты:
$("section:contains('Lorem Ipsum')").each(function() {
$(this).html(
$(this).html().replace(/Lorem Ipsum/g, "<span class='match-o'>Lorem Ipsum</span>")
);
});
9. [foo~="bar"]
a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
Еще один интересный трюк. Тильда позволяет нам выбирать атрибуты со значениями, разделенными пробелами, т.е.
<a href="path/to/image.jpg" data-info="external image">Кликни сюда</a>
Используя данный прием мы можем делать выборки с нужными нам комбинациями:
/* Отобрать атрибут data-info, который содержит значение external */
a[data-info~="external"] {
color: red;
}
/* и отобрать атрибут data-info, который содержит значение image */
a[data-info~="image"] {
border: 1px solid black;
}
10. :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.
Мы рассмотрели 10 селекторов которые редко используются на практике, но все же полезны в разработке. На этом подборка окончена, надеюсь вы нашли для себя новые и полезные JQuery селекторы. Хорошего дня, Хабр!
Комментарии (15)
dmitry_ch
08.09.2016 08:39+3Напомню два интересных варианта добавления, скажем, к ссылкам на pdf-документы соответствующих иконок (здесь сама идея, оформить ссылки, конечно, можно как удобно):
a[type="application/pdf"] { background-image: url(/images/pdf.gif); padding-left: 20px; }
и
a[href$=".pdf"] { background-image: url(/images/pdf.gif); padding-left: 20px; }
Правда, в первом случае речь все же не идет про MIME-type (да и как браузер узнает, какой MIME-type у объекта по невыкачанной еще ссылке?), а именно про ссылки, для которых указан соответствующее значение HTML-аттрибута type:
<a href="/pdf/manual_on_manual.pdf" type="application/pdf">Мануал по пользованию мануалом</a></p>
Польза от такого подхода в том, что не во всех ссылках может быть указано расширение, что не даст выведение иконки по второму из приведенных способов.bjornd
08.09.2016 19:22Если все-равно нужно подставлять свойство type=«application/pdf», почему просто не подставить class=«link_pdf» и не выдумывать всяких трюков с CSS-селекторами?
KinsleR
08.09.2016 12:53Пункт номер 1.
Это необязательно и, к тому же, не учитывает ссылки по протоколу https.>
Это неправильно, при данном написании будут учитываться ссылки с https. А вот если написать ```css
href^="https"
то не будут учитываться http
riot26
08.09.2016 12:531. [href^=«http»]
не заработает в случае с:
<a href="http://this-site.com/page">page</a>
исправление:
a[href^="http"]:not([href*="this-site.com"])
CypherAJ
08.09.2016 12:53+3Первые 4 и 9ый взяты из этого туториала вместе с примерами. Не вижу ссылки на оригинал, да еще и перевод с ошибками: "Обратите внимание, что мы не ищем http" — в оригинале было "http://", а это не имеет смысла.
Gr1ver
08.09.2016 12:53+1Все селекторы не входящие в спецификацию CSS, а являющиеся расширениями jQuery, следует использовать с осторожностью, т.к. они могут сильно проседать по производительности. К примеру:
Because :checkbox is a jQuery extension and not part of the CSS specification, queries using :checkbox cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use [type=«checkbox»] instead.
Для наглядности приведенного в пример :checkbox: представим таблицу 200x50, в ячейках которой будут чекбоксы.
//jquery 1.9.1 $('tr input[type="checkbox"]') //в вакууме выполнится ~18-19ms $('tr input:checkbox') //в вакууме выполнится ~70-80ms
mauglee
08.09.2016 19:24В пункте 6. :header скорее всего должно быть не
а$("h1 h2 h3 h4 h5 h6")
$("h1, h2, h3, h4, h5, h6")
Keyten
09.09.2016 00:31+1Всё то же написано в любом учебнике по css, в чём смысл статьи? Ещё и с таким количеством ошибок, как грамматических, так и просто по невнимательности (filter вместо find хотя бы).
alexey-m-ukolov
09.09.2016 05:17+1Действительно, очень удивительно, что у статьи положительный рейтинг при таком низком её качестве.
alexey-m-ukolov
andylom
Возможно не оно самое, но «select option:selected». Так же :first, :focus
Rad1calDreamer
Вовсе не оно. jquery с псвевдоэлементами не работает, на сколько мне известно. В лучшем случае — можно манипулировать со стилями элемента, а уже в зависимости от них изменять псевдоэлемент
alexey-m-ukolov
Вот именно поэтому я и попросил пример. Я тоже не припомню, чтобы с псевдоэлементами можно было работать через js.