jQuery .val () vs .attr ("Wert")

Question 1

Ich hatte gedacht, diese beiden wären gleich, aber sie scheinen es nicht zu sein. Ich habe im Allgemeinen verwendet$obj.attr("value") mit Formularfeldern gearbeitet, aber auf der Seite, die ich gerade erst baue, $obj.attr("value")wird der in mein Feld eingegebene Text nicht zurückgegeben. Tut es $obj.val()jedoch.

Beides habe ich auf einer anderen Seite erstellt $obj.attr("value") und $obj.val()den im Formularfeld eingegebenen Text zurückgegeben.

Was könnte dafür verantwortlich sein $obj.attr("value"), dass in einem Fall wie erwartet gearbeitet wird, in einem anderen jedoch nicht?

Was ist der richtige Weg, um den Wert eines Formularfelds mit jQuery festzulegen und abzurufen?

Question 2

Es gibt einen großen Unterschied zwischen den Eigenschaften eines Objekts eines Objekts und den Attributen eines Objekts

In diesen Fragen (und ihren Antworten) finden Sie einige der Unterschiede: .prop () vs .attr ()

Das Wesentliche ist, .attr(...)dass der Objektwert erst zu Beginn (wenn das HTML erstellt wird) abgerufen wird . val()erhält den Eigenschaftswert des Objekts, der sich um ein Vielfaches ändern kann.

Question 3

Seit jQuery 1.6 attr()wird der ursprüngliche Wert eines Attributs zurückgegeben (der im Markup selbst). Sie müssen prop () verwenden , um den aktuellen Wert zu erhalten:

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

Die Verwendung von val () ist jedoch nicht immer gleich. Beispielsweise ist der Wert von <select>Elementen tatsächlich der Wert der ausgewählten Option. val()berücksichtigt das, prop()tut es aber nicht. Aus diesem Grund val()ist bevorzugt.

Question 4

PS: Dies ist keine Antwort, sondern nur eine Ergänzung zu den obigen Antworten.

Nur als zukünftige Referenz habe ich ein gutes Beispiel beigefügt, das uns helfen könnte, unsere Zweifel auszuräumen:

Versuche Folgendes. In diesem Beispiel werde ich eine Dateiauswahl erstellen, mit der eine Datei ausgewählt werden kann, und dann werde ich versuchen, den Namen der von mir ausgewählten Datei abzurufen: Der HTML-Code ist unten :

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

Die Datei code.js enthält den folgenden jQuery-Code. Versuchen Sie, beide jQuery-Codefragmente einzeln zu verwenden, und sehen Sie sich die Ausgabe an.

jQuery-Code mit attr ('Wert'):

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

jQuery-Code mit val ():

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

Ausgabe:

Die Ausgabe von jQuery-Code mit attr ('value') ist 'undefined'. Die Ausgabe von jQuery-Code mit val () entspricht dem von Ihnen ausgewählten Dateinamen.

Erläuterung : Jetzt können Sie leicht verstehen, was die Top-Antworten vermitteln wollten. Die Ausgabe von jQuery-Code mit attr ('Wert') ist 'undefiniert', da anfangs keine Datei ausgewählt wurde und der Wert undefiniert ist. Es ist besser, val () zu verwenden, da es den aktuellen Wert erhält.

Um zu sehen, warum der undefinierte Wert zurückgegeben wird, versuchen Sie diesen Code in Ihrem HTML-Code und Sie werden sehen, dass jetzt der attr. ('Wert') immer 'test' zurückgibt, da der Wert 'test' ist und zuvor undefiniert war.

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

Ich hoffe es war nützlich für dich.

Question 5

Die richtige Methode zum Festlegen und Abrufen des Werts eines Formularfelds ist die Verwendung der .val()Methode.

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

Mit jQuery 1.6 gibt es eine neue Methode namens .prop().

Ab jQuery 1.6 gibt die .attr()Methode für nicht festgelegte Attribute undefiniert zurück. Darüber hinaus sollte .attr () nicht für einfache Objekte, Arrays, das Fenster oder das Dokument verwendet werden. Verwenden Sie die Methode .prop (), um DOM-Eigenschaften abzurufen und zu ändern.

Question 6

Lernen wir aus einem Beispiel. Es soll ein Texteingabefeld mit dem Standardwert = "Geben Sie Ihren Namen ein" vorhanden sein.

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

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

Beide geben "Geben Sie Ihren Namen ein" zurück.

Angenommen, Sie ändern den Standardtext in Ihrem Browser in "Jose".

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

gibt weiterhin den Standardtext aus, dh "Geben Sie Ihren Namen ein".

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

Gibt .val()aber "Jose" zurück, dh den aktuellen Wert.

Ich hoffe es hilft.

Question 7

Um das valueEingabefeld zu erhalten, sollten Sie immer $element.val()weil- jQueryHandles verwenden, um den richtigen Wert basierend auf dem Browser des Elementtyps abzurufen.

Question 8

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

Question 9

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

Sie können den Wert von id auch mit .attr () abrufen.

Question 10

Dieses Beispiel kann nützlich sein:

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

Erweitern Sie das Snippet

Im obigen Beispiel funktioniert alles perfekt. Wenn Sie jedoch die Version von jquery im Skript-Tag auf 1.9.1 oder neuer ändern, wird in der ersten Warnung "undefiniert" angezeigt. attr ('value') funktioniert nicht mit jquery Version 1.9.1 oder neuer.

Question 11

Beispiel mehr ... attr () ist verschieden, val () ist nur eins! Prop is boolean sind anders.

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

Erweitern Sie das Snippet

Question 12

jquery - Ruft den Wert in ein Eingabetextfeld ab

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

Question 13

Wenn Sie für Eigenschaft und Attribut den gleichen Wert erhalten, dieser jedoch im HTML-Code immer noch unterschiedlich ist, versuchen Sie Folgendes, um den HTML-Wert zu erhalten:

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

Question 14

In attr('value')Sie Sie suchen den Wert eines Attributs namens speziell sagen vaule. Es ist vorzuziehen, dies zu verwenden, val()da dies die sofort einsatzbereite Funktion von jQuery zum Extrahieren des Werts aus Formularelementen ist.

Question 15

Ich habe es immer benutzt .val()und um ehrlich zu sein, wusste ich nicht einmal, dass man den Wert damit nutzen kann .attr("value"). Ich setze den Wert eines Formularfeldes auch mit .val ().$('#myfield').val('New Value');