разлика между prop() и attr() в jQuery и кога да използвате attr() и prop()

Видях на някои места .attr() се използва в jQuery. На някои места се използва .prop(). Но аз търсих в SO и google, много съм объркан. Моля, кажете ми точната разлика между тези две и кога да ги използвам .

Виждал съм следните връзки jQuery attr срещу prop, има списък с реквизити? jQuery attr срещу prop?

Но не получих отговора. Моля, помогнете ми. Благодаря предварително.

Преди да гласувате против, моля, обяснете причината, след което ще коригирам в следващата си публикация.


person PSR    schedule 17.04.2013    source източник


Отговори (3)


от документи

Разликата между атрибути и свойства може да бъде важна в конкретни ситуации. Преди jQuery 1.6 методът .attr() понякога вземаше под внимание стойностите на свойствата при извличане на някои атрибути, което можеше да причини непоследователно поведение. От jQuery 1.6 методът .prop() предоставя начин за изрично извличане на стойности на свойства, докато .attr() извлича атрибути.

пример

Например selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked и defaultSelected трябва да бъдат извлечени и зададени с метода .prop(). Преди jQuery 1.6 тези свойства бяха извличани с метода .attr(), но това не беше в обхвата на attr. Те нямат съответните атрибути и са само свойства.

актуализирано след коментар

Можете да зададете атрибут за HTML елемент. Вие го дефинирате, докато пишете изходния код, след като браузърът анализира вашия код, ще бъде създаден съответният DOM възел, който е обект, който следователно има свойства.

Прост пример може да бъде..

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

Тук type, value, id са атрибути. След като браузърът го изобрази, ще получите други свойства като align, alt, autofocus, baseURI, checked и т.н.

връзка, ако искате да прочетете повече за това

person bipen    schedule 17.04.2013
comment
Първо, няма тип като тест. Мисля, че имаш предвид текст. Текстът от втори тип въвеждане няма отметнато свойство. - person Debasis Panda; 06.11.2019
comment
@DebasisPanda : Моля, не се обърквайте. Това е пример. От type = test искам просто да дам пример за HTML елементи (не само текст) :) - person bipen; 15.01.2020

.attr() променя атрибутите за този HTML таг.

.prop() променя свойствата за този HTML таг според DOM дървото.

Както подсказва примерът в тази връзка. Едно поле за въвеждане може да има атрибут "стойност". Това ще се изравни със стойността по подразбиране, която сте въвели. Ако потребителят промени стойността в полето за въвеждане, свойството „стойност“ се променя в DOM дървото, но оригиналният атрибут остава останал.

Така че основно, ако искате стойността по подразбиране да бъде зададена за атрибут на HTML таг, използвайте функцията .attr(). Ако тази стойност може да бъде променена от потребителя (като входове, квадратчета за отметка, радиостанции и т.н.), използвайте функцията .prop(), за да получите най-новата стойност.

Справка: HTML : Разликата между атрибут и свойство

Примерен фрагмент

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

person CP510    schedule 17.04.2013

JQuery е променяща се библиотека и понякога правят редовни подобрения. .attr() се използва за получаване на атрибути от HTML таговете и въпреки че е перфектно функционален, .prop() беше добавен по-късно, за да бъде по-семантичен и работи по-добре с атрибути без стойност като 'checked' и 'selected'.

Препоръчва се, ако използвате по-нова версия на JQuery, да използвате .prop(), когато е възможно.

person Cyril Gupta    schedule 17.04.2013