.prop () vs .attr ()

Belə ki, jQuery 1.6 yeni bir prop() funksiyasına malikdir.

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

ya da bu vəziyyətdə də eyni şeyi edirlər?

attr() keçmək lazımdırsa, 1.6 attr() bütün köhnə attr() ?

ƏLAVƏ OLUNUB

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

(həmçinin bu skriptə baxın: http://jsfiddle.net/maniator/JpUF2/ )

Konsol getAttribute simli olaraq qeyd edir və bir string kimi CSSStyleDeclaration , lakin CSSStyleDeclaration kimi niyə, nə üçün? Və bu gələcəkdə kodlaşdırmağıma necə təsir edəcək?

2141
03 мая '11 в 22:33 2011-05-03 22:33 Neal 03 may tarixində saat 11: 33- də 2011-05-03 22:33 tarixində müəyyənləşdi
@ 18 cavab

1 Noyabr 2012-ci il tarixində yeniləmə

İlk cavabım jQuery 1.6-a aiddir. Mənim tövsiyəm eyni qalır, lakin jQuery 1.6.1 vəziyyəti bir qədər dəyişdirdi: qırılan veb saytların proqnozlaşdırılan yığınları qarşısında, jQuery komandası attr() funksiyasını mantıksal atributlar üçün köhnə davranışına yaxın (lakin tam olaraq eyni deyil) Resiq də bunu bir blogda bildirdi . Mən qarşılaşdıqları çətinlikləri görürəm, lakin hələ də attr() dair tövsiyəsi ilə razılaşmıram.

Orijinal cavab

Yalnız jQuery istifadə etsəniz və DOM-un birbaşa deyilsə, bu, əlbəttə ki, konseptual şəkildə yaxşılaşsa da, bu, bir qarışıqlı dəyişiklik ola bilər. Bu dəyişiklik nəticəsində qırılan jQuery saytlarının bazilionları üçün yaxşı deyil.

Əsas məsələləri ümumiləşdirəcəyəm:

  • Ümumiyyətlə prop()attr() .
  • Çox hallarda, prop() əvvəlcə nə etdiyini prop() edir. attr() prop() ilə attr() zənglərini dəyişdirmək, adətən işləyəcəkdir.
  • Properties xüsusiyyətləri ilə məşğul olmaq adətən daha asandır. Öznitelik dəyəri yalnız bir simli ola bilər, mülk isə hər hansı bir növü ola bilər. Məsələn, checked əmlak məntiqi bir xüsusiyyətdir, style mülkiyyəti hər bir üslub üçün fərdi xassələri olan bir obyektdir, size əmlakı bir nömrədir.
  • Həmin adda bir mülk və xüsusiyyət var, adətən yenilənməsi bir-birini yeniləyir, amma bu value kimi giriş məlumatlarının bəzi xüsusiyyətlərinə tətbiq edilmir və checked : bu xüsusiyyətlər üçün əmlak həmişə mövcud vəziyyətdədir, defaultValue köhnə versiyasını istisna olmaqla, u mənim girişin dəyərini / validasiyasına ( defaultValue / defaultChecked əks olunur) uyğun gəlir.
  • Bu dəyişiklik jQuery inkişaf etdiricilərinin xüsusiyyətləri və xüsusiyyətləri arasındakı fərqlər barədə bir az öyrənmək məcburiyyətində qalan deməkdir ki, atributları və xüsusiyyətləri qarşısında vurulmuş sehrli jQuery təbəqəsini aradan qaldırır. Bu yaxşı bir şeydir.

Bir jQuery geliştiricisiyseniz və bu işdə xassələri və xüsusiyyətləri haqqında qarışdırırsınızsa, bir addım geri çəkilmək və bir az məlumat əldə etmək lazımdır, çünki jQuery artıq bu şeylərdən sizi qoruya bilməyəcək. Bu mövzuda nüfuzlu, lakin bir neçə real söz üçün texniki xüsusiyyətlər var: DOM4 , HTML DOM , DOM Səviyyə 2 , DOM Səviyyə 3 . Mozilla DOM sənədləri ən müasir brauzerlər üçün etibarlıdır və spesifikasiyalardan çox oxumaq daha asandır, beləliklə DOM arayış məlumatlarını tapa bilərsiniz. Elementin xüsusiyyətləri üzrə bir bölmə var .

Özniteliklerinize göre özelliklerin nasıl işleneceğinin bir nümunəsi olaraq, ilk olaraq kontrol edilen onay kutusunu düşünün. Burada etibarlı HTML iki mümkün hissəsidir:

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

Belə ki, onay qutusunun jQuery-dən istifadə olunduğunu necə bilirsiniz? Yığın daşmasına baxın və adətən aşağıdakı cümlələri tapa bilərsiniz:

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

Əslində, bu, 1995-ci ildən etibarən keçirmək imkanı olan hər bir əsas brauzerdə qüsursuz şəkildə işləyən və işləyən checked Boolean əmlakla əlaqəli olan dünyada ən sadə şeydir:

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

Mülkiyyət də bayrağın əhəmiyyətsiz olduğunu yoxlayır və ya təmizləyir:

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

JQuery 1.6'da, bu mütləq olur

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

Bir betik verilənlər qutusunun checked atributundan istifadə etmə fikri yararsız və lazımsızdır. Əmlak sizə lazım olanıdır.

  • Nəzarətə alınan atributu yoxlamaq və yoxlamaq üçün doğru yol nədir
  • Öznitelik dəyəri, mövcud görünən dövləti deyil (hər şeyi daha mürəkkəbləşdirən IE'nin bəzi köhnə versiyaları istisna olmaqla), u mənim dəyərini əks etdirir. Öznitelik, onay kutusunun sayfada olub olmadığını göstermez. Http://jsfiddle.net/VktA6/49/ səhifəsinə baxın.
1790
04 мая '11 в 2:06 2011-05-04 02:06 cavab 04 may '11 tarixində 2:06 'də Tim Down tərəfindən verilmişdir 2011-05-04 02:06

Düşünürəm ki, Tim yaxşı deyir , amma onu geri buraxın:

DOM elementi yaddaşda olan bir obyektdir. OOP'daki ən çox obyektlər kimi, xüsusiyyətləri də var. Həmçinin, ayrı-ayrılıqda elementdə müəyyən edilmiş bir xüsusiyyət xəritəsi var (adətən, brauzer elementi yaratmaq üçün oxuyur). Bir elementin xüsusiyyətlərindən bəziləri eyni və ya oxşar adları olan dəyərlərdən atributları ( value "öz dəyərindən" ilk dəyərini alır, href "href" xarakterindən başlanğıc dəyərini alır, lakin bu, eyni dəyərdən deyil, öznitelikdən " className " sinif "). Digər xüsusiyyətlər başlanğıc dəyərlərini digər yollarla əldə edir: məsələn, parentNode əmlakı onun əsas elementinə əsasən dəyərini alır; bir element hər zaman bir style mülkiyyətinə malikdir, bir style atributu olub-olmamasıdır.

Bu bağlamanı http://example.com/testing.html səhifəyə http://example.com/testing.html :

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

Bəzi pulsuz ASCII sənəti (və bir çox şeyi tərk edir):

 + + ----------------------------------------- |  HTMLAnchorElement | + + ----------------------------------------- |  href: "http://example.com/foo.html" | |  adı: "fooAnchor" | |  id: "fooAnchor" | |  className: "bir test" | |  atributları: | |  href: "foo.html" | |  adı: "fooAnchor" | |  id: "fooAnchor" | |  sinif: "bir test" | + + -----------------------------------------

Xahiş edirik xüsusiyyətləri və xüsusiyyətləri fərqlidir.

İndi fərqli olmasına baxmayaraq, bunların hamısı inkişaf edir və sıfırdan inkişaf etdirilmədiyi üçün, bir sıra xüsusiyyətlər, əldə etdiyiniz xüsusiyyətə geri qaytarılır, əgər siz onları təyin edərsinizsə. Lakin hər kəs bunu etməz və yuxarıdakı href göründüyünüz kimi, xəritəçəkmə həmişə "mənanı çatdırmaq" üçün deyil, bəzən şərh istifadə olunur.

Bir obyektin xüsusiyyətləri olan mülklərdən danışarkən, mən özümlə danışmıram. Burada bəzi qeyri-jQuery kodu:

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

(Bu dəyərlər ən çox brauzerlərə cavab verir, bəzi variantlar var.)

link obyekti əsl şeydir və siz onu əldə etmək və əldə etmək arasında real fərq olduğunu görürsünüz.

Tim bildirib ki , o vaxtın böyük əksəriyyəti biz əmlakla işləmək istəyirik. Bu onların dəyərləri (hətta adları) ümumiyyətlə brauzerlər arasında ardıcıl olduğu üçün qisməndir. Biz əsasən onunla əlaqəli heç bir əmlak (istifadəçi xüsusiyyətləri) olmadıqda və ya bu xüsusi xüsusiyyət üçün atribut və əmlak 1: 1 (yuxarıda href və "href" kimi) olmadığını bildikdə öznitelikler ilə çalışmaq istəyirik.

Standart xüsusiyyətlər müxtəlif DOM spesifikasiyalarında təsvir edilmişdir:

Bu spesifikasiyaların əla göstəriciləri var və mən onları rahat saxlamağı məsləhət görürəm; Onları hər zaman istifadə edirəm.

Xüsusi atributlar, məsələn, data-xyz metadata təmin etmək üçün elə elementlər qoymaq olar ki, hər hansı bir data-xyz özniteliklərini ehtiva edir (bu, data- prefiksinə əməl edirsinizsə, bu HTML5 ilə etibarlıdır), (Son jQuery versiyaları data-xyz data funksiyasından istifadə edir, amma bu funksiya yalnız data-xyz öznitelikleri üçün aksessuarlar üçün deyil, bu funksiyaya həqiqətən ehtiyac olmadıqda, data-xyz funksiyası ilə əlaqə yaratmaq üçün attr funksiyasından istifadə edirəm data-xyz .)

attr funksiyası sanki atributu əldə etmək əvəzinə istədikləri fikirləri əldə etməklə bəzi qarışıqlıq məntiqləri istifadə etdi. O konsepsiyanı birləşdirdi. Pervane və attr üçün hərəkət etmək onların deconfiguration üçün nəzərdə tutulmuşdur. V1.6.0-a qısa olaraq, jQuery bu mövzuda çox uzağa getdi, lakin funksionallıq tez-tez texniki cəhətdən istifadə etməli olduqları zaman insanların attr istifadə edən ümumi vəziyyətləri həll etmək üçün geri qayıtmışdır .

639
04 мая '11 в 17:27 2011-05-04 17:27 Cavab TJ Crowder tərəfindən May 04, '11 saat 17:27 'də verildi 2011-05-04 17:27

Bu dəyişiklik jQuery üçün uzun müddət əvvəl gəldi. İllərdir, adından gözlədiyiniz nəticədən daha çox DOM xüsusiyyətlərini əldə edən attr() adlı bir funksiyadan razı qaldılar. attr()prop() segregasiya HTML xüsusiyyətləri və DOM xüsusiyyətləri arasında bəzi qarışıqlığı azaltmağa kömək etməlidir. $.fn.prop() , müəyyən DOM xüsusiyyətini tutur və $.fn.attr() müəyyən HTML xüsusiyyətini tutur.

Onlar necə işlədiyini tam başa düşmək üçün burada HTML xüsusiyyətləri və DOM xüsusiyyətləri arasındakı fərqlərin geniş izahıdır.

HTML xüsusiyyətləri

Sintaksis:

<body onload="foo()">

Məqsəd: İşaretlenmeyle hadisələr, göstərmə və digər məqsədlər üçün onunla əlaqəli məlumatlara sahib olmaq imkanı verir.

Görselleştirme: 2019

242
03 мая '11 в 23:05 2011-05-03 23:05 cavab 03.05.2011 23:05 saat 23: 05-da istifadəçi1385191 tərəfindən verilir

Mülkiyyət DOM-da; Öznitelik, DOM'da ayrıştırılmış olan HTML'dir.

Əlavə məlumat

Bir atributu dəyişirsinizsə, bu dəyişiklik DOM-da (bəzən fərqli bir adla) əks olunacaq.

Məsələn: bir className class xüsusiyyətini dəyişdirmək DOM-da bu etiketin className xüsusiyyətini dəyişəcək. Etiketteki bir öznitelikiniz yoxdursa, boş və ya varsayılan bir değerle ilgili DOM özelliğiniz var.

Məsələn: className heç bir class özniteliği yoxdursa da, DOM className əmlakı boş bir dize dəyəri ilə mövcuddur.

dəyişdirmək

Birini dəyişirsinizsə, digər nəzarətçi tərəfindən və ya əksinə dəyişdiriləcəkdir. Bu nəzarətçi jQuery deyil, brauzerin doğma kodunda deyil.

237
27 сент. cavab verildi yunzen Sep 27 2011-09-27 19:55 '11 saat 19:55 'da 2011-09-27 19:55

HTML xüsusiyyətləri və qarışıqlı DOM obyektləri arasındakı fərq. DOM xüsusiyyətləri ilə rahat olanlar üçün, this.src kimi this.src və s. Kimi, .prop çox isti bir qarşılanmadır. Başqaları üçün bu yalnız əlavə qarışıqlıqdır. Aydın olsun.

.attr.prop arasındakı .attr görmək üçün ən asan yol aşağıdakı nümunədir:

 <input blah="hello"> 
  • $('input').attr('blah') : gözlənilən kimi 'hello' qaytarır. Sürprizlər yoxdur.
  • $('input').prop('blah') : returns undefined - bu [HTMLInputElement].blah etmək üçün çalışır. [HTMLInputElement].blah - və bu DOM obyektində belə bir xüsusiyyət yoxdur. Bu element yalnız bu elementin bir atributu kimi mövcuddur, yəni. [HTMLInputElement].getAttribute('blah')

İndi bu kimi bir neçə şeyi dəyişirik:

 $('input').attr('blah', 'apple'); $('input').prop('blah', 'pear'); 
  • $('input').attr('blah') : 'apple' qaytarır? Niyə "armut" deyil, çünki bu element üçün son idi. Mülkiyyət bir DOM giriş elementinə deyil, bir giriş xüsusiyyətinə dəyişdirildiyi üçün - əsasən bir-birindən tamamilə müstəqildir.
  • $('input').prop('blah') : 'pear'

Həqiqətən diqqətli olmalısan, sadəcə olaraq, yuxarıda göstərilən səbəblərdən ötəri eyni mülk üçün istifadə etməməlidir .

Fərqini göstərən skripka baxın: http://jsfiddle.net/garreh/uLQXc/


.attr vs .prop :

1-ci raund: stil

 <input style="font:arial;"/> 
  • .attr('style') - uyğun element üçün yəni "font:arial;"
  • .prop('style') - stil deklarasiya obyektini qaytarır, yəni CSSStyleDeclaration

Dəyirmi 2: məna

 <input value="hello" type="text"/> $('input').prop('value', 'i changed the value'); 
  • .attr('value') - 'hello' qaytarır *
  • .prop('value') - qaytarır 'i changed the value'

* Qeyd: jQuery bu səbəbdən .prop('value') üçün daxili olaraq bərabər olan bir .prop('value')

134
19 мая '11 в 13:18 2011-05-19 13:18 cavab 19 may 2011-ci il saat 13:18 radələrində Gary Green tərəfindən verilmişdir

Tl; DR

Çox hallarda attr() prop() üzərində prop() istifadə edin.

Əmlak giriş maddəsinin hazırki vəziyyəti. Atribut default dəyərdir.

Bir əmlak müxtəlif növ şeylər ehtiva edə bilər. Öznitelik yalnız strinqlərdən ibarət ola bilər.

49
16 июля '14 в 12:45 2014-07-16 12:45 cavab 16 iyul '14 'də saat 12:45' də verilir. 2014-07-16 12:45

Çirkli yoxlayın

Bu konsepsiya fərqin müşahidə oluna biləcəyi bir nümunə kimi xidmət edir: http://www.w3.org/TR/html5/forms.html#concept-input-checked-dirty

Keçir:

  • düyməsini basın. Her iki onay qutusu da yoxlanıldı.
  • hər iki qutudan silmək.
  • düyməni yenidən basın. Yalnız prop bayraqları yoxlanılır. BANG!

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

Bir düyməyə disabled kimi bəzi xüsusiyyətlər üçün, məzmun atributunu əlavə etmək və ya aradan qaldırmaq disabled="disabled" hər zaman bir xüsusiyyətə keçid verir (HTML5-də IDL özəlliyi adlanır), çünki http://www.w3.org/TR/html5/forms.html #attr-fe-disabled deyir:

Əlil olan IDL özniteliği, əlil məzmunun xüsusiyyətini əks etdirməlidir.

belə ki, çirkin olmasına baxmayaraq, ondan uzaqlaşa bilərsiniz, çünki lazımsız HTML dəyişir.

input type="checkbox" checked="checked" kimi digər xüsusiyyətlər üçün, hər şey hər şeyə görə pozulur, çünki siz vurduğunuz anda çirkin olur və checked="checked" attributiv əlavə etmək və ya silmək çekləri ləğv etmək üçün yoxlanılır .

Buna görə əsasən effektiv mülkiyyətə təsir göstərən, dəyişən HTML-nin kompleks yan təsirlərinə .prop , əsasən istifadə .prop .

35
06 июля '14 в 14:43 2014-07-06 14:43 Ciro Santilli tərəfindən verilmiş cavabı 新疆 改造 中心 六四 事件 tövsiyə 06 iyul '14 14:43 2014-07-06 14:43

Bütün dock :

Atributlar və xüsusiyyətlər arasındakı fərq müəyyən hallarda vacib ola bilər. JQuery 1.6 əvvəl, .attr () metodu bəzən uyğun olmayan davranışlara səbəb ola biləcək müəyyən xüsusiyyətləri çıxararkən əmlak dəyərlərini nəzərə aldı. JQuery 1.6-da başlayaraq, .prop () metodu, əmlakın dəyərlərini dəqiq bir şəkildə əldə etmək üçün bir yol təqdim edir, .attr () özniteliklerini qaytarır.

Beləliklə, bir partlayıcı istifadə edin!

32
03 мая '11 в 22:35 2011-05-03 22:35 cavab Arnaud F. 03 May '11 saat 10:35 'da verilir

xassələri HTML ağacında DOM (== əsasən JS mənasında bəzi obyektin əsl mülkiyyəti) olduğu halda, özniteliklər mətn sənədinizdə / HTML faylında (== bu html formatlaşdırma işarəsinin təhlilinin nəticəsidir) düşünün.

Onların bir çoxu sinxronlaşdırıldığını qeyd etmək vacibdir (əgər siz class əmlakını yeniləyirsinizsə və html-də class özəlliyi də yenilənəcək, lakin başqa cür). Lakin bəzi xüsusiyyətlər gözlənilməz xassələrlə sinxronizasiya edilə bilər - məsələn, öznitelik defaultChecked xüsusiyyətinə cavab verir

  • onay qutusunu əl ilə .prop('checked') dəyərini dəyişəcək, lakin .attr('checked').prop('defaultChecked') dəyərlərini dəyişdirməyəcəkdir.
  • $('#input').prop('defaultChecked', true) .attr('checked') dəyişə .attr('checked') $('#input').prop('defaultChecked', true) həmçinin .attr('checked') dəyişəcək, lakin bu elementdə görünməyəcək.

Başparmak qaydası : .prop() metodu, mantıksal atributları / xüsusiyyətləri və htmldə mövcud olmayan xüsusiyyətlər (məsələn, window.location) üçün istifadə edilməlidir. Bütün digər xüsusiyyətlər (html şəklində görə bilərsiniz .attr() metodu ilə manipulyasiya edə və davam etməlidir. ( http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/ )

Və burada .prop() göstərən bir masa. (Baxmayaraq ki, .attr() hələ də istifadə edilə bilər).

2019

26
12 июня '15 в 8:56 2015-06-12 08:56 Cavab lakesare tərəfindən verilir 12 İyun '15 'də saat 08:56' da

.attr() :

  • Öznitelik dəyərini alın eşleşen elementlər qrupundakı ilk element üçün.
  • Səhifə yükündəki html ilə müəyyən edilmiş elementin dəyərini verir.

.prop() :

  • Əmlak dəyərini əldə edin eşleşen elementlər qrupundakı ilk element üçün.
  • Javascript / jquery istifadə edərək dəyişdirilmiş elementlərin yenilənmiş dəyərlərini verir
18
08 дек. Cavab Kgn-web 08 dek verilir. 2015-12-08 12:14 '15 'da 12:14' de

Adətən istifadə etmək istədiyiniz xüsusiyyətlər. Yalnızca atributları istifadə edin:

  • Xüsusi HTML xüsusiyyətini əldə etmək (DOM mülkiyyəti ilə sinxronlaşdırılmadığından).
  • DOM xüsusiyyəti ilə sinxronizasiya etməyən bir HTML xüsusiyyətinin əldə edilməsi, məsələn. standart HTML xüsusiyyətinin "orijinal dəyərini" əldə edin, məsələn <input value="abc">.
13
02 февр. Cavab naor verildi 02 fevral. 2014-02-02 23:36 '14 at 11:36 pm 2014-02-02 23:36

attributes → HTML

properties → DOM

7
26 дек. Cavab NkS 26 dekabr verilir. 2014-12-26 16:28 '14 16:28 2014-12-26 16:28

JQuery 1.6 əvvəl, attr() metodu bəzən attr() çıxararkən əmlak dəyərlərini nəzərə alaraq bu olduqca ziddiyyətli davranışlara səbəb oldu.

.attr() əmlakın dəyərini açıq şəkildə əldə etmək üçün bir yol təqdim edir, .attr() çıxarışları öznitelikler.

Sənədlər:

jQuery.attr() ilk element üçün öznitelik değerini alın.

jQuery.prop() ilk jQuery.prop() alın.

6
25 окт. 25 oktyabrda Gothburz tərəfindən verilən cavab . 2015-10-25 03:05 '15 at 3:05 2015-10-25 03:05

prop() istifadə edərək diqqətlə bizə xatırlat:

 if ($("#checkbox1").prop('checked')) { isDelete = 1; } else { isDelete = 0; } 

Вышеприведенная функция используется для проверки флажка checkbox1 или нет, если отмечено: return 1; if not: return 0. Функция prop() используется здесь как функция GET.

 if ($("#checkbox1").prop('checked', true)) { isDelete = 1; } else { isDelete = 0; } 

Вышеуказанная функция используется для установки checkbox1 для проверки и возврата ALWAY 1. Теперь функция prop() используется как функция SET.

Не испортите.

P/S: Когда я проверяю свойство src . Если src пуст, prop возвращает текущий URL-адрес страницы (неверно) и attr возвращает пустую строку (справа). p>

2
ответ дан user2657778 17 окт. '15 в 19:12 2015-10-17 19:12

jQuery 1.6 вводит функцию.prop() и разделяет атрибуты и свойства DOM, она поднимает много вопросов о различии между функциями.attr и.prop.

см. ниже примеры:

Пример: 1)

 <input id="demo" type="text" dbvalue="Kansagara" /> $("#demo").attr("dbvalue"); // returns Kansagara $("#demo").prop("dbvalue"); // returns undefined 

.prop() возвращает значение только атрибута HTML DOM, он не возвращает значение настраиваемого атрибута, в то время как.attr() также возвращает значение пользовательского атрибута, показанное выше.

Пример: 2)

 <input id="demo" type="text" value="Kansagara" /> 

Теперь я изменил текст "Kansagara" на "Hitesh" в текстовом поле.

 $("#demo").attr("value"); // returns Kansagara $("#demo").prop("value"); // returns Hitesh 

Теперь у вас есть идея, что это значит. Изменяется только свойство элементов, поскольку оно находится в DOM и динамическом. Но атрибут элементов находится в тексте HTML и не может быть изменен. В широком смысле свойство всегда представляет текущее состояние, в то время как атрибут (за исключением старых версий IE) представляет начальное состояние или предназначен для атрибутов html, поскольку они строго определены. атрибут ничего не сообщает о текущем состоянии.

для флажка (jquery 1. 6+)

 <input id="check1" checked="checked" type="checkbox" /> .attr('checked') //returns checked .prop('checked') //returns true .is(':checked') //returns true 

prop возвращает значение Boolean для отмеченного, выбранного, отключенного, readOnly..etc, в то время как attr возвращает определенную строку. Таким образом, вы можете напрямую использовать.prop('checked) в условии if.

.attr() вызывает.prop() внутри, поэтому метод.attr() будет немного медленнее, чем доступ к ним непосредственно через.prop().

Для jQuery 1. 6+, prop будет использоваться в основном потому, что он прост и шире, чем attr. В большинстве старых проектов attr используется для получения текущей информации о состоянии элемента. Но теперь опора заняла эту работу, и атр будет заменен опорой.

Надеюсь, поможет.

2
ответ дан Hitesh Kansagara 08 апр. '18 в 18:31 2018-04-08 18:31

1) Свойство находится в DOM; атрибут находится в HTML, который анализируется в DOM.

2) $(elem).attr( "checked" ) (1.6.1+) "checked" (String) Будет изменение с состоянием флажка

3) $(elem).attr( "checked" ) (pre-1.6) true (Boolean) Изменено с состоянием флажка

  • В основном мы хотим использовать для объекта DOM вместо пользовательского атрибута например data-img, data-xyz .

  • Также некоторые различия при доступе к значению checkbox и href с attr() и prop() по мере изменения вещи с выходом DOM с prop() в качестве полной ссылки из origin и Boolean значение для флажка (pre-1.6)

  • Мы можем получить доступ только к элементам DOM с помощью prop other, а затем undefined

.prop()

 .prop( propertyName ) propertyName Type: String The name of the property to get. 

Метод.prop() получает значение свойства только для первого элемента в согласованном наборе. Он возвращает undefined для значения свойства, которое не было задано, или если согласованный набор не имеет элементов. Чтобы получить значение для каждого элемента отдельно, используйте конструкцию цикла, такую как метод jQuery.each() или.map().

 <html> <head> <meta charset="utf-8"> <title>prop demo</title> <style> p { margin: 20px 0 0; } b { color: blue; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <input id="check1" type="checkbox" checked="checked"> <label for="check1">Check me</label> <p></p> <script> $( "input" ).change(function() { var $input = $( this ); $( "p" ).html( ".attr( \"checked\" ): <b>" + $input.attr( "checked" ) + "</b><br>" + ".prop( \"checked\" ): <b>" + $input.prop( "checked" ) + "</b><br>" + ".is( \":checked\" ): <b>" + $input.is( ":checked" ) + "</b>" ); }).change(); </script> </body> </html> 

.attr()

 .attr( attributeName ) attributeName Type: String The name of the attribute to get. 

Метод.attr() получает значение атрибута только для первого элемента в согласованном наборе. Чтобы получить значение для каждого элемента отдельно, используйте конструкцию цикла, такую как метод jQuery.each() или.map().

Использование метода jQuery.attr() для получения значения атрибута элемента имеет два основных преимущества:

Удобство: он может быть вызван непосредственно на объект jQuery и привязан к другим методам jQuery. Совместимость между браузерами: значения некоторых атрибутов сообщаются непоследовательно в браузерах и даже в версиях одного браузера. Метод.attr() уменьшает такие несоответствия.

 <html> <head> <meta charset="utf-8"> <title>attr demo</title> <style> em { color: blue; font-weight: bold; } div { color: red; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <p>Once there was a <em title="huge, gigantic">large</em> dinosaur...</p> The title of the emphasis is:<div></div> <script> var title = $( "em" ).attr( "title" ); $( "div" ).text( title ); </script> </body> </html> 
0
ответ дан Alireza 27 мая '18 в 8:02 2018-05-27 08:02

Ответ Gary Hole очень важен для решения проблемы, если код написан таким образом

 obj.prop("style","border:1px red solid;") 

Так как функция prop возвращает объект CSSStyleDeclaration , код выше не работает должным образом в каком-либо браузере (в моем случае тестируется с IE8 with Chrome Frame Plugin ).

Таким образом, изменяя его на следующий код

 obj.prop("style").cssText = "border:1px red solid;" 

решил проблему.

-2
ответ дан zawhtut 15 окт. '15 в 11:38 2015-10-15 11:38

Другие вопросы по меткам или Задайте вопрос