Некоторые jQuery-методы могут использоваться для установки или получения некоторых значений. Вот некоторые из этих методов: text(), html(), attr(), и val().
Когда эти методы вызываются без аргумента, их называют геттером (getter), потому что он получает значение элемента. Когда эти методы вызываются со значением в качестве аргумента, его называют сеттером (setter), потому что он устанавливает (или присваивает) это значение.
jQuery-метод text()
jQuery-метод text() используется либо для получения комбинированного текстового содержимого выбранных элементов, включая их потомков, либо для установки текстового содержимого выбранных элементов.
Используем Get для метода text()
Следующий пример покажет вам, как получить текстовое содержимое абзацев:
<script>
$(document).ready(function(){
// Получаем текстовое содержимое всех абзацев
$(".btn-one").click(function(){
var str = $("p").text();
alert(str);
});
// Получить текстовое содержание первого абзаца
$(".btn-two").click(function(){
var str = $("p:first").text();
alert(str);
});
});
</script>JQuery-метод text() извлекает значения всех выбранных элементов (то есть комбинированного текста), тогда как другие методы получения, такие как html(), attr(), и val(), возвращают значение только из первого элемента в выборе.
Используем Set для метода text()
Следующий пример покажет вам, как установить текстовое содержание абзаца:
<script>
$(document).ready(function(){
// Устанавливаем текстовое содержание всех абзацев
$(".btn-one").click(function(){
$("p").text("This is demo text.");
});
// Устанавливаем текстовое содержание первого абзаца
$(".btn-two").click(function(){
$("p:first").text("This is another demo text.");
});
});
</script>Когда jQuery-методы text(), html(), attr(), и val() вызываются со значением в качестве аргумента, он устанавливает это значение для каждого соответствующего элемента.
jQuery-метод html()
jQuery-метод html() используется для получения или установки содержимого HTML элементов.
Используем Get для метода html()
В следующем примере показано, как получить содержимое HTML элементов абзаца, а также контейнер элемента <div>:
<script>
$(document).ready(function(){
// Получаем HTML-содержимое первого выбранного абзаца
$(".btn-one").click(function(){
var str = $("p").html();
alert(str);
});
// Получаем HTML-содержимое элемента по id контейнера
$(".btn-two").click(function(){
var str = $("#container").html();
alert(str);
});
});
</script>Если выбрано несколько элементов, метод html() возвращает только HTML-содержимое первого элемента из набора соответствующих элементов.
Используем Set для метода html()
В следующем примере показано, как установить HTML-содержимое элемента <body>:
<script>
$(document).ready(function(){
// Устанавливаем HTML-содержимое для элемента body
$("button").click(function(){
$("body").html("<p>Hello World!</p>");
});
});
</script>jQuery-метод attr()
Вы можете использовать jQuery-метод attr(), чтобы либо получить значение атрибута элемента, либо установить один или несколько атрибутов для выбранного элемента.
Используем Get для метода attr()
В следующем примере показано, как получить атрибут href гиперссылки, то есть элемент <a>, а также атрибут alt элемента <img>:
<script>
$(document).ready(function(){
// Получаем значение атрибута href первой выбранной гиперссылки
$(".btn-one").click(function(){
var str = $("a").attr("href");
alert(str);
});
// Получаем значение атрибута alt изображения с id sky
$(".btn-two").click(function(){
var str = $("img#sky").attr("alt");
alert(str);
});
});
</script>Если выбрано несколько элементов, метод attr() возвращает только значение атрибута первого элемента из набора соответствующих элементов.
Используем Set для метода attr()
В следующем примере показано, как установить атрибут checked.
<script>
$(document).ready(function(){
// Проверяем все чекбоксы
$("button").click(function(){
$('input[type="checkbox"]').attr("checked", "checked");
});
});
</script>Метод attr() также позволяет вам устанавливать несколько атрибутов одновременно. В следующем примере показано, как установить атрибут class и title для элементов <img>.
<script>
$(document).ready(function(){
// Добавляем атрибут class и title ко всем изображениям
$("button").click(function(){
$("img").attr({
"class" : "frame",
"title" : "Hot Air Balloons"
});
});
});
</script>jQuery-метод val()
jQuery-метод val() в основном используется для получения или установки текущего значения элементов HTML-формы, таких как <input>, <select> и <textarea>.
Используем Get для метода val()
В следующем примере показано, как получить значения элементов управления формы:
<script>
$(document).ready(function(){
// Получаем значение input с id name
$("button.get-name").click(function(){
var name = $('input[type="text"]#name').val();
alert(name);
});
// Получаем значение textarea с id comment
$("button.get-comment").click(function(){
var comment = $("textarea#comment").val();
alert(comment);
});
// Получаем значение поля select с id city
$("button.get-city").click(function(){
var city = $("select#city").val();
alert(city);
});
});
</script>Если выбрано несколько элементов формы, метод val() возвращает значение только первого элемента из набора соответствующих элементов.
Используем Set для метода val()
В следующем примере показано, как установить значения элементов управления формы:
<script>
$(document).ready(function(){
// Устанавливаем значение всех input
$("button").click(function(){
var text = $(this).text();
$('input[type="text"]').val(text);
});
});
</script>
