flexbe banner 468x60flexbe banner 728x90flexbe banner 930x180etxt banner 468x60etxt banner 728x90etxt banner 930x180skillbox banner 468x60skillbox banner 728x90skillbox banner 930x180

Руководство по Get и Set методам в jQuery

Некоторые jQuery-методы могут использоваться для установки или получения некоторых значений. Вот некоторые из этих методов: text(), html(), attr(), и val().

Когда эти методы вызываются без аргумента, их называют геттером (getter), потому что он получает значение элемента. Когда эти методы вызываются со значением в качестве аргумента, его называют сеттером (setter), потому что он устанавливает (или присваивает) это значение.

jQuery-метод text()

jQuery-метод text() используется либо для получения комбинированного текстового содержимого выбранных элементов, включая их потомков, либо для установки текстового содержимого выбранных элементов.

Используем Get для метода text()

Следующий пример покажет вам, как получить текстовое содержимое абзацев:

<script>
$(document).ready(function(){
    // Получаем текстовое содержимое всех абзацев
    $(".btn-one").click(function(){
        var str = $("p").text();
        alert(str);
    });
    
    // Получить текстовое содержание первого абзаца
    $(".btn-two").click(function(){
       var str = $("p:first").text();
       alert(str);
    });
});
</script>

JQuery-метод text() извлекает значения всех выбранных элементов (то есть комбинированного текста), тогда как другие методы получения, такие как html(), attr(), и val(), возвращают значение только из первого элемента в выборе.

Используем Set для метода text()

Следующий пример покажет вам, как установить текстовое содержание абзаца:

<script>
$(document).ready(function(){
    // Устанавливаем текстовое содержание всех абзацев
    $(".btn-one").click(function(){
        $("p").text("This is demo text.");
    });
    
    // Устанавливаем текстовое содержание первого абзаца
    $(".btn-two").click(function(){
        $("p:first").text("This is another demo text.");
    });
});
</script>

Когда jQuery-методы text(), html(), attr(), и val() вызываются со значением в качестве аргумента, он устанавливает это значение для каждого соответствующего элемента.

jQuery-метод html()

jQuery-метод html() используется для получения или установки содержимого HTML элементов.

Используем Get для метода html()

В следующем примере показано, как получить содержимое HTML элементов абзаца, а также контейнер элемента <div>:

<script>
$(document).ready(function(){
    // Получаем HTML-содержимое первого выбранного абзаца
    $(".btn-one").click(function(){
        var str = $("p").html();
        alert(str);
    });
    
    // Получаем HTML-содержимое элемента по id контейнера
    $(".btn-two").click(function(){
        var str = $("#container").html();
        alert(str);
    });
});
</script>

Если выбрано несколько элементов, метод html() возвращает только HTML-содержимое первого элемента из набора соответствующих элементов.

Используем Set для метода html()

В следующем примере показано, как установить HTML-содержимое элемента <body>:

<script>
$(document).ready(function(){
    // Устанавливаем HTML-содержимое для элемента body
    $("button").click(function(){
        $("body").html("<p>Hello World!</p>");
    });
});
</script>

jQuery-метод attr()

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

Используем Get для метода attr()

В следующем примере показано, как получить атрибут href гиперссылки, то есть элемент <a>, а также атрибут alt элемента <img>:

<script>
$(document).ready(function(){
    // Получаем значение атрибута href первой выбранной гиперссылки
    $(".btn-one").click(function(){
        var str = $("a").attr("href");
        alert(str);
    });
    
    // Получаем значение атрибута alt изображения с id sky
    $(".btn-two").click(function(){
        var str = $("img#sky").attr("alt");
        alert(str);
    });
});
</script>

Если выбрано несколько элементов, метод attr() возвращает только значение атрибута первого элемента из набора соответствующих элементов.

Используем Set для метода attr()

В следующем примере показано, как установить атрибут checked.

<script>
$(document).ready(function(){
    // Проверяем все чекбоксы
    $("button").click(function(){
        $('input[type="checkbox"]').attr("checked", "checked");
    });
});
</script>

Метод attr() также позволяет вам устанавливать несколько атрибутов одновременно. В следующем примере показано, как установить атрибут class и title для элементов <img>.

<script>
$(document).ready(function(){
    // Добавляем атрибут class и title ко всем изображениям
    $("button").click(function(){
        $("img").attr({
            "class" : "frame",
            "title" : "Hot Air Balloons"
        });
    });
});
</script>

jQuery-метод val()

jQuery-метод val() в основном используется для получения или установки текущего значения элементов HTML-формы, таких как <input>, <select> и <textarea>.

Используем Get для метода val()

В следующем примере показано, как получить значения элементов управления формы:

<script>
$(document).ready(function(){
    // Получаем значение input с id name
    $("button.get-name").click(function(){
        var name = $('input[type="text"]#name').val();
        alert(name);
    });
    
    // Получаем значение textarea с id comment
    $("button.get-comment").click(function(){
        var comment = $("textarea#comment").val();
        alert(comment);
    });
    
    // Получаем значение поля select с id city
    $("button.get-city").click(function(){
        var city = $("select#city").val();
        alert(city);
    });
});
</script>

Если выбрано несколько элементов формы, метод val() возвращает значение только первого элемента из набора соответствующих элементов.

Используем Set для метода val()

В следующем примере показано, как установить значения элементов управления формы:

<script>
$(document).ready(function(){
    // Устанавливаем значение всех input
    $("button").click(function(){
        var text = $(this).text();
        $('input[type="text"]').val(text);
    });
});
</script>
jivo banner 480x320jivo banner 728x90jivo banner 120x600skillbox banner 480x320skillbox banner 728x90skillbox banner 120x600flexbe banner 480x320flexbe banner 728x90flexbe banner 120x600

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по синтаксису в jQuery

Оператор jQuery обычно начинается со знака доллара ($) и заканчивается точкой с запятой (;). В jQuery знак доллара ($) — это просто псевдоним для jQuery. Давайте рассмотрим следующий пример кода, который демонстрирует синтаксис кода на jQuery. Приведенный выше пример просто отображает предупреждающее сообщение «Hello World!» пользователю. Объяснение кода Давайте разберем приведенный выше пример подробнее. Тег…
Подробнее

Руководство по callback-функциям в jQuery

Операторы JavaScript выполняются построчно. Но, поскольку для завершения эффекта jQuery требуется некоторое время, код следующей строки может выполняться, пока предыдущий эффект все еще выполняется. Чтобы этого не происходило, jQuery предоставляет функцию обратного вызова (Callback) для каждого метода. Функция обратного вызова — это функция, которая выполняется после завершения эффекта. Функция обратного вызова передается в качестве аргумента…
Подробнее

Руководство по методу animate() в jQuery

jQuery-метод animate() используется для создания пользовательских анимаций. Метод animate() обычно используется для анимации числовых CSS-свойств, таких как width, height, margin, padding, opacity, top, left и т. д., Но нечисловые свойства, такие как color или background-color нельзя анимировать с помощью базовой функциональности jQuery. Не все CSS-свойства являются анимируемыми. Как правило, любое CSS-свойство, которое принимает значения в…
Подробнее