ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Фильтры

Фильтры

Базовые фильтры

Еще одним эффективным методом доступа к DOM- элементам является использование фильтров. В этом случае поиск элементов осуществляется не по их типу, классу или идентификатору, а поих позиции, текущему состоянию или другим переменным.

Базовый синтаксис фильтра включает в себя двоеточие, вслед за которым указывается фильтр.

:фильтр

Некоторым фильтрам можно передавать параметры, указывая их в скобках.

:фильтр(параметр)
Выбор первого или последнего элемента

Фильтры часто используют для тог о, чтобы определить, является ли некоторый элемент первым или последним в наборе элементов. С помощью фильтров эта задача решается очень просто. Для этого достаточно присоединить к любому селлектору соответствующий фильтр :first или :last.

$("p:last");

Выполнение этой команды приведет к следующему результату.

Выбор первого или последнего элемента

Выбор элементов, не соответствующих селектору

В тех случаях, когда требуется найти все элементы, не соответствующие определенному селектору, проще всего это сделать с помощью фильтра :not(). Если присоединить этот фильтр к селектору и указать в нем другой селектор в качестве параметра, то в соответствующий набор попадут лишь те элементы, которые соответствуют исходному селектору, но не соответствуют селектору, переданному фильтру :not() в виде параметра.

Например, использование команды

$("p:not(.foo)");

даст следующий результат.

Выбор элементов, не соответствующих селектору

Выбор элементов по признаку четности

Фильтры :even и :odd, имеющие столь же простой синтаксис, что и фильтры :first и :last, выбирают из результирующего набора соответственно четные (even) и нечетные (odd) элементы. Например, выполнение команды:

$("p:odd");

приведет к следующему результату.

Выбор элементов по признаку четности

Выбор элементов по индексу

Для выбора элемента по индексу используется фильтр eq(), которому в качестве параметра передается индекс требуваемого элемента. Например, использование команды

$("p:eq(3)");

даст следующий результат.

Выбор элементов по индексу

Идекс элемента соответствует его порядковому номеру в наборе. Нумерация начинается с нуля, поэтому индекс первого элемента - 0, второго - 1 и т.д.

Фильтры содержимого

Имеются также фильтры, позволяющие отбирать элементы на основании их содержимого, причем с возможностью разграничения текстового и элементного содержимого.

Выбор элементов содержащих заданный текст

Для выбора элементов, содержащих определенный текст, используется фильтр :contains(), которому искомый текст передается в качестве параметра.

$("p:contains(Другой)");

Выполнение этой команды приведет к следующему результату.

Выбор элементов содержащих заданный текст

Выбор элементов содержащих указанный элемент

Если необходимо найти элементы, содержащие указанный элемент, следует использовать фильтр :has(). Этот фильтр работает аналогично фильтру :contains(), но принимает в качестве параметра не текст, а имя элемента.

$("p:has(span)");

Выполнение этой команды приведет к следующему результату.

Выбор элементов содержащих указанный элемент

Выбор пустых элементов

Для выбора пустых элементов(т.е. элементов, которые не содержат ни других элементов, ни текстовых узлов) используется фильтр :empty.

В HTML-примере, который мы используем, все пустые элементы являются невидимыми. Выберем их, задав поиск пустых элементов:

$(":empty");

Выполнение этой команды приведет к следующему результату.

Выбор пустых элементов

Выбор родительских элементов

Притивоположностью фильтра :empty является фильтр :parent, отбирающий лишь элементы, являющиеся родительскими по отношению к каким-либо другим (дочерним) элементам или текстовым узлам.

Выберем все абзацы, являющемися родительскими по отношению к любым другим элементам, воспользовавшись следующей командой:

$("p:parent");

Поскольку во всех абзацах нашего документа содержится текст(или в некоторых случаях, другие элементы), все они попадут в результирующий набор.

Выбор родительских элементов

Фильтры видимости

Фильтры видимости :hidden и :visible служат для нахождения соответственно скрытых и видимых элементов. Выберем все видимые абзацы с помощью показанной ниже команды:

$("p:visible");

Поскольку ни один элемент в нашем примере не был скрыт, будет получен следующий результат.

Фильтры видимости

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

Атрибут - это любой объект, который принадлежит элементу и дополнительно определяет его. В качестве примера можно привести такие атрибуты, как class, href,ID, title.

Для повышения быстродействия и соблюдения корректного стиля программирования вреальных сценариях везде, где только возможно, следует использовать селекторы идентификаторов (#id) и классов (.class). Приводимые ниже примеры рассматриваются лишь для того, чтобы продемонстрировать возможности фильтров.

Выбор элементов по значению атрибута

Для нахождения элементов с заданными значениями атрибутов используется пара "атрибут-значение", заключенная в квадратные скобки ([]).

Для выбора всех элементов с атрибутом .class, равным foo, выполним следующую команду:

$("[class=foo])');

Возвращенный результат будет иметь следующий вид.

Выбор элементов по значению атрибута

Выбор элементов, не имеющих заданного атрибута или имеющих другое его значение

Для решения противоположной задачи - выбор элементов, которые не соответствуют заданной паре "атрибут-значение", поместим перед знаком равенства, стоящим между атрибутом и его значением, восклицательный знак(!).

[атрибут!=значение]

Выберем все абзацы, которым не был присвоен класс foo, выполнив следующую команду:

$("p[class!=foo]");

Результат будет таким.

Выбор элементов, не имеющих заданного атрибута или имеющих другое его значение

Фильтры элементов-потомков

Фильтры потомков предлагают альтернативу использованию фильтров :even(), :odd(), :eq(). Оновное различие между ними в том, что в этом наборе фильтров индексация начинается с 1, а не с 0, как, напримерв фильтре :еq().

Выбор параметров по признаку четности, индексу или уравнению

Один из самых универсальных фильтров, nth-child? допускает четыре различных варианта передачи параметров при выборе элементов: even, odd, index и еquation.

Чтобы проследить за отличиями в работе фильтров, выберем нечетные абзацы с помощью фильтра :nth-child(), воспользовавшись командой:

$("p:nth-child(odd)");

В консоли получи вот такой результат.

Выбор параметров по признаку четности, индексу или уравнению

Выбор первого или последнего дочернего элемента

Фильтры :first-child и :last-child очень напоминают фильтры :first и :last, однако отличаются от них тем, что могут возвращать целый набор соответствующих элементов. Например, чтобы найти последний элемент span, являющийся дочерним по отношению к элементк p, можно использовать следующую команду:

$("p span:last");

Результат будет таким.

Выбор первого или последнего дочернего элемента

Но если необходимо найти все элементы span, являющиеся последними дочерними элементами по отношению к элементу p, то следует использовать фильтр :last-child.

$("p span:last-child");

Этот фильтр применяется к каждому родительскому элементу, а не к DOM в целом, что обуславливает отличие возвращенного им результата.

Выбор первого или последнего дочернего элемента