Новичок
11 уроков
(2 часа 6 минут)
Курс
Основы jQuery
Данный видеокурс познакомит вас с основами популярной библиотеки jQuery.

#2 — Перемещение по DOM.

На прошлом уроке вы узнали, что такое DOM. А на этом занятии вам будет рассказано, как
осуществляется перемещение по DOM, с помощью каких механизмов это делается.

Основные механизмы передвижения по DOM-дереву, по его веткам — это в jQuery селекторы.
Селекторы у многих ассоциируются с CSS, но и работа библиотеки jQuery построена на них.
На уроке будет рассмотрено, какие есть в jQuery функции, позволяющие выбирать нужные
элементы из DOM.

Внимательно просмотрев и тщательно изучив весь материал урока, вы станете общаться на «ты»
с большинством функций jQuery, вам не составит никакого труда найти и извлечь любой, даже
самый отдаленный элемент DOM-дерева.

Приятного всем просмотра! Учитесь с удовольствием!

Функции jQuery, рассматриваемые в данном уроке:

Для перемещения между уровнями
  • parent([selector]) — ближайший предок узла;
  • parents([selector]) — массив всех предков узла, начиная от ближайшего;
  • parentsUntil([selector]) — массив предков узла, начиная от ближайшего, до элемента, подходящего под селектор, без включения его в массив;
  • offsetParent() — возвращает ближайшего позиционированного предка (предка с position равной absolute, или fixed, или relative);
  • closest(selector) — начнет поиск с себя, а дальше предка за предком, пока не найдет, удовлетворяющий селектору элемент, который и вернет;
  • children([selector]) — массив ближайших детей элемента;
  • contents() — вернёт все дочерние элементы текущего, включая текстовые, а также произведёт поиск в содержимом фрейма;
  • find(selector) — вернёт все дочерние элементы текущего, удовлетворяющие селектору;
Для перемещения внутри одного уровня
  • prev([selector]) — переход на элемент, стоящий перед текущим в данном уровне. Если элемент стоит в уровне первым, то на выходе будет пустой массив.
  • prevAll([selector]) — массив всех элементов, стоящих перед текущим в данном уровне.
  • prevUntil([selector]) — массив элементов, стоящих перед текущим в данном уровне, до элемента, подходящего под селектор, без включения его в массив.
  • next([selector]) — переход на элемент, следующий за текущим в данном уровне. Если элемент стоит в уровне первым, то на выходе будет пустой массив.
  • nextAll([selector]) — массив всех элементов, следующий за текущим в данном уровне.
  • nextUntil([selector]) — массив элементов, следующий за текущим в данном уровне, до элемента, подходящего под селектор, без включения его в массив.
  • siblings([selector]) — массив всех элементов-соседей текущего элемента в данном уровне.
Для фильтрации выборки
  • first() — вернет первый элемент выборки;
  • last() — вернет последний элемент выборки;
  • eq(N) — вернет N-ный элемент выборки (помним, что нумерация в массивах начинается с 0);
  • not(selector) — вернет только те элементы выборки, которые не удовлетворяют селектору;

Везде, где на входе функции указан [selector], там он не обязателен к использованию, но в случае его указания, будет возвращен элемент(ы), подходящий(ие) под данный селектор, из множества, полученного от запуска функции без селектора. Т.е. в нашем примере, вызвав $(‘#var2’).parent(‘div’), мы получим пустой массив, так как $(‘#var2’).parent() вернет массив из одного элемента ul, в котором будет осуществляться поиск элемента, подходящего под селектор.

Материалы к уроку:
Делись:

Оставь комментарий!

2 thoughts on “#2 — Перемещение по DOM.

  1. Smor Smorodsky:

    Спасибо за курс!
    Но звук((

  2. Tyler Touch:

    Как по мне звук ок

Добавить комментарий

Рекомендуемые курсы