Bây giờ đây không chỉ là câu hỏi khác Câu hỏi khác biệt là gì , tôi đã thực hiện một số thử nghiệm (http://jsfiddle.net/ZC3Lf/) sửa đổi propvà attrcủa <form action="/test/"></form>​ với đầu ra là:

1) Kiểm tra sửa đổi prop
Đề xuất: http://fiddle.jshell.net/test/1
Attr:http://fiddle.jshell.net/test/1

2) Kiểm tra sửa đổi Attr
Đề xuất: http://fiddle.jshell.net/test/1
Attr:/test/1

3) Attr sau đó kiểm tra sửa đổi
đề xuất Đề xuất: http://fiddle.jshell.net/test/11
Attr:http://fiddle.jshell.net/test/11

4) Đề xuất rồi kiểm tra sửa đổi Attr
Đề xuất: http://fiddle.jshell.net/test/11
Attr:http://fiddle.jshell.net/test/11

Bây giờ tôi đang bối rối về một số điều, theo như kiến ​​thức của tôi:
Prop: Giá trị ở trạng thái hiện tại của nó sau bất kỳ sửa đổi nào qua JavaScript
Attr: Giá trị như được định nghĩa trong html khi tải trang.

Bây giờ nếu điều này là chính xác,

• Tại sao việc sửa đổi thuộc tính propdường như làm cho thuộc tính actionđủ điều kiện, và ngược lại tại sao việc sửa đổi thuộc tính lại không?
• Tại sao việc sửa đổi proptrong lại 1)sửa đổi thuộc tính, điều đó không có ý nghĩa đối với tôi?
• Tại sao sửa đổi attrtrong lại 2)sửa đổi thuộc tính, chúng có nghĩa là được liên kết theo cách đó?

Mã kiểm tra

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 />');

Rất tiếc, không có liên kết nào của bạn hoạt động :(

Tuy nhiên, một số thông tin chi tiết attrdành cho tất cả các thuộc tính. proplà dành cho tài sản.

Trong các phiên bản jQuery cũ hơn (<1.6), chúng tôi chỉ có attr. Để có được thuộc tính DOM như nodeName, selectedIndexhoặc defaultValuebạn phải làm một cái gì đó như:

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

Điều đó hút, vì vậy propđã được thêm vào:

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

Điều này thật tuyệt, nhưng thật khó chịu vì điều này không tương thích ngược, vì:

<input type="checkbox" checked>

không có thuộc tính của checked, nhưng nó có thuộc tính được gọi checked.

Vì vậy, trong bản dựng cuối cùng của 1.6, attrcũng làmprop như vậy để mọi thứ không bị hỏng. Một số người muốn đây là một sự phá vỡ hoàn toàn, nhưng tôi nghĩ rằng quyết định đúng đã được thực hiện vì mọi thứ không đổ vỡ khắp nơi!

Về:

Đề xuất: Giá trị ở trạng thái hiện tại sau bất kỳ sửa đổi nào qua JavaScript

Attr: Giá trị được xác định trong html khi tải trang.

Điều này không phải lúc nào cũng đúng, vì nhiều lần thuộc tính thực sự bị thay đổi, nhưng đối với các thuộc tính như đã chọn, không có thuộc tính nào để thay đổi, vì vậy bạn cần sử dụng prop.

Người giới thiệu:

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

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

Có một trường hợp rõ ràng để thấy sự khác biệt giữa .prop và .attr

hãy xem xét HTML bên dưới:

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

và JS bên dưới bằng cách sử dụng 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);
});

tạo ra kết quả sau:

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

Tôi đã thử cái này

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

và nó xuất ra như bên dưới

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

điều này có thể chỉ ra rằng chỉ actionđược chuẩn hóa khi nó được đọc với prop.

vì jquery 1.6.1+ attr () trả về / thay đổi thuộc tính như trước 1.6. do đó các bài kiểm tra của bạn không có nhiều ý nghĩa.

lưu ý những thay đổi nhỏ trong giá trị trả về.

ví dụ

attr ('đã kiểm tra'): trước 1.6 true / false là returend, kể từ 1.6.1. "Đã kiểm tra" / không xác định được trả lại.

attr ('đã chọn'): trước khi trả về 1.6 true / false, vì 1.6.1 "đã chọn" / không xác định được trả về

tổng quan chi tiết về chủ đề này bằng tiếng Đức có thể được tìm thấy tại đây:

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