JQuery - Читання та зміна вмісту елемента, ІТ Шеф

Стаття, в якій розглянемо, які jQuery мають методи для читання та зміни вмісту HTML елементів.

У jQuery є три методи, які дозволяють безпосередньо працювати з контентом елемента:

• html – для читання та зміни HTML вмісту елемента;
• text – для читання та зміни текстового вмісту елемента;
• val – для читання та зміни значення елементів форми.

Читання HTML контенту елемента

Наприклад, отримаємо HTML вміст елемента з ідентифікатором (id) contact:

Якщо вибірка містить кілька елементів, цей метод поверне HTML контент лише першого елемента:

Для того, щоб отримати HTML контент усіх знайдених елементів, необхідно скористатися циклом (наприклад, each ):

Зміна HTML контенту елемента

Наприклад, замінимо вміст елемента ul :

Якщо на сторінці буде кілька елементів ul, то цей метод замінить вміст кожного з них.

Якщо необхідно змінити контент тільки в одного елемента на сторінці, то просто це зробити через id .

Використання функції заміни HTML контенту елемента:

Наприклад, змінимо контент елементів (закреслимо старий контент і додамо новий):

Отримання текстового вмісту елемента

У jQuery отримання вмісту елемента як звичайного тексту здійснюється з допомогою методу text . При цьому всі HTML теги, якщо вони є в контенті, будуть вирізані.

Наприклад, отримаємо текстовий вміст елемента p і виведемо його до контенту іншого елемента:

Метод text як і html повертає вміст лише першого елемента вибірки (якщо у ній присутні кілька елементів).

Заміна контенту елемента вказаним текстом

Метод text може використовуватись не тільки для читання, але й для зміни вмісту вказаного елемента. При цьому HTML теги (якщо вони є в тексті) будуть закодовані за допомогою спецсимволів.

Після виконання елемент div з класом info буде мати наступний HTML код:

На екрані цей елемент виглядатиме так:

Якщо у вибірці є кілька елементів, то метод text замінить вміст кожного з них:

Використання як параметр методу text функції (додамо у дужках до вмісту кожного вибраного елемента довжину його текстової інформації):

Видалення вмісту елемента

jQuery для видалення вмісту елемента є метод empty . Цей метод не тільки видаляє елементи, а й інші його дочірні вузли, включаючи текст.

Наприклад, видалимо вміст всіх елементів із класом vote :

Набуття значення елемента форми

У jQuery читання значень елементів input, select і textarea здійснюється за допомогою методу val.

Наприклад, отримаємо значення елемента input :

Метод val , якщо в колекції є кілька елементів, поверне значення лише першого з них.

Для отримання значення вибраного елемента ( select , checkbox або radio кнопок) використовуйте :checked .

Якщо в колекції немає елементів, то метод val повертає значення undefined .

Наприклад, отримаємо значення елемента textarea, що має ім'я description:

Отримаємо значення елемента select :

Якщо елемент select має множинний вибір (атрибут multiple), то метод val поверне як результат масив, що містить значення кожної обраної опції (option). Якщо жодна опція не зазначена, то цей метод поверне яквідповіді порожній масив (до версії jQuery 3 значення null).

Встановлення значення елементу форми

Зміна значення елемента форми в jQuery здійснюється за допомогою методу val.

Наприклад, при натисканні на кнопку встановимо елементу input її текст:

Цей метод встановлює значення всім елементів набору, якого він застосовується.

Наприклад, перетворимо всі літери значення елемента input після втрата фокусу в великі:

Наприклад, змінимо значення елемента select :

Наприклад, надамо значення елементу select з множинним вибором ( multiple ):

Змінимо значення checkbox :

---