jQuery — получение контента и атрибутов


jQuery содержит мощные методы для изменения элементов и атрибутов HTML и управления ими.


Манипуляции с DOM jQuery

Одна очень важная часть jQuery — возможность манипулировать DOM.

jQuery поставляется с набором методов, связанных с DOM, которые упрощают доступ к элементам и атрибутам и управление ими.

DOM = объектная модель документа

DOM определяет стандарт для доступа к документам HTML и XML:

«Объектная модель документа W3C (DOM) — это платформа и независимый от языка интерфейс, который позволяет программам и сценариям динамически получать доступ и обновлять содержимое, структуру и стиль документа».


Получить содержимое — text(), html() и val()

Три простых, но полезных метода jQuery для манипулирования DOM:

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

В следующем примере показано, как получить содержимое с помощью jQuery text()и html()методов:

Пример

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

В следующем примере показано, как получить значение поля ввода с помощью val()метода jQuery:

Пример

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});


Получить атрибуты — attr()

Метод jQuery attr()используется для получения значений атрибутов.

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

Пример

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

В следующей главе объясняется, как установить (изменить) содержимое и значения атрибутов.


jQuery-упражнения

Проверьте себя с помощью упражнений

Упражнение:

Используйте метод jQuery для возврата текстового содержимого элемента <div>.

$("div").();


Справочник по jQuery HTML

Полный обзор всех HTML-методов jQuery см. в нашем справочнике по jQuery HTML/CSS .