ตอนนี้ไม่ใช่แค่อีกคำถามความแตกต่างคืออะไรฉันได้ทำการทดสอบบางอย่าง (http://jsfiddle.net/ZC3Lf/) เพื่อแก้ไขpropและattrของ<form action="/test/"></form>​ ผลลัพธ์คือ:

1) prop Modification test
Prop: http://fiddle.jshell.net/test/1
Attr:http://fiddle.jshell.net/test/1

2) Attr Modification test
Prop: http://fiddle.jshell.net/test/1
Attr:/test/1

3) Attr แล้ว Prop Modification test
Prop: http://fiddle.jshell.net/test/11
Attr:http://fiddle.jshell.net/test/11

4) Prop แล้ว Attr Modification test
Prop: http://fiddle.jshell.net/test/11
Attr:http://fiddle.jshell.net/test/11

ตอนนี้ฉันสับสนเกี่ยวกับสองสิ่งเท่าที่ความรู้ของฉันไป:
Prop:ค่าในสถานะปัจจุบันหลังจากการแก้ไขใด ๆ ผ่าน JavaScript
Attr:ค่าตามที่กำหนดไว้ใน html ในการโหลดหน้า

ทีนี้ถ้าถูกต้อง

• เหตุใดการปรับเปลี่ยนจึงpropดูเหมือนจะทำให้actionมีคุณสมบัติครบถ้วนและในทางกลับกันเหตุใดการปรับเปลี่ยนแอตทริบิวต์จึงไม่
• เหตุใดการแก้ไขpropในการ1)แก้ไขแอตทริบิวต์จึงไม่มีเหตุผลสำหรับฉัน
• เหตุใดการปรับเปลี่ยนattrในการ2)ปรับเปลี่ยนคุณสมบัติจึงควรเชื่อมโยงในลักษณะนั้นหรือไม่

รหัสทดสอบ

HTML

JavaScript

var element = $('form');
var property = 'action';

/*You should not need to modify below this line */

var body = $('body');
var original = element.attr(property);

body.append('<h1>Prop Modification test</h1>');
element.prop(property, element.prop(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Attr Modification test</h1>');
element.attr(property, element.attr(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Attr then Prop Modification test</h1>');
element.attr(property, element.attr(property) + 1);
element.prop(property, element.prop(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

//reset
element.prop(property, original);
element.attr(property, original);

body.append('<h1>Prop then Attr Modification test</h1>');
element.prop(property, element.prop(property) + 1);
element.attr(property, element.attr(property) + 1);

body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');

น่าเสียดายที่ลิงก์ของคุณไม่ทำงาน :(

แม้ว่าความเข้าใจบางอย่างattrมีไว้สำหรับคุณลักษณะทั้งหมด propสำหรับคุณสมบัติ

ใน jQuery เวอร์ชันเก่า (<1.6) เราเพิ่งมีattrไฟล์. ที่จะได้รับคุณสมบัติ DOM เช่นnodeName, selectedIndexหรือdefaultValueที่คุณต้องทำสิ่งที่ชอบ:

var elem = $("#foo")[0];
if ( elem ) {
  index = elem.selectedIndex;
}

ที่ดูดจึงpropถูกเพิ่ม:

index = $("#foo").prop("selectedIndex");

นี่เป็นเรื่องที่ดี แต่น่ารำคาญซึ่งไม่สามารถใช้งานร่วมกันได้ย้อนหลังเนื่องจาก:

<input type="checkbox" checked>

มีแอตทริบิวต์ไม่แต่มันก็ไม่ได้คุณสมบัติที่เรียกว่าcheckedchecked

ดังนั้นในรุ่นสุดท้ายของ 1.6 attrก็ทำเช่นกันpropเพื่อให้สิ่งต่างๆไม่พัง บางคนอยากให้นี่เป็นการพักผ่อนที่สะอาด แต่ฉันคิดว่าการตัดสินใจที่ถูกต้องเกิดขึ้นเพราะสิ่งต่าง ๆ ไม่ได้พังทลายลงไปทั่ว!

เกี่ยวกับ:

ข้อเสนอ: ค่าในสถานะปัจจุบันหลังจากแก้ไขผ่าน JavaScript

Attr: ค่าตามที่กำหนดไว้ใน html ในการโหลดหน้า

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

อ้างอิง:

http://blog.jquery.com/2011/05/03/jquery-16-released/

http://ejohn.org/blog/jquery-16-and-attr

มีกรณีที่ชัดเจนเพื่อดูความแตกต่างระหว่าง. prop และ. attr

พิจารณา HTML ด้านล่าง:

<form name="form" action="#">
    <input type="text" name="action" value="myvalue" />
    <input type="submit" />
</form>
<pre id="return">
</pre>

และ JS ด้านล่างโดยใช้ jQuery:

$(document).ready(function(){
    $("#return").append("$('form').prop('action') : " + $('form').prop('action') + '\r\n');
    $("#return").append("$('form').attr('action') : " + $('form').attr('action') + '\r\n');
    $("#return").append("document.form.action : " + document.form.action);
});

สร้างผลลัพธ์ต่อไปนี้:

$('form').prop('action') : [object HTMLInputElement]
$('form').attr('action') : #
document.form.action : [object HTMLInputElement]

ฉันได้ลองสิ่งนี้แล้ว

console.log(element.prop(property));
console.log(element.attr(property));

และผลลัพธ์ดังต่อไปนี้

http://fiddle.jshell.net/test/
/test/ 

พฤษภาคมนี้แสดงให้เห็นว่าactionเป็นปกติเฉพาะเมื่อมีการอ่านpropด้วย

เนื่องจาก jquery 1.6.1+ attr () ส่งคืน / เปลี่ยนแปลงคุณสมบัติเหมือนก่อน 1.6 ดังนั้นการทดสอบของคุณจึงไม่สมเหตุสมผล

ระวังการเปลี่ยนแปลงเล็กน้อยในค่าตอบแทน

เช่น

attr ('checked'): ก่อน 1.6 จริง / เท็จจะถูก returend ตั้งแต่ 1.6.1 "ทำเครื่องหมาย" / ไม่ได้กำหนดจะถูกส่งกลับ

attr ('selected'): ก่อน 1.6 true / false จะถูกส่งกลับเนื่องจาก 1.6.1 "selected" / undefined จะถูกส่งกลับ

ภาพรวมโดยละเอียดของหัวข้อนี้ในภาษาเยอรมันสามารถพบได้ที่นี่:

http://mabraham.de/jquery-prop-attr-val-richtig-verwenden/