1. Главная страница » Уроки jQuery » jQuery, Фильтры

jQuery, Фильтры

Автор: | 27.05.2013

:first — выбирает первый элемент соответствующего селектора. Пример:

$(«tr:first»).css(«font-style», «italic»);

Данная инструкция напишет курсивом первую строку таблицы.

:last — выбирает последний элемент соответствующего селектора. Пример:

$(«tr:last»).css(«font-style», «italic»);

Данная инструкция напишет курсивом последнюю строку таблицы.

:even — выбирает четные элементы, начиная с нуля. Пример:

$(«tr:even»).css(«font-style», «italic»);

Данная инструкция напишет курсивом все четные строки таблицы (т.к. нумерация идет с нуля, то зрительно кажется, что нечетные строки).

:odd — выбирает нечетные элементы, начиная с нуля. Пример:

$(«tr:odd»).css(«font-style», «italic»);

Данная инструкция напишет курсивом все нечетные строки таблицы (т.к. нумерация идет с нуля, то зрительно кажется, что четные строки).

:eq(index) — выбирает элемент по его индексу (начиная с нуля). Пример:

$(«td:eq(2)»).css(«font-style», «italic»);

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

:gt(index) — выбирает элементы с индексом больше указанного. Пример:

$(«td:gt(2)»).css(«font-style», «italic»);

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

:lt(index) — выбирает элементы с индексом меньше указанного. Пример:

$(«td:lt(4)»).css(«font-style», «italic»);

Данная инструкция напишет курсивом текст в первых пяти ячейках таблицы.

Как всегда, рассмотрим на примере. Давайте сделаем таблицу, у которой при желании можно будет поменять цвет строк: четные строки будут серыми, а нечетные — синими, а цвет шрифта ячеек, начиная с 5 будет желтым. Напоминаю, что нумерация идет с нуля, поэтому внешне четные и нечетные строки меняются местами, а 5 ячейка зрительно выглядит, как шестая. Этот нюанс нужно запомнить!

Читайте также:  Как подключить jQuery

Фильтры jQuery

jQuery четная строка
jQuery нечетная строка
jQuery четная строка
jQuery нечетная строка
jQuery четная строка
jQuery нечетная строка

Итак, html-код:

<html>
  <head>
    <title>jQuery</title>
    <link rel="stylesheet" type="text/css" href="cascade.css">
  <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
 <table border="1" width="300">
<tr class="tr">
<td class="td">jQuery</td> <td class="td">четная строка</td>
</tr>
<tr class="tr">
<td class="td">jQuery</td> <td class="td">нечетная строка</td>
</tr>
<tr class="tr">
<td class="td">jQuery</td> <td class="td">четная строка</td>
</tr>
<tr class="tr">
<td class="td">jQuery</td> <td class="td">нечетная строка</td>
</tr>
<tr class="tr">
<td class="td">jQuery</td> <td class="td">четная строка</td>
</tr>
<tr class="tr">
<td class="td">jQuery</td> <td class="td">нечетная строка</td>
</tr>
    </table><br>
<input type="button"value="Поменять цвет"onclick="addColor3();">
  </body>
</html>

Код самой функции:

function addColor3(){
  $("tr:even").css("background-color", "grey");
  $("tr:odd").css("background-color", "blue");
  $("td:gt(5)").css("color", "yellow");
}

Продолжим изучение фильтров.

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

:header — выбирает все элементы, которые являются заголовками (h1, h2…). Пример:

$(«:header»).css(«color», «red»);

Данная инструкция сделает все заголовки красными.

:contains (text) — выбирает элементы, которые содержат переданный текст (text). Пример:

$(«div:contains(‘New’)»).css(«text-decoration», «underline»);

Данная инструкция подчеркнет все элементы div-а, содержащие подстроку New.

:empty — выбирает все элементы, которые не содержат потомков (т.е. являются пустыми). Пример:

$(«td:empty»).text(«Пусто»);

Данная инструкция найдет все пустые ячейки таблицы и вставит в них текст «Пусто».

:has(selector) — выбирает элементы, которые содержат хотя бы один элемент, указанный в селекторе. Пример:

$(«div:has(p)»).css(«font-style», «italic»);

Данная инструкция найдет те div-ы, в которых есть хотя бы один параграф (p) и сделает текст в них курсивом.

:parent — выбирает родительские элементы, т.е. те, у которых есть потомки. Пример:

$(«td:parent»).css(«font-style», «italic»);

Данная инструкция найдет все ячейки таблицы, в которых есть текст или еще что-либо, и сделает их шрифт курсивом.

:animated — выбирает элементы, которые в данный момент являются анимированными. Пример:

$(«div:animated»).css(«border», «1px solid red»);

Данная инструкция найдет анимированные div-ы и обведет их рамкой.

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

:hidden — выбирает все скрытые элементы и элементы input, имеющие тип «hidden». Пример:

$(«div:hidden»).show();

Данная инструкция покажет все скрытые div-ы.

:visible — выбирает все видимые элементы. Пример:

$(«div:visible»).css(«color», «red»);

Данная инструкция сделает цвет текста в видимых div-ах красным.

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

[attribute] — выбирает все элементы с указанным атрибутом. Пример:

$(«div[id]»).css(«color», «red»);

Данная инструкция сделает цвет текста красным во всех div-ах, у которых есть идентификатор (id).

[attribute=value] — выбирает элементы с атрибутом, значение которого соответствует указанному. Пример:

$(«input[name=’Main’]»).css(«color», «red»);

Данная инструкция сделает цвет текста красным у input-а с именем «Main».

[attribute!=value] — выбирает элементы с атрибутом, значение которого не соответствует указанному. Пример:

$(«input[name!=’Main’]»).css(«color», «red»);

Данная инструкция сделает цвет текста красным у всех input-ов, кроме input-а с именем «Main».

[attribute^=value] — выбирает все элементы, соответствующий атрибут которых начинается с указанного значения. Пример:

$(«input[name^=’news’]»).css(«color», «red»);

Данная инструкция сделает цвет текста красным у тех input-ов, атрибуты name которых начинаются с news.

[attribute$=value] — выбирает все элементы, соответствующий атрибут которых заканчивается указанным значением. Пример:

$(«input[name$=’news’]»).css(«color», «red»);

Данная инструкция сделает цвет текста красным у тех input-ов, атрибуты name которых заканчивается на news.

[attribute*=value] — выбирает все элементы, соответствующий атрибут которых содержит в качестве подстроки указанное значение. Пример:

$(«input[name*=’news’]»).css(«color», «red»);

Данная инструкция сделает цвет текста красным у тех input-ов, атрибуты name которых содержат подустроку ‘news’, неважно вначале, в конце или середине.

[selector1]…[selectorN] — выбирает все элементы, которые имеют указанные атрибуты и соответствующие значения. Пример:

$(«input[id][name*=’news’]»).css(«color», «red»);

Данная инструкция сделает цвет текста красным у тех input-ов, у которых есть идентификатор и атрибуты name которых содержат подстроку ‘news’.

Фильтры форм

:enabled / :disabled — выбирает все элементы, имеющие активное (enabled) / запрещенное (disabled) состояние. Пример:

$(«input:enabled»).css(«color», «red»);

Данная инструкция сделает цвет текста красным только у активных input-ов.

:checked — выбирает все элементы, которые отмечены. Пример:

$(«input:checked»).lenght;

Данная инструкция сосчитает все отмеченные input-ы.

:selected — выбирает все выбранные элементы. Пример:

$(«select option:selected»).lenght;

Данная инструкция сосчитает сколько выбрано элементов в списке.

Фильтры потомков

:first-child — выбирает элементы, которые являются первыми потомками своих родителей. Пример:

$(«div span:first-child»).css(«border», «1px solid blue»);

Данная инструкция обведет рамкой первый span в каждом div-е.

:last-child — выбирает элементы, которые являются последними потомками своих родителей. Пример:

$(«div span:last-child»).css(«border», «1px solid blue»);

Данная инструкция обведет рамкой последний span в каждом div-е.

:only-child — выбирает элементы, которые являются единственными потомками своих родителей. Пример:

$(«div button:only-child»).css(«border», «1px solid blue»);

Данная инструкция обведет рамкой те div-ы, которые имеют кнопку и при том, только одну.

1 2 3 4 5 6

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

code