Если в предыдущей статье мы говорили о базовых и иерархических селекторах, и узнали что такое базовые фильтры, то в продолжение знакомства с селекторами jQuery разговор пойдет о фильтрах контента и фильтрах атрибутов, visibility-фильтрах и child-фильтрах. Может звучит не очень понятно, но статья содержит большое количество примеров, с помощью которых разобраться будет гораздо легче.

Фильтры контента

:contains(text)

возвращает: Array<element>
Выбираются элементы, которые содержат переданный текст.
Ищем все элементы DIV, содержащие подстроку «John» и подчеркиваем их.

$("div:contains('John')")
    .css("text-decoration", "underline");

Откройте пример в отдельном окне и посмотрите исходный код.

:empty

возвращает: Array<Element(s)>
Выбираются все элементы, которые не содержат потомков (в том числе и текстовых узлов).
Ищем все пустые элементы – они не должны содержать элементов-потомков или текст, вставляем в них текст «Пустой!» и устанавливаем фоновый цвет.

$("td:empty").text("Пустой!")
    .css('background', 'rgb(255,220,200)');

Откройте пример в отдельном окне и посмотрите исходный код.

:has(selector)

возвращает: Array<Element(s)>
Выбираются элементы, которые содержат по крайней мере один элемент, указанный в селекторе.
В примере добавляем класс «test» ко всем элементам div, которые содержат внутри себя как минимум один элемент p.

$("div:has(p)").addClass("test");

Откройте пример в отдельном окне и посмотрите исходный код.

:parent

возвращает: Array<Element(s)>
Выбираются все элементы, которые являются родительскими – т.е. имеют элементы-потомки, в том числе и текст.
Ищем все элементы td, имеющие потомков, включая текст. Если кликнуть на таком элементе мышкой, цвет его фона изменит прозрачность.

$("td:parent").click(function () {
  $(this).fadeTo(1500, 0.3);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Visibility-фильтры

:hidden

возвращает: Array<Element(s)>
Выбираются все скрытые элементы или элементы input, имеющие тип «hidden».
Выбираем все скрытые элементы div (их можно будет увидеть, кликнув мышкой по кнопке) и подсчитываем элементы input с типом «hidden».

// в некоторых браузерах в набор будут включены
// элементы head, title, script и т.д.,
// но как правило набор ограничивается элементом body.
$("span:first").text("Всего найдено " +
  $(":hidden", document.body).length +
  " скрытых элементов.");
$("#showHidden").click(function () {
  $("div:hidden").show(3000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

:visible

возвращает: Array<Element(s)>
Выбираются все видимые элементы.
В примере: все видимые элементы div можно сделать желтыми, кликнув по ним мышкой. Невидимые элементы можно показать щелкнув по кнопке, но свой цвет изменять они не смогут.

$("div:visible").click(function () {
  $(this).css("background", "yellow");
});
$("button").click(function () {
  $("div:hidden").show("fast");
});

Откройте пример в отдельном окне и посмотрите исходный код.

Фильтры атрибутов

[attribute]

возвращает: Array<Element(s)>
Выбираются все элементы, имеющие указанный атрибут.
Клик мышкой по элементам div, которые имеют атрибут id, добавит значение этого атрибута в виде текста в соответствующий элемент div.

$("div[id]").one("click", function(){
  var idString = $(this).text() +
 " = " + $(this).attr("id");
  $(this).text(idString);
});

Откройте пример в отдельном окне и посмотрите исходный код.

[attribute=value]

возвращает: Array<Element(s)>
Выбираются элементы с атрибутом, значение которого соответствует указанному.
В примере мы ищем элемент input, атрибут name которого имеет значение newsletter и изменяем текст в следующем непосредственно за ним элементе span.

$("input[name='newsletter']").click(function(){
  $(this).next().text(" атрибут name = newsletter");
});

Откройте пример в отдельном окне и посмотрите исходный код.

[attribute!=value]

возвращает: Array<Element(s)>
Выбираются элементы с атрибутом, значение которого не соответствует указанному.
Например ищем все элементы input атрибут name которых не соответствует значению newsletter и изменяем текст в следующем непосредственно за ним элементе span.

$("input[name!='newsletter']").next()
    .text(" is not newsletter");

Откройте пример в отдельном окне и посмотрите исходный код.

[attribute^=value]

возвращает: Array<Element(s)>
Выбираются все элементы, соответствующий атрибут которых начинается с указанного значения.
В примере мы ищем все элементы input, значение атрибута name которых начинается с news и затем вставляем в них значение «Это news!».

$("input[name^='news']").val("Это news!");

Откройте пример в отдельном окне и посмотрите исходный код.

[attribute$=value]

возвращает: Array<Element(s)>
Выбираются все элементы, соответствующий атрибут которых заканчивается указанным значением.
В примере мы ищем все элементы input, значение атрибута name которых заканчивается на letter и затем вставляем в них значение «Это letter!».

$("input[name$='letter']").val("Это letter!");

Откройте пример в отдельном окне и посмотрите исходный код.

[attribute*=value]

возвращает: Array<Element(s)>
Выбираются все элементы, соответствующий атрибут которых содержит в качестве подстроки указанное значение.
В примере мы ищем все элементы input, значение атрибута name которых содержит подстроку man и затем вставляем в них значение «Найдена подстрока man!».

$("input[name*='man']").val("Найдена подстрока man!");

Откройте пример в отдельном окне и посмотрите исходный код.

[selector1][selector2]…[selectorN]

возвращает: Array<Element(s)>
Выбираются все элементы, которые имеют указанные атрибуты и соответствующие значения.
Ищем все элементы input, которые имеют атрибут id, а также атрибут name, значение которого заканчивается подстрой «man». Вставляем в найденные элементы значение «найдено».

$("input[id][name$='man']").val("найдено");

Откройте пример в отдельном окне и посмотрите исходный код.

Child-фильтры

:nth-child(index/even/odd/equation)

возвращает: Array<Element(s)>
В качестве аргумента принимает число или строку. Число может представлять индекс элемента (обратите внимание, что здесь отсчет ведется с 1), строка – even, odd, или equation. Выбираются все элементы, которые являются n-нными потомками своего родителя или четными/нечетными потомками.
В примере мы ищем каждый второй элемент li во всех отобранных элементах ul, ну и отмечаем их.

$("ul li:nth-child(2)").append("<span> - 2-ой!</span>");

Откройте пример в отдельном окне и посмотрите исходный код.

:first-child

возвращает: Array<Element(s)>
Выбираются все элементы, которые являются первыми потомками своих родителей.
В примере мы выбираем первый элемент span в каждом найденном элементе div и подчеркиваем их текст. Да, и еще при наведении курсора мыши добавляем класс, который сделает текст жирным и зеленого цвета.

$("div span:first-child")
  .css("text-decoration", "underline")
  .hover(function () {
    $(this).addClass("sogreen");
  }, function () {
    $(this).removeClass("sogreen");
  });

Откройте пример в отдельном окне и посмотрите исходный код.

:last-child

возвращает: Array<Element(s)>
Выбираются все элементы, которые являются последними потомками своих родителей.
В примере мы выбираем последний элемент span в каждом найденном элементе div и делаем их текст красного цвета. Уменьшаем размер шрифта до 80%. При наведении курсора мыши добавляем класс, который зачеркнет текст.

$("div span:last-child")
  .css({color:"red", fontSize:"80%"})
  .hover(function () {
    $(this).addClass("solast");
  }, function () {
    $(this).removeClass("solast");
  });

Откройте пример в отдельном окне и посмотрите исходный код.

:оnly-child

возвращает: Array<Element(s)>
Выбираются все элементы, которые являются единственными потомками своего родителя. Если родитель имеет других потомков – ничего не будет выбрано.
В этом примере в каждом отобранном элементе div ищем кнопку не имеющую сестринских элементов. Ну и немного ее модифицируем, устанавливая для нее текст «Alone» и синюю рамку шириной 2 пиксела.

$("div button:only-child")
    .text("Alone").css("border", "2px blue solid");

Откройте пример в отдельном окне и посмотрите исходный код.

В следующей статье мы продолжим знакомиться с селекторами jQuery…