Как создать свой сайт → Уроки jQuery → Урок 3. Фильтры

jQuery - Урок 3. Фильтры

  • :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нечетная строка

Итак, html-код:
<html> <head> <title>jQuery</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <h2>Фильтры jQuery</h2> <table border="1" width="300"> <tr><td>jQuery</td><td>четная строка</td></tr> <tr><td>jQuery</td><td>нечетная строка</td></tr> <tr><td>jQuery</td><td>четная строка</td></tr> <tr><td>jQuery</td><td>нечетная строка</td></tr> <tr><td>jQuery</td><td>четная строка</td></tr> <tr><td>jQuery</td><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-ы, которые имеют кнопку и при том только одну.


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



Предыдущий урок Вернуться в раздел Следующий урок 
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.