SiteIS

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

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

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

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

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

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

  • Задача 1:

    - изменить цвет шрифта на #00cc00 всем четным элементам li в списке.

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

      $(function () {
      	$('ul li:nth-child(2n)').css('color', '#00cc00');
      });
      

      Пояснение:

      Для решения задачи с помощью фильтра $('ul li:nth-child(2n)') обращаемся ко всем четным элементам списка и меняем цвет. Отсчет элементов начинается с 1.

      Результат:

      При загрузке страницы, у всех четных элементов li (2, 4, 6 ... и т.д.) в списке изменится цвет шрифта.

  • Задача 2:

    - изменить цвет шрифта на #00cc00 всем нечетным элементам li в списке.

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

      $(function () {
      	$('div span::nth-child(2n+1)').css('background', '#00cc00');
      });
      

      Пояснение:

      Для решения задачи с помощью фильтра $('ul li:nth-child(2n+1)') обращаемся ко всем нечетным элементам списка и меняем цвет. Отсчет элементов начинается с 1.

      Результат:

      При загрузке страницы, у всех нечетных элементов li (1, 3, 5 ... и т.д.) в списке изменится цвет шрифта.

  • Задача 3:

    - изменить цвет шрифта на #00cc00 всем нечетным элементам li в списке начиная с третьего.

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

      $(function () {
      	$('div span::nth-child(2n+3)').css('background', '#00cc00');
      });
      

      Пояснение:

      Для решения задачи с помощью фильтра $('ul li:nth-child(2n+3)') обращаемся ко всем нечетным элементам списка начиная с третьего и меняем цвет. Отсчет элементов начинается с 1. В параметре фильтра после плюса указывается индекс элемента с которого начинается отсчет.

      Результат:

      При загрузке страницы, у всех нечетных элементов li начиная с третьего (3, 5 ... и т.д.) в списке изменится цвет шрифта.

Автор: Super User