Установка контента и атрибутов

Для установки (изменения) содержимого элементов могут использоваться те же три метода jQuery, что и в предыдущей главе:

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 "Старый текст: " + origText + " Новый текст: Hello world!
     (index: " + i + ")"; 
  });
});

$("#btn2").click(function(){
  $("#test2").html(function(i, origText){
     return "Старый html: " + origText + " Новый html: Hello <b>world!</b>
     (index: " + i + ")"; 
  });
});

Установка атрибутов - attr()

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

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


$("button").click(function(){
  $("#w3s").attr("href", "https://msiter.ru/tutorials/jquery/");
});

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

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


$("button").click(function(){
  $("#w3s").attr({
    "href" : "https://msiter.ru/tutorials/jquery/",
     "title" : "Учебник по jQuery"
  });
});

Функция обратного вызова в методе attr()

Метод attr() также может использоваться с функцией обратного вызова.

В следующем примере демонстрируется использование метода attr() с функцией обратного вызова:


$("button").click(function(){
  $("#w3s").attr("href", function(i, origValue){
    return origValue + "/jquery/"; 
  });
});