Доступ до елементів контенту за допомогою jQuery
У цьому уроці розбираються 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() декодував символ '>' як '>' .
Робота із значеннями полів форми: val()
Розглянемо тепер метод val(). Він працює як метод text() , але використовується для читання та зміни значень полів форми, а не текстового вмісту елементів.
Приклад, який демонструє читання і запис значень полів форми за допомогою методу val() :
Код спочатку виводить вікно повідомлення, в якому відображаються значення за промовчанням полів форми: списку, текстового поля введення та групи кнопок вибору:
Потім код змінює вибраний продукт на MegaWidget, кількість на 4, а експрес-доставку на ні.
У наведеному вище прикладі кнопка вибору #expressNo відзначається за допомогою виклику методу attr() для встановлення атрибута кнопкиchecked , оскільки метод val() неспроможна змінити стан кнопки вибору чи чекбокса.
При використанні методу val() слід пам'ятати наступне:
У цьому уроці було розглянуто три методи jQuery для маніпулювання вмісту HTML елементів:
Цей урок підготовлений для вас командою сайту ruseller.com Джерело уроку: www.elated.com/articles/jquery-accessing-element-content/ Переклав: Сергій Фастунов Урок створений: 4 Серпня 2010 Переглядів: 77748 Правила передруку
5 останніх уроків рубрики "jQuery"
Анімація набір тексту на jQuery
Сьогодні ми хотіли б вам розповісти про бібліотеку TypeIt — безкоштовний jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна досягти дуже реалістичного ефекту.
Тимчасова шкала на jQuery
jQuery плагін для створення тимчасової шкали.
Малюємо діаграму Ганта
jQuery плагін для створення діаграми Ганта.
AJAX та PHP: завантаження файлу
Приклад того, як здійснити завантаження файлу через PHP і jQuery ajax.