Як змінити вміст елементів в jQuery
У цьому уроці ми спробуємо свої сили в зміні вмісту елементів в jQuery.
Отже, найбільш часто респонденти користуються послугами операцією є зміна вмісту елементів. Поза бібліотеки jQuery для цієї мети використовується властивість innerHTML об'єкта document. Наприклад, щоб вставити новий фрагмент в елемент з ідентифікатором divl, можна скористатися наступним кодом.
Бібліотека jQuery також дозволяє використовувати цю властивість. Для цього знаходимо елемент за допомогою функції $ (), а потім перетворимо колекцію елементів jQuery в набір DOM-елементів.
Для цієї мети можна також скористатися методом get ().
У бібліотеці jQuery для зміни вмісту елементів призначені наступні методи.
- text ([3наченіе]) - дозволяє отримати або задати текст елемента. Якщо параметр не вказано, то метод повертає текстове значення без тегів. При наявності декількох елементів в колекції будуть повернуті всі значення у вигляді рядка. Якщо необхідно отримати значення тільки першого елемента з колекції, то можна скористатися методом eq ().
Можна також обмежити набір за допомогою селектора:
При вказівці рядки в якості параметра вона замінить вміст всіх елементів колекції. У разі наявності в рядку спеціальних символів вони будуть замінені на HTML-еквіваленти.
У цьому прикладі рядок в початковому HTML-коді буде виглядати наступним чином.
- html ([3наченіе]) - дозволяє отримати або задати HTML-код елемента. Якщо параметр не вказано, то метод повертає значення разом з тегами. При наявності декількох елементів в колекції буде повернуто значення тільки першого елемента.
При вказівці HTML-коду в якості параметра він замінить вміст всіх елементів колекції, і об'єктна модель документа буде оновлена. Виведемо HTML-код у всіх тегах div.
Якщо необхідно змінити значення тільки першого елемента з колекції, то можна скористатися методом eq () або селектором. first.
- append (Вираз) - додає Вираз в кінець вмісту обраного елемента. Як параметр може бути вказаний HTML-код, DOM-елемент або колекція елементів jQuery. Для прикладу додамо HTML-код в кінець елемента.
Результат буде виглядати наступним чином.
Тепер додамо DOM-елемент.
- prepend (Вираз) - додає Вираз в початок вмісту обраного елемента. Як параметр може бути вказаний HTML-код, DOM-елемент або колекція елементів jQuery. Метод повністю ідентичний методу appendO, за винятком того, що додає Вираз не в кінець елемента, а в його початок. Для прикладу додамо HTML-код в початок елемента.
- appendTo (Селектор) - додає колекцію елементів jQuery в кінець всіх елементів, відповідних вказаним селектору. Для прикладу додамо HTML-код в кінець елемента з ідентифікатором divl.
Як видно з прикладу, ми поміняли параметри місцями і використовували метод append () замість методу appendTo ().
- prependTo (Селектор) - додає колекцію елементів jQuery в початок всіх елементів, відповідних вказаним селектору. Для прикладу додамо HTML-код в початок елемента з ідентифікатором divl.
Як додати вміст перед елементом або після нього
У попередньому розділі ми розглянули зміна внутрішнього вмісту елемента. Бібліотека jQuery надає також методи, які дозволяють додати якесь вміст перед елементом або після нього. Розглянемо ці методи.
- aftег (Вираз) - додає Вираз після всіх елементів колекції. Як параметр може бути вказаний HTML-код, DOM-елемент або колекція елементів jQuery. Для прикладу додамо HTML-код після елемента.
А тепер додамо створений елемент колекції jQuery. $ ( "# Divl"). After ($ ( "новий текст"));
- before (Вираз) - додає Вираз перед усіма елементами колекції. Як параметр може бути вказаний HTML-код, DOM-елемент або колекція елементів jQuery. Метод повністю ідентичний методу after (), за винятком того, що додає вираження не після елемента, а перед ним. Для прикладу додамо HTML-код перед елементом.
Результат буде виглядати наступним чином.
новий текст
КОРИСНО Висновок опису (alt) під фото
- insertAfter (Селектор) - додає колекцію елементів jQuery після всіх елементів, відповідних вказаним селектору. Для прикладу додамо HTML-код після елемента з ідентифікатором divl.
Результат буде таким же, як і при використанні методу after ().
$ ( "# Divl"). After ( "новий текст");
- insertBefore (Селектор) - додає колекцію елементів jQuery перед усіма елементами, відповідними вказаним селектору. Для прикладу додамо HTML-код перед елементом з ідентифікатором divl.
Результат буде таким же, як і при використанні методу before ().
$ ( "# Divl"). Before ( "новий текст");
Всі елементи колекції можна розмістити в будь-якому іншому елементі. Для вкладення елементів призначені наступні методи.
- wraplnner (HTML-елемент або BОМ-елемент) -вкладивает внутрішній вміст кожного елемента колекції в інший елемент. Для прикладу виділимо вміст всіх тегів div.
Такого ж ефекту можна досягти, передавши як параметр DOM-елемент.
Можна також передати елемент, створений за допомогою функції $ ().
- wrap (HTML-елемент або BОМ-елемент)-повністю вкладає кожен елемент колекції в інший елемент.
Результат виконання такий:
- wrapAll (HTML-елемент або ВВП-елемент) - збирає всі елементи колекції в одному місці і вкладає їх в інший елемент.
Результат буде виглядати наступним чином.
Якийсь текст 1
Як видно з прикладу, всі елементи колекції були розміщені після першого елемента і розташовані всередині тега u.
Переміщення і клонування елементів
Якщо в якості параметра методів before (), prepend (), append () і after () вказати колекцію існуючих елементів jQuery, то вони будуть переміщені. Куди будуть вставлені елементи, залежить від конкретного методу: before () (перед елементом), ргеpend () (на початок вмісту), append () (в кінець вмісту), after () (після елемента). Для прикладу знайдемо всі посилання на сторінці і додамо їх в кінець елемента.
В результаті всі посилання будуть переміщені в кінець вмісту елемента з ідентифікатором divl, і ми отримаємо наступний HTML-код.
Такого ж ефекту можна досягти за допомогою методів insertBefore (), prependTo (), appendTo () і insertAfter (). Куди будуть вставлені елементи, залежить від конкретного методу: insertBefore О (перед елементом), prependTo () (на початок вмісту), appendTo () (в кінець вмісту), insertAfter () (після елемента). Для прикладу знайдемо всі посилання на сторінці і додамо їх перед елементом.
В результаті всі посилання будуть розміщені безпосередньо перед елементом з ідентифікатором divl, і ми отримаємо наступний HTML-код.
Бібліотека jQuery дозволяє створювати копії існуючих елементів (клонувати). Для цього призначений метод clone ([true]). Якщо в якості параметра вказано значення true, то будуть також клоновані і обробники подій. Створимо копію першої посилання в документі, а потім виведемо її після елемента з ідентифікатором divl. $ ( "А"). Eq (0) .clone (). InsertAfter ( "# divl");
Результат буде виглядати наступним чином.
Очищення вмісту і видалення елемента
Щоб назавжди видалити вміст і видалення елемента застосовуються такі методи.
- empty () - видаляє всі піделементи поточного елемента.
Як видно з прикладу, якщо Ви видалили вміст елемента з ідентифікатором divl сам елемент все ще залишається доступним для маніпуляцій.
- remove ([Селектор]) - повністю видаляє елементи з об'єктної моделі документа.
Даний приклад демонструє відсутність елемента після клацання на кнопці Видалити. Клацнувши на кнопці Кількість елементів в перший раз, ми отримаємо число 1, а якщо клацнути на ній після видалення елемента, то отримаємо число 0.
КОРИСНО Magnific Popup
Якщо колекція складається більш, ніж з одного елемента, то будуть видалені всі елементи. Метод remove () дозволяє задати додаткову умову, якому повинні відповідати видаляються елементи. Як приклад видалимо всі посилання з розширенням. php.
Зміна вмісту елементів
Отримувати колекцію елементів, а також доступ до окремого її елементу ми вже навчилися. Тепер розглянемо різні методи, що дозволяють змінювати властивості і значення елементів колекції. Деякі методи ми вже використовували в наших прикладах для виведення результату або зміни властивостей елементів.
Найбільш часто респонденти користуються послугами операцією є зміна вмісту елементів. Поза бібліотеки jQuery для цієї мети використовується властивість innerHTML об'єкта document. Наприклад, щоб вставити новий фрагмент в елемент з ідентифікатором divl, можна скористатися наступним кодом.
Бібліотека jQuery також дозволяє використовувати цю властивість. Для цього знаходимо елемент за допомогою функції $ (), а потім перетворимо колекцію елементів jQuery в набір DOM-елементів.
Для цієї мети можна також скористатися методом get ().
У бібліотеці jQuery для зміни вмісту елементів призначені наступні методи.
- text ([3наченіе]) - дозволяє отримати або задати текст елемента. Якщо параметр не вказано, то метод повертає текстове значення без тегів. При наявності декількох елементів в колекції будуть повернуті всі значення у вигляді рядка. Якщо необхідно отримати значення тільки першого елемента з колекції, то можна скористатися методом eq ().
Можна також обмежити набір за допомогою селектора:
При вказівці рядки в якості параметра вона замінить вміст всіх елементів колекції. У разі наявності в рядку спеціальних символів вони будуть замінені на HTML-еквіваленти.
У цьому прикладі рядок в початковому HTML-коді буде виглядати наступним чином.
- html ([3наченіе]) - дозволяє отримати або задати HTML-код елемента. Якщо параметр не вказано, то метод повертає значення разом з тегами. При наявності декількох елементів в колекції буде повернуто значення тільки першого елемента.
При вказівці HTML-коду в якості параметра він замінить вміст всіх елементів колекції, і об'єктна модель документа буде оновлена. Виведемо HTML-код у всіх тегах div.
Якщо необхідно змінити значення тільки першого елемента з колекції, то можна скористатися методом eq () або селектором. first.
- append (Вираз) - додає Вираз в кінець вмісту обраного елемента. Як параметр може бути вказаний HTML-код, DOM-елемент або колекція елементів jQuery. Для прикладу додамо HTML-код в кінець елемента.
Результат буде виглядати наступним чином.
Тепер додамо DOM-елемент.
- prepend (Вираз) - додає Вираз в початок вмісту обраного елемента. Як параметр може бути вказаний HTML-код, DOM-елемент або колекція елементів jQuery. Метод повністю ідентичний методу append (), за винятком того, що додає Вираз не в кінець елемента, а в його початок. Для прикладу додамо HTML-код в початок елемента.
Результат буде виглядати наступним чином.
текст
- appendTo (Селектор) - додає колекцію елементів jQuery в кінець всіх елементів, відповідних вказаним селектору. Для прикладу додамо HTML-код в кінець елемента з ідентифікатором divl.
Результат буде таким же, як і при використанні методу append ().
$ ( "# Divl"). Append ( "новий текст");
Як видно з прикладу, ми поміняли параметри місцями і використовували метод append () замість методу appendTo ().
- prependTo (Селектор) - додає колекцію елементів jQuery в початок всіх елементів, відповідних вказаним селектору. Для прикладу додамо HTML-код в початок елемента з ідентифікатором divl.
Результат буде таким же, як і при використанні методу prepend ().
$ ( "# Divl"). Prepend ( "новий текст");
Скрипт обгортання зображень в теги + виняток інших класів + видалення деяких атрибутів