Работа с DOM в jQuery

Работа с DOM в jQuery

Содержание урока

  1. Что такое DOM.
  2. Организация работы с DOM в jQuery.
  3. Функции для фильтрации набора элементов.
  4. Функция .eq(index) и ее применение.
  5. Функция .not(selector) и ее применение.
  6. Функция .filter(function) и ее применение.
  7. Функция .is(bool) и ее применение.
  8. Функция .slice(start, stop) и ее применение.
  9. Функции для перемещения по DOM-дереву.
  10. Функция .add(selector) и ее применение.
  11. Функция .find(selector) и ее применение.
  12. Функция .contents() и ее применение.
  13. Функция .children(selector) и ее применение.
  14. Функция. sibling() и ее применение.
  15. Функция .end() и ее применение.
  16. Функция .andSelf() и ее применение.
  17. Функция .parent(selector) и ее применение.
  18. Функция .parents(selector) и ее применение.
  19. Функция .closest() и ее применение.
  20. Функция .next() и ее применение.
  21. Функция. nextAll() и ее применение.
  22. Функция .nextUntil() и ее применение.
  23. Функция .prev() и ее применение.
  24. Функция. prevAlll() и ее применение.
  25. Функция .prevUntil() и ее применение.
  26. Функция .offsetParent() и ее применение.
  27. Функции для вставки новых элементов.
  28. Функция html() и ее применение.
  29. Функция text() и ее применение.
  30. Функция append() и ее применение.
  31. Функция prepend() и ее применение.
  32. Функция wrap() и ее применение.

Резюме

  • HTML-документы имеют иерархическую структуру, представленную в виде DOM-дерева. Узлы дерева представляют различные типы содержимого документа.
  • В первую очередь, древовидное представление HTML-документа содержит узлы, представляющие элементы или теги, такие как и и узлы, представляющие строки текста.
  • HTML-документ также может содержать узлы, представляющие комментарии HTML.
  • .eq(index) — Сокращает число совпавших элементов до одного. Аргументом является позиция элемента в наборе совпавших элементов, начинается с 0 и продолжается до length-1. Указание некорректного индекса влечет за собой возвращение пустого набора элементов, а не нуля, поскольку запрос отфильтровывает все элементы, не соответствующие указанному индексу.
  • .not(выражение) — Удаляет элементы, соответствующие указанному выражению, из набора совпавших элементов. Выражение может быть как отдельным селектором, так и сложной селекторной конструкцией.
  • .filter(выражение) — Удаляет все элементы, которые не соответствуют указанному выражению, из набора совпавших элементов.
  • .slice(start, stop) — Выделяет подмножество из набора совпавших элементов. Ведет себя точно также как и встроенный метод разделения массивов. (допускаются отрицательные значения). Не включая последний индекс, но включая первый.
  • .add(выражение) — добавляет в уже существующий набор дополнительные элементы, которые удовлетворяют указанному выражению.
  • .find(выражение) — Отыскивает дочерние элементы, которые удовлетворяют указанному выражению.
  • .children(выражение) — Получает набор элементов, содержащий всех непосредственных уникальных потомков для каждого совпавшего элемента.
  • .contents(выражение) — Поиск всех дочерних узлов в наборе совпавших элементов (включая текстовые) или в содержимом документа, если он является фреймом.
  • .parent(выражение) — Получает прямого “родителя” элемента. Если вызывается для набора элементов, то функция возвращает набор их прямых родительских объектов.
  • .parents(выражение) — Получает набор элементов, содержащий уникальных «родителей» для совпавших элементов (кроме корневого элемента).
  • .closest(выражение) — Получает набор, содержащий ближайшие родительские элементы, которые удовлетворяют указанному селектору, включая начальный элемент.
  • .next() — Получает набор элементов, содержащий уникальные последующие родственные элементы для всех элементов существующего набора.
  • .nextAll() – Отыскивает все родственные элементы после текущего элемента. Также можно использовать выражение, чтобы дополнительно отфильтровать набор элементов.
  • .nextUntil() – Получает всех последующих братьев каждого элемента до, но не включая элемент, соответствующий переданному селектору, узлу DOM или объекту jQuery.
  • .prev() — Получает набор элементов, содержащий уникальные предыдущие родственные элементы для всех элементов существующего набора.
  • .prevAll() – Отыскивает все родственные элементы перед текущего элемента. Также можно использовать выражение, чтобы дополнительно отфильтровать набор элементов.
  • .prevUntil() – Получает всех предыдущих братьев каждого элемента до, но не включая элемент, соответствующий переданному селектору, узлу DOM или объекту jQuery.
  • .offsetParent() — Возвращает коллекцию jQuery c “родителем” по позиционированию” первого совпавшего элемента.
  • .siblings() — Получает все родственные элементы.
  • .andSelf() — Добавляет предыдущий набор элементов к текущему набору.
  • .end() — Отменяет последний фильтр, возвращая тем самым набор элементов к его предыдущему состоянию (до фильтрации).
  • .html() — Получает HTML-содержимое первого элемента в наборе соответствующих элементов или устанавливает HTML-разметку для каждого совпавшего элемента.
  • .text() — Получает содержимое текста каждого элемента в наборе соответствующих элементов, в том числе их потомков, или устанавливает текстовое содержимое элементов набора.
  • .append() — Добавляет контент внутрь каждого элемента набора. Добавляемый контент следует за уже существующим. Данный метод подобен применению appendChild.
  • .prepend() — Добавляет контент внутрь каждого элемента набора. Добавляемый контент следует перед уже существующим.
  • .wrap() — Вставляет каждый совпавший элемент набора в указанную конструкцию HTML кода. Этот процесс наиболее полезен для встраивания дополнительной структуры в документ без необходимости разрушения его первоначальных семантических свойств.

Контрольные вопросы

  1. Что такое DOM?
  2. Как применяется функция .slice()?
  3. Как применяется функция .children()?
  4. Назовите отличия функций .parent() , .parents() и .closest()?
  5. Опишите работу функции prevUntil()?
  6. При помощи какой функции можно добавить к существующему набору еще элемент?