Поиск по классу (jQuery)

Поиск элементов страницы по классам осуществляется при помощи точки и названия класса после нее, например $(.popular) — после такого запроса jQuery вернет все элементы с классом popular.

Пример

Например есть список, класс некоторых элементов которого равен inftech.

Задача: при нажатии на кнопку все элементы с этим классом сделать жирным и курсивом. Онлайн пример.

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Поиск по классу (jQuery)</title> <script type="text/javascript" src="/js/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#bold').click(function(){ $('.inftech').css('fontWeight', 'bold').css('fontStyle', 'italic'); }); }); </script> </head><body> <input type="button" value="Выделить жирным и курсивом элементы с классом &amp;quot;inftech&amp;quot;" id="bold"> <ul> <li><a class="inftech" href="http://expange.ru/c/1-Apache" title="Категория Apache">Apache</a></li> <li><a class="inftech" href="http://expange.ru/c/4-PhotoShop" title="Категория PhotoShop">PhotoShop</a></li> <li><a href="http://expange.ru/c/23-Авто" title="Категория Авто">Авто</a></li> <li><a class="inftech" href="http://expange.ru/c/13-Веб-дизайн" title="Категория Веб-дизайн">Веб-дизайн</a></li> <li><a href="http://expange.ru/c/51-Здоровье" title="Категория Здоровье">Здоровье</a></li> <li><a class="inftech" href="http://expange.ru/c/31-Интернет" title="Категория Интернет">Интернет</a></li> <li><a class="inftech" href="http://expange.ru/c/152-Информационные_технологии" title="Категория Информационные технологии">Информационные технологии</a></li> <li><a class="inftech" href="http://expange.ru/c/83-Компьютерные_игры" title="Категория Компьютерные игры">Компьютерные игры</a></li> <li><a href="http://expange.ru/c/2-Кулинария" title="Категория Кулинария">Кулинария</a></li> <li><a href="http://expange.ru/c/30-Наука" title="Категория Наука">Наука</a></li> <li><a class="inftech" href="http://expange.ru/c/40-Операционные_системы" title="Категория Операционные системы">Операционные системы</a></li> <li><a class="inftech" href="http://expange.ru/c/10-Программирование" title="Категория Программирование">Программирование</a></li> <li><a class="inftech" href="http://expange.ru/c/44-Программное_обеспечение" title="Категория Программное обеспечение">Программное обеспечение</a></li> <li><a class="inftech" href="http://expange.ru/c/42-Сетевые_протоколы" title="Категория Сетевые протоколы">Сетевые протоколы</a></li> <li><a href="http://expange.ru/c/101-Сотовая_связь" title="Категория Сотовая связь">Сотовая связь</a></li> <li><a class="inftech" href="http://expange.ru/c/8-СУБД" title="Категория СУБД">СУБД</a></li> <li><a href="http://expange.ru/c/99-Телефонная_связь" title="Категория Телефонная связь">Телефонная связь</a></li> <li><a href="http://expange.ru/c/28-Юрисдикция" title="Категория Юрисдикция">Юрисдикция</a></li> </ul> </body></html>

Категории

ПрограммированиеJavaScriptБиблиотекиjQuery

Читайте также

Комментарии