Уроки:


  
HTML
  
  
CSS
  
  
PHP
  
  
JavaScript
  
  
jQuery
  
  
PHP+MySQL
  
  
Ajax
  

  Разделы:


  В помощь:


  Ещё:



  Авторизация:


  логин:   
  пароль: 
— Алло! Служба поддержки? Вы не знаете, почему у меня изображение на мониторе дрожжит, когда я грызу сухари?

  Тренажер интуиции:


Тренажер интуиции


  Видеокурсы:


Бесплатный видеокурс: "Cайт-визитка за 1 день"

видеокурс: Сайт-визитка за один день



  Опрос:



  Топ комментаторов:


40

— Алло! Служба поддержки? Вы не знаете, почему у меня изображение на мониторе дрожжит, когда я грызу сухари?

  Моя группа в контакте:



jQuery, Фильтры

: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="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

Проверьте свою интуицию:


Мобильную версию можно скачать в google play

Комментарии


Нет комментариев. Вы можете стать первым !

Ваш комментарий



Почта: info@web-shpargalka.ru
Сообщить друзьям:
Главная | Форум | Отзывы | Обо мне | Мои курсы | Работы учеников | Конкурсы | Обратная связь