.prop () vs .attr ()

2297

ดังนั้นjQuery 1.6prop()มีฟังก์ชั่นใหม่

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

หรือในกรณีนี้พวกเขาทำสิ่งเดียวกัน

และถ้าผมจะต้องเปลี่ยนไปใช้prop()ทั้งหมดเก่าattr()โทรจะทำลายถ้าฉันเปลี่ยนไป 1.6?

UPDATE

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>
ขยายตัวอย่างข้อมูล

(ดูซอนี้: http://jsfiddle.net/maniator/JpUF2/ )

คอนโซลบันทึกการทำงานในgetAttributeฐานะที่เป็นสตริงและattrเป็นที่เป็นสตริง แต่propเป็นที่CSSStyleDeclarationทำไม? และสิ่งนี้มีผลต่อการเข้ารหัสของฉันในอนาคตอย่างไร

javascript  jquery  dom  attr  prop 
— Naftali aka Neal
แหล่งที่มา
17
สิ่งนี้จะเป็นที่สนใจแน่นอน: books.google.ca/…
28
@ ไม่ถูกต้องเพราะการเปลี่ยนแปลงนี้เหนือกว่า jQuery ความแตกต่างระหว่างคุณสมบัติ HTML และคุณสมบัติ DOM นั้นใหญ่มาก
7
มันทำให้ฉันเศร้าเมื่อเห็นการเปลี่ยนแปลงของ jQuery พวกเขากำลังมุ่งหน้าไปในทิศทางที่ผิด
4
@Neal ใช่แล้วมันจะทำให้ปัญหายุ่งยากมากขึ้นแทนที่จะแยกทั้งสองวิธีออก
6
@BritishDeveloper คำตอบนั้นซับซ้อนกว่าการระบุเพียงแค่ใช้ x หรือ y เสมอเพราะมันขึ้นอยู่กับสิ่งที่คุณตั้งใจจะได้รับ คุณต้องการแอททริบิวต์หรือคุณต้องการคุณสมบัตินี้? พวกเขาเป็นสองสิ่งที่แตกต่างกันมาก
— Kevin B

คำตอบ:

1874

อัปเดต 1 พฤศจิกายน 2555

คำตอบเดิมของฉันใช้กับ jQuery 1.6 โดยเฉพาะ คำแนะนำของฉันยังคงเป็นสิ่งที่เหมือนกัน แต่ jQuery 1.6.1 การเปลี่ยนแปลงเล็กน้อยในใบหน้าของกองทำนายของเว็บไซต์เสียทีม jQuery หวนกลับattr()ไปยังสิ่งที่ใกล้เคียงกับ ( แต่ไม่เหมือนกับ) พฤติกรรมเก่าสำหรับแอตทริบิวต์บูลีน จอห์นเรซิกยังblogged เกี่ยวกับมัน ผมสามารถมองเห็นความยากลำบากที่พวกเขาอยู่ใน attr()แต่ก็ยังไม่เห็นด้วยกับคำแนะนำของเขาจะชอบ

คำตอบเดิม

หากคุณเคยใช้ jQuery และไม่ใช่ DOM โดยตรงนี่อาจเป็นการเปลี่ยนแปลงที่ทำให้เกิดความสับสนแม้ว่ามันจะเป็นการปรับปรุงแนวคิดอย่างแน่นอน ไม่ค่อยดีสำหรับ bazillions ของไซต์ที่ใช้ jQuery ซึ่งจะแตกเนื่องจากการเปลี่ยนแปลงนี้

ฉันจะสรุปประเด็นหลัก:

  • คุณมักจะต้องการมากกว่าprop()attr()
  • ในกรณีส่วนใหญ่prop()ทำในสิ่งที่attr()เคยทำ การแทนที่การโทรattr()ด้วยด้วยprop()รหัสของคุณจะใช้งานได้
  • โดยทั่วไปคุณสมบัติจะง่ายกว่าที่จะจัดการกับกว่าคุณลักษณะ ค่าแอตทริบิวต์อาจเป็นสตริงในขณะที่คุณสมบัติสามารถเป็นประเภทใดก็ได้ ตัวอย่างเช่นcheckedคุณสมบัติเป็นบูลีนstyleคุณสมบัติเป็นวัตถุที่มีคุณสมบัติส่วนบุคคลสำหรับแต่ละสไตล์sizeคุณสมบัติคือตัวเลข
  • ในกรณีที่ทั้งสถานที่ให้บริการและแอตทริบิวต์ที่มีชื่อเดียวกันโดยปกติแล้วการอัปเดตหนึ่งจะอัปเดตอีกรายการหนึ่ง แต่นี่ไม่ใช่กรณีสำหรับแอตทริบิวต์บางอย่างของอินพุตเช่นvalueและchecked: สำหรับแอททริบิวเหล่านี้คุณสมบัติจะแสดงสถานะปัจจุบันเสมอ คุณลักษณะ (ยกเว้นใน IE เวอร์ชันเก่า) สอดคล้องกับค่าเริ่มต้น / การตรวจสอบความถูกต้องของอินพุต (แสดงในคุณสมบัติdefaultValue/ defaultChecked)
  • การเปลี่ยนแปลงนี้จะลบเลเยอร์ของเวทย์มนตร์ jQuery ที่ติดอยู่ด้านหน้าของคุณสมบัติและคุณสมบัติซึ่งหมายความว่าผู้พัฒนา jQuery จะต้องเรียนรู้เล็กน้อยเกี่ยวกับความแตกต่างระหว่างคุณสมบัติและคุณสมบัติ นี่เป็นสิ่งที่ดี

หากคุณเป็นผู้พัฒนา jQuery และสับสนเกี่ยวกับธุรกิจและคุณสมบัติทั้งหมดนี้คุณจะต้องย้อนกลับไปและเรียนรู้เกี่ยวกับมันเนื่องจาก jQuery ไม่ได้พยายามอย่างหนักเพื่อป้องกันคุณจากสิ่งนี้อีกต่อไป สำหรับคำว่าเผด็จการ แต่ค่อนข้างแห้งในเรื่องที่มีรายละเอียด: DOM4 , HTML DOM , DOM Level 2 , DOM Level 3 เอกสาร DOM ของ Mozilla ใช้ได้กับเบราว์เซอร์ที่ทันสมัยที่สุดและอ่านง่ายกว่าข้อกำหนดดังนั้นคุณอาจพบว่าการอ้างอิง DOM มีประโยชน์ มีเป็นส่วนที่เกี่ยวกับคุณสมบัติขององค์ประกอบ

เป็นตัวอย่างของวิธีจัดการกับคุณสมบัติที่ง่ายกว่าคุณลักษณะให้พิจารณาช่องทำเครื่องหมายที่มีการตรวจสอบเริ่มแรก ต่อไปนี้เป็น HTML ที่ถูกต้องสองวิธีในการทำเช่นนี้:

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

ดังนั้นคุณจะทราบได้อย่างไรว่ามีการทำเครื่องหมายในช่องทำเครื่องหมายด้วย jQuery หรือไม่? ดู Stack Overflow และโดยทั่วไปคุณจะพบคำแนะนำต่อไปนี้:

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

นี่เป็นสิ่งที่ง่ายที่สุดในโลกที่จะทำกับcheckedคุณสมบัติบูลีนซึ่งมีอยู่จริงและทำงานได้อย่างไม่มีที่ติในเบราว์เซอร์หลัก ๆ ที่สามารถเรียกใช้งานได้ทุกสคริปต์ตั้งแต่ปี 1995:

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

สถานที่ให้บริการยังทำให้การตรวจสอบหรือยกเลิกการทำเครื่องหมายช่องเล็ก ๆ น้อย ๆ :

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

ใน jQuery 1.6 สิ่งนี้จะกลายเป็นอย่างไม่น่าสงสัย

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

แนวคิดของการใช้checkedคุณลักษณะสำหรับการเขียนสคริปต์ช่องทำเครื่องหมายไม่ช่วยเหลือและไม่จำเป็น สถานที่ให้บริการคือสิ่งที่คุณต้องการ

  • ไม่ชัดเจนว่าวิธีการตรวจสอบหรือยกเลิกการเลือกช่องทำเครื่องหมายกำลังใช้checkedคุณลักษณะที่ถูกต้องอย่างไร
  • ค่าแอททริบิวสะท้อนถึงค่าเริ่มต้นแทนที่จะเป็นสถานะที่มองเห็นได้ในปัจจุบัน (ยกเว้นใน IE เวอร์ชันเก่าบางรุ่นทำให้สิ่งต่าง ๆ ยังคงหนักกว่า) คุณลักษณะนี้จะไม่บอกคุณเกี่ยวกับช่องทำเครื่องหมายในหน้านั้น ดูhttp://jsfiddle.net/VktA6/49/
— ทิมลง
แหล่งที่มา
2
@TJCrowder แล้วอันไหนล่ะ?
— Naftali aka Neal
9
@Neal: ถ้าคุณต้องการที่จะรู้ว่าองค์ประกอบคุณสมบัติ DOM มีคุณลักษณะและวิธีการที่อาจเมล็ดค่าของพวกเขาให้การเชื่อมโยงเหล่านี้ไปยังมือ: สเป DOM2 HTMLที่DOM2ข้อมูลจำเพาะและDOM3ข้อมูลจำเพาะ ดัชนีในแต่ละกรณีนั้นยอดเยี่ยมและเชื่อมโยงคุณไปยังคำอธิบายอย่างละเอียดของสถานที่ซึ่งคุณค่านั้นมาจาก ฯลฯ
— TJ Crowder
4
@Neal: สิ่งที่ทำให้แตกต่าง: แหล่งที่มาและลักษณะของข้อมูล ลองดูvalueตัวอย่างของทิม ฟังก์ชั่นที่เรียกattrว่าดึงคุณสมบัติ valueแทนแอตทริบิวต์ "value" นั้นไม่สมเหตุสมผล (และอาจแตกต่างกัน) ก้าวไปข้างหน้าattrการทำคุณสมบัติและpropทำคุณสมบัติจะชัดเจนขึ้นแม้ว่าการเปลี่ยนแปลงจะเจ็บปวดสำหรับบางคน อย่าใช้วิธีนี้ผิดไม่มีอะไรที่เหมือนกับการก้าวถอยหลังและอ่านรายละเอียดเพื่อให้ทราบถึงคุณสมบัติของมัน
— TJ Crowder
54
@Neal: องค์ประกอบ DOM เป็นวัตถุ คุณสมบัติเป็นคุณสมบัติของวัตถุนั้นเช่นเดียวกับวัตถุการเขียนโปรแกรมอื่น ๆ อุปกรณ์ประกอบฉากเหล่านั้นบางส่วนได้รับค่าเริ่มต้นจากแอตทริบิวต์ในมาร์กอัปซึ่งถูกเก็บไว้ในวัตถุ DOM ในแผนที่แอตทริบิวต์ที่แยกต่างหาก ในกรณีส่วนใหญ่การเขียนเป็นเสาเปลี่ยนเพียงเสา แต่น่าเสียดายที่มีอุปกรณ์ประกอบฉากที่เขียนการเปลี่ยนแปลงใด ๆ ผ่านไปยัง attr พื้นฐาน ( valueตัวอย่าง) แต่ลองพยายามที่จะละเว้นส่วนใหญ่ 99% ของเวลาคุณต้องการทำงานกับอุปกรณ์ประกอบฉาก หากคุณต้องการทำงานกับแอตทริบิวต์ที่แท้จริงคุณอาจรู้ว่า
— TJ Crowder
4
@Tim: "การเปลี่ยนvalueคุณสมบัติของอินพุตไม่เปลี่ยนvalueคุณสมบัติของมันในเบราว์เซอร์สมัยใหม่"ฉันไม่คิดว่ามันทำซึ่งเป็นสาเหตุที่ฉันเริ่มใช้มันเป็นตัวอย่าง แต่เมื่อฉันเริ่มเขียนโค้ดตัวอย่างขึ้นมา หากไม่ได้รับการอัปเดตใน Chrome, Firefox, Opera, IE ... - jsbin.com/ahire4ปรากฎว่าเป็นเพราะฉันใช้input[type="button"]สำหรับการทดลองของฉัน มันไม่ได้อัปเดตในแอตทริบิวต์ที่input[type="text"]- jsbin.com/ahire4/2พูดคุยเกี่ยวกับที่ซับซ้อน !! ไม่ได้เป็นเพียงองค์ประกอบ แต่ชนิดของมัน ...
— TJ Crowder
664

ฉันคิดว่าทิมพูดได้ค่อนข้างดีแต่ลองย้อนกลับไป:

องค์ประกอบ DOM เป็นวัตถุสิ่งหนึ่งในหน่วยความจำ เช่นเดียวกับวัตถุมากที่สุดใน OOP ก็มีคุณสมบัติ นอกจากนี้ยังแยกแผนที่ของแอตทริบิวต์ที่กำหนดไว้ในองค์ประกอบ (โดยปกติจะมาจากมาร์กอัพที่เบราว์เซอร์อ่านเพื่อสร้างองค์ประกอบ) บางส่วนขององค์ประกอบของคุณสมบัติได้รับของพวกเขาเริ่มต้นค่าจากคุณลักษณะที่มีชื่อเดียวกันหรือคล้ายกัน ( valueได้รับค่าเริ่มต้นจากแอตทริบิวต์ "ค่า"; hrefได้รับค่าเริ่มต้นจากแอตทริบิวต์ "href" แต่ก็ไม่ได้ว่าค่าเดียวกัน; classNameจาก แอตทริบิวต์ "class") คุณสมบัติอื่น ๆ จะได้รับค่าเริ่มต้นด้วยวิธีอื่น: ตัวอย่างเช่นparentNodeคุณสมบัติจะได้รับค่าตามสิ่งที่องค์ประกอบหลักคือstyle ไม่ว่าจะมีคุณสมบัติ "สไตล์" หรือไม่

ลองพิจารณาจุดยึดนี้ในหน้าที่http://example.com/testing.html:

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

ศิลปะ ASCII ที่ไม่ต้องเสียค่าใช้จ่าย (และทิ้งอะไรมากมาย):

+ + -------------------------------------------
| HTMLAnchorElement |
+ + -------------------------------------------
| href: "http://example.com/foo.html" |
| ชื่อ: "fooAnchor" |
| id: "fooAnchor" |
| className: "test one" |
| คุณสมบัติ: |
| href: "foo.html" |
| ชื่อ: "fooAnchor" |
| id: "fooAnchor" |
| คลาส: "ทดสอบหนึ่ง" |
+ + -------------------------------------------

โปรดทราบว่าคุณสมบัติและคุณสมบัตินั้นแตกต่างกัน

ตอนนี้แม้ว่าพวกเขาจะแตกต่างกันเพราะทั้งหมดนี้วิวัฒนาการมาแทนที่จะถูกออกแบบมาจากพื้นดินขึ้นจำนวนของคุณสมบัติเขียนกลับไปที่คุณลักษณะที่พวกเขาได้รับจากถ้าคุณตั้งพวกเขา แต่ไม่ทั้งหมดทำและอย่างที่คุณเห็นจากhrefด้านบนการทำแผนที่ไม่ใช่ "ส่งผ่านค่าใน" เสมอบางครั้งก็มีการตีความที่เกี่ยวข้อง

เมื่อฉันพูดถึงคุณสมบัติที่เป็นคุณสมบัติของวัตถุฉันไม่ได้พูดในเชิงนามธรรม นี่คือโค้ดที่ไม่ใช่ jQuery:

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

(ค่าเหล่านั้นตามเบราว์เซอร์ส่วนใหญ่มีการเปลี่ยนแปลงบางอย่าง)

linkวัตถุเป็นสิ่งที่จริงและคุณสามารถเห็นว่ามีความแตกต่างจริงระหว่างการเข้าถึงสถานที่ให้บริการในนั้นและเข้าถึงแอตทริบิวต์

ดังที่ทิมกล่าวว่าส่วนใหญ่แล้วเราต้องการทำงานกับอสังหาริมทรัพย์ ส่วนหนึ่งเป็นเพราะค่าของพวกเขา (แม้แต่ชื่อ) มีแนวโน้มที่จะสอดคล้องกันมากขึ้นในเบราว์เซอร์ เราส่วนใหญ่ต้องการทำงานกับคุณลักษณะเฉพาะเมื่อไม่มีคุณสมบัติที่เกี่ยวข้อง (คุณสมบัติที่กำหนดเอง) หรือเมื่อเรารู้ว่าสำหรับคุณลักษณะเฉพาะนั้นแอตทริบิวต์และคุณสมบัตินั้นไม่ใช่ 1: 1 (เช่นเดียวกับhref"href" ด้านบน) .

คุณสมบัติมาตรฐานถูกจัดวางในข้อกำหนดต่างๆของ DOM:

สเปคเหล่านี้มีดัชนีที่ยอดเยี่ยมและฉันแนะนำให้เก็บลิงค์ไว้ในที่มีประโยชน์ ฉันใช้พวกเขาตลอดเวลา

ตัวอย่างเช่นแอตทริบิวต์ที่กำหนดเองรวมถึงdata-xyzแอตทริบิวต์ใด ๆ ที่คุณอาจใส่ไว้ในองค์ประกอบต่างๆเพื่อให้ meta-data แก่โค้ดของคุณ (ตอนนี้สามารถใช้งานได้กับ HTML5 ตราบใดที่คุณยึดติดกับdata-คำนำหน้า) (jQuery รุ่นล่าสุดให้คุณเข้าถึงdata-xyzองค์ประกอบผ่านdataฟังก์ชั่น แต่ฟังก์ชั่นนี้ไม่ได้เป็นเพียงแค่ accessor สำหรับdata-xyzคุณสมบัติ [มันทำทั้งมากและน้อยกว่านั้น]; เว้นแต่คุณจะต้องการคุณสมบัติจริง ๆ ฉันจะใช้attrฟังก์ชันเพื่อโต้ตอบ ด้วยdata-xyzคุณลักษณะ.)

attrฟังก์ชั่นที่ใช้ในการมีเหตุผลที่ซับซ้อนบางรอบรับสิ่งที่พวกเขาคิดว่าคุณอยากมากกว่าแท้จริงได้รับแอตทริบิวต์ มันทำให้แนวคิดแตกต่าง การย้ายไปที่propและattrตั้งใจจะยกเลิกการพูดคุยกัน สั้น ๆ ใน v1.6.0 jQuery ไปไกลเกินไปในเรื่องที่ แต่การทำงานถูกเพิ่มเข้ามาอย่างรวดเร็วกลับไปattrจัดการกับสถานการณ์ทั่วไปที่ผู้คนใช้เมื่อในทางเทคนิคก็ควรใช้attrprop

— TJ Crowder
แหล่งที่มา
ว้าว. การอัพเดท 1.6.1 ใหม่นั้นลบล้างคำถามนี้นิดหน่อย .. (แต่ไม่มาก) แต่ลิงค์นั้นก็ตอบคำถามตอนนี้
— Naftali aka Neal
มันไม่เป็นโมฆะสำหรับฉันฉันเพิ่งแก้ไขข้อผิดพลาดโดยใช้ jquery1.7 ที่ฉันตั้งค่า. attr ('class', 'bla') และมันไม่ทำงานที่. prop ('className', 'bla' ) ทำงาน
— PandaWood
@PandaWood: .attr('class', 'bla')ทำงานได้ตามที่คาดหวังสำหรับฉันใน1.7.0 , 1.7.1และ1.7.2บน Chrome 17, Firefox 11, Opera 11, IE6, IE8, IE9 และ Safari 5
— TJ Crowder
ขอบคุณจะต้องมีบางอย่างที่เฉพาะเจาะจงในกรณีของฉันให้ฉันตรวจสอบและกลับมาพร้อมกับกรณีทดสอบ แต่เปลี่ยนรหัสตามที่เรามีตอนนี้เพียงแค่ "prop / className" แทน "attr" แก้ไขข้อผิดพลาดครั้งใหญ่สำหรับเราที่ได้รับผลกระทบเมื่อเราย้ายจาก jquery1.4 เป็น 1.7 - บนเบราว์เซอร์ทั้งหมด
— PandaWood
3
@TJCrowder อีกครั้ง: .data- มันจะอ่านค่าเริ่มต้นของแอตทริบิวต์ถ้ามี แต่ถ้าคุณเขียนถึงมันจะเปลี่ยนคุณสมบัติที่ซ่อนอยู่ขององค์ประกอบและไม่อัปเดตแอตทริบิวต์
— Alnitak
250

การเปลี่ยนแปลงนี้ใช้เวลานานสำหรับ jQuery เป็นเวลาหลายปีที่พวกเขาได้รับเนื้อหาที่มีฟังก์ชั่นชื่อattr()ที่เรียกคืนคุณสมบัติ DOM ส่วนใหญ่ไม่ใช่ผลลัพธ์ที่คุณคาดหวังจากชื่อ การแยกattr()และprop()ควรช่วยบรรเทาความสับสนระหว่างคุณสมบัติ HTML และคุณสมบัติ DOM $.fn.prop()คว้าคุณสมบัติ DOM ที่ระบุในขณะที่$.fn.attr()คว้าแอตทริบิวต์ HTML ที่ระบุ

เพื่อให้เข้าใจวิธีการทำงานอย่างสมบูรณ์นี่คือคำอธิบายเพิ่มเติมเกี่ยวกับความแตกต่างระหว่างคุณลักษณะ HTML และคุณสมบัติ DOM:

คุณสมบัติ HTML

ไวยากรณ์:

<body onload="foo()">

วัตถุประสงค์: อนุญาตให้มาร์กอัปมีข้อมูลที่เกี่ยวข้องกับเหตุการณ์การแสดงผลและวัตถุประสงค์อื่น ๆ

การสร้างภาพ: คุณสมบัติ HTML แอตทริบิวต์ class แสดงที่นี่ในเนื้อความ มันสามารถเข้าถึงได้ผ่านรหัสต่อไปนี้:

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

แอ็ตทริบิวต์ถูกส่งคืนในรูปแบบสตริงและสามารถไม่สอดคล้องกันจากเบราว์เซอร์ไปยังเบราว์เซอร์ อย่างไรก็ตามอาจมีความสำคัญในบางสถานการณ์ จากตัวอย่างข้างต้นโหมด IE 8 Quirks (และด้านล่าง) คาดว่าจะมีชื่อของคุณสมบัติ DOM ใน get / set / removeAttribute แทนชื่อแอตทริบิวต์ นี่คือหนึ่งในหลายเหตุผลที่สำคัญที่ต้องทราบความแตกต่าง

คุณสมบัติของ DOM

ไวยากรณ์:

document.body.onload = foo;

วัตถุประสงค์: ให้การเข้าถึงคุณสมบัติที่เป็นของโหนดองค์ประกอบ คุณสมบัติเหล่านี้คล้ายกับแอตทริบิวต์ แต่สามารถเข้าถึงได้ผ่าน JavaScript เท่านั้น นี่คือความแตกต่างที่สำคัญที่ช่วยอธิบายบทบาทของคุณสมบัติ DOM โปรดทราบว่าแอตทริบิวต์นั้นแตกต่างไปจากคุณสมบัติอย่างสิ้นเชิงเนื่องจากการมอบหมายตัวจัดการเหตุการณ์นี้ไม่มีประโยชน์และจะไม่ได้รับเหตุการณ์

การแสดง: คุณสมบัติของ DOM

ที่นี่คุณจะสังเกตเห็นรายการคุณสมบัติภายใต้แท็บ "DOM" ใน Firebug นี่คือคุณสมบัติ DOM คุณจะสังเกตุเห็นได้ไม่กี่คนในทันทีเนื่องจากคุณจะใช้มันมาก่อนโดยไม่รู้ตัว คุณค่าของพวกเขาคือสิ่งที่คุณจะได้รับผ่านทาง JavaScript

เอกสาร

ตัวอย่าง

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

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

ใน jQuery เวอร์ชันก่อนหน้านี้จะส่งคืนสตริงว่าง ใน 1.6 มันคืนค่าที่เหมาะสม, foo.

โดยไม่ต้องเหลียวมองโค้ดใหม่สำหรับฟังก์ชั่นใดตัวหนึ่งฉันสามารถพูดได้อย่างมั่นใจว่าความสับสนนั้นเกี่ยวข้องกับความแตกต่างระหว่างคุณสมบัติ HTML กับคุณสมบัติ DOM มากกว่าโค้ดเอง หวังว่าสิ่งนี้จะช่วยคุณได้

-Matt

— K.Dᴀᴠɪs
แหล่งที่มา
7
$.prop()รับคุณสมบัติ DOM รับคุณสมบัติ$.attr()HTML ฉันกำลังพยายามลดช่องว่างทางจิตวิทยาเพื่อให้คุณสามารถเข้าใจความแตกต่างระหว่างทั้งสอง
10
เด็กชายฉันก็สับสนเหมือนกัน ดังนั้น$('#test').prop('value')จะไม่ส่งคืนสิ่งใดเลย? หรือ.attr('checked')ทำเครื่องหมายในช่องทำเครื่องหมาย? แต่มันเคยเป็นอย่างไร ตอนนี้คุณต้องเปลี่ยนเป็นprop('checked')? ฉันไม่เข้าใจถึงความจำเป็นในการแยกความแตกต่างนี้ - เหตุใดจึงสำคัญที่ต้องแยกความแตกต่างระหว่างคุณลักษณะ HTML และคุณสมบัติ DOM กรณีการใช้งานทั่วไปที่ทำให้การเปลี่ยนแปลง"มาเป็นเวลานาน"คืออะไร? มีอะไรผิดปกติกับการแยกความแตกต่างระหว่างคนสองคนออกไปเนื่องจากดูเหมือนว่ากรณีการใช้งานของพวกเขาส่วนใหญ่ทับซ้อนกัน?
— BlueRaja - Danny Pflughoeft
5
@BlueRaja: เพราะมีความแตกต่างที่สำคัญระหว่างสองแนวคิดซึ่งถ้าคุณแปรงมันภายใต้พรมเหมือน jQuery เคยทำให้เกิดความล้มเหลวที่ไม่คาดคิด valueเป็นหนึ่งในกรณีที่ชัดเจนที่สุดเนื่องจากvalueคุณสมบัติจะให้ค่าปัจจุบันของเขตข้อมูล แต่valueแอตทริบิวต์จะให้ค่าเดิมที่ประกาศในvalue="..."แอตทริบิวต์ซึ่งเป็นdefaultValueคุณสมบัติจริง (แม้ว่ากรณีนี้โดยเฉพาะอย่างยิ่งได้รับสับสนอีกครั้งโดยข้อบกพร่องใน IE <9.)
— bobince
4
@BlueRaja: คำตอบที่ซับซ้อนยิ่งขึ้น :-) การตั้งค่าattr('value', ...)ใน jQuery <1.6 เป็นการตั้งค่าคุณสมบัติดังนั้นการเปลี่ยนแปลงค่าปัจจุบันและค่าเริ่มต้นจะไม่ ใน 1.6 มันกำหนดคุณลักษณะดังนั้นในทางทฤษฎีแล้วค่าเริ่มต้นจะเปลี่ยนไปและค่าปัจจุบันจะไม่ อย่างไรก็ตามมีเบราว์เซอร์ (เพิ่มเติม) ไม่สอดคล้องกับการตั้งค่าvalueแอตทริบิวต์ ใน IE มันตั้งค่าปัจจุบันเช่นกัน ในบางเบราว์เซอร์จะตั้งค่าปัจจุบันเฉพาะถ้าค่าปัจจุบันยังไม่ได้ตั้งค่ามาก่อน [ร้อง]
— bobince
1
เช่นเดียวกับ @Quentin กล่าวว่า "แอตทริบิวต์ถูกกำหนดโดย HTML คุณสมบัติถูกกำหนดโดย DOM" รุ่นที่ง่ายที่สุดที่ฉันได้อ่าน
— Alan Dong
241

สถานที่ให้บริการอยู่ใน DOM; แอตทริบิวต์อยู่ใน HTML ที่วิเคราะห์คำใน DOM

รายละเอียดเพิ่มเติม

หากคุณเปลี่ยนคุณลักษณะการเปลี่ยนแปลงจะมีผลใน DOM (บางครั้งมีชื่ออื่น)

ตัวอย่าง: การเปลี่ยนclassคุณสมบัติของแท็กจะเปลี่ยนclassNameคุณสมบัติของแท็กนั้นใน DOM หากคุณไม่มีแอตทริบิวต์บนแท็กคุณยังคงมีคุณสมบัติ DOM ที่สอดคล้องกับค่าว่างหรือค่าเริ่มต้น

ตัวอย่าง: ในขณะที่แท็กของคุณไม่มีclassคุณสมบัติคุณสมบัติ DOMclassNameจะมีอยู่ด้วยค่าสตริงที่ว่างเปล่า

แก้ไข

ถ้าคุณเปลี่ยนอันหนึ่งอันอีกอันหนึ่งจะถูกควบคุมโดยตัวควบคุมและในทางกลับกัน คอนโทรลเลอร์นี้ไม่ได้อยู่ใน jQuery แต่อยู่ในรหัสเนทีฟของเบราว์เซอร์

— yunzen
แหล่งที่มา
นี่หมายความว่าเป็นการดีกว่าที่จะอัปเดตแอตทริบิวต์เนื่องจากคุณมั่นใจได้ว่าทั้งคุณสมบัติและคุณสมบัติได้รับการอัปเดตและอยู่ในแนวเดียวกัน
— ลุค
1
@Luke the DOM เป็นตัวแทนทางด้านเทคนิคของรุ่น คุณลักษณะ HTML เป็นการนำเสนอภายนอก, มุมมอง ถ้าคุณเปลี่ยนอันหนึ่งอันอื่นจะถูกควบคุมโดยตัวควบคุมและในทางกลับกัน
— yunzen
@HerrSerker ดังนั้นพวกเขาทั้งคู่จึงซิงค์กันผ่านทางคอนโทรลเลอร์? ฉันคิดว่านี่เป็นเพียงภายในวิธีการ attr และ prop ของ jQuery? นี่คือการดัดแปลงซอของคุณที่ฉันสำรวจเพิ่มเติม - jsfiddle.net/v8wRy - และจนถึงตอนนี้พวกมันดูเหมือนจะเทียบเท่ากัน
— ลูกา
3
"ถ้าคุณเปลี่ยนอันอื่นตัวควบคุมอื่นจะถูกเปลี่ยนและในทางกลับกันตัวควบคุมนี้ไม่ได้อยู่ใน jQuery แต่เป็นรหัสเนทีฟของเบราว์เซอร์" สิ่งนี้ไม่เป็นความจริงสำหรับคุณสมบัติ / คุณสมบัติส่วนใหญ่ สำหรับเสียงส่วนใหญ่เป็นเพียงการแปลทางเดียวโดยที่แอตทริบิวต์กำหนดค่าเริ่มต้นของคุณสมบัติที่สอดคล้องกัน คำตอบสองอันดับแรกอธิบายรายละเอียดนี้
— ᴠɪɴᴄᴇɴᴛ
@Vincent ฉันไม่เห็นตำแหน่งที่คำตอบสองข้อแรกพูดถึงสิ่งที่ตรงข้ามกับคำตอบของฉัน แน่นอนว่าคุณลักษณะส่วนใหญ่เป็นค่าเริ่มต้นของคุณสมบัติ DOM ที่สอดคล้องกัน แต่พวกเขาต้องพึ่งพาซึ่งกันและกัน ลองอะไรที่คล้ายกับjQuery('p').prop('className', 'foo');ในคอนโซล Chrome และคุณจะเห็นว่าแต่ละย่อหน้าได้รับclassคุณลักษณะของthg 'foo'อย่างไร แน่นอนไม่ได้อยู่ในซอร์สโค้ดซึ่งมาจากเซิร์ฟเวอร์ นั่นคือค่าคงที่
— yunzen
140

เป็นเพียงความแตกต่างระหว่างคุณลักษณะ HTML และวัตถุ DOM ที่ทำให้เกิดความสับสน สำหรับผู้ที่มีความสะดวกสบายที่ทำหน้าที่เกี่ยวกับองค์ประกอบ DOM คุณสมบัติดั้งเดิมเช่นthis.src this.value this.checkedฯลฯ.propเป็นการต้อนรับที่อบอุ่นมากกับครอบครัว สำหรับคนอื่น ๆ มันเป็นเพียงความสับสนที่เพิ่มเข้ามา ชัดเจนขึ้นมาว่า

วิธีที่ง่ายที่สุดในการดูความแตกต่างระหว่าง.attrและ.propเป็นตัวอย่างต่อไปนี้:

<input blah="hello">
  1. $('input').attr('blah'): ผลตอบแทน'hello'ตามที่คาดไว้ ไม่มีเรื่องแปลก ๆ ที่นี่
  2. $('input').prop('blah'): ส่งคืนundefined- เนื่องจากพยายามทำ[HTMLInputElement].blah- และไม่มีคุณสมบัติดังกล่าวในวัตถุ DOM นั้น มันมีอยู่ในขอบเขตเป็นคุณลักษณะขององค์ประกอบนั้นเท่านั้น[HTMLInputElement].getAttribute('blah')

ตอนนี้เราเปลี่ยนบางอย่างเช่น:

$('input').attr('blah', 'apple');
$('input').prop('blah', 'pear');
  1. $('input').attr('blah'): ส่งคืน'apple'ใช่มั้ย ทำไมไม่ "ลูกแพร์" เช่นนี้ถูกตั้งค่าล่าสุดในองค์ประกอบที่ เนื่องจากคุณสมบัติถูกเปลี่ยนในแอ็ตทริบิวต์อินพุตไม่ใช่อิลิเมนต์อินพุต DOM - โดยทั่วไปพวกมันเกือบจะเป็นอิสระจากกัน
  2. $('input').prop('blah'): ส่งคืน 'pear'

สิ่งที่คุณต้องระวังอย่างยิ่งคืออย่าผสมการใช้สิ่งเหล่านี้ในพื้นที่เดียวกันตลอดทั้งแอปพลิเคชันของคุณด้วยเหตุผลด้านบน

ดูซอแสดงให้เห็นถึงความแตกต่าง: http://jsfiddle.net/garreh/uLQXc/

.attrvs .prop:

รอบ 1: สไตล์

<input style="font:arial;"/>
  • .attr('style') - ส่งคืนสไตล์แบบอินไลน์สำหรับองค์ประกอบที่ตรงกันเช่น "font:arial;"
  • .prop('style') - ส่งคืนวัตถุประกาศสไตล์เช่น CSSStyleDeclaration

รอบ 2: ค่า

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

$('input').prop('value', 'i changed the value');
  • .attr('value') - ส่งคืน 'hello' *
  • .prop('value') - ส่งคืน 'i changed the value'

* หมายเหตุ: jQuery ด้วยเหตุผลนี้มี.val()วิธีการภายในซึ่งเทียบเท่ากับ.prop('value')

— Gary Green
แหล่งที่มา
@ จริงๆเพราะมันให้การอ้างอิงถึงโครงสร้างของฟังก์ชั่น jquery ที่ดีขึ้น "$ ('input'). prop ('blah'): คืนค่าที่ไม่ได้กำหนด - เพราะมันพยายามที่จะทำ [HTMLInputElement] .blah - และไม่มีคุณสมบัติดังกล่าวบนวัตถุ DOM นั้นอยู่มันมีอยู่ในขอบเขตเป็นแอตทริบิวต์เท่านั้น ขององค์ประกอบนั้นคือ [HTMLInputElement] .getAttribute ('blah') "
— UğurGümüşhan
2
ดูเหมือนแตกต่างจาก doc, api.jquery.com/prop : "ควรใช้เมธอด. prop () เพื่อตั้งค่าปิดใช้งานและตรวจสอบแทนเมธอด .attr () เมธอด .val () ควรใช้เพื่อรับและ การตั้งค่า
— หงส์
53

TL; DR

ใช้ prop()มากกว่าattr()ในกรณีส่วนใหญ่

คุณสมบัติคือสถานะปัจจุบันขององค์ประกอบเข้า แอตทริบิวต์เป็นค่าเริ่มต้น

สถานที่ให้บริการสามารถมีสิ่งต่าง ๆ แอตทริบิวต์สามารถมีได้เฉพาะสตริง

— agjmills
แหล่งที่มา
1
ถ้าเป็นไปได้จะมาพร้อมกับตัวอย่างง่ายๆเพียงไม่กี่ของสิ่งที่พูด ur prop() and when to go for attr()และยังแสดงให้เห็นเมื่อมีการใช้งาน รอคำตอบ :)
— หมู
36

การตรวจสอบสกปรก

แนวคิดนี้ให้ตัวอย่างที่สามารถสังเกตเห็นความแตกต่าง: http://www.w3.org/TR/html5/forms.html#concept-input-checked-dirty

ลองดูสิ:

  • คลิกที่ปุ่ม ช่องทำเครื่องหมายทั้งสองได้รับการตรวจสอบแล้ว
  • ยกเลิกการทำเครื่องหมายที่ช่องทำเครื่องหมายทั้งสอง
  • คลิกที่ปุ่มอีกครั้ง propมีการตรวจสอบเฉพาะช่องทำเครื่องหมาย ปัง!

$('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>
ขยายตัวอย่างข้อมูล

สำหรับคุณลักษณะบางอย่างเช่นdisabledเปิดbuttonเพิ่มหรือลบแอตทริบิวต์เนื้อหาdisabled="disabled"จะสลับคุณสมบัติ (เรียกว่าแอตทริบิวต์ IDL ใน HTML5) เพราะhttp://www.w3.org/TR/html5/forms.html#attr-fe-disabledพูดว่า:

แอตทริบิวต์ IDL ที่ถูกปิดใช้งานจะต้องสะท้อนถึงแอตทริบิวต์ของเนื้อหาที่ถูกปิดใช้งาน

ดังนั้นคุณอาจจะไปกับมันแม้ว่ามันจะน่าเกลียดเพราะมันแก้ไข HTML โดยไม่จำเป็นต้องใช้

สำหรับแอททริบิวอื่น ๆ เช่นchecked="checked"เปิดinput type="checkbox"สิ่งต่าง ๆ แตกหักเพราะเมื่อคุณคลิกที่มันมันจะสกปรกและจากนั้นการเพิ่มหรือลบchecked="checked"แอตทริบิวต์เนื้อหาจะไม่สลับการตรวจสอบอีกต่อไปอีกต่อไป

นี่คือเหตุผลที่คุณควรใช้เป็นส่วนใหญ่.propเนื่องจากจะส่งผลต่อคุณสมบัติที่มีประสิทธิภาพโดยตรงแทนที่จะใช้ผลข้างเคียงที่ซับซ้อนของการแก้ไข HTML

— Ciro Santilli 冠状法轮功审查六四法轮功法轮功
แหล่งที่มา
เพื่อความสมบูรณ์ยังพยายามที่รูปแบบเหล่านี้: 1) การตรวจสอบก่อนที่จะคลิกปุ่มแล้วยกเลิกการเลือกช่องทำเครื่องหมายแรก 2) (สำหรับหนึ่งนี้คุณจะต้องเปลี่ยนข้อมูลโค้ด) ให้การป้อนข้อมูลแรกcheckedแอตทริบิวต์:checked="checked"
— ᴠɪɴᴄᴇɴᴛ
33

ทั้งหมดอยู่ในเอกสาร :

ความแตกต่างระหว่างคุณลักษณะและคุณสมบัติสามารถมีความสำคัญในสถานการณ์ที่เฉพาะเจาะจง ก่อน jQuery 1.6 บางครั้งเมธอด .attr () จะนำค่าคุณสมบัติมาพิจารณาเมื่อดึงข้อมูลบางคุณสมบัติซึ่งอาจทำให้เกิดพฤติกรรมที่ไม่สอดคล้องกัน ตั้งแต่ jQuery 1.6 เมธอด .prop () จัดเตรียมวิธีในการเรียกคืนค่าคุณสมบัติอย่างชัดเจนขณะที่. attr () จะดึงแอ็ตทริบิวต์

ดังนั้นใช้เสา!

— Arnaud F.
แหล่งที่มา
2
นั่นหมายความว่าเมื่อฉันเปลี่ยนเป็น 1.6 สิ่งต่างๆมากมายจะแตกสลาย ??
— Naftali aka Neal
ไม่มันเป็นเพียงพฤติกรรมที่ไม่สอดคล้องกันถ้ามันทำงานก่อนหน้านี้มันจะทำงานร่วมกับ jQuery 1.6 เป็นเพียงเสาที่ปลอดภัย;)
— Arnaud F.
6
ฉันดูเหมือนจะจำได้ $.attr()ดึงคุณสมบัติส่วนใหญ่เวลาที่ฉันทำงานกับมันไม่ใช่ "บางครั้ง" ความสับสนที่เกิดจากมันยังคงดังก้องในวันนี้ น่าเศร้าที่ฉันมีปัญหามากในการหาที่ชัดเจนอ่านต่อ HTML คุณลักษณะคุณสมบัติเทียบกับ DOM ดังนั้นฉันอาจเขียนคำตอบที่นี่ในบิต
3
@ Arnaud-f ไม่เป็นความจริง รหัสทั้งหมดก่อนหน้า 1.6 ที่ใช้ attr ('ตรวจสอบ') เพื่อตรวจสอบช่องทำเครื่องหมายจะแตก
— CaptSaltyJack
3
@Matt McDonald: "... ปัญหาในการหาอ่านที่ชัดเจนเกี่ยวกับคุณสมบัติ HTML เทียบกับคุณสมบัติ DOM ... " คุณหมายถึงอะไร อสังหาริมทรัพย์ (สะท้อนและอื่น ๆ ) อธิบายไว้ในข้อกำหนด DOM2 HTML ; คุณยังอาจต้องดูที่DOM2และDOM3รายละเอียด
— TJ Crowder
28

คุณลักษณะอยู่ในเอกสาร / ไฟล์ข้อความ HTML ของคุณ(== ลองนึกภาพว่านี่เป็นผลมาจากการแยกวิเคราะห์มาร์คอัป HTML ของคุณ) ในขณะที่
คุณสมบัติอยู่ในต้นไม้ HTML DOM (== โดยทั่วไปเป็นคุณสมบัติที่แท้จริงของวัตถุบางอย่างในความหมาย JS)

ที่สำคัญมีการซิงค์หลายรายการ (หากคุณอัปเดตclassคุณสมบัติคุณสมบัติclassใน html จะได้รับการอัปเดตและอื่น ๆ ) แต่คุณลักษณะบางอย่างอาจถูกซิงค์กับคุณสมบัติที่ไม่คาดคิดเช่นแอตทริบิวต์นั้น checkedสอดคล้องกับคุณสมบัติ defaultCheckedดังนั้น

  • การตรวจสอบช่องทำเครื่องหมายด้วยตนเองจะเปลี่ยน.prop('checked')ค่า แต่จะไม่เปลี่ยนแปลง.attr('checked')และ.prop('defaultChecked')ค่า
  • การตั้งค่า$('#input').prop('defaultChecked', true)จะเปลี่ยน.attr('checked')เช่นกัน แต่สิ่งนี้จะไม่ปรากฏในองค์ประกอบ

Rule of thumb คือ : .prop()method ควรใช้สำหรับคุณสมบัติ / คุณสมบัติบูลีนและสำหรับคุณสมบัติที่ไม่มีอยู่ใน html (เช่น window.location) คุณลักษณะอื่น ๆ ทั้งหมด (สิ่งที่คุณเห็นใน html) สามารถและควรได้รับการจัดการกับ.attr() วิธีการต่อไป ( http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/ )

และนี่คือตารางที่แสดงตำแหน่งที่.prop()ต้องการ (แม้ว่า.attr()จะยังสามารถใช้งานได้)

ตารางที่มีการใช้งานที่ต้องการ

เหตุใดบางครั้งคุณต้องการใช้. prop () แทนที่จะเป็น .attr () โดยที่คำแนะนำหลังเป็นทางการ

  1. .prop()สามารถส่งคืนชนิดใด ๆ - สตริงจำนวนเต็มบูลีน; ในขณะที่.attr()ส่งกลับสตริงเสมอ
  2. .prop()บอกว่าจะอยู่ที่ประมาณ 2.5 .attr()เท่าเร็วกว่า
— lakesare
แหล่งที่มา
บางสิ่งบางอย่างมีการเปลี่ยนแปลงเช่นนี้$('#myImageId').prop('src', 'http://example.com/img.png'), หรือvar class = $('.myDivClass').prop('class') $('#myTextBox').prop('type', 'button')และอื่น ๆ ...
@ Mr.Wolf ขอโทษฉันยังไม่เข้าใจในความหมายของคุณ 'เปลี่ยน' อะไร ไวยากรณ์เป็นเช่นนั้นเสมอ
— ทะเลสาบ
ฉันคิดว่าตารางในคำตอบของคุณไม่จำเป็น เนื่องจาก.prop()ทำงานได้ดีกับคุณสมบัติทั้งหมด คุณไม่ต้องการทำเครื่องหมายคุณสมบัติทั้งหมดใน.prop()คอลัมน์ใช่ไหม
@ Mr.Wolf ฉันคิดว่ามันเป็นสิ่งจำเป็นเพราะตามที่ระบุไว้แล้วมันแสดงให้เห็นว่า.prop()เป็นที่ต้องการ (แม้ว่า.attr()ยังคงสามารถใช้งานได้) '
— lakesare
ฉันมักจะใช้.attr()เพื่อกำหนดเหตุการณ์ที่.prop()ไม่สามารถทำได้ $('.myDiv').attr('onclick', 'alert("Hello world!")')เช่นนี้ หากคุณเปลี่ยน.attr()เป็น.prop()มันจะไม่ทำงาน ทั้งหมดผมคิดว่ามีเหตุผลที่จะไม่ใช้การตั้งค่าหรือรับค่าของ.attr() id/class/href/checked/src.....สังเกตว่าฉันไม่ได้บอกว่าคุณผิด
20

.attr():

  • รับค่าของคุณสมบัติสำหรับองค์ประกอบแรกในชุดขององค์ประกอบที่ตรงกัน
  • ให้คุณค่าขององค์ประกอบตามที่กำหนดไว้ใน html เมื่อโหลดหน้าเว็บ

.prop():

  • รับค่าของคุณสมบัติสำหรับองค์ประกอบแรกในชุดขององค์ประกอบที่ตรงกัน
  • ให้ค่าองค์ประกอบที่มีการปรับปรุงซึ่งแก้ไขผ่านทาง javascript / jquery
— KGN เว็บ
แหล่งที่มา
13

โดยปกติคุณจะต้องการใช้คุณสมบัติ ใช้คุณลักษณะเฉพาะสำหรับ:

  1. รับแอตทริบิวต์ HTML ที่กำหนดเอง (เนื่องจากไม่ได้ซิงค์กับคุณสมบัติ DOM)
  2. รับแอตทริบิวต์ HTML ที่ไม่ซิงค์กับคุณสมบัติ DOM เช่นรับ "ค่าดั้งเดิม" ของแอตทริบิวต์ HTML มาตรฐานเช่น <input value="abc">.
— Naor
แหล่งที่มา
7

attributes -> HTML

properties -> DOM

— NKS
แหล่งที่มา
8
ฉันรู้ว่าคุณต้องการพูดอะไร แต่ HTML เป็นภาษามาร์กอัปและ DOM เป็นตัวแทนที่สร้างขึ้นจาก HTML DOMElement มีทั้งคุณลักษณะและคุณสมบัติ
— t.niese
@ t.niese attirbutesยังเป็นหนึ่งในสถานที่ให้บริการDOM
— NkS
คำตอบสั้น ๆ นั้นง่าย
— Nabi KAZ
6

ก่อน jQuery 1.6 attr()วิธีการบางครั้งนำค่าคุณสมบัติเข้ามาพิจารณาเมื่อดึงแอททริบิวต์ซึ่งทำให้เกิดพฤติกรรมที่ไม่สอดคล้องกัน

การแนะนำของprop()วิธีการมีวิธีการดึงค่าคุณสมบัติอย่างชัดเจนในขณะที่.attr()ดึงคุณสมบัติ

เอกสาร:

jQuery.attr() รับค่าของคุณสมบัติสำหรับองค์ประกอบแรกในชุดขององค์ประกอบที่ตรงกัน

jQuery.prop() รับค่าของคุณสมบัติสำหรับองค์ประกอบแรกในชุดขององค์ประกอบที่ตรงกัน

— Gothburz
แหล่งที่มา
3

เตือนความจำเบา ๆ เกี่ยวกับการใช้prop()ตัวอย่าง:

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

ฟังก์ชั่นด้านบนใช้ในการตรวจสอบว่ามีการเลือกเช็คบ็อกซ์ 1 หรือไม่ถ้าเลือก: ส่งคืน 1; ถ้าไม่ใช่: return 0 Function prop () ใช้ที่นี่เป็นฟังก์ชั่น GET

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

ฟังก์ชั่นด้านบนใช้สำหรับตั้งค่าเช็คบ็อกซ์ 1 ให้ตรวจสอบและกลับมาเสมอ 1. ตอนนี้ใช้ฟังก์ชั่น prop () เป็นฟังก์ชัน SET

อย่าสับสน

P / S: เมื่อฉันกำลังตรวจสอบคุณสมบัติภาพsrc ถ้าsrcว่างเปล่าpropส่งคืน URL ปัจจุบันของหน้า (ผิด) และattrส่งคืนสตริงว่าง (ขวา)

— user2657778
แหล่งที่มา
<img src="smiley.gif" alt="Smiley face" width="42" height="42" onclick="alert($(this).prop('src'))">คุณผิดในตัวอย่างนี้: มันควรจะทำงานและส่งคืนตำแหน่งภาพ
2

สิ่งหนึ่งที่.attr()สามารถทำได้คือ.prop()ไม่สามารถส่งผลกระทบต่อตัวเลือก CSS

นี่คือปัญหาที่ฉันไม่เห็นในคำตอบอื่น ๆ

ตัวเลือก CSS [name=value]

  • จะตอบกลับ .attr('name', 'value')
  • แต่ไม่เสมอไป .prop('name', 'value')

.prop() ส่งผลกระทบต่อตัวเลือกคุณลักษณะเพียงไม่กี่ตัว

.attr() ส่งผลกระทบต่อตัวเลือกคุณลักษณะทั้งหมด

— บ็อบสไตน์
แหล่งที่มา
0

1) คุณสมบัติอยู่ใน DOM; แอตทริบิวต์อยู่ใน HTML ที่วิเคราะห์คำใน DOM

2) $ (elem) .attr ("ตรวจสอบแล้ว") (1.6.1+) "ตรวจสอบแล้ว" (สตริง) จะเปลี่ยนตามสถานะช่องทำเครื่องหมาย

3) $ (elem) .attr ("ตรวจสอบแล้ว") (pre-1.6) จริง (บูลีน) เปลี่ยนด้วยสถานะช่องทำเครื่องหมาย

  • ส่วนใหญ่เราต้องการที่จะใช้สำหรับ DOM data-img, data-xyzวัตถุแอตทริบิวต์ที่กำหนดเองแล้วค่อนข้างชอบ

  • นอกจากนี้ยังมีความแตกต่างบางประการเมื่อเข้าถึงcheckboxค่าและhref ด้วยattr()และprop()เป็นสิ่งที่เปลี่ยนแปลงกับเอาต์พุต DOM พร้อม prop()ลิงก์เต็มรูปแบบจากoriginและBooleanค่าสำหรับช่องทำเครื่องหมาย (pre-1.6)

  • เราสามารถเข้าถึงองค์ประกอบ DOM กับองค์ประกอบpropอื่น ๆ จากนั้นให้undefined

แสดงตัวอย่างโค้ด

— Parth Trivedi
แหล่งที่มา
0

มีข้อควรพิจารณาเพิ่มเติมอีกเล็กน้อยใน prop () vs attr ():

  • selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked และ defaultSelected..etc ควรถูกเรียกคืนและตั้งค่าด้วยเมธอด. prop () สิ่งเหล่านี้ไม่มีคุณสมบัติที่สอดคล้องกันและเป็นคุณสมบัติเท่านั้น

  • สำหรับช่องทำเครื่องหมายประเภทอินพุต

       .attr('checked') //returns  checked
   .prop('checked') //returns  true
   .is(':checked') //returns true

  • วิธีการ prop ส่งคืนค่าบูลีนสำหรับการทำเครื่องหมายเลือกปิดใช้งานอ่านอย่างเดียว .. เป็นต้นขณะที่ attr ส่งคืนสตริงที่กำหนด ดังนั้นคุณสามารถใช้ .prop ('ตรวจสอบ') โดยตรงในกรณีที่มีเงื่อนไข

  • .attr () เรียกใช้. prop () ภายในดังนั้นเมธอด. atr () จะช้ากว่าการเข้าถึงโดยตรงผ่าน. prop () เล็กน้อย

— Rishu Ranjan
แหล่งที่มา
-2

คำตอบของ Gary Hole มีความเกี่ยวข้องมากในการแก้ปัญหาหากเขียนโค้ดในลักษณะดังกล่าว

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

เนื่องจากฟังก์ชั่น prop ส่งคืนCSSStyleDeclarationวัตถุโค้ดด้านบนจะทำงานไม่ถูกต้องในบางเบราว์เซอร์ (ทดสอบด้วยIE8 with Chrome Frame Pluginในกรณีของฉัน)

ดังนั้นการเปลี่ยนมันเป็นรหัสต่อไปนี้

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

แก้ไขปัญหา

— zawhtut
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.