SiteIS

jQuery - безграничные возможности в дизайне Вашего сайта!

- Один из самых популярных на сегодня среди веб разработчиков фреймворк

- Позволяет быстро и легко создать потрясающие веб-приложения

- Удивительно красивые анимационные эффекты

- Улучшение пользовательского интерфейса

Главная / jQuery шпаргалки / Выборка элементов / Выбор элемента по классу

Выбор элемента по классу

  • Задача 1:

    - выбрать элементы на странице, которые имеют класс color и изменить их цвет на #cc0000.

    Показать решение

    • Решение:

      $(function () {
	$('.color').css('color','#cc0000');
});

      Пояснение:

      Для решения задачи с помощью селектора $('.color') выбираем элемент с классом color и с помощью метода jQuery .css(); меняем его цвет. Если элемент является блоком, внутри которого расположены дочерние элементы, содержащие текст, то их содержимое, независимо от уровня вложенности, тоже поменяет цвет. Если в документе встречается несколько элементов с классом color, то их текстовое содержимое так же поменяет цвет.

      Результат:

      При загрузке страницы, к которой подключен скрипт, у элементов с классом color, имеющим текстовое содержание, будет изменен цвет шрифта.

  • Задача 2:

    - выбрать абзацы на странице, которые имеют класс color и изменить их цвет на #cc0000.

    Показать решение

    • Решение:

      $(function () {
	$('p.color').css('color','#cc0000');
});

      Пояснение:

      Для решения задачи с помощью селектора $('p.color') выбираем абзацы с классом color и с помощью метода jQuery .css(); меняем их цвет.

      Результат:

      При загрузке страницы, к которой подключен скрипт, у абзацев с классом color будет изменен цвет шрифта. Если на странице будут присутствовать другие элементы с таким же классом (div, ul, li, span), то цвет шрифта в них не изменится.

  • Задача 3:

    - выбрать все элементы span на странице, которые являются вложенными в элементы с классом color и изменить их цвет на #cc0000.

    Показать решение

    • Решение:

      $(function () {
	$('.color span').css('color','#cc0000');
});

      Пояснение:

      Для решения задачи с помощью селектора $('.color span') выбираем элементы span, которые находятся внутри элементов с классом color и с помощью метода jQuery .css(); меняем их цвет.

      Результат:

      При загрузке страницы, к которой подключен скрипт, у всех элементов span, которые вложены в элементы с классом color будет изменен цвет шрифта (независимо от уровня вложенности).

  • Задача 4:

    - выбрать элементы span на странице, которые являются вложенными в элементы с классом color и элементы div с классом pr - изменить их цвет на #cc0000.

    Показать решение

    • Решение:

      $(function () {
	$('.color span, div.pr').css('color','#cc0000');
});

      Пояснение:

      Для решения задачи с помощью селектора $('.color span, div.pr') выбираем элементы span, которые находятся внутри элементов с классом color и элементы div с классом pr. С помощью метода jQuery .css(); меняем их цвет. Обратите внимание - для div с классом pr указывается не только класс, но и название тега. Требуемые для выборки элементы разделяются запятой.

      Результат:

      При загрузке страницы, к которой подключен скрипт, у всех элементов span, которые вложены в элементы с классом color и у всех элементов div с классом pr будет изменен цвет шрифта (независимо от уровня вложенности).

Автор: Super User