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("EXAMPLE"); });

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

Функции обратного вызова для 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()

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

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

Пример

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

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

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

Следующий пример демонстрирует, как одновременно установить атрибуты href и title:

Пример

$("button").click(function(){ $("#example").attr({ "href" : "http://www.example.com/jquery", "title" : "Учебник jQuery" }); });

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

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

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

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

Пример

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

Попробуйте сами »
Другие расширения