jQuery - Установка Контента и Атрибутов

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

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

Установка Контента - text(), html() и val()

Следующий пример демонстрирует, как установить контент с помощью методов jQuery text(), html() и val():

Пример

$("#btn1").click(function(){
$("#test1").text("Привет мир!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Привет мир!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Дональд Дак");
});

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

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

Все три метода jQuery выше: text(), html() и val() также идут с функцией обратного вызова. У функции обратного вызова есть два параметра: индекс текущего элемента в списке выбранных элементов и исходное (старое) значение. Вы затем возвращаете строку, которую Вы хотите использовать в качестве нового значения из функции.

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

Пример

$("#btn1").click(function(){
$("#test1").text(function(i,origText){
    return "Старый текст: " + origText + " Новый текст: Привет мир!
    (индекс: " + i + ")";
});
});

$("#btn2").click(function(){
$("#test2").html(function(i,origText){
    return "Старый html: " + origText + " Новый html: Привет <b>мир!</b>
    (индекс: " + i + ")";
});
});

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

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

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

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

Пример

$("button").click(function(){
$("#yan").attr("href","http://yandex.ru/");
});

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

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

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

Пример

$("button").click(function(){
$("#yan").attr({
"href" : "http://yandex.ru/",
"title" : "Поисковая система Yandex"
});
});

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

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

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

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

Пример

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

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

Далее: Обход jQuery - Предки

Смотрите также

Комментарии

Написать