jQuery - Установка Контента и Атрибутов
Мы будем использовать те же самые три метода с предыдущей статье рубрики, чтобы установить контент:
- text() - Устанавливает или возвращает текстовое содержимое выбранных элементов
- html() - Устанавливает или возвращает содержимое выбранных элементов (включая разметку HTML)
- val() - Устанавливает или возвращает значение полей формы
Установка Контента - text(), html() и val()
Следующий пример демонстрирует, как установить контент с помощью методов jQuery text(), html() и val():
Пример
$("#test1").text("Привет мир!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Привет мир!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Дональд Дак");
});
Попробуйте сами »
Функция обратного вызова для text(), html() и val()
Все три метода jQuery выше: text(), html() и val() также идут с функцией обратного вызова. У функции обратного вызова есть два параметра: индекс текущего элемента в списке выбранных элементов и исходное (старое) значение. Вы затем возвращаете строку, которую Вы хотите использовать в качестве нового значения из функции.
Следующий пример демонстрирует text() и html () с функцией обратного вызова:
Пример
$("#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 в ссылке:
Пример
$("#yan").attr("href","http://yandex.ru/");
});
Попробуйте сами »
Метод attr() также позволяет Вам устанавливать многократные атрибуты одновременно.
Следующий пример демонстрирует, как установить атрибуты href и title одновременно:
Пример
$("#yan").attr({
"href" : "http://yandex.ru/",
"title" : "Поисковая система Yandex"
});
});
Попробуйте сами »
Функция обратного вызова для attr()
jQuery метод attr() также идет с функцией обратного вызова. У функции обратного вызова есть два параметра: индекс текущего элемента в списке выбранных элементов и исходное (старое) значение атрибута. Вы затем возвращаете строку, которую Вы хотите использовать в качестве нового значения атрибута из функции.
Следующий пример демонстрирует attr() с функцией обратного вызова:
Пример
$("#yan").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
Попробуйте сами »