Выборка всех элементов

Задача 1:

- отобрать все элементы на странице и посчитать их количество, результат вывести на экран.

• Решение:

  $(function () {
  	alert ($('*').length);
  });
  

  Пояснение:

  Для решения задачи с помощью селектора $('*') заносим в массив все элементы страницы (включая html, head, body и все, что в них находится) и с помощью метода length просчитываем их. Результат выводим в модальном окне с помощью команды alert.

  Результат:

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

Задача 2:

- отобрать все элементы на странице, которые расположены в body и посчитать их количество, результат вывести на экран.

• Решение:

  $(function () {
  	alert ($('*', document.body).length);
  });
  

  Пояснение:

  Для решения задачи с помощью селектора $('*', document.body) обращаемся ко всем элементам, расположенным в body и с помощью метода length просчитываем их количество (сам элемент body не учитывается).

  Результат:

  При загрузке страницы, к которой подключен скрипт, на экране появится модальное окно с цифрой, соответствующей количеству всех элементов этой страницы, которые являются потомками body.

Задача 3:

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

• Решение:

  $(function () {
  	$('*.pr').css('background','#cc0000');
  });
  

  Пояснение:

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

  Результат:

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

Задача 4:

- отобрать все элементы на странице, которые принадлежат блоку с классом wrap и обвести их сплошной однопиксельной рамкой черного цвета.

• Решение:

  $(function () {
  	$('div.wrap*').css('border','1px solid #000000');
  });
  

  Пояснение:

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

  Результат:

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