: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
|
Итак, 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-ы, которые имеют кнопку и при том, только одну.
