Работа с HTML, текстом и атрибутом value в jQuery

Александр Мальцев
Александр Мальцев
73K
3
Содержание:
  1. Чтение HTML контента элемента
  2. Изменение HTML контента элемента
  3. Получение текстового содержимого элемента
  4. Замена контента элемента указанным текстом
  5. Удаление контента элемента
  6. Получение значения элемента формы
  7. Установка значения элементу формы
  8. Комментарии

Статья, в которой рассмотрим, какие в 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">
  &lt;p&gt;Другой контент...&lt;/p&gt;
</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>

Комментарии:

  1. Эрик
    16 марта 2020, 15:24
    Здравствуйте. Не знаю подходит ли мой вопрос в точности под тему данной статьи, но всё же попробую.
    При смене значения одного select`a необходимо чтобы во втором менялись значения. На одной странице (добавления задачи) всё работает, но вот уже на странице редактирования тот же скрипт не работает. У страницы добавления ссылка — /task/add, у редактирования /task/edit/39(id редактируемой задачи).
    <div class="form-group">
        <label>Направление</label>
        <div>
            <select id="direction" class="form-control" name="direction">
          <option value="">Выберите направление</option>
          <?php if (is_array($directions)): ?>
              <?php foreach ($directions as $direction): ?>
            <option value="<?=$direction['ID']?>">
                <?php echo $direction['NAME']; ?>
            </option>
        <?php endforeach; ?>
          <?php endif; ?>
      </select>
        </div>
    </div>
    <div class="form-group">
        <label>Модуль</label>
        <div>
            <select id="module" class="form-control" name="module">
                <option value="">Выберите модуль</option>
                <?php if (is_array($modules)): ?>
              <?php foreach ($modules as $module): ?>
            <option value="<?=$module['ID']?>">
                <?php echo $module['NAME']; ?>
            </option>
        <?php endforeach; ?>
                <?php endif; ?>
            </select>
        </div>
    </div>
    
    Файл JS:
    $(document).on('change','#direction',function(){
      let id_dir = document.getElementById("direction").value;
      let modulesEl = $("#module");
    
        $.getJSON("ajax", {id_dir}, function (data) {
        	console.log(data);
        	modulesEl.html('<option value="">Выберите модуль</option>');
            $.each(data, function (index, item) {
          		$("#module").append('<option value ="'+item.ID+'">'+item.NAME+'</option>');
        	});
        });
    });
    
    Функция для выдачи:
    public function actionAjax(){
        $action = 'S';
        $params['GR'] = $_REQUEST['id_dir'];
        $table = 'MODULE';
        $token = $_SESSION['token'];
        $params = json_encode($params, JSON_UNESCAPED_UNICODE);
    
        $res = GroupCL::getGroups($action, $table, $token, $params);
    
        ob_clean();
        echo json_encode($res);
        die();
    
        }
    
    1. Александр Мальцев
      21 марта 2020, 15:50
      Здравствуйте. Для нужно научиться пользоваться отладкой JavaScript кода. Например, это можно выполнить в браузере. Для этого нужно перейти на вкладку Sources в инструментах разработчика, поставить в нужных местах точки останова, посмотреть что-там как работает и найти ошибку.
    2. Леонид
      13 июля 2017, 11:12
      Здравствуйте, Александр!
      Подскажите, объясните как в блоке с фиксированной высотой, задать определенное позиционирование элемента. Приведу пример.
      Есть вот такая структура:
      <ul class="left-menu">
        <li class="root-item">...</li>
        <li class="root-item">...</li>
        <li class="active-root-item root-item">
          <a href="/catalog/tovary/">
            Товары<i class="fa switch down"></i>
          </a>
          <ul class="sub-menu open" style="display: block;">
            <div class="baron baron__root baron__clipper _macosx _scrollbar" data-baron-v-id="6" style="overflow: hidden;">
              <div class="baron__scroller" style="overflow-y: scroll; box-sizing: border-box; margin: 0px; border: 0px;">
                <li>...</li>
                <li>...</li>
                <li>...</li>
                <li>...</li>
                <li>...</li>
                <li>...</li>
                <li>...</li>
                <li>...</li>
                <li>...</li>
                <li>...</li>
                <li class="active item">Активный элемент меню</li>
                <li>...</li>
                <li>...</li>
                <li>...</li>
                <li>...</li>
                <li>...</li>
                <li>...</li>
                <li>...</li>
                <li>...</li>
                <li>...</li>
              </div>
              <div class="baron__track">
                <div class="baron__control baron__up">▲</div>
                <div class="baron__free">
                  <div class="baron__bar" style="height: 29px;"></div>
                </div>
                <div class="baron__control baron__down">▼</div>
              </div>
            </div>
          </ul>
        </li>
        <li class="root-item">...</li>
        <li class="root-item">...</li>
      </ul>
      
      Пример блока с фиксированной высотой, в котором нужно задать определенное позиционирование элементам
      Мне необходимо сделать закрепление активной позиции внутри прокручиваемого блока так, чтоб активная позиция была либо по центру, верху, низу в зависимости от количества товаров в прокручиваемом блоке. Как такое реализовать можно?
      Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.