różnica między prop () i attr () w jQuery i kiedy używać attr () i prop () [duplicate]

To pytanie ma już odpowiedź tutaj:

Widziałem w niektórych miejscach .attr () jest używany w jQuery.In w niektórych miejscach .używa się funkcji prop ().Ale szukałem W SO I google jestem bardzo zdezorientowany .Proszę powiedz mi dokładną różnicę między tych dwóch i kiedy ich używać.

Widziałem następujące linki jQuery attr vs. prop, jest lista rekwizytów? jQuery attr vs prop?

Ale nie dostałem odpowiedzi.Proszę, pomóż mi.Z góry dzięki.

Przed wydaniem downvote proszę o wyjaśnienie przyczyny, wtedy poprawię w następnym poście.

Author: Community, 2013-04-17
Source

3 answers

From docs

Różnica między atrybutami i właściwościami może być ważna w określonych sytuacjach. Przed jQuery 1.6,metoda attr () czasami bierze pod uwagę wartości właściwości podczas pobierania niektórych atrybutów, co może powodować niespójne zachowanie. Od jQuery 1.6,metoda prop() zapewnia sposób jawnego pobierania wartości właściwości while .attr() pobiera atrybuty.

Przykład

Na przykład selectedIndex, tagName, nodeName, NodeType, ownerDocument, defaultChecked i defaultSelected powinny być pobierane i ustawiane za pomocą .metoda prop (). Przed jQuery 1.6, właściwości te były odzyskiwalne z .metoda attr (), ale nie wchodziła ona w zakres attr. Nie mają one odpowiednich atrybutów i są jedynie właściwościami.

Zaktualizowano po komentarzu

Możesz ustawić atrybut dla elementu HTML. Definiujesz go podczas pisania kodu źródłowego, gdy przeglądarka analizuje Twój kod, odpowiedni węzeł DOM zostanie utworzony, który jest obiektem posiadającym właściwości.

Prosty przykład może być..

<input type="test" value="test" id="test" />

Tutaj type, value, id są atrybutami.Gdy przeglądarka go renderuje, otrzymasz inne właściwości, takie jak align, alt, autofocus, baseURI, checked i tak dalej.

Link Jeśli chcesz przeczytać więcej na ten temat

 75
Author: bipen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-21 07:15:36

.attr() zmienia atrybuty tego znacznika HTML.

.prop() zmienia właściwości tego znacznika HTML zgodnie z drzewem DOM.

Jak sugeruje przykład w tym linku. Pole wejściowe może mieć atrybut "value". Będzie to równa wartości domyślnej, którą wprowadziłeś. Jeśli użytkownik zmieni wartość w polu wejściowym, właściwość "value"zmieni się w drzewie DOM, ale oryginalny atrybut zostanie pozostawiony.

Więc zasadniczo, jeśli chcesz ustawić domyślną wartość dla znacznika HTML atrybut, użyj funkcji .attr(). Jeżeli wartość ta może być zmieniona przez użytkownika (np. wejścia, checkboxy, radia, itd.) użyj funkcji .prop(), aby uzyskać najnowszą wartość.

Bibliografia : HTML: różnica między atrybutem a właściwością

Przykładowy Fragment 

$(document).ready(function() {
  console.log($('#test').attr('value') + " - With .attr()");

  $('#answer').click(function() {
    console.log($('#test').attr('value') + " - With .attr()");
    console.log($('#test').prop('value') + " - With .prop()");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>Change the input value and check the console...</div>
<input type="text" id="test" value="Sample">
<button id="answer">Click Me</button>
 53
Author: CP510,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-22 08:02:21

JQuery jest zmieniającą się biblioteką i czasami wprowadza regularne ulepszenia. .attr() jest używany do pobierania atrybutów ze znaczników HTML, a mimo to jest doskonale funkcjonalny .funkcja prop() została dodana później, aby była bardziej semantyczna i działa lepiej z atrybutami mniej wartościowymi, takimi jak 'checked' i 'selected'.

Zaleca się, że jeśli używasz późniejszej wersji JQuery należy użyć .prop ()

 7
Author: Cyril Gupta,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-17 04:30:20