[recovery mode] Необычные jQuery и CSS селекторы08.09.2016 07:48

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

Большинство 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[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: 


  
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.

  
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 consequatLorem Ipsum.

  Lorem Ipsum Wikipedia Link




  
This lorem ipsum should not be highlighted.




    
  
  • A Lorem Ipsum List
    • 
  
  • More Elements Here
    •

JavaScript Код, который выделит все варианты: 
$("section:contains('Lorem Ipsum')").each(function() {
  $(this).html(
      $(this).html().replace(/Lorem Ipsum/g, "Lorem Ipsum")
    );
});

9. [foo~=«bar»]
a[data-info~="external"] {
   color: red;
}

a[data-info~="image"] {
   border: 1px solid black;
}

Еще один интересный трюк. Тильда позволяет нам выбирать атрибуты со значениями, разделенными пробелами, т.е.
Кликни сюда

Используя данный прием мы можем делать выборки с нужными нам комбинациями: 
/* Отобрать атрибут 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: 

    
  
  • Pellentesque habitant morbi tristique senectus.
    • 
  
  • Pellentesque habitant morbi tristique senectus.
    • 
  (... more list elements here ...)
  
  • Pellentesque habitant morbi tristique senectus.
    • 
  
  • Pellentesque habitant morbi tristique senectus.
    •

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

Логика данного фрагмента предельно проста: проходимся по всем элементам списка, проверяем наличие ссылки и если она там есть, окрашиваем элемент в заданный цвет. Данный пример на CodePen.

Мы рассмотрели 10 селекторов которые редко используются на практике, но все же полезны в разработке. На этом подборка окончена, надеюсь вы нашли для себя новые и полезные JQuery селекторы. Хорошего дня, Хабр!

Комментарии (1)

  • 8 сентября 2016 в 06:27

    0

    ↑

    ↓

    2. :: pseudoElement
    Покажите, пожалуйста, пример как с ними можно работать через jQuery.

© Habrahabr.ru