jQuery .val () проти .attr ("значення")


77

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

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

Що може спричинити $obj.attr("value")роботу, як очікувалося, в одному випадку, а ні в іншому?

Який правильний спосіб встановити та отримати значення поля форми за допомогою jQuery?


3
JQuery .val () проти .attr (): stackoverflow.com/questions/4837133 / ...
Adrien Be

1
Справжня причина полягає в тому, val()що значення отримується лише з певного типу тегів, наприклад, ви можете отримати значення вводу за допомогою, val()але якщо ви додасте valueатрибут до aтегу або divтегу, це не спрацює. Вам доведеться скористатися.attr("value")
Сераф

Відповіді:


90

Існує велика різниця між властивостями об’єктів та атрибутами об’єктів

Перегляньте ці запитання (та відповіді на них) щодо деяких відмінностей: .prop () проти .attr ()

Суть полягає в тому, що .attr(...)значення об’єктів отримується лише на початку (коли створюється html). val()отримує значення властивості об’єкта, яке може змінюватися багато разів.


1
@Neal: Думаю, ви маєте на увазі, що val () отримує / набори propertiesпроти attr () отримує / набори attributes, просто додавши цей коментар, оскільки я не отримав його вперше, коли прочитав вашу відповідь. Можливо, ви можете додати цю інформацію для уточнення? чудова відповідь до речі.
Adrien Be

25

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

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

Однак використання val () не завжди однаково. Наприклад, значення <select>елементів насправді є значенням вибраного ними параметра. val()враховує це, але prop()ні. З цієї причини val()переважно.


Велика примітка про різницю, що виникає при роботі з <select>елементами. Ось що мене зрозуміло.
Канук

4

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 ('value') буде 'undefined'. На виході коду jQuery з val () буде вказано вибране вами ім'я файлу.

Пояснення : Тепер ви можете легко зрозуміти, що хотіли передати найкращі відповіді. Вихід коду jQuery з attr ('value') буде 'undefined', оскільки спочатку не було вибрано жодного файлу, тому значення undefined. Краще використовувати val (), оскільки він отримує поточне значення.

Для того, щоб зрозуміти, чому повертається невизначене значення, спробуйте цей код у своєму HTML, і ви побачите, що зараз attr. ('Value') завжди повертає 'test', оскільки значення є "test", а раніше воно було невизначеним.

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

Сподіваюся, це було вам корисно.


2

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

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

З jQuery 1.6 є новий метод, який називається .prop().

Починаючи з jQuery 1.6, .attr()метод повертає невизначений для атрибутів, які не були встановлені. Крім того, .attr () не слід використовувати на звичайних об'єктах, масивах, вікні чи документі. Щоб отримати та змінити властивості DOM, використовуйте метод .prop ().


2

Давайте вчитися на прикладі. Нехай буде поле введення тексту із значенням за замовчуванням = "Введіть своє ім'я"

var inp = $("input").attr("value");

var inp = $("input").val();

Обидва повернуть "Введіть своє ім'я"

Але припустимо, ви змінили текст за замовчуванням на "Jose" у своєму браузері.

var inp = $("input").attr("value");

все одно буде давати текст за замовчуванням, тобто "Введіть своє ім'я".

var inp = $("input").val();

Але .val()поверне "Хосе", тобто поточне значення.

Сподіваюся, це допоможе.


2

Для того, щоб отримати valueбудь-яке поле введення, ви завжди повинні використовувати, $element.val()оскільки jQueryдескриптори отримують правильне значення на основі браузера типу елемента.


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

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

Ви також можете отримати значення id, використовуючи .attr ()


1

цей приклад може бути корисним:

<html>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  </head>
  <body>
	<input id="test" type="text"  />
	<button onclick="testF()" >click</button>
	
	
	<script>
	function testF(){
	
		alert($('#test').attr('value'));
		alert( $('#test').prop('value'));
		alert($('#test').val());
		}
	</script>
  </body>
 </html>

у наведеному вище прикладі все працює ідеально. але якщо ви зміните версію jquery на 1.9.1 або новішу в тегу сценарію, ви побачите "undefined" у першому попередженні. attr ('value') не працює з jquery версії 1.9.1 або новішої.


0

Приклад більше ... attr () різноманітний, val () - лише один! Проп булеві різні.

//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>


0

jquery - Отримати значення у текстовому полі вводу

<script type="text/javascript"> 

jQuery(document).ready(function(){

var classValues = jQuery(".cart tr").find("td.product-name").text();
classValues = classValues.replace(/[_\W]+/g, " ")

jQuery('input[name=your-p-name]').val(classValues);

//alert(classValues);

});

</script>

0

Якщо ви отримуєте однакове значення як для властивості, так і для атрибута, але все одно бачите, що воно різниться в HTML, спробуйте це, щоб отримати HTML:

$('#inputID').context.defaultValue;

-2

У attr('value')ви обумовлюючи ви шукаєте значення атрибута з ім'ям vaule. Переважно використовувати, val()оскільки це функція jQuery нестандартна для вилучення значення з елементів форми.


-4

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.