jQuery установка содержимого и свойств

Установка содержимого - text(), html() и val()

Мы будем использовать три одинаковых метода из предыдущей главы для установки содержимого:

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

Ниже приведен пример того, как можно установить содержимое с помощью методов 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){
    возврат "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});
$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    возврат "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});

Попробуйте сами

Установка свойств - attr()

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

Ниже приведен пример того, как можно изменить (установить) значение属性 href в ссылке:

Пример

$("button").click(function(){
  $("#w3s").attr("href","http://www.codew3c.com/jquery");
});

Попробуйте сами

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

Ниже приведен пример того, как можно одновременно установить свойства href и title:

Пример

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.codew3c.com/jquery",
    "title" : "CodeW3C.com jQuery Tutorial"
  });
});

Попробуйте сами

Обратный вызов attr()

Метод jQuery attr() также предоставляет обратный вызов. Обратный вызов принимает два параметра: индекс текущего элемента в списке выбранных элементов и исходное (старое) значение. Затем функция возвращает строку, которую вы хотите использовать в качестве нового значения.

Ниже приведен пример использования метода attr() с обратным вызовом:

Пример

$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    возврат origValue + "/jquery";
  });
});

Попробуйте сами

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

Для получения полной информации о методах jQuery HTML, пожалуйста, обратитесь к следующей справочной книге: