Набор контента - text(), html() и val()
Мы будем использовать те же самые три метода , по сравнению с предыдущей страницы , чтобыустановить содержание:
- 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 "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i, origText){
return "Old html: " + origText + " New html: Hello
<b>world!</b>
(index: " + i + ")";
});
});
Попробуй сам " Набор атрибутов - attr()
Jquery attr() метод также используется для установки / изменения значений атрибутов.
В следующем примере показано , как изменить (набор) значение href атрибута в ссылке:
пример
$("button").click(function(){
$("#w3s").attr("href", "http://www.w3ii.com/jquery");
});
Попробуй сам " attr() метод также позволяет установить несколько атрибутов одновременно.
В следующем примере показано , как установить как href и названия атрибутов в то же время:
пример
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3ii.com/jquery",
"title" : "w3ii jQuery Tutorial"
});
});
Попробуй сам " Функция обратного вызова для attr()
Метод JQuery attr() , также поставляются с функцией обратного вызова. Функция обратного вызова имеет два параметра: индекс текущего элемента в списке элементов, выбранных и первоначальной (старой) значение атрибута. Затем вернуть строку, которую вы хотите использовать в качестве нового значения атрибута из функции.
Следующий пример демонстрирует attr() с функцией обратного вызова:
пример
$("button").click(function(){
$("#w3s").attr("href", function(i, origValue){
return origValue + "/jquery";
});
});
Попробуй сам " Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 »
JQuery HTML Ссылка
Полный обзор всех методов JQuery HTML, пожалуйста , перейдите на наш / CSS Reference JQuery HTML .