Получение данных из тегов c помощью jQuery

Как получить содержимое тегов и атрибутов с помощью методов jQuery.

1

.html()

Получает HTML-содержимое.

<div class="box">
	<p>Item 1</p>
	<p>Item 2</p>
	<p>Item 3</p>
</div>
HTML
$('.box').html();
JS

Результат:

<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
2

.text()

Получает текстовое содержимое.

<div class="box">
	<p>Item 1</p>
	<p>Item 2</p>
	<p>Item 3</p>
</div>
HTML
$('.box').text();
JS

Результат:

Item 1
Item 2
Item 3
3

.attr()

Получает значение любого атрибута.

<a class="btn" href="http://site.ru">Link</a>
HTML
$('.btn').attr('href');
JS

Результат:

http://site.ru
4

.val()

Получает значение атрибута value="..." у полей форм.

<input class="field" type="text" name="email" value="mail@site.ru">
HTML
$('.field').val();
JS

Результат:

mail@site.ru
5

.data()

.data("name") – получает значение data-name="...", краткая форма .attr('data-name').

<input class="field" type="text" name="email" value="mail@site.ru" data-name="123">
HTML
$('.field').data('name');
JS

Результат:

123
6

.css()

.css('название_свойства') – получает конечное значение CSS-свойства.

<div class="text" style="color: orange;">Text</div>

<style>
.text {
	font-size: 20px;
	boreder: 1px silid #000;
}
</style>
HTML
$('.text').css('font-size');
$('.text').css('color');
$('.text').css('boreder');
JS

Результат:

20px
orange
1px silid #000
19.08.2019, обновлено 27.08.2019 106

Поделится

Темы

CSS HTML jQuery

Другие публикации

С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf - это конвертер HTML в PDF который...
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
В статье приведен пример формы и php скрипта для безопасной загрузки файлов на сервер, метод отправки файлов через...
Обойти ячейки таблицы можно с помощью jQuery метода each, например следующий код выводит текст из всех ячеек в консоль.