Pytanie .prop () vs .attr ()


Więc jQuery 1.6 ma nową funkcję prop().

$(selector).click(function(){
    //instead of:
    this.getAttribute('style');
    //do i use:
    $(this).prop('style');
    //or:
    $(this).attr('style');
})

czy w tym przypadku robią to samo?

A jeśli ja zrobić musicie przełączyć się na używanie prop(), wszystkie stare attr() połączenia przerwie się, jeśli przejdę na 1.6?

AKTUALIZACJA

selector = '#id'

$(selector).click(function() {
    //instead of:
    var getAtt = this.getAttribute('style');
    //do i use:
    var thisProp = $(this).prop('style');
    //or:
    var thisAttr = $(this).attr('style');

    console.log(getAtt, thisProp, thisAttr);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<div id='id' style="color: red;background: orange;">test</div>

(Zobacz także ten skrzypce: http://jsfiddle.net/maniator/JpUF2/)

Konsola loguje się getAttribute jako ciąg znaków i attr jako ciąg znaków, ale znak prop jak CSSStyleDeclaration, Czemu? I jak to wpływa na moje kodowanie w przyszłości?


2054
2018-05-03 19:33


pochodzenie


Będzie to miało szczególne znaczenie: books.google.ca/...
@Neal, ponieważ ta zmiana wykracza poza jQuery. Różnica między atrybutami HTML a właściwościami DOM jest ogromna.
Smutno mi, gdy jQuery wrócił do zmian. Kierują się w złym kierunku.
@Neal. Tak, i to tylko komplikuje problem dalej, zamiast oddzielać obie metody.
@BritishDeveloper odpowiedź jest bardziej skomplikowana niż po prostu stwierdzenie, że zawsze używaj x lub y, ponieważ zależy to od tego, co zamierzasz uzyskać. Czy chcesz atrybut, czy chcesz tę nieruchomość? są to dwie bardzo różne rzeczy. - Kevin B


Odpowiedzi:


Aktualizacja 1 listopada 2012 r

Moja oryginalna odpowiedź dotyczy konkretnie jQuery 1.6. Moja rada pozostaje niezmienna, ale jQuery 1.6.1 nieco się zmieniła: w obliczu przewidywanego stosu uszkodzonych stron zespół jQuery cofnięty attr() do czegoś bliskiego (ale niekoniecznie takiego samego) jak stare zachowanie atrybutów Boolean. John Resig również blogował o tym. Widzę trudność, w jakiej się znaleźli, ale nadal nie zgadzam się z jego zaleceniem, aby preferować attr().

Oryginalna odpowiedź

Jeśli kiedykolwiek używałeś jQuery, a nie DOM bezpośrednio, może to być myląca zmiana, chociaż jest to zdecydowanie poprawa koncepcyjnie. Nie tak dobre dla bazillions witryn korzystających z jQuery, które zostaną złamane w wyniku tej zmiany.

Podsumuję główne problemy:

  • Zwykle chcesz prop() zamiast attr().
  • W większości przypadków prop() robi co attr() używane do zrobienia. Zastępowanie połączeń do attr() z prop() w twoim kodzie na ogół zadziała.
  • Właściwości są na ogół łatwiejsze w użyciu niż atrybuty. Wartość atrybutu może być tylko łańcuchem, podczas gdy właściwość może być dowolnego typu. Na przykład checked właściwość to Boolean, style Właściwość jest obiektem z indywidualnymi właściwościami dla każdego stylu, size właściwość jest liczbą.
  • Jeśli istnieje zarówno właściwość, jak i atrybut o tej samej nazwie, zwykle aktualizacja jednej aktualizacji drugiego, ale nie jest tak w przypadku niektórych atrybutów danych wejściowych, takich jak value i checked: dla tych atrybutów właściwość zawsze reprezentuje bieżący stan, podczas gdy atrybut (poza starymi wersjami IE) odpowiada domyślnej wartości / sprawdzeniu danych wejściowych (odzwierciedlonej w defaultValue / defaultChecked własność).
  • Ta zmiana usuwa część warstwy magicznego jQuery utkniętego przed atrybutami i właściwościami, co oznacza, że ​​programiści jQuery będą musieli dowiedzieć się trochę o różnicy między właściwościami i atrybutami. To coś dobrego.

Jeśli jesteś deweloperem jQuery i mylisz się z tym całym biznesem na temat właściwości i atrybutów, musisz zrobić krok do tyłu i dowiedzieć się trochę o nim, ponieważ jQuery nie próbuje już tak bardzo chronić Cię przed tymi rzeczami. Dla autorytatywnego, ale nieco suchego słowa na ten temat, są specyfikacje: DOM4, HTML DOM, DOM Level 2, DOM Level 3. Dokumentacja DOM Mozilli jest odpowiednia dla większości nowoczesnych przeglądarek i jest łatwiejsza do odczytania niż specyfikacja, więc możesz ją znaleźć Odniesienie do DOM pomocny. Jest jeden sekcja o właściwościach elementu.

Jako przykład tego, jak właściwości są łatwiejsze w obsłudze niż atrybuty, należy rozważyć pole wyboru, które jest wstępnie zaznaczone. Oto dwa możliwe fragmenty prawidłowego kodu HTML:

<input id="cb" type="checkbox" checked>
<input id="cb" type="checkbox" checked="checked">

Jak więc sprawdzić, czy pole wyboru jest zaznaczone przy pomocy jQuery? Spójrz na przepełnienie stosu i zwykle znajdziesz następujące sugestie:

  • if ( $("#cb").attr("checked") === true ) {...}
  • if ( $("#cb").attr("checked") == "checked" ) {...}
  • if ( $("#cb").is(":checked") ) {...}

Jest to najprostsza rzecz na świecie związana z checked Właściwość boolean, która od 1995 r. Istniała i działała bezbłędnie w każdej ważnej przeglądarce skryptowej:

if (document.getElementById("cb").checked) {...}

Właściwość sprawia również, że zaznaczenie lub odznaczenie pola wyboru jest banalne:

document.getElementById("cb").checked = false

W jQuery 1.6 staje się to jednoznacznie

$("#cb").prop("checked", false)

Idea korzystania z checked atrybut dla skryptów pole wyboru nie jest pomocne i niepotrzebne. Ta nieruchomość jest tym, czego potrzebujesz.

  • Nie jest oczywiste, jaki jest poprawny sposób zaznaczenia lub odznaczenia pola wyboru przy użyciu checked atrybut
  • Wartość atrybutu odzwierciedla domyślny zamiast bieżącego stanu widocznego (z wyjątkiem niektórych starszych wersji IE, co czyni jeszcze trudniejszym). Atrybut nic nie mówi o tym, czy pole wyboru na stronie jest zaznaczone. Widzieć http://jsfiddle.net/VktA6/49/.

1735
2018-05-03 23:06



@Neal: jeśli chcesz wiedzieć, jakie właściwości mają elementy DOM i jak atrybuty mogą wysyłać ich wartości, pozostaw te linki pod ręką: Specyfikacja HTML DOM2, DOM2 spec, i DOM3 spec. Indeksy w każdym przypadku są doskonałe i łączą cię bezpośrednio z dokładnym opisem nieruchomości, skąd pochodzi jej wartość itp. - T.J. Crowder
@Neal: Re, co czyni go innym: Źródło i charakter informacji. Spójrz na Tima value na przykład. Funkcja o nazwie attr który pobiera własność  value raczej niż atrybut "wartość" nie ma większego sensu (i mogą być różne). Iść naprzód, attr robić atrybuty i prop robienie właściwości będzie bardziej przejrzyste, chociaż przejście będzie dla niektórych bolesne. Nie traktuj tego w niewłaściwy sposób, nie ma to jak cofanie się i czytanie specyfikacji, aby dowiedzieć się, jakie są właściwości. - T.J. Crowder
@Neal: Element DOM jest obiektem. Właściwości są właściwościami tego obiektu, tak jak każdy inny obiekt programujący. Niektóre z tych rekwizytów pobierają wartości początkowe z atrybutów w znacznikach, które są również przechowywane w obiekcie DOM w oddzielny mapa atrybutów. W większości przypadków pisanie do rekwizytów zmienia tylko rekwizyt, chociaż niestety są pewne rekwizyty, które zapisują wszelkie zmiany w bazowym attr (value na przykład), ale spróbujmy to zignorować. 99% czasu, chcesz pracować z rekwizytami. Jeśli potrzebujesz pracować z rzeczywistym atrybutem, prawdopodobnie to wiesz. - T.J. Crowder
@Tim: "Zmienianie value własność danych wejściowych nie zmienia jej value atrybut w nowoczesnych przeglądarkach " Nie sądziłem, że tak, dlatego zacząłem używać go jako przykładu, ale kiedy zacząłem kodować ten przykład, cholernie, jeśli nie zaktualizowano go w Chrome, Firefox, Opera, IE ... jsbin.com/ahire4 Okazuje się, że to dlatego, że używałem input[type="button"] na mój eksperyment. To nie robi zaktualizuj atrybut na input[type="text"] - jsbin.com/ahire4/2 Mów o zawiłych !! Nie tylko element, ale i rodzaj tego ... - T.J. Crowder
$('#chk').checked  nigdy pracował ... To nie jest właściwe jQuery w ogóle ... - Neal


Myślę Tim powiedział to całkiem nieźle, ale cofnijmy się:

Element DOM jest obiektem, rzeczą w pamięci. Jak większość obiektów w OOP, ma nieruchomości. Ma również osobno mapę atrybutów zdefiniowanych w elemencie (zwykle pochodzących ze znaczników, które przeglądarka odczytała w celu utworzenia elementu). Niektóre elementy nieruchomości zdobyć ich Inicjał wartości od atrybuty o tych samych lub podobnych nazwach (value otrzymuje wartość początkową z atrybutu "value"; href pobiera wartość początkową z atrybutu "href", ale nie jest to dokładnie ta sama wartość; className z atrybutu "klasa"). Inne właściwości pobierają swoje wartości początkowe w inny sposób: Na przykład parentNode właściwość otrzymuje swoją wartość w oparciu o jej element macierzysty; element zawsze ma style właściwość, niezależnie od tego, czy ma atrybut "styl" czy nie.

Rozważmy tę kotwicę na stronie na http://example.com/testing.html:

<a href='foo.html' class='test one' name='fooAnchor' id='fooAnchor'>Hi</a>

Pewna bezpłatna sztuka ASCII (i pomijająca wiele rzeczy):

+ ------------------------------------------- +
| HTMLAnchorElement |
+ ------------------------------------------- +
| href: "http://example.com/foo.html" |
| nazwa: "fooAnchor" |
| id: "fooAnchor" |
| className: "testuj jeden" |
| atrybuty: |
| href: "foo.html" |
| nazwa: "fooAnchor" |
| id: "fooAnchor" |
| klasa: "przetestuj jeden" |
+ ------------------------------------------- +

Zwróć uwagę, że właściwości i atrybuty są różne.

Teraz, chociaż są one odrębne, ponieważ wszystko to ewoluowało, a nie było zaprojektowane od podstaw, wiele właściwości zapisuje z powrotem atrybut, z którego pochodzą, jeśli je ustawisz. Ale nie wszyscy tak robią i jak widzicie hrefpowyżej, mapowanie nie zawsze jest proste "przekazywanie wartości na", czasami w grę wchodzi interpretacja.

Kiedy mówię o właściwościach będących właściwościami obiektu, nie mówię w sposób abstrakcyjny. Oto kod spoza jQuery:

var link = document.getElementById('fooAnchor');
alert(link.href);                 // alerts "http://example.com/foo.html"
alert(link.getAttribute("href")); // alerts "foo.html"

(Wartości te są zgodne z większością przeglądarek - są pewne różnice).

The link obiekt jest rzeczywistością i widać, że istnieje realna różnica między dostępem do a własność na tym i dostęp do atrybut.

Jak powiedział Tim, zdecydowana większość czasu, chcemy pracować z właściwościami. Częściowo dlatego, że ich wartości (nawet ich nazwy) wydają się bardziej spójne w różnych przeglądarkach. Głównie chcemy pracować z atrybutami tylko wtedy, gdy nie ma z nim powiązania (atrybuty niestandardowe) lub gdy wiemy, że dla tego konkretnego atrybutu atrybut i właściwość nie są 1: 1 (jak w przypadku href i "href" powyżej).

Standardowe właściwości są określone w różnych specyfikacjach DOM:

Te specyfikacje mają doskonałe indeksy i polecam przechowywanie linków do nich pod ręką; Używam ich cały czas.

Atrybuty niestandardowe będą obejmować na przykład dowolny data-xyz atrybuty, które możesz umieścić na elementach, aby dostarczyć meta-dane do swojego kodu (teraz, który jest ważny od HTML5, o ile będziesz trzymać się data- prefiks). (Najnowsze wersje jQuery dają dostęp do data-xyz elementy za pośrednictwem data funkcja, ale ta funkcja jest nie tylko akcesor dla data-xyz atrybuty [robi więcej i mniej niż]; chyba że faktycznie potrzebujesz jego funkcji, użyłbym attr funkcja do interakcji z data-xyz atrybut.)

The attr funkcja miała trochę zawiłej logiki, aby uzyskać to, o czym sądzisz, że chcesz, zamiast dosłownie uzyskiwać atrybut. Połączyła pojęcia. Przeprowadzka do prop i attr miał na celu ich de-conflate. Krótko w wersji 1.6.0 jQuery poszło za daleko w tym względzie, ale funkcjonalność został szybko dodany do attr radzić sobie z typowymi sytuacjami, w których ludzie używają attr kiedy technicznie powinni używać prop.


623
2018-05-04 14:27



Łał. ta nowa aktualizacja 1.6.1 naprawdę niweczy to pytanie nieco (ale niewiele), ale ten link w zasadzie odpowiada teraz - Neal
Nie zniszczyło go dla mnie, naprawiłem błąd za pomocą jquery1.7, gdzie ustawiałem .attr ("class", "bla") i nie działało ono gdzie .prop ("className", "bla" ) pracował - PandaWood
@PandaWood: .attr('class', 'bla') działa zgodnie z oczekiwaniami 1.7.0, 1.7.1, i 1.7.2 w przeglądarkach Chrome 17, Firefox 11, Opera 11, IE6, IE8, IE9 i Safari 5. - T.J. Crowder
Dzięki, w moim przypadku musi być coś konkretnego, pozwól mi to sprawdzić i wrócić z testowym przykładem. Ale zmiana kodu, jaki mamy teraz, po prostu "prop / className", zamiast "attr" naprawia ogromny błąd dla nas, który uderzył, gdy przenieśliśmy się z jquery1.4 do 1.7 - we wszystkich przeglądarkach - PandaWood
@ T.J.Crowder re: .data - będzie czytać domyślna wartość atrybutu, jeśli jest obecna, ale jeśli do niego napiszesz, zmieni się w ukryty własność elementu, a nie aktualizować atrybutu. - Alnitak


Ta zmiana już dawno nadejdzie dla jQuery. Przez lata byli zadowoleni z funkcji o nazwie attr() w większości pobrano właściwości DOM, a nie wynik, którego można się spodziewać po nazwie. Segregacja attr() i prop() powinno pomóc złagodzić niektóre pomyłki między atrybutami HTML a właściwościami DOM. $.fn.prop() chwyta określoną właściwość DOM, podczas gdy $.fn.attr() chwyta określony atrybut HTML.

Aby w pełni zrozumieć, jak działają, przedstawiamy rozszerzone wyjaśnienie różnicy między atrybutami HTML a właściwościami DOM .:

Atrybuty HTML

Składnia:

<body onload="foo()">

Cel, powód: Pozwala znacznikom na powiązanie z nimi danych dotyczących zdarzeń, renderowania i innych celów.

Wyobrażanie sobie: HTML AttributesAtrybut klasy jest tutaj pokazany na ciele. Jest dostępny za pośrednictwem następującego kodu:

var attr;
attr = document.body.getAttribute("class");
//IE 8 Quirks and below
attr = document.body.getAttribute("className");

Atrybuty są zwracane w postaci ciągów i mogą być niespójne między przeglądarką a przeglądarką. Jednak w niektórych sytuacjach mogą być istotne. Jak pokazano powyżej, tryb IE 8 Quirks (i poniżej) oczekuje nazwy właściwości DOM w get / set / removeAttribute zamiast nazwy atrybutu. Jest to jeden z wielu powodów, dla których ważne jest, aby znać różnicę.

Właściwości DOM

Składnia:

document.body.onload = foo;

Cel, powód: Daje dostęp do właściwości należących do węzłów elementów. Te właściwości są podobne do atrybutów, ale są dostępne tylko za pośrednictwem JavaScript. Jest to ważna różnica, która pomaga wyjaśnić rolę właściwości DOM. Należy pamiętać, że atrybuty są całkowicie różne od właściwości, ponieważ to przypisanie obsługi zdarzeń jest bezużyteczne i nie będzie odbierać zdarzenia (treść nie ma zdarzenia onload, tylko atrybut onload).

Wyobrażanie sobie: DOM Properties

Tutaj zobaczysz listę właściwości w zakładce "DOM" w Firebug. Są to właściwości DOM. Od razu zauważysz ich kilka, ponieważ używałeś ich wcześniej, nie zdając sobie z tego sprawy. Ich wartości są tym, co otrzymujesz za pomocą JavaScript.

Dokumentacja

Przykład

HTML: <textarea id="test" value="foo"></textarea>

JavaScript: alert($('#test').attr('value'));

We wcześniejszych wersjach jQuery zwraca to pusty ciąg. W 1.6 zwraca poprawną wartość, foo.

Nie rzucając okiem na nowy kod dla żadnej z tych funkcji, mogę z pewnością stwierdzić, że zamieszanie ma więcej wspólnego z różnicą między atrybutami HTML a właściwościami DOM niż z samym kodem. Mam nadzieję, że to wyjaśniło wam pewne rzeczy.

-Matt


235
2018-05-03 20:05



@Matt to nic nie wyjaśnia prop() w jQuery .... - Neal
$.prop() dostaje właściwości DOM, $.attr() dostaje atrybuty HTML. Próbuję wypełnić psychologicznie lukę, abyś mógł zrozumieć różnicę między nimi.
Chłopcze, teraz też jestem zdezorientowany. Więc $('#test').prop('value') nic nie zwraca? Ani nie .attr('checked') dla pola wyboru? Ale kiedyś tak było? Teraz musisz to zmienić prop('checked')? Nie rozumiem potrzeby tego rozróżnienia - dlaczego ważne jest rozróżnianie atrybutów HTML od właściwości DOM? Jaki jest typowy przypadek użycia, który spowodował tę zmianę "długi czas nadchodzi"? Co jest źle z abstrakcją rozróżnienia między dwoma, ponieważ wydaje się, że ich przypadki użycia w większości pokrywają się? - BlueRaja - Danny Pflughoeft
@ BlueRaja: ponieważ istnieje poważna różnica między tymi dwoma koncepcjami, które, jeśli wyczyścisz ją pod dywan, tak jak kiedyś użyty jQuery, skutkuje nieoczekiwanymi awariami. value jest jednym z najbardziej oczywistych przypadków, ponieważ value Właściwość podaje aktualną wartość pola, ale value atrybut da ci oryginalną wartość, która została zadeklarowana w value="..." atrybut, który w rzeczywistości jest defaultValue własność. (Chociaż ten konkretny przypadek ponownie zostaje zmylony przez błędy w IE <9.) - bobince
@ BlueRaja: Odpowiedź na to pytanie jest jeszcze bardziej skomplikowana. :-) Ustawienie attr('value', ...) w jQuery <1.6 ustawia właściwość, więc bieżąca wartość zmienia się, a wartość domyślna nie. W 1.6 ustawia atrybut, więc teoretycznie wartość domyślna zmienia się, a bieżąca wartość nie. Istnieją jednak (więcej) niespójności w przeglądarkach nad tym, co dokładnie ustawia value atrybut ma. W IE ustawia również bieżącą wartość; w niektórych przeglądarkach ustawia tylko bieżącą wartość, jeśli aktualna wartość nie została wcześniej ustawiona. [płacze] - bobince


Właściwość znajduje się w DOM; atrybut jest w kodzie HTML parsowanym w DOM.

Dalsze szczegóły

Jeśli zmienisz atrybut, zmiana zostanie odzwierciedlona w DOM (czasami z inną nazwą).

Przykład: zmiana class atrybut tagu zmieni nazwę className właściwość tego tagu w DOM. Jeśli nie masz atrybutu tagu, nadal masz odpowiednią właściwość DOM z pustą lub domyślną wartością.

Przykład: o ile Twój tag nie ma class atrybut, właściwość DOM className istnieje z pustą wartością ciągu.

edytować

Jeśli zmienisz ten, drugi zostanie zmieniony przez kontroler i na odwrót. Ten kontroler nie znajduje się w jQuery, ale w natywnym kodzie przeglądarki.


233
2017-09-27 16:55



Czy to oznacza, że ​​lepiej jest zaktualizować atrybut, ponieważ wtedy upewniasz się, że atrybut i właściwość są aktualizowane i wyrównane? - Luke
@Luke DOM to wewnętrzna reprezentacja techniczna, model. Atrybuty HTML to reprezentacja zewnętrzna, widok. Jeśli zmienisz ten, drugi zostanie zmieniony przez kontroler i na odwrót. - HerrSerker
@Luke Spójrz na to: jsfiddle.net/Pms3W - HerrSerker
@HerrSerker Więc oba są zsynchronizowane przez kontroler? Zakładam, że jest to tylko w metodach attr i prop jQuery's? Oto modyfikacja twojego skrzypka, w której badam to więcej - jsfiddle.net/v8wRy - i jak dotąd wydają się być równoważne. - Luke
"Jeśli zmienisz ten, drugi zostanie zmieniony przez kontroler i na odwrót, ten kontroler nie jest w jQuery, ale w natywnym kodzie przeglądarki." To jest nie prawda dla większości atrybutów / właściwości. Dla większości jest to tylko jednokierunkowe tłumaczenie, w którym atrybut określa Inicjał wartość odpowiedniej właściwości. Dwie najwyższe odpowiedzi wyjaśniają to szczegółowo. - ᴠɪɴᴄᴇɴᴛ


To rozróżnienie między atrybutami HTML a obiektami DOM powoduje zamieszanie. Dla tych, którzy czują się komfortowo, działając na elementach DOM właściwości rodzime takie this.src  this.value  this.checked itp, .prop to bardzo ciepłe powitanie dla rodziny. Dla innych jest to tylko dodatkowa warstwa zamieszania. Oczyśćmy to.

Najprostszy sposób, aby zobaczyć różnicę między .attr i .prop jest następujący przykład:

<input blah="hello">
  1. $('input').attr('blah'): zwraca 'hello'zgodnie z oczekiwaniami. Bez niespodzianek tutaj.
  2. $('input').prop('blah'): zwraca undefined - ponieważ to próbuje [HTMLInputElement].blah - i nie istnieje taka własność na tym obiekcie DOM. Istnieje tylko w zakresie jako atrybut tego elementu, tj. [HTMLInputElement].getAttribute('blah')

Teraz zmienimy kilka rzeczy takich jak:

$('input').attr('blah', 'apple');
$('input').prop('blah', 'pear');
  1. $('input').attr('blah'): zwraca 'apple' co? Dlaczego nie "gruszka", jak to zostało ustawione na końcu tego elementu. Ponieważ właściwość została zmieniona w atrybucie wejściowym, a nie w samym elemencie wejściowym DOM - zasadniczo prawie działają one niezależnie od siebie.
  2. $('input').prop('blah'): zwraca 'pear'

Rzeczą, na którą naprawdę musisz uważać, jest po prostu nie mieszaj ich użycia dla tej samej właściwości w całej aplikacji z powyższego powodu.

Zobacz skrzypce demonstrujące różnicę:  http://jsfiddle.net/garreh/uLQXc/


.attr vs .prop:

Runda 1: styl

<input style="font:arial;"/>
  • .attr('style') - zwraca style śródliniowe dla dopasowanego elementu, tj. "font:arial;"
  • .prop('style') - zwraca obiekt deklaracji stylu, np. CSSStyleDeclaration

Runda 2: wartość

<input value="hello" type="text"/>   

$('input').prop('value', 'i changed the value');
  • .attr('value') - zwraca 'hello' *
  • .prop('value') - zwraca 'i changed the value'

* Uwaga: jQuery z tego powodu ma .val() metoda, która wewnętrznie jest równoważna .prop('value')


132
2018-05-19 10:18



@Neal, ponieważ daje lepsze odwołanie do struktury jquery. "$ ('input') .project ('blah'): zwraca undefined - ponieważ próbuje wykonać [HTMLInputElement] .blah - i nie ma takiej właściwości na tym obiekcie DOM, istnieje tylko w zasięgu jako atrybut tego elementu, tj. [HTMLInputElement] .getAttribute ("bla") " - Uğur Gümüşhan
Wygląda inaczej niż w dokumencie, api.jquery.com/prop: "Należy użyć metody .prop (), aby ustawić wyłączone i sprawdzone zamiast metody .attr () .Aby uzyskać i ustawić wartość, należy użyć metody .val ()." - swan
Nie rozumiem, dlaczego zmiana właściwości klasy lub stylu zmienia również atrybut jsfiddle.net/featon/Jbw6m/3 ? - Damian


TL; DR

Posługiwać się prop() koniec attr() w większości przypadków.

ZA własność jest bieżącym stanem elementu wejściowego. Na atrybut jest wartością domyślną.

Właściwość może zawierać elementy różnych typów. Atrybut może zawierać tylko ciągi


48
2017-07-16 09:45



jeśli to możliwe, przyjdź z kilkoma łatwymi próbkami tego, co mówisz, a także pokaż, kiedy użyć prop() and when to go for attr(). oczekiwanie na odpowiedź :) - Mou


Brudne sprawdzanie

Ta koncepcja jest przykładem, w którym można zaobserwować różnicę: http://www.w3.org/TR/html5/forms.html#concept-input-checked-dirty

Wypróbuj to:

  • naciśnij przycisk. Oba pola wyboru zostały zaznaczone.
  • odznacz oba pola wyboru.
  • kliknij ponownie przycisk. Tylko prop pole wyboru zostało sprawdzone. HUK!

$('button').on('click', function() {
  $('#attr').attr('checked', 'checked')
  $('#prop').prop('checked', true)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>attr <input id="attr" type="checkbox"></label>
<label>prop <input id="prop" type="checkbox"></label>
<button type="button">Set checked attr and prop.</button>

Dla niektórych atrybutów takich jak disabled na button, dodawanie lub usuwanie atrybutu treści disabled="disabled" zawsze przełącza właściwość (nazywaną atrybutem IDL w HTML5), ponieważ http://www.w3.org/TR/html5/forms.html#attr-fe-disabled mówi:

Wyłączony atrybut IDL musi odzwierciedlać atrybut wyłączonej treści.

więc możesz uciec, choć jest brzydki, ponieważ modyfikuje HTML bez potrzeby.

Dla innych atrybutów, takich jak checked="checked" na input type="checkbox", rzeczy się psują, ponieważ po kliknięciu na niego, staje się brudny, a następnie dodawanie lub usuwanie checked="checked" atrybut zawartości nie przełącza już sprawdzania.

Dlatego powinieneś używać głównie .prop, ponieważ wpływa bezpośrednio na efektywną własność, zamiast polegać na złożonych efektach ubocznych.


34
2017-07-06 11:43



Dla kompletności wypróbuj te warianty: 1) Przed kliknięciem przycisku zaznacz, a następnie usuń zaznaczenie pierwszego pola wyboru 2) (Do tego trzeba będzie zmienić fragment) Daj pierwsze wejście a checked atrybut: checked="checked" - ᴠɪɴᴄᴇɴᴛ


Wszystko jest w dokumencie:

Różnica między atrybutami i właściwościami może być ważna w określonych sytuacjach. Przed wersją jQuery 1.6 metoda .attr () czasami uwzględniała wartości właściwości podczas pobierania niektórych atrybutów, co może powodować niespójne zachowanie. Od wersji jQuery 1.6 metoda .prop () udostępnia sposób jawnego pobierania wartości właściwości, podczas gdy .attr () pobiera tylko atrybuty.

Więc używaj rekwizytów!


32
2018-05-03 19:35



Więc to oznacza, że ​​kiedy przejdę do 1.6, wiele rzeczy się zepsuje ?? - Neal
Nie, to tylko niespójne zachowanie, jeśli działa wcześniej, zawsze będzie działać z jQuery 1.6, to tylko to, że podpora jest bezpieczniejsza;) - Arnaud F.
Wydaje mi się, że pamiętam.$.attr() pobieranie właściwości przez większość czasu, w którym pracowałem, nie "czasami". Zamieszanie z tego powodu jest nadal rezonujące dzisiaj. Niestety, mam wiele problemów ze znalezieniem ostateczny czytaj na temat atrybutów HTML i właściwości DOM, więc mógłbym tu napisać odpowiedź.
@ Arnaud-f Nie jest prawdą. Cały kod poprzedni do 1.6, który używa attr ("sprawdzone") do zaznaczenia pól wyboru, będzie teraz zepsuty. - CaptSaltyJack
@Matt McDonald: Jaki rodzaj "... kłopotów ze znalezieniem ostateczny wczytać atrybuty HTML a właściwości DOM ... "czy masz na myśli? Właściwości (odzwierciedlone i inne) są opisane w Specyfikacja HTML DOM2; możesz również potrzebować odwoływać się do DOM2 i DOM3 okular. - T.J. Crowder


atrybuty są w twoim kodzie HTML dokument tekstowy / plik (== wyobraź sobie, że jest to wynikiem twojego znacznika html), podczas gdy
nieruchomościsą w HTML Drzewo DOM (== w zasadzie rzeczywista właściwość jakiegoś obiektu w rozumieniu JS).

Co ważne, wiele z nich jest zsynchronizowanych (jeśli aktualizujesz class własność, class atrybut w html zostanie również zaktualizowany; i inaczej). Ale niektóre atrybuty mogą być zsynchronizowane z nieoczekiwanymi właściwościami - np. atrybut  checked koresponduje z własność  defaultChecked, więc to

  • ręczne zaznaczenie pola wyboru zmieni się .prop('checked') wartość, ale się nie zmieni .attr('checked') i .prop('defaultChecked') wartości
  • oprawa $('#input').prop('defaultChecked', true) również się zmieni .attr('checked'), ale nie będzie to widoczne na elemencie.

Zasada jest: .prop() Metoda powinna być użyta dla atrybutów boolean / właściwości i dla właściwości, które nie istnieją w html   (takie jak window.location). Wszystkie pozostałe atrybuty (te, które można zobaczyć w   html) można i nadal należy manipulować przy pomocy .attr()   metoda. (http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/)

A tutaj jest tabela, która pokazuje, gdzie .prop() jest preferowany (nawet jeśli .attr() nadal można używać).

  table with preferred usage


Dlaczego czasami chciałbyś użyć .prop () zamiast .attr (), gdzie jest oficjalnie zalecana?

  1. .prop() może zwrócić dowolny typ - ciąg, liczbę całkowitą, boolean; podczas .attr() zawsze zwraca ciąg znaków.
  2. .prop() mówi się, że jest około 2,5 razy szybsza niż .attr().

26
2018-06-12 05:56



coś się zmieniło, jak te: $('#myImageId').prop('src', 'http://example.com/img.png'), var class = $('.myDivClass').prop('class'), lub $('#myTextBox').prop('type', 'button'). I tak dalej...
@ MrWolf, przepraszam? - lakesare
@ Mr.Wolf, przepraszam, nie wiem, co masz na myśli. co się zmieniło'? składnia zawsze była taka. - lakesare
Myślę, że tabela w twojej odpowiedzi jest niepotrzebna. Bo .prop() działa dobrze z wszystkimi właściwościami. Nie chcesz oznaczać wszystkich właściwości w .prop() kolumna, prawda?
@ Mr.Wolf, myślę, że jest to konieczne, ponieważ, jak już stwierdzono, "pokazuje gdzie .prop() jest preferowany (nawet jeśli .attr() nadal mogą być używane) " - lakesare


.attr():

  • Uzyskaj wartość atrybut dla pierwszego elementu w zestawie dopasowanych elementów.
  • Podaje wartość elementu zgodnie z definicją w html podczas ładowania strony

.prop():

  • Uzyskaj wartość a własność dla pierwszego elementu w zestawie dopasowanych elementów.
  • Podaje zaktualizowane wartości elementów, które są modyfikowane przez javascript / jquery

18
2017-12-08 09:14