Доступ к элементам контента с помощью jQuery

jQuery даёт возможность работать с элементами HTML и их содержимым различными способами. Например, вы можете добавить новые элементы внутрь, вокруг, до и после существующих элементов; вы можете заменить один элемент другим (или другими); вы можете читать и заменять содержимое элементов. Часто разница между работой с содержимым элементов и самими элементами не различается. Например, когда вы добавляете новые элементы внутрь уже существующих, то фактически вы работаете с содержимым существующих элементов.

В данном уроке разбираются 3 метода jQuery, которые разработаны для работы непосредственно с содержимым элементов:

  • html() для чтения и изменения HTML кода элемента
  • text() для чтения и изменения текстового содержания элемента
  • val() для чтения и изменения значений полей формы

С помощью данных методов очень легко читать и изменять содержание или значения любых элементов HTML.

Работает с HTML кодом: html()

Метод jQuery html() даёт возможность читать HTML код элемента как строку, или заменять содержание элемента новой строкой HTML.

Читаем HTML код элемента

Чтобы прочитать HTML код элемента, сначала выберите элемент как объект jQuery, затем вызовите метод html() для объекта. Например, в следующем коде выбирается элемент p (параграф) на странице, затем вызывается метод html() для вывода HTML содержания элемента:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$( init );

function init() {
  alert( $('p').html() );
}
</script>
</head>
<body>
<p>Этот параграф содержит <a href="#">ссылку</a>.</p>
</body>
</html>

Код выводит окно сообщения, в котором выводится строка HTML кода элемента:

Этот параграф содержит <a href="#">ссылку</a>.

Если вы вызовете метод html() для множественных выбранных элементов, он вернёт содержание только первого элемента из набора.

Замена HTML содержания элемента

Вы можете заменить HTML разметку новой строкой с кодом HTML. В примере производится замена параграфа внутри элемента div на новый заголовок и параграф:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$( init );

function init() {
  $('#myDiv').html('<h2>Новый заголовок</h2><p>Новый текст, который содержит <a href="#">другую ссылку</a>.</p>');
}
</script>
</head>
<body>
<div id="myDiv">
<p>Этот параграф содержит <a href="#">ссылку</a>.</p>
</div>
</body>
</html>

Выполнение кода изменит содержание страницы, новая разметка будет выводить следующее:

Новый заголовок

Новая строка, которая содержит другую ссылку.

Если вызвать метод html( newHTML ) для набора нескольких выделенных элементов, содержимое каждого элемента будет заменено строкой newHTML.

Использование функции для замены HTML содержания элемента

Вместо передачи замещающей строки методу html(), вы можете передать возвратную функцию. Функция должна принимать 2 аргумента:

  • Индекс текущего элемента в наборе (начало отсчёта - 0)
  • Старое HTML содержание текущего элемента

Возвращаемое значение используется для замены HTML.

Данный подход удобен, когда нужно заменить содержание элементов на основе их положения или существующего контента (или обоих параметров). В примере добавляется номер пункта к началу каждого заголовка h2 на странице:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$( init );

function init() {
  $('h2').html( insertNumbers );
}

function insertNumbers( index, oldHTML ) {
  return (index+1) + ". " + oldHTML;
}
</script>
</head>
<body>
<h2>Первый заголовок</h2>
<h2>Второй заголовок</h2>
<h2>Третий заголовок</h2>
</body>
</html>

Выполнение кода приведёт к следующему выводу:

1. Первый заголовок
2. Второй заголовок
3. Третий заголовок

Работа с текстовым содержанием: text()

Метод html() позволяет читать и изменять HTML код элемента, включая любые теги HTML. А метод text() позволяет работать с только текстовым содержанием:

  • Когда происходит чтение содержимого элемента с помощью метода text(), все HTML теги отделяются от текста.
  • Когда метод text() используется для замены содержания элемента, любые HTML теги в замещающей строке декодируются таким образом, что они отображаются на странице.

чтение текстового содержания

Использование метода text() в основном аналогично использованию метода html(). Следующий пример выбирает параграф, а затем выводит его текстовое содержание:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$( init );

function init() {
  alert( $('p').text() );
}
</script>
</head>
<body>
<p>Этот параграф содержит <a href="#">ссылку</a>.</p>
</body>
</html>

Код примера выведет окно сообщения. Теги <a> и </a> будут исключены из текста:

Этот параграф содержит ссылку.

Так же как и метод html(), метод text() читает содержание первого элемента в наборе.

Заменяем текст содержания элемента

Метод text() работает как и метод html(), когда нужно заменить содержимое контента. Разница заключается в том, что любые HTML теги будут декодироваться для отображения на странице, а не для формирования элементов.

Пример скрипта, который основан на примере использования метода html(), для замены содержания параграфа другим текстом:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$( init );

function init() {
  $('#myDiv').text('<h2>Новый заголовок</h2><p>Новый текст, который содержит <a href="#">другую ссылку</a>.</p>');
}
</script>
</head>
<body>
<div id="myDiv">
<p>Этот параграф содержит <a href="#">ссылку</a>.</p>
</div>
</body>
</html>

И вот что будет выведено на экран. Теги <h2>, <p> и <a> будут просто отображены как текст, вместо того, чтобы сформировать заголовок, параграф и ссылку:

<h2>Новый заголовок</h2><p>Новый текст, который содержит <a href="#">другую ссылку</a>.</p>

Использование функции для замены текста

Так же как и в методе html(), вы можете использовать функцию с методом text() если нужно заменить контент на основе его положения или содержимого. Ниже приведён пример "нумерованных заголовков", в котором используется метод text() вместо метода html() и используется символ '>' в качестве сепаратора вместо точки:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$( init );

function init() {
  $('h2').text( insertNumbers );
}

function insertNumbers( index, oldText ) {
  return (index+1) + " > " + oldText;
}
</script>
</head>
<body>
<h2>Первый заголовок</h2>
<h2>Второй заголовок</h2>
<h2>Третий заголовок</h2>
</body>
</html>

Результат работы кода будет выглядеть следующим образом:

1 > Первый заголовок
2 > Второй заголовок
3 > Третий заголовок

Если вы выполните выше приведённый код и посмотрите на источник HTML кода, вы увидите, что метод text() декодировал символ '>' как '&gt;'.

Работа со значениями полей формы: val()

Рассмотрим теперь метод val(). Он работает как метод text(), но используется для чтения и изменения значений полей формы, а не текстового содержимого элементов.

Пример, который демонстрирует и чтение и запись значений полей формы с помощью метода val():

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$( init );

function init() {
  var output = "Продукт: " + $('#product').val() + "\n";
  output += "Количество: " + $('#quantity').val() + "\n";
  output += "Экспресс-доставка: " + $('input:radio[name=express]:checked').val() + "\n";
  alert( output );
  $('#product').val( "megawidget" );
  $('#quantity').val( 4 );
  $('#expressNo').attr('checked', true);
}
</script>
</head>
<body>
<form method="post" action="" />
<div>
<label>Продукт:</label>
<select id="product" name="product">
<option value="superwidget">SuperWidget</option>
<option value="megawidget">MegaWidget</option>
<option value="wonderwidget">WonderWidget</option>
</select>
<br />
<label>Количество:</label>
<input type="text" id="quantity" name="quantity" value="3" />
<br />
<label>Экспресс-доставка:</label>
<input type="radio" id="expressYes" name="express" value="да" checked="checked" /> Да
<input type="radio" id="expressNo" name="express" value="нет" /> Нет
</div>
</form>
</body>
</html>

Код сначала выводит окно сообщения, в котором отображаются значения по умолчанию полей формы : списка, текстового поля ввода и группы кнопок выбора:

Продукт: superwidget
Количество: 3
Экспресс-доставка: да

Затем код изменяет выбранный продукт на "MegaWidget", количество на 4, а экспресс-доставку на "нет".

В выше приведённом примере кнопка выбора #expressNo отмечается с помощью вызова метода attr() для установки атрибута кнопки checked, так как метод val() не может изменить состояние кнопки выбора или чекбокса.

При использовании метода val() нужно помнить о следующем:

  • Вы можете использовать метод val() для чтения или изменения выбранных опций в списке select. Как было показано в примере, можно просто изменить выбранный виджет передав новое значение методу val(). (Конечно, значение должно присутствовать среди возможных опций в списке.)
  • Можно читать все выбранные значения опций в списке select. В данном случае метод val() возвращает массив с выбранными значениями. (К сожалению, это не работает в обратную сторону, вы не сможете передать массив методу val() для того, чтобы установить несколько опций.)
  • Можно получать значения выбранной кнопки в группе кнопок выбора. Метод val() можно использовать в комбинации с селектором :checked для определения значения выбранной кнопки. (Данный трюк работает и с чекбоксами, однако метод val() вернёт значение только для первого отмеченного чекбокса.)
  • Можно изменять значения для нескольких полей формы с помощью функции. Также как и для методов html() и text(), можно передавать функцию в метод val(), чтобы изменять значения полей на основе их индекса положения и/или текущего значения.

Резюме

В данном уроке были рассмотрены три метода jQuery для манипулирования содержимый HTML элементов:

  • html(), который даёт возможность читать или заменять разметку HTML внутри элемента
  • text(), который очень похож на метод html(), но работает только с текстом
  • val(), который разработан для чтения и изменения значений полей формы.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.elated.com/articles/jquery-accessing-element-content/
Перевел: Сергей Фастунов
Урок создан: 4 Августа 2010
Просмотров: 79854
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 4 Августа 2010 10:05
    postaltomsk
    Знал, но спасибо за мат. часть)
  • 5 Августа 2010 19:03
    ARMIN
    Блин, всё сложнее и сложнее...
  • 22 Декабря 2011 14:07
    Алексис
    Помогите, пожалуйста у меня есть ссылка на одной странице, при ее выборе открывается форма заказа (другая страница). Нужно, что бы кроме прехода на страницу с формой заказа по этой ссылке дополнительно выбирался один из товаров в поле select Как это сделать с помощью jquery
^ Наверх ^