Оглавление скрыть


Вы можете авторизоваться через ВКонтакте, Фейсбук и оставить комментарий


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

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

Пример

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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="Выделить жирным и курсивом элементы с классом &quot;inftech&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>
Опубликовано: 20 декабря 2011  ·  Автор: Артём Фёдоров  ·  4781 просмотр

Категория

ГлавнаяПрограммированиеJavaScriptБиблиотекиjQueryПоиск по классу (jQuery)

Чтобы оставить комментарий нужно авторизоваться на сайте
или войти через ВКонтакте или Фейсбук

Войти через ФейсбукВойти через Твиттер

Комментарии

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

© 2010-2017 expange.ru
При полном или частичном копировании статей сайта, ссылка на источник обязательна.

Хотите узнать больше информации, пишите на: artem@expange.ru

Полезное онлайн  ·  Новости  ·  Изображения  ·  Статьи по датам

О проекте  ·  Правила пользования  ·  Представительства

Благодарности и пожелания