Незвичайні jQuery і селектори CSS

Селектори мають дуже важливе значення. Більшість 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.2 em;
}

Псевдоелементи можна використовувати для додання стилів фрагменту елемента, наприклад, першому рядку або першої літери. Застосовується тільки до блочних елементів. Тут ми вибираємо першу букву параграфа:

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.2 em;
}

Працює аналогічно до попереднього прикладу, але в даному випадку буде обрано перший рядок кожного параграфа.

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 селектори. Доброго дня, Хабр!
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.