Фільтри використовуються для того щоб відібрати елементи, які мають в собі певний зміст, або є пустими, або мають певні вкладені елементи,а також видиміелементи за умовчанням або такі для яких в стилях прописані властивості visibility: visible (фільтр :visible); а також невидимі елементи для яких в стилях приписано display:none або type:hidden (фільт :hidden). Елементи з властивістю visibility:hidden та opacity:0 за допомогою фільтру :hidden не вибираються.
:contains("текст") - вибір по змісту (текст), у якості тексту можуть бути слова, частини слів, одна або кілька літер, що йдуть підряд чи стоять окремо
:empty - вибір пустих елементів в середені яких немає нічого іншого, навіть пробілів
:has(tag) - вибір елементів в всередені яких є відповідні елементи не тільки на першому рівні
:hidden - вибір схованих елементів для яких в стилях прописано display:none
:visible - вибір видимих елементів, видимість задається в стилях visibility: visible або вона діє за умовчанням, якщо не вказано інше
Приклади
:contains("текст") - вибір по змісту (текст), у якості тексту можуть бути слова частини, слів одна або кілька літер, що йдуть підряд чи стоять окремо
ФразаРазр азраз
:contains("раз")
Виберуться тільки перший і останній блоки. У другому блоці невідповідний регістр, у третьому розрив після літери "р".
$('#btncont').click(function (){
$('.dv3 div:contains("раз")').css("border","3px solid red");});
});:empty - вибір пустих елементів в середені яких немає нічого іншого, навіть пробілів
1
:contains("раз")
Виберуться тільки третій і четвертий блоки. У другому блоці є пробіл.
$('#btnempty').click(function (){
$('.dv5 div:empty').css("border","3px solid red");
});:has(tag)- вибір елементів в всередені яких є відповідні елементи не тільки на першому рівні
1span
:has("span")
Перший блок має вкладений блок и вже в ньому елемент span. Тому обидва блоки - і батьківський, і дочірній будут обрані. Третій блок не вибереться - у ньому слово "span", а не тег.
$('#btnhas').click(function (){
$('.dv6 div:has("span")').css("border","3px solid red");
});:hidden - вибір схованих елементів для яких в стилях прописано display:none
:visible - вибір видимих елементів
display:none; /*або*/ type:hidden;
visibility:hidden; /*або*/ opacity:0;
1/*display:none*/23/*display:none*/4
:hidden обираємо блоки 1 та 3, які сховані та показуємо їх за 1 секунду (1000 мсек)
:visible обираємо видимі блоки, та ховаємо їх. Після цього знову можемо вибрати сховані блоки і показати їх (перша кнопка)
Якщо блоки сховати, встановивши їм властивість visibility: hidden; то обрати і показати їх не вийде (перша кнопка не буде працювати)
// показуємо сховані
$('#btnh1').click(function (){
$( "div:hidden" ).show(1000);
});
// ховаємо, встановивши display:none
$('#btnv1').click(function (){
$('.div7 div:visible').css("display","none");
});
// ховаємо, встановивши visibility:hidden
$('#btnv2').click(function (){
$('.div7 div:visible').css("visibility","hidden");
});
далі ✏