SiteIS

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

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

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

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

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

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

  • Задача 1:

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

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

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

      Пояснение:

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

      Результат:

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

  • Задача 2:

    - изменить фоновый цвет на #00cc00 первому элементу span во всех блоках div на странице.

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

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

      Пояснение:

      Для решения задачи с помощью фильтра $('div span::nth-child(1)') обращаемся ко всем первым элементам span, которые вложены в блоки div, и меняем им фоновый цвет. Если первый дочерний элемент в блоке окажется не span, никаких изменений не произойдет. Текстовый узел, находящийся перед искомым элементом и не обернутый ни в какие теги не учитывается.

      Результат:

      При загрузке страницы, у всех первых элементов span в блоках div изменится фоновый цвет.

Автор: Super User