JQuery.val() vs .attr( "value" )

Я думал, что эти два были одинаковыми, но, похоже, их не было. Обычно я использовал $obj.attr("value") для работы с полями формы, но на странице, которую я сейчас создаю, $obj.attr("value") не возвращает текст, который я вводил в свое поле. Однако $obj.val() делает.

На другой странице, которую я построил, оба $obj.attr("value") и $obj.val() возвращают текст, введенный в поле формы.

Что может объяснить $obj.attr("value") работающий как ожидалось в одном случае, но не в другом?

Каков правильный способ установки и получения значения поля формы с помощью jQuery?

ОТВЕТЫ

Ответ 1

Существует разница большая между свойствами объектов и атрибутами объектов

Посмотрите на этот вопрос (и его ответы) на некоторые из отличий: .prop() vs .attr()

Суть в том, что .attr(...) получает только значение объектов в начале (когда создается html). val() получает значение объекта свойство, которое может меняться много раз.

Ответ 2

Так как jQuery 1.6, attr() вернет исходное значение атрибута (того самого в самой разметке). Вам нужно использовать prop(), чтобы получить текущее значение:

var currentValue = $obj.prop("value");

Однако использование val() не всегда одно и то же. Например, значение элементов <select> фактически является значением выбранного параметра. val() учитывает это, но prop() - нет. По этой причине предпочтительнее val().

Ответ 3

PS: Это не ответ, а просто дополнение к вышеуказанным ответам.

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

Попробуйте следующее. В этом примере я создам селектор файлов, который можно использовать для выбора файла, а затем попытаюсь получить имя файла, который я выбрал: Код html ниже:

<html>
    <body>
        <form action="#" method="post">
            <input id ="myfile" type="file"/>
        </form>
        <script type="text/javascript" src="jquery.js"> </script>
        <script type="text/javascript" src="code.js"> </script>
    </body>
</html>

В файле code.js содержится следующий код jQuery. Попытайтесь использовать оба фрагментов кода jQuery по одному и видеть результат.

Код jQuery с attr ('значение'):

$('#myfile').change(function(){
    alert($(this).attr('value'));
    $('#mybutton').removeAttr('disabled');
});

Код jQuery с val():

$('#myfile').change(function(){
    alert($(this).val());
    $('#mybutton').removeAttr('disabled');
});

Вывод:

Вывод кода jQuery с attr ('значение') будет 'undefined'. Вывод кода jQuery с val() будет выбранным вами именем.

Объяснение: Теперь вы можете легко понять, что хотели передать лучшие ответы. Вывод кода jQuery с attr ('value') будет 'undefined', потому что изначально не было выбрано ни одного файла, поэтому значение undefined. Его лучше использовать val(), потому что он получает текущее значение.

Чтобы узнать, почему возвращается значение undefined, попробуйте этот код в вашем html, и вы увидите, что теперь attr. ('value') всегда возвращает 'test', потому что это значение 'test' и ранее это было undefined.

<input id ="myfile" type="file" value='test'/>

Я надеюсь, что это было полезно для вас.

Ответ 4

Правильный способ установки и получения значения поля формы использует метод .val().

$('#field').val('test'); // Set
var value = $('#field').val(); // Get

В jQuery 1.6 появился новый метод .prop().

Как и в jQuery 1.6, метод .attr() возвращает undefined для атрибутов которые не были установлены. Кроме того,.attr() не следует использовать в простые объекты, массивы, окно или документ. Для извлечения и измените свойства DOM, используйте метод .prop().

Ответ 5

Чтобы получить value любого поля ввода, вы всегда должны использовать $element.val(), потому что jQuery обрабатывает, чтобы получить правильное значение на основе браузера типа элемента.

Ответ 6

jQuery('.changer').change(function () {
    var addressdata = jQuery('option:selected', this).attr('address');
    jQuery("#showadd").text(addressdata);
});

Ответ 7

jQuery(".morepost").live("click", function() { 
var loadID = jQuery(this).attr('id'); //get the id 
alert(loadID);    
});

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

Ответ 8

Пример еще... attr() различен, val() - это всего лишь один! Prop является логическим, разные.

//EXAMPLE 1 - RESULT
$('div').append($('input.idone').attr('value')).append('<br>');
$('div').append($('input[name=nametwo]').attr('family')).append('<br>');
$('div').append($('input#idtwo').attr('name')).append('<br>');
$('div').append($('input[name=nameone]').attr('value'));

$('div').append('<hr>'); //EXAMPLE 2
$('div').append($('input.idone').val()).append('<br>');

$('div').append('<hr>'); //EXAMPLE 3 - MODIFY VAL
$('div').append($('input.idone').val('idonenew')).append('<br>');
$('input.idone').attr('type','initial');
$('div').append('<hr>'); //EXAMPLE 3 - MODIFY VALUE
$('div').append($('input[name=nametwo]').attr('value', 'new-jquery-pro')).append('<br>');
$('input#idtwo').attr('type','initial');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="hidden" class="idone" name="nameone" value="one-test" family="family-number-one">
<input type="hidden" id="idtwo" name="nametwo" value="two-test" family="family-number-two">
<br>
<div></div>

Ответ 9

В attr('value') вы говорите, что ищете значение атрибута с именем vaule. Предпочтительно использовать val(), поскольку это функция jQuery из коробки для извлечения значения из элементов формы.

Ответ 10

Я всегда использовал .val(), и, честно говоря, я даже не знал, что вы можете получить значение с помощью .attr("value"). Я устанавливаю значение поля формы, используя .val(), а также ex. $('#myfield').val('New Value');