Достъп до елементи на съдържание с 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 select е маркиран чрез извикване на метода attr() за задаване на атрибута на бутонаотметнато, тъй като методът 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.