В даному уроці розбираються 3 методу jQuery, які розроблені для роботи безпосередньо з вмістом елементів:
- html () для читання і зміни HTML коду елемента
- text () для читання і зміни текстового вмісту елемента
- val () для читання і зміни значень полів форми
Працює з HTML кодом: html ()
Читаємо HTML код елемента
Щоб прочитати HTML код елемента, спочатку виберіть елемент як об'єкт jQuery, потім викличте метод html () для об'єкта. Наприклад, в наступному коді вибирається елемент p (параграф) на сторінці, потім викликається метод html () для виведення HTML змісту елемента:
Код виводить вікно повідомлення, в якому виводиться рядок HTML коду елемента:
Заміна HTML змісту елемента
Ви можете замінити HTML розмітку новим рядком з кодом HTML. У прикладі проводиться заміна параграфа всередині елемента div на новий заголовок і параграф:
Якщо викликати метод html (newHTML) для набору декількох виділених елементів, вміст кожного елемента буде замінено рядком newHTML.
Використання функції для заміни HTML змісту елемента
Замість передачі замісної рядки методу html (). ви можете передати поворотну функцію. Функція повинна приймати 2 аргументи:
Значення, що повертається використовується для заміни HTML.
Виконання коду призведе до наступного висновку:
- Коли відбувається читання вмісту елемента за допомогою методу text (). всі HTML теги відокремлюються від тексту.
- Коли метод text () використовується для заміни змісту елемента, будь-які HTML теги в замісної рядку декодируются таким чином, що вони відображаються на сторінці.
читання текстового вмісту
Код прикладу виведе вікно повідомлення. Теги і будуть виключені з тексту:
Замінюємо текст змісту елемента
Метод text () працює як і метод html (). коли потрібно замінити вміст контенту. Різниця полягає в тому, що будь-які HTML теги будуть декодувати для відображення на сторінці, а не для формування елементів.
Приклад скрипта, який заснований на прикладі використання методу html (). для заміни змісту параграфа іншим текстом:
І ось що буде виведено на екран. Теги
.
і будуть просто відображені як текст, замість того, щоб сформувати заголовок, параграф і посилання:
Використання функції для заміни тексту
Так само як і в методі html (). ви можете використовувати функцію з методом text () якщо потрібно замінити контент на основі його положення або вмісту. Нижче наведено приклад "нумерованих заголовків", в якому використовується метод text () замість методу html () і використовується символ '>' як сепаратора замість точки:
Результат роботи коду буде виглядати наступним чином:
Якщо ви виконаєте вище наведений код і подивіться на джерело HTML коду, ви побачите, що метод text () декодувати символ '>' як 'gt;'.
Робота зі значеннями полів форми: val ()
Розглянемо тепер метод val (). Він працює як метод text (). але використовується для читання і зміни значень полів форми, а не текстового вмісту елементів.
Приклад, який демонструє і читання і запис значень полів форми за допомогою методу val ().
Код спочатку виводить вікно повідомлення, в якому відображаються значення за замовчуванням полів форми. списку, текстового поля введення і групи кнопок вибору:
Потім код змінює обраний продукт на "MegaWidget", кількість на 4, а експрес-доставку на "ні".
У вище наведеному прикладі кнопка вибору #expressNo відзначається за допомогою виклику методу attr () для установки атрибута кнопки checked. так як метод val () не може змінити стан кнопки вибору або чекбокса.
При використанні методу val () потрібно пам'ятати про наступне:
В даному уроці були розглянуті три методи jQuery для маніпулювання вміст HTML елементів:
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!