Работа с HTML, текстом и атрибутом value в jQuery
Статья, в которой рассмотрим, какие в jQuery есть методы для чтения и изменения содержимого HTML элементов.
В jQuery имеются три метода, которые позволяют напрямую работать с контентом элемента:
html
– для чтения и изменения HTML содержимого элемента;text
– для чтения и изменения текстового содержимого элемента;val
– для чтения и изменения значения элементов формы.
Чтение HTML контента элемента
Например, получим HTML содержимое элемента с идентификатором (id
) contact
:
// сохраним HTML контент элемента в переменную contactHTML
var contactHTML = $('#contact').html();
Если выборка содержит несколько элементов, то данный метод вернёт HTML контент только первого элемента:
<p>Содержимое 1...</p>
<p>Содержимое 2...</p>
...
<script>
var htmlContent = $('p').html();
console.log(htmlContent);
</script>
Для того чтобы получить HTML контент всех найденных элементов необходимо воспользоваться циклом (например, each
):
$('p').each(function(){
// выведем содержимое текущего элемента в консоль
console.log($(this).html());
});
Изменение HTML контента элемента
Например, заменим содержимое элемента ul
:
<ul>
<li>молоко 1 литр</li>
<li>яйца 2 шт.</li>
<li>мука 270 гр.</li>
</ul>
...
<script>
$('ul').html('<li>молоко 500 мл литр</li><li>яйца 3 шт.</li><li>мука 200 гр.</li>');
</script>
Если на странице будет несколько элементов ul
, то данный метод заменит содержимое каждого из них.
Если необходимо изменить контент только у одного элемента на странице, то наиболее просто это сделать через id
.
<ul id="ingredients">
...
</ul>
...
<script>
$('#ingredients').html('Новый HTML контент...');
</script>
Использование функции для замены HTML контента элемента:
<h2>Название 1...</h2>
<h2>Название 2...</h2>
<h2>Название 3...</h2>
...
<script>
$('h2').html(function(index, oldhtml) {
// index – индекс элемента в выборке
// oldhtml – контент элемента
var newhtml = (index+1) + '. ' + oldhtml;
return newhtml;
});
</script>
Например, изменим контент элементов (зачеркнём старый контент и добавим рядом новый):
<div class="number">75</div>
<div class="number">37</div>
<div class="number">64</div>
<div class="number">17</div>
<div class="number">53</div>
...
<script>
var newNumber = [];
for (var i = 0; i <= 4; i++) {
newNumber[i] = Math.floor(Math.random() * 99) + 1;
};
$('.number').html(function(index, oldhtml) {
// index – индекс элемента в выборке
// oldhtml – контент элемента
// this – текущий элемент
// изменим фон текущего элемента на случайный
$(this).css('background-color','yellow');
var newhtml = '<s>'+oldhtml+'</s> '+ newNumber[index];
return newhtml;
});
</script>
Получение текстового содержимого элемента
В jQuery получение содержимого элемента в виде обычного текста осуществляется с помощью метода text
. При этом все HTML теги, если они присутствуют в контенте, будут вырезаны.
Например, получим текстовое содержимое элемента p
и выведем его в контент другого элемента:
<p id="output"></p>
<button id="get-text">Получить текстовый контент элемента p</button>
<p id="text">Этот параграф содержит <a href="#">ссылку</a>.</p>
...
<script>
$('#get-text').click(function() {
var textContent = $('#text').text();
$('#output').text(textContent);
});
</script>
Метод text
также как и html
возвращает содержимое только первого элемента выборки (если в ней присутствуют несколько элементов).
Замена контента элемента указанным текстом
Метод text
может использоваться не только для чтения, но и для изменения содержимого указанного элемента. При этом HTML теги (если они присутствуют в тексте) будут закодированы с помощью спецсимволов.
<div id="info">
Некоторый контент...
</div>
...
<script>
$('#info').text('<p>Другой контент...</p>');
</script>
После выполнения, элемент div с классом info будет иметь следующий HTML код:
<div id="info">
<p>Другой контент...</p>
</div>
На экране данный элемент будет выглядеть так:
<p>Другой контент...</p>
Если в выборке присутствует несколько элементов, то метод text
заменит содержимое каждого из них:
<p>Контент 1 ...</p>
<p>Контент 2 ...</p>
<p>Контент 3 ...</p>
...
<script>
$('p').text('Новый контент...');
</script>
Использование в качестве параметра метода text
функции (добавим в скобках к содержимому каждого выбранного элемента длину его текстовой информации):
<p class="text">Некоторое содержимое...</p>
<p class="text">Ещё некоторый контент...</p>
...
<script>
$('.text').text(function(index,text) {
// параметры функции: index (порядковый номер элемента в выборке), text (его текущее содержимое)
var textLength = text.length;
return text + ' ('+ text.length +')';
});
</script>
Удаление контента элемента
В jQuery для удаления содержимого элемента имеется метод empty
. Данный метод не только удаляет элементы, но и другие его дочерние узлы, включая текст.
Например, удалим содержимое всех элементов с классом vote
:
<div class="vote">Контент...</div>
...
<script>
$('.vote').empty();
</script>
Получение значения элемента формы
В jQuery чтение значений элементов input
, select
и textarea
осуществляется посредством метода val
.
Например, получим значение элемента input
:
<input type="text" id="quantity" name="quantity" value="3" />
...
<script>
// сохраним значение в переменную quantity
var quantity = $('#quantity').val();
// выведем значение переменной quantity в консоль
console.log(quantity);
</script>
Метод val
, если в коллекции присутствует несколько элементов, вернёт значение только первого из них.
<input name="color" type="radio" value="white"> Белый<br>
<input name="color" type="radio" value="green" checked> Зелёный<br>
<input name="color" type="radio" value="brown"> Коричневый<br>
...
<script>
// получим значение первого элемента в коллекции
var valColor = $('input[name="color"]').val();
console.log(valColor); // white
// получим значение выбранной (checked) радиокнопки
var valCheckedColor = $( "input[type=radio][name=color]:checked" ).val();
console.log(valCheckedColor); // green
</script>
Для получения значения выбранного элемента (select
, checkbox
, или radio
кнопок) используйте :checked
.
// получить значение выбранной опции select
$('select.color option:checked').val();
// получить значение выбранного select
$('select.size').val();
// получить значение отмеченного (checked) checkbox
$('input[type="checkbox"][name="answers"]:checked').val();
// получить значение установленной радиокнопки
$('input[type="radio"][name="rating"]:checked').val();
Если коллекции нет элементов, то метод val
возвращает значение undefined
.
Например, получим значение элемента textarea
, имеющего имя description
:
var valDescription = $('textarea[name="description"]').val();
if (valDescription !== undefined) {
console.log('Значение элемента textarea: ' + valDescription);
} else {
console.log('Элемент textarea с именем description на странице не найден!');
}
Получим значение элемента select
:
<select id="volume">
<option>16Gb</option>
<option>32Gb</option>
</select>
...
<script>
// получим значение выбранной опции элемента select
var volume = $('#volume').val();
// выведем это значение в консоль
console.log(volume);
// выведем значение в консоль при изменении select
$('#volume').change(function(){
var volume = $(this).val();
console.log(volume);
});
</script>
Если элемент select
имеет множественный выбор (атрибут multiple
), то метод val
возвратит в качестве результата массив, содержащий значение каждой выбранной опции (option
). Если ни одна опция не отмечена, то данный метод вернёт в качестве ответа пустой массив (до версии jQuery 3 значение null
).
<select id="brands" multiple="multiple">
<option selected="selected">Acer</option>
<option>Samsung</option>
<option selected="selected">Asus</option>
</select>
<script>
// var brands = $('#brands').val() || []; // до версии jQuery 3
var brands = $('#brands').val(); // для версии jQuery 3
// преобразуем массив в строку, используя разделитель ", "
var output = brands.join( ", " );
// выведем строку в консоль
console.log(output);
</script>
Установка значения элементу формы
Изменение значения элемента формы в jQuery осуществляется с помощью метода val
.
Например, при клике на кнопку установим элементу input
её текст:
<div>
<button>Кнопка 1</button>
<button>Кнопка 2</button>
<button>Кнопка 3</button>
</div>
<input type="text" value="Нажмите на кнопку!">
...
<script>
$('button').click(function() {
var text = $(this).text();
$('input').val(text);
});
</script>
Данный метод устанавливает значение для всех элементов набора, к которому он применяется.
Например, преобразуем все буквы значения элемента input
после потеря фокуса в прописные:
<input type="text" value="Некоторое значение поля">
...
<script>
$('input').on('blur', function() {
// установим значение полю
$(this).val(function(index, value) {
return value.toUpperCase();
});
});
</script>
Например, поменяем значение элемента select
:
<select name="color">
<option value="red">Красный</option>
<option value="green" selected>Зелёный</option>
<option value="blue">Синий</option>
</select>
<script>
// 1 вариант (установим в качестве значения select значение опции blue)
$('select[name="color"] option[value="blue"]').attr('selected', 'selected');
// 2 вариант
$('select[name="color"]').val('blue');
</script>
Например, присвоим значения элементу select
с множественным выбором (multiple
):
<select id="language" multiple="multiple">
<option value="english" selected="selected">Английский</option>
<option value="french">Французский</option>
<option value="spanish" selected="selected">Испанский</option>
<option value="china">Китайский</option>
</select>
...
<script>
$('#language').val(['french', 'china']);
</script>
Изменим, значение checkbox
:
<input type="checkbox" name="language" value="english"> Вы знаете английский
...
<script>
$('input[name="language"]').val('en');
</script>
При смене значения одного select`a необходимо чтобы во втором менялись значения. На одной странице (добавления задачи) всё работает, но вот уже на странице редактирования тот же скрипт не работает. У страницы добавления ссылка — /task/add, у редактирования /task/edit/39(id редактируемой задачи).
Файл JS:
Функция для выдачи:
Подскажите, объясните как в блоке с фиксированной высотой, задать определенное позиционирование элемента. Приведу пример.
Есть вот такая структура:
Мне необходимо сделать закрепление активной позиции внутри прокручиваемого блока так, чтоб активная позиция была либо по центру, верху, низу в зависимости от количества товаров в прокручиваемом блоке. Как такое реализовать можно?