Jquery api manipulation - маніпуляції елементами dom

ПІСЛЯ знайомства з цим розділом документації jQuery Ви зможете з легкістю маніпулювати елементами об'єктної моделі документа. Сьогодні ми навчимося вставляти, обгортати, заміщати, копіювати і видаляти елементи DOM.

.html (): string

Повертає html-вміст вибраного елемента.
Якщо таких елементів декілька, то значення буде взято у першого.

.html (string): jQuery Object

Замінює вміст усіх обраних елементів на string.

.html (jQuery Object | DOM Object): jQuery Object

Переміщує елементи сторінки всередину обраних елементів (їх колишній уміст буде при цьому видалено).
Можна задати DOM-елементом або об'єктом jQuery.

Відкрийте приклад в новому вікні і подивіться вихідний код

.html (function (index, value)): jQuery Object

Замінює вміст обраних елементів на повернене користувальницької функцією значення.
Функція викликається окремо, для кожного з обраних елементів.
Коли Ви телефонуєте їй передаються такі параметри:
index - позиція елемента в наборі,
value - поточний html-вміст. У цьому прикладі клік мишкою на пункті конвертує його HTML-код в текст.

Відкрийте приклад в новому вікні і подивіться вихідний код

У цьому прикладі ми додаємо деякий html-код в кожен елемент div.

Відкрийте приклад в новому вікні і подивіться вихідний код

.text (): string

Повертає текст міститься в обраному елементі.

.text (string): jQuery Object

Замінює весь вміст у вибраних елементів, на текст string.

.text (function (index, value)): jQuery Object

Замінює весь вміст у вибраних елементів на повернутий користувальницької функцією текст.

Якщо ви спробуєте за допомогою методу text () помістити в елемент інші елементи за допомогою html-тексту, то jQuery буде екранувати всі теги.

.append (content)

Додає контент всередину всіх обраних елементів ПІСЛЯ існуючого контенту. Ця операція подібна застосування appendChild.

У цьому прикладі ми додаємо якийсь HTML-код в кінець всіх параграфів.

Відкрийте приклад в новому вікні і подивіться вихідний код

.appendTo (content)

Додає всі вибрані елементи в інший набір елементів ПІСЛЯ існуючого контенту.

Ця операція протилежна використання виразу $ (A) .append (B). яке додає B в A.
Тут же A буде додано в B.
Просто порівняйте з прикладом append ().

Відкрийте приклад в новому вікні і подивіться вихідний код

.prepend (content)

Додає контент всередину всіх обраних елементів ДО існуючого контенту.
Це найкраще рішення, щоб вставляти елементи в самий початок.

У цьому прикладі ми додаємо якийсь HTML-код в початок всіх параграфів.

Відкрийте приклад в новому вікні і подивіться вихідний код

.prependTo (content)

Додає всі вибрані елементи в інший набір елементів ДО існуючого контенту.

Ця операція протилежна використання виразу $ (A) .prepend (B). яке додає B в A. Тут же A буде додано в B.
Просто порівняйте з прикладом prepend ().

Відкрийте приклад в новому вікні і подивіться вихідний код

.after (content)

Вставляє контентПОСЛЕ кожного обраного елемента.

У прикладі вставляємо деякий HTML-код ПІСЛЯ всіх параграфів.

Відкрийте приклад в новому вікні і подивіться вихідний код

.insertAfter (content)

Вставляє всі вибрані елементиПОСЛЕ інших, визначених у insertAfter.
Ця операція протилежна використання виразу $ (A) .after (B). де B вставляється після A.
Тут же А вставляється після В.
Просто порівняйте з прикладом after ().

Відкрийте приклад в новому вікні і подивіться вихідний код

.before (content)

Вставляє контентПЕРЕД кожним обраним елементом.

У прикладі вставляємо деякий HTML-код ПЕРЕД усіма параграфами.

Відкрийте приклад в новому вікні і подивіться вихідний код

.insertBefore (content)

Вставляє всі вибрані елементиПЕРЕД іншими, визначеними в insertBefore.
Ця операція протилежна використання виразу $ (A) .before (B). де B вставляється після A.
Тут же А вставляється після В.
Просто порівняйте з прикладом before ().

У цьому прикладі ми вставляємо всі параграфи ПЕРЕД елементом, який має атрибут id "foo". Теж саме можна було б зробити, написавши: $ ( "# foo"). Before ( "p")

Відкрийте приклад в новому вікні і подивіться вихідний код

.wrap (html | DOM element | jQuery element)

Обертає кожен елемент набору в елемент-обгортку.
Це може бути корисно при ін'єкції додаткової структури в документ, без порушення оригінального семантичного якості документа.

У цьому прикладі обертаємо новий елемент div навколо кожного параграфа. Як аргумент виступає HTML-код.

Відкрийте приклад в новому вікні і подивіться вихідний код

.wrapAll (html | DOM element | jQuery element)

Обертає всі елементи набору в єдиний елемент-обгортку.
Це може бути корисно при ін'єкції додаткової структури в документ, без порушення оригінального семантичного якості документа.

У цьому прикладі обертаємо новий елемент div навколо всіх параграфів. Як аргумент виступає HTML-код.

Відкрийте приклад в новому вікні і подивіться вихідний код

.wrapInner (html | DOM element | jQuery element)

Обгортає внутрішній вміст кожного елемента набору (включаючи текстові вузли) в HTML структуру.
Це може бути корисно при ін'єкції додаткової структури в документ, без порушення оригінального семантичного якості документа.

У цьому прикладі ми обираємо все параграфи й обертаються в тег b їх внутрішній вміст. Як аргумент виступає HTML-код.

Відкрийте приклад в новому вікні і подивіться вихідний код

.replaceWith (content)

Заміщає всі елементи набору HTML або DOM елементами.

У цьому прикладі при натисканні на кнопці вона заміщується елементом div з таким же текстом, який був на кнопці.

Відкрийте приклад в новому вікні і подивіться вихідний код

.replaceAll (selector)

Заміщає всі елементи, певні в селекторі, зазначеним (и) елементами.
Ця функція доповнює replaceWith (). яка вирішує ту ж задачу, тільки навпаки.

У цьому прикладі ми заміняємо все параграфи текстом, укладеними в теги b.

Відкрийте приклад в новому вікні і подивіться вихідний код

Видаляє всі вузли-нащадки (включаючи текстові вузли) з набору елементів.
Також видаляє всі обробники подій і внутрішні кешированниє дані.

У цьому прикладі при натисканні на кнопці видаляємо всі вузли-нащадки з усіх параграфів.

Відкрийте приклад в новому вікні і подивіться вихідний код

.remove (expr)

Видаляє всі вибрані елементи з DOM.
Однак при цьому вони не будуть видалені з об'єкта jQuery, що дозволяє використовувати їх в майбутньому.

Опціонально може бути використано фільтруюче вираз expr.

У цьому прикладі при натисканні на кнопці ми видаляємо всі параграфи з DOM.

Відкрийте приклад в новому вікні і подивіться вихідний код

Видаляє батьківські елементи у вибраних елементів, при цьому, їх вміст залишиться на своїх місцях. Розглянемо сторінку, яка містить наступний текст: після застосування функції сторінка стане такою:

.clone ([withDataAndEvents]): jQuery object

withDataAndEvents - визначає, чи потрібно копіювати дані і обробники подій, встановлені на копіюються елементах. За замовчуванням, цей параметр дорівнює false.

У цьому прикладі ми клонуємо всі елементи b (і вибираємо клоновані) і вставляємо їх перед параграфами.

Відкрийте приклад в новому вікні і подивіться вихідний код

У цьому прикладі ми створюємо кнопку, яка може клонувати сама себе і мати клонів, також здатних себе ж клонувати. Гм, спробуйте краще натискати цю кнопку.

Відкрийте приклад в новому вікні і подивіться вихідний код

.add (selector)

Додає задані елементи в уже існуючий набір елементів.

Додаються елементи шукаються на сторінці за допомогою заданого селектора selector.

.add (elements)

Додаються елементи задаються одним або декількома (масивом) DOM-елементами.

.add (html)

Додаються елементи задаються html-текстом.

add (selector, context)

Додаються елементи шукаються на сторінці за допомогою заданого селектора selector, всередині області, заданої параметром context.
Область пошуку може бути задана DOM-елементом, jQuery-об'єктом або об'єктом документа.

.contents ()

Повертає всі дочірні елементи вибраних елементів, а так же текстовий вміст.

На відміну від схожого методу .children (). в цьому методі, в результат будуть включені блоки тексту, що лежать безпосередньо всередині обраних елементів.

Наприклад, для сторінки, що містить наступний html-текст ці два методи повернуть різний результат:

Повертає попередній набір елементів в поточній ланцюжку методів.

Приклад: А ось як це може бути використано: