Последние учебники веб-разработки
 

jQuery - Установить и атрибутов


Набор контента - 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 .