ИЗБРАННЫЕ ПРИМЕРЫ JQUERY (теория и примеры)

HTML ↴

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Строка таблицы через одну выделена фоном $(document).ready(function() [JQUERY]</title>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("tr:even").css("background-color","red");
 $("tr:odd").css("background-color","lightgreen");
});
</script>
</head>
<body>

<h1>Welcome to My Web Page</h1>
<table>
<tr>
 <th>Company</th>
 <th>Contact</th>
 <th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkцp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Kцniglich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
</table>

: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"); 
 
 Данная инструкция напишет курсивом текст в первых пяти ячейках таблицы.

<a href="https://www.03www.ru/jquery.min-no.js">скачать jquery.min.js</a>
: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-ы, которые имеют кнопку и при том только 
 одну.
 <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53156500, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53156500" style="position:absolute; left:-9999px;" alt="" /></div></noscript> </body>
</html>

размер Kb

ПРИМЕР ↴

✔ пример в полном окне

на главную страницу примеров - клавиша ESC

ИЗБРАННЫЕ ПРИМЕРЫ JQUERY (теория и примеры)

document.write(document.title)

HTML ↴

размер Kb

ПРИМЕР ↴