Работа с 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:
Функция для выдачи:
Подскажите, объясните как в блоке с фиксированной высотой, задать определенное позиционирование элемента. Приведу пример.
Есть вот такая структура:
Мне необходимо сделать закрепление активной позиции внутри прокручиваемого блока так, чтоб активная позиция была либо по центру, верху, низу в зависимости от количества товаров в прокручиваемом блоке. Как такое реализовать можно?