jQuery - Set Content and Attributes
Задание содержимого-text (), HTML () и Val ()
Мы будем использовать те же три метода из предыдущей страницы для установки содержимого:
- Text ()-задает или возвращает текстовое содержимое выбранных элементов
- HTML ()-устанавливает или возвращает содержимое выбранных элементов (включая HTML-разметку)
- Val ()-задает или возвращает значение полей формы
В следующем примере демонстрируется установка содержимого с помощью методов jQuery Text (), HTML () и Val ():
Пример
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
Функция обратного вызова для Text (), HTML () и Val ()
Все три метода jQuery выше: Text (), HTML () и Val (), также поставляются с функцией обратного вызова. Функция обратного вызова имеет два параметра: индекс текущего элемента в списке выбранных элементов и исходное (старое) значение. Затем вы возвращаете строку, которую вы хотите использовать в качестве нового значения из функции.
В следующем примере демонстрируется Text () и HTML () с функцией обратного вызова:
Пример
$("#btn1").click(function(){
$("#test1").text(function(i, origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i, origText){
return "Old html: " + origText + " New html: Hello
<b>world!</b>
(index: " + i + ")";
});
});
Набор атрибутов - ()
Метод jQuery () также используется для установки/изменения значений атрибутов.
В следующем примере демонстрируется изменение (Set) значения атрибута href в ссылке:
Пример
$("button").click(function(){
$("#w3s").attr("href", "https://html5css.ru/jquery/");
});
Метод () также позволяет задавать одновременно несколько атрибутов.
В следующем примере демонстрируется, как задать атрибуты href и Title в то же время:
Пример
$("button").click(function(){
$("#w3s").attr({
"href" : "https://html5css.ru/jquery/",
"title" : "HTML5CSS jQuery Tutorial"
});
});
Функция обратного вызова для функции
Метод jQuery (), также поставляются с функцией обратного вызова. Функция обратного вызова имеет два параметра: индекс текущего элемента в списке выбранных элементов и исходное (старое) значение атрибута. Затем вы возвращаете строку, которую хотите использовать в качестве нового значения атрибута из функции.
В следующем примере демонстрируется метод () с функцией обратного вызова:
Пример
$("button").click(function(){
$("#w3s").attr("href", function(i, origValue){
return origValue + "/jquery/";
});
});
HTML-справочник jQuery
Для полного обзора всех jQuery HTML методы, пожалуйста, перейдите на наш jQuery HTML/CSS ссылки.
