Câu hỏi .prop () so với .attr ()


Vì thế jQuery 1.6 có chức năng mới prop().

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

hoặc trong trường hợp này họ có làm điều tương tự không?

Và nếu tôi làm phải chuyển sang sử dụng prop(), tất cả cũ attr() cuộc gọi sẽ bị ngắt nếu tôi chuyển sang 1.6?

CẬP NHẬT

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>

(xem thêm fiddle này: http://jsfiddle.net/maniator/JpUF2/)

Bảng điều khiển ghi nhật ký getAttribute như một chuỗi và attr như một chuỗi, nhưng prop như một CSSStyleDeclaration, Tại sao? Và điều đó ảnh hưởng đến việc viết mã của tôi trong tương lai như thế nào?


2054
2018-05-03 19:33


gốc


Điều này sẽ có lợi ích nhất định: books.google.ca/…
@Neal, đó là bởi vì thay đổi này vượt qua jQuery. Sự khác biệt giữa các thuộc tính HTML và thuộc tính DOM là rất lớn.
Nó làm tôi buồn khi thấy jQuery đã hoàn nguyên các thay đổi. Họ đang đi sai hướng.
@Neal. Có, và nó chỉ phức tạp vấn đề hơn nữa thay vì tách hai phương pháp.
@BritishDeveloper câu trả lời là phức tạp hơn chỉ đơn giản là nói luôn luôn sử dụng x hoặc y bởi vì nó phụ thuộc vào những gì bạn có ý định để có được. Bạn có muốn thuộc tính hoặc bạn muốn thuộc tính không? chúng là hai thứ rất khác nhau. - Kevin B


Các câu trả lời:


Cập nhật ngày 1 tháng 11 năm 2012

Câu trả lời ban đầu của tôi áp dụng cụ thể cho jQuery 1.6. Lời khuyên của tôi vẫn giữ nguyên nhưng jQuery 1.6.1 đã thay đổi một chút: khi đối mặt với đống trang web bị hỏng dự đoán, nhóm jQuery đã hoàn nguyên attr() một cái gì đó gần (nhưng không chính xác giống như) hành vi cũ của nó cho các thuộc tính Boolean. John Resig cũng viết blog về nó. Tôi có thể thấy khó khăn mà họ đã ở nhưng vẫn không đồng ý với đề xuất của anh ấy để thích attr().

Câu trả lời gốc

Nếu bạn chỉ từng sử dụng jQuery chứ không phải DOM trực tiếp, điều này có thể là một thay đổi khó hiểu, mặc dù nó chắc chắn là một sự cải tiến về mặt khái niệm. Không tốt cho các bazillions của các trang web bằng cách sử dụng jQuery mà sẽ phá vỡ như là kết quả của sự thay đổi này mặc dù.

Tôi sẽ tóm tắt các vấn đề chính:

  • Bạn thường muốn prop() thay vì attr().
  • Trong phần lớn các trường hợp, prop() Làm gì attr() đã từng làm. Thay thế cuộc gọi đến attr() với prop() trong mã của bạn nói chung sẽ hoạt động.
  • Các thuộc tính thường đơn giản hơn để xử lý hơn các thuộc tính. Giá trị thuộc tính chỉ có thể là một chuỗi trong khi thuộc tính có thể thuộc bất kỳ loại nào. Ví dụ: checked tài sản là một Boolean, style thuộc tính là một đối tượng có các thuộc tính riêng cho từng kiểu, size tài sản là một số.
  • Trong trường hợp cả thuộc tính và thuộc tính có cùng tên tồn tại, thường là cập nhật một thuộc tính sẽ cập nhật một thuộc tính khác, nhưng đây không phải là trường hợp cho các thuộc tính đầu vào nhất định, chẳng hạn như value và checked: đối với các thuộc tính này, thuộc tính luôn đại diện cho trạng thái hiện tại trong khi thuộc tính (ngoại trừ các phiên bản cũ của IE) tương ứng với giá trị mặc định / độ kiểm tra của đầu vào (được phản ánh trong defaultValue / defaultChecked bất động sản).
  • Sự thay đổi này loại bỏ một số lớp ma thuật jQuery bị mắc kẹt trước các thuộc tính và thuộc tính, có nghĩa là các nhà phát triển jQuery sẽ phải tìm hiểu một chút về sự khác biệt giữa các thuộc tính và các thuộc tính. Đây là một điều tốt.

Nếu bạn là một nhà phát triển jQuery và bị bối rối bởi toàn bộ doanh nghiệp này về các thuộc tính và thuộc tính, bạn cần phải lùi lại một chút và tìm hiểu một chút về nó, vì jQuery không còn cố gắng hết sức để bảo vệ bạn khỏi công cụ này nữa. Đối với các từ có thẩm quyền nhưng hơi khô về chủ đề, có các thông số kỹ thuật: DOM4, HTML DOM, DOM cấp 2, DOM cấp 3. Tài liệu DOM của Mozilla hợp lệ cho hầu hết các trình duyệt hiện đại và dễ đọc hơn các thông số kỹ thuật, vì vậy bạn có thể tìm thấy Tham chiếu DOM Hữu ích. Có một phần thuộc tính phần tử.

Ví dụ về cách các thuộc tính đơn giản hơn để xử lý hơn các thuộc tính như thế nào, hãy xem xét một hộp kiểm đã được kiểm tra ban đầu. Dưới đây là hai phần HTML hợp lệ có thể có để thực hiện việc này:

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

Vì vậy, làm thế nào để bạn tìm ra nếu hộp kiểm được kiểm tra với jQuery? Nhìn vào Stack Overflow và bạn thường sẽ tìm thấy các gợi ý sau:

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

Đây thực sự là điều đơn giản nhất trên thế giới để thực hiện với checked Thuộc tính Boolean, đã tồn tại và hoạt động hoàn hảo trong mọi trình duyệt có thể đọc được từ năm 1995:

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

Khách sạn cũng làm cho việc kiểm tra hoặc bỏ chọn hộp kiểm tầm thường:

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

Trong jQuery 1.6, điều này trở nên rõ ràng

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

Ý tưởng sử dụng checked thuộc tính cho kịch bản một hộp kiểm là vô ích và không cần thiết. Tài sản là những gì bạn cần.

  • Không rõ cách kiểm tra hoặc bỏ chọn hộp kiểm chính xác là gì bằng cách sử dụng checked thuộc tính
  • Giá trị thuộc tính phản ánh giá trị mặc định thay vì trạng thái hiển thị hiện tại (ngoại trừ một số phiên bản cũ hơn của IE, do đó làm cho mọi thứ trở nên khó khăn hơn). Thuộc tính không cho bạn biết gì về việc hộp kiểm trên trang có được chọn hay không. Xem http://jsfiddle.net/VktA6/49/.

1735
2018-05-03 23:06



@Neal: Nếu bạn muốn biết những thuộc tính DOM nào có thuộc tính và cách các thuộc tính có thể gộp các giá trị của chúng, hãy giữ các liên kết này trong tay: Đặc tả HTML DOM2, các DOM2 spec, và DOM3 spec. Các chỉ số trong mỗi trường hợp là tuyệt vời và liên kết bạn trực tiếp đến mô tả kỹ lưỡng về thuộc tính, nơi giá trị của nó đến từ, v.v. - T.J. Crowder
@Neal: Hãy làm lại điều gì khác biệt: Nguồn gốc và bản chất của thông tin. Nhìn vào Tim's valueví dụ, ví dụ. Một hàm gọi là attr truy xuất bất động sản  value thay vì thuộc tính "giá trị" không có ý nghĩa nhiều (và chúng có thể khác nhau). Tiến về phía trước, attr làm các thuộc tính và prop làm tài sản sẽ rõ ràng hơn, mặc dù quá trình chuyển đổi sẽ gây đau cho một số người. Đừng làm điều này theo cách sai, không có gì giống như bước lùi lại và đọc các thông số kỹ thuật để có được một ý tưởng về những thuộc tính nào. - T.J. Crowder
@Neal: Một phần tử DOM là một đối tượng. Thuộc tính là các thuộc tính của đối tượng đó, giống như bất kỳ đối tượng lập trình nào khác. Một số đạo cụ có được giá trị ban đầu của chúng từ các thuộc tính trong đánh dấu, cũng được lưu trữ trên đối tượng DOM trong một tách rời bản đồ các thuộc tính. Trong hầu hết các trường hợp, việc viết lên một giá đỡ chỉ thay đổi giá đỡ, mặc dù thật đáng buồn là có một số đạo cụ viết bất kỳ thay đổi nào đối với người quen bên dưới (value ví dụ), nhưng hãy cố gắng hầu như bỏ qua điều đó. 99% thời gian, bạn muốn làm việc với đạo cụ. Nếu bạn cần phải làm việc với một thuộc tính thực tế, có thể bạn sẽ biết điều đó. - T.J. Crowder
@Tim: "Thay đổi value thuộc tính của một đầu vào không thay đổi value thuộc tính trong trình duyệt hiện đại " Tôi không nghĩ rằng nó đã làm, đó là lý do tại sao tôi bắt đầu sử dụng nó như là một ví dụ, nhưng khi tôi bắt đầu viết lên ví dụ, darned nếu nó không được cập nhật trên Chrome, Firefox, Opera, IE ... - jsbin.com/ahire4 Hóa ra đó là vì tôi đang sử dụng input[type="button"] cho thử nghiệm của tôi. Nó không cập nhật thuộc tính trên input[type="text"] - - jsbin.com/ahire4/2 Nói về sự phức tạp !! Không chỉ yếu tố, mà là kiểu của nó ... - T.J. Crowder
$('#chk').checked  không bao giờ đã làm việc ... Đó không phải là jQuery phù hợp ... - Neal


Tôi nghĩ Tim nói khá tốt, nhưng hãy lùi lại:

Một phần tử DOM là một đối tượng, một thứ trong bộ nhớ. Giống như hầu hết các đối tượng trong OOP, nó có tính chất. Nó cũng, riêng biệt, có một bản đồ của các thuộc tính được xác định trên phần tử (thường đến từ đánh dấu mà trình duyệt đọc để tạo ra phần tử). Một số yếu tố tính chất lấy của họ ban đầu giá trị từ thuộc tính với cùng tên hoặc tương tự (value nhận giá trị ban đầu của nó từ thuộc tính "value"; href nhận giá trị ban đầu của nó từ thuộc tính "href", nhưng nó không chính xác cùng một giá trị; className từ thuộc tính "class"). Các thuộc tính khác nhận giá trị ban đầu của chúng theo những cách khác: Ví dụ, parentNode thuộc tính nhận giá trị của nó dựa trên phần tử cha của nó; một phần tử luôn có style tài sản, cho dù nó có thuộc tính "kiểu" hay không.

Hãy xem xét neo này trong một trang tại http://example.com/testing.html:

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

Một số nghệ thuật ASCII vô cớ (và bỏ đi rất nhiều thứ):

+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− +
| HTMLAnchorElement |
+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− +
| href: "http://example.com/foo.html" |
| tên: "fooAnchor" |
| id: "fooAnchor" |
| className: "test one" |
| thuộc tính: |
| href: "foo.html" |
| tên: "fooAnchor" |
| id: "fooAnchor" |
| class: "test one" |
+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− +

Lưu ý rằng các thuộc tính và thuộc tính là khác nhau.

Bây giờ, mặc dù chúng là khác biệt, bởi vì tất cả điều này phát triển hơn là được thiết kế từ đầu, một số thuộc tính ghi lại thuộc tính mà chúng bắt nguồn từ nếu bạn đặt chúng. Nhưng không phải tất cả, và như bạn có thể thấy từ hrefở trên, việc lập bản đồ không phải lúc nào cũng là "vượt qua giá trị trên", đôi khi có sự giải thích liên quan.

Khi tôi nói về các thuộc tính là thuộc tính của một đối tượng, tôi không nói trong phần tóm tắt. Dưới đây là một số mã không phải jQuery:

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

(Các giá trị đó giống như hầu hết các trình duyệt; có một số biến thể.)

Các link đối tượng là một điều thực sự và bạn có thể thấy có sự khác biệt thực sự giữa việc truy cập bất động sản trên đó và truy cập thuộc tính.

Như Tim đã nói, đại đa số thời gian, chúng tôi muốn làm việc với các thuộc tính. Một phần là bởi vì giá trị của chúng (ngay cả tên của chúng) có xu hướng nhất quán hơn trên các trình duyệt. Chúng tôi chủ yếu chỉ muốn làm việc với các thuộc tính khi không có thuộc tính liên quan đến nó (thuộc tính tùy chỉnh), hoặc khi chúng ta biết rằng đối với thuộc tính cụ thể đó, thuộc tính và thuộc tính không phải là 1: 1 (như với href và "href" ở trên).

Các thuộc tính tiêu chuẩn được trình bày trong các đặc tả DOM khác nhau:

Những thông số kỹ thuật này có chỉ mục tuyệt vời và tôi khuyên bạn nên giữ liên kết đến chúng một cách tiện dụng; Tôi sử dụng tất cả các thời gian.

Các thuộc tính tùy chỉnh sẽ bao gồm, chẳng hạn, bất kỳ data-xyz các thuộc tính mà bạn có thể đưa vào các yếu tố để cung cấp siêu dữ liệu cho mã của bạn (giờ đây là hợp lệ với HTML5, miễn là bạn bám vào data- tiếp đầu ngữ). (Các phiên bản gần đây của jQuery cung cấp cho bạn quyền truy cập vào data-xyz các yếu tố thông qua data nhưng chức năng đó là không phải chỉ là một người truy cập cho data-xyz các thuộc tính [nó làm nhiều hơn và ít hơn]; trừ khi bạn thực sự cần các tính năng của nó, tôi sẽ sử dụng attr chức năng tương tác với data-xyz thuộc tính.)

Các attr chức năng được sử dụng để có một số logic phức tạp xung quanh nhận được những gì họ nghĩ rằng bạn muốn, chứ không phải là nghĩa đen nhận được các thuộc tính. Nó xúi giục các khái niệm. Chuyển đến prop và attr có nghĩa là de-conflate chúng. Tóm lại trong v1.6.0 jQuery đã đi quá xa về vấn đề đó, nhưng chức năng đã nhanh chóng được thêm lại đến attr để xử lý các tình huống phổ biến mà mọi người sử dụng attr khi về mặt kỹ thuật, họ nên sử dụng prop.


623
2018-05-04 14:27



Wow. bản cập nhật 1.6.1 mới thực sự vô hiệu hoá câu hỏi này một chút .. (nhưng không nhiều) nhưng liên kết đó về cơ bản trả lời nó ngay bây giờ - Neal
Nó không vô hiệu hóa nó cho tôi, tôi chỉ cố định một lỗi bằng cách sử dụng jquery1.7 nơi tôi đã thiết lập .attr ('class', 'bla') và nó không hoạt động ở đâu .prop ('className', 'bla' ) đã làm việc - PandaWood
@PandaWood: .attr('class', 'bla') làm việc như tôi mong đợi ở 1,7,0, 1.7.1và 1.7.2 trên Chrome 17, Firefox 11, Opera 11, IE6, IE8, IE9 và Safari 5. - T.J. Crowder
Cảm ơn, phải có một cái gì đó cụ thể trong trường hợp của tôi, hãy để tôi kiểm tra này và trở lại với một trường hợp thử nghiệm. Nhưng thay đổi mã như chúng ta có nó ngay bây giờ, chỉ đơn giản là "prop / className", thay vì "attr" sửa chữa một lỗi lớn cho chúng tôi mà nhấn khi chúng tôi chuyển từ jquery1.4 đến 1.7 - trên tất cả các trình duyệt - PandaWood
@ T.J.Crowder lại: .data - nó sẽ đọc giá trị mặc định của thuộc tính, nếu có, nhưng nếu bạn viết cho nó, nó sẽ thay đổi một ẩn bất động sản của phần tử và không cập nhật thuộc tính. - Alnitak


Sự thay đổi này đã là một thời gian dài sắp tới cho jQuery. Trong nhiều năm, họ đã hài lòng với một chức năng có tên attr() mà chủ yếu là truy lục các thuộc tính DOM, không phải kết quả bạn mong đợi từ tên. Sự phân biệt attr() và prop() sẽ giúp giảm bớt một số sự nhầm lẫn giữa thuộc tính HTML và thuộc tính DOM. $.fn.prop() lấy thuộc tính DOM được chỉ định, trong khi $.fn.attr() lấy thuộc tính HTML được chỉ định.

Để hiểu đầy đủ cách chúng hoạt động, đây là giải thích mở rộng về sự khác biệt giữa thuộc tính HTML và thuộc tính DOM .:

Thuộc tính HTML

Cú pháp:

<body onload="foo()">

Mục đích: Cho phép đánh dấu có dữ liệu được liên kết với sự kiện, hiển thị và các mục đích khác.

Hình dung: HTML AttributesThuộc tính lớp được hiển thị ở đây trên cơ thể. Nó có thể truy cập thông qua các mã sau đây:

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

Thuộc tính được trả về dạng chuỗi và có thể không nhất quán từ trình duyệt đến trình duyệt. Tuy nhiên, chúng có thể rất quan trọng trong một số trường hợp. Như minh họa ở trên, IE 8 Quirks Mode (và bên dưới) dự kiến ​​tên của một thuộc tính DOM trong get / set / removeAttribute thay vì tên thuộc tính. Đây là một trong nhiều lý do tại sao điều quan trọng là phải biết sự khác biệt.

Thuộc tính DOM

Cú pháp:

document.body.onload = foo;

Mục đích: Cung cấp quyền truy cập vào các thuộc tính thuộc về các nút phần tử. Các thuộc tính này tương tự như các thuộc tính, nhưng chỉ có thể truy cập thông qua JavaScript. Đây là một sự khác biệt quan trọng giúp làm rõ vai trò của các thuộc tính DOM. Xin lưu ý rằng các thuộc tính hoàn toàn khác với các thuộc tính, vì sự phân công xử lý sự kiện này là vô ích và sẽ không nhận được sự kiện (cơ thể không có một sự kiện onload, chỉ là một thuộc tính onload).

Hình dung: DOM Properties

Tại đây, bạn sẽ thấy một danh sách các thuộc tính trong tab "DOM" trong Firebug. Đây là các thuộc tính DOM. Bạn sẽ ngay lập tức nhận thấy một vài trong số họ, vì bạn sẽ sử dụng chúng trước đó mà không biết. Giá trị của chúng là những gì bạn sẽ nhận được thông qua JavaScript.

Tài liệu

Thí dụ

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

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

Trong các phiên bản trước của jQuery, điều này trả về một chuỗi rỗng. Trong 1,6, nó trả về giá trị thích hợp, foo.

Không cần liếc nhìn mã mới cho một trong hai hàm, tôi có thể nói với sự tự tin rằng sự nhầm lẫn có liên quan nhiều hơn đến sự khác biệt giữa các thuộc tính HTML và các thuộc tính DOM, so với chính mã đó. Hy vọng rằng, điều này xóa một số điều cho bạn.

-Matt


235
2018-05-03 20:05



@ Điều này giải thích không có gì về prop() trong jQuery .... - Neal
$.prop() nhận các thuộc tính DOM, $.attr() nhận các thuộc tính HTML. Tôi đang cố gắng thu hẹp khoảng cách tâm lý để bạn có thể hiểu sự khác biệt giữa hai.
Cậu bé, tôi cũng đang bối rối. Vì thế $('#test').prop('value')không trả lại bất cứ điều gì? Cũng không .attr('checked') cho một hộp kiểm? Nhưng nó được sử dụng để? Bây giờ bạn phải thay đổi nó thành prop('checked')? Tôi không hiểu sự cần thiết cho sự khác biệt này - tại sao việc phân biệt giữa các thuộc tính HTML và thuộc tính DOM lại quan trọng? Trường hợp sử dụng phổ biến đã thực hiện thay đổi này là gì "một thời gian dài sắp tới"? Những gì là sai rồi với trừu tượng hóa sự khác biệt giữa hai người, vì có vẻ như trường hợp sử dụng của họ chủ yếu là chồng lên nhau? - BlueRaja - Danny Pflughoeft
@BlueRaja: bởi vì có một sự khác biệt cơ bản nghiêm trọng giữa hai khái niệm đó, nếu bạn đánh nó dưới thảm như jQuery được sử dụng để, kết quả trong thất bại bất ngờ. value là một trong những trường hợp hiển nhiên nhất, vì value tài sản sẽ cung cấp cho bạn giá trị hiện tại của một trường, nhưng value thuộc tính sẽ cung cấp cho bạn giá trị ban đầu đã được khai báo trong value="..." thuộc tính, thực sự là defaultValue bất động sản. (Mặc dù trường hợp cụ thể này bị nhầm lẫn một lần nữa bởi các lỗi trong IE <9.) - bobince
@BlueRaja: Câu trả lời cho điều đó thậm chí còn phức tạp hơn. :-) Cài đặt attr('value', ...) trong jQuery <1.6 đặt thuộc tính, do đó, giá trị hiện tại thay đổi và giá trị mặc định không. Trong 1,6 nó đặt thuộc tính, vì vậy trong lý thuyết giá trị mặc định thay đổi và giá trị hiện tại không. Tuy nhiên, có nhiều (không) trình duyệt mâu thuẫn với những gì chính xác thiết lập value thuộc tính. Trong IE nó cũng đặt giá trị hiện tại; trong một số trình duyệt, nó chỉ đặt giá trị hiện tại nếu giá trị hiện tại chưa được đặt trước đó. [khóc] - bobince


Thuộc tính nằm trong DOM; một thuộc tính nằm trong HTML được phân tích cú pháp thành DOM.

Chi tiết hơn

Nếu bạn thay đổi thuộc tính, thay đổi sẽ được phản ánh trong DOM (đôi khi có tên khác).

Ví dụ: Thay đổi class thuộc tính của thẻ sẽ thay đổi className thuộc tính của thẻ đó trong DOM. Nếu bạn không có thuộc tính trên thẻ, bạn vẫn có thuộc tính DOM tương ứng với giá trị rỗng hoặc giá trị mặc định.

Ví dụ: Mặc dù thẻ của bạn không có class thuộc tính, thuộc tính DOM className không tồn tại với một giá trị chuỗi rỗng.

chỉnh sửa

Nếu bạn thay đổi cái kia, cái kia sẽ bị thay đổi bởi bộ điều khiển và ngược lại. Bộ điều khiển này không có trong jQuery, nhưng trong mã nguồn gốc của trình duyệt.


233
2017-09-27 16:55



Vì vậy, điều này có nghĩa là tốt hơn là cập nhật thuộc tính bởi vì sau đó bạn đảm bảo rằng thuộc tính và thuộc tính đều được cập nhật và được căn chỉnh? - Luke
@Luke DOM là đại diện kỹ thuật bên trong, mô hình. Các thuộc tính HTML là một biểu diễn bên ngoài, một khung nhìn. Nếu bạn thay đổi cái kia, cái kia sẽ bị thay đổi bởi bộ điều khiển và ngược lại. - HerrSerker
@ Luke Nhìn này: jsfiddle.net/Pms3W - HerrSerker
@ HerrSerker Vì vậy, cả hai đều được đồng bộ thông qua một bộ điều khiển? Tôi giả định đây chỉ là trong attr jQuery và phương pháp prop? Đây là một sửa đổi của fiddle của bạn, nơi tôi khám phá điều này nhiều hơn - jsfiddle.net/v8wRy - và cho đến nay chúng có vẻ tương đương. - Luke
"Nếu bạn thay đổi cái này, cái kia sẽ bị thay đổi bởi một bộ điều khiển, và ngược lại. Bộ điều khiển này không có trong jQuery, nhưng trong mã nguồn gốc của trình duyệt." Đây là không phải đúng đối với hầu hết thuộc tính / thuộc tính. Đối với đa số, đó chỉ là bản dịch một chiều trong đó thuộc tính xác định ban đầu giá trị của thuộc tính tương ứng. Hai câu trả lời hàng đầu giải thích chi tiết này. - ᴠɪɴᴄᴇɴᴛ


Nó chỉ là sự phân biệt giữa các thuộc tính HTML và các đối tượng DOM gây nhầm lẫn. Đối với những người có hành động thoải mái trên các thuộc tính gốc của phần tử DOM như this.src  this.value  this.checked v.v. .prop là một sự chào đón nồng hậu đối với gia đình. Đối với những người khác, nó chỉ là một lớp của sự nhầm lẫn. Hãy làm rõ điều đó.

Cách dễ nhất để thấy sự khác biệt giữa .attr và .prop là ví dụ sau:

<input blah="hello">
  1. $('input').attr('blah'): trả về 'hello'như mong đợi. Không ngạc nhiên ở đây.
  2. $('input').prop('blah'): trả về undefined - bởi vì nó đang cố gắng làm [HTMLInputElement].blah - và không có thuộc tính như vậy trên đối tượng DOM đó tồn tại. Nó chỉ tồn tại trong phạm vi như một thuộc tính của phần tử đó, tức là [HTMLInputElement].getAttribute('blah')

Bây giờ chúng tôi thay đổi một vài điều như vậy:

$('input').attr('blah', 'apple');
$('input').prop('blah', 'pear');
  1. $('input').attr('blah'): trả về 'apple' eh? Tại sao không "lê" vì điều này đã được đặt cuối cùng trên phần tử đó. Bởi vì thuộc tính đã được thay đổi trên thuộc tính đầu vào, không phải chính phần tử đầu vào DOM - về cơ bản chúng gần như hoạt động độc lập với nhau.
  2. $('input').prop('blah'): trả về 'pear'

Điều bạn thực sự cần phải cẩn thận với chỉ là không trộn lẫn việc sử dụng chúng cho cùng một thuộc tính trong suốt ứng dụng của bạn vì lý do trên.

Xem một fiddle chứng minh sự khác biệt:  http://jsfiddle.net/garreh/uLQXc/


.attr so với .prop:

Vòng 1: phong cách

<input style="font:arial;"/>
  • .attr('style') - trả về kiểu nội tuyến cho phần tử đã so khớp, tức là "font:arial;"
  • .prop('style') - trả về một đối tượng khai báo kiểu, tức là CSSStyleDeclaration

Vòng 2: giá trị

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

$('input').prop('value', 'i changed the value');
  • .attr('value') - trả về 'hello' *
  • .prop('value') - trả về 'i changed the value'

* Lưu ý: jQuery vì lý do này có .val() phương pháp, nội bộ tương đương với .prop('value')


132
2018-05-19 10:18



@Neal becaue nó cho tham chiếu đến cấu trúc của các hàm jquery tốt hơn. "$ ('input'). prop ('blah'): trả về undefined - bởi vì nó đang cố gắng thực hiện [HTMLInputElement] .blah - và không có thuộc tính như vậy trên đối tượng DOM tồn tại. Nó chỉ tồn tại trong phạm vi như một thuộc tính của phần tử đó nghĩa là [HTMLInputElement] .getAttribute ('blah') " - Uğur Gümüşhan
Có vẻ khác với tài liệu, api.jquery.com/prop: "Phương thức .prop () nên được sử dụng để đặt tắt và được kiểm tra thay vì phương thức .attr (). Phương thức .val () nên được sử dụng để nhận và đặt giá trị." - swan
Tôi không hiểu tại sao khi thuộc tính lớp hoặc thuộc tính được thay đổi cũng được thay đổi jsfiddle.net/featon/Jbw6m/3 ? - Damian


TL; DR

Sử dụng prop() kết thúc attr() trong phần lớn các trường hợp.

A bất động sản là trạng thái hiện tại của phần tử đầu vào. An thuộc tính là giá trị mặc định.

Thuộc tính có thể chứa nhiều loại khác nhau. Thuộc tính chỉ có thể chứa chuỗi


48
2017-07-16 09:45



nếu có thể đi kèm với vài mẫu đơn giản về những gì bạn nói và cũng hiển thị khi nào nên sử dụng prop() and when to go for attr(). chờ câu trả lời :) - Mou


Kiểm tra bẩn thỉu

Khái niệm này là một ví dụ cho thấy sự khác biệt có thể quan sát được: http://www.w3.org/TR/html5/forms.html#concept-input-checked-dirty

Hãy dùng thử:

  • nhấn vào nút. Cả hai hộp kiểm đều đã được kiểm tra.
  • bỏ chọn cả hai hộp kiểm.
  • bấm vào nút một lần nữa. Chỉ prop hộp kiểm đã được chọn. BANG!

$('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>

Đối với một số thuộc tính như disabled trên button, thêm hoặc xóa thuộc tính nội dung disabled="disabled" luôn chuyển đổi thuộc tính (được gọi là thuộc tính IDL trong HTML5) vì http://www.w3.org/TR/html5/forms.html#attr-fe-disabled nói:

Thuộc tính IDL bị vô hiệu hóa phải phản ánh thuộc tính nội dung bị tắt.

vì vậy bạn có thể nhận được ngay với nó, mặc dù nó là xấu vì nó sửa đổi HTML mà không cần.

Đối với các thuộc tính khác như checked="checked" trên input type="checkbox", mọi thứ bị phá vỡ, bởi vì một khi bạn nhấp vào nó, nó sẽ trở thành bẩn, và sau đó thêm hoặc loại bỏ checked="checked" thuộc tính nội dung không chuyển đổi kiểm tra nữa.

Đây là lý do tại sao bạn nên sử dụng chủ yếu .propvì nó ảnh hưởng trực tiếp đến thuộc tính hiệu quả, thay vì dựa vào các tác dụng phụ phức tạp.


34
2017-07-06 11:43



Để hoàn thành, hãy thử các biến thể sau: 1) Trước khi nhấp vào nút kiểm tra và sau đó bỏ chọn hộp kiểm đầu tiên 2) (Đối với điều này, bạn sẽ cần phải thay đổi đoạn mã) Cung cấp cho đầu vào đầu tiên checked thuộc tính: checked="checked" - ᴠɪɴᴄᴇɴᴛ


Tất cả đều có trong tài liệu:

Sự khác biệt giữa các thuộc tính và thuộc tính có thể quan trọng trong các tình huống cụ thể. Trước jQuery 1.6, phương thức .attr () đôi khi lấy các giá trị thuộc tính vào tài khoản khi truy xuất một số thuộc tính, điều này có thể gây ra hành vi không nhất quán. Như của jQuery 1.6, phương thức .prop () cung cấp một cách để truy lục một cách rõ ràng các giá trị thuộc tính, trong khi .attr () chỉ lấy các thuộc tính.

Vì vậy, sử dụng prop!


32
2018-05-03 19:35



Vì vậy, điều đó có nghĩa là khi tôi chuyển sang 1.6, rất nhiều thứ sẽ phá vỡ ?? - Neal
Không, nó chỉ là một hành vi không nhất quán, nếu nó hoạt động trước, nó sẽ luôn hoạt động với jQuery 1.6, nó chỉ là biện pháp chống đỡ an toàn hơn;) - Arnaud F.
Tôi dường như nhớ lại.$.attr() truy xuất các thuộc tính hầu hết thời gian tôi làm việc với nó, không phải "đôi khi". Sự nhầm lẫn gây ra bởi nó vẫn còn cộng hưởng ngày nay. Đáng buồn thay, tôi gặp rất nhiều khó khăn khi tìm kiếm dứt khoát đọc trên các thuộc tính HTML so với các thuộc tính DOM, vì vậy tôi có thể viết một câu trả lời ở đây trong một chút.
@ Arnaud-f Không đúng sự thật. Tất cả các mã trước đó đến 1.6 sử dụng attr ('checked') để đánh dấu các hộp kiểm giờ đây sẽ bị hỏng. - CaptSaltyJack
@ Mc McDonald: Những loại "... gặp khó khăn trong việc tìm kiếm dứt khoát đọc trên các thuộc tính HTML so với các thuộc tính DOM ... "ý của bạn là gì? Các thuộc tính (được phản ánh và ngược lại) được mô tả trong Đặc tả HTML DOM2; bạn cũng có thể cần tham khảo DOM2 và DOM3 thông số kỹ thuật. - T.J. Crowder


thuộc tính nằm trong HTML của bạn tài liệu / tệp văn bản (== hãy tưởng tượng đây là kết quả phân tích cú pháp html của bạn), trong khi
tính chấtđang ở dạng HTML Cây DOM (== về cơ bản là một thuộc tính thực sự của một số đối tượng trong ý nghĩa JS).

Quan trọng hơn, nhiều người trong số họ được đồng bộ hóa (nếu bạn cập nhật class bất động sản, class thuộc tính trong html cũng sẽ được cập nhật; và nếu không). Nhưng một số thuộc tính có thể được đồng bộ hóa với các thuộc tính không mong muốn - ví dụ: thuộc tính  checked tương ứng với bất động sản  defaultChecked, để

  • kiểm tra thủ công một hộp kiểm sẽ thay đổi .prop('checked') giá trị, nhưng sẽ không thay đổi .attr('checked') và .prop('defaultChecked') giá trị
  • cài đặt $('#input').prop('defaultChecked', true) cũng sẽ thay đổi .attr('checked'), nhưng điều này sẽ không hiển thị trên một phần tử.

Quy tắc chung là: .prop() nên được sử dụng cho các thuộc tính / thuộc tính boolean và cho các thuộc tính không tồn tại trong html   (chẳng hạn như window.location). Tất cả các thuộc tính khác (những thuộc tính bạn có thể thấy trong   html) có thể và sẽ tiếp tục được thao tác với .attr()   phương pháp. (http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/)

Và đây là một bảng cho thấy .prop() được ưa thích (mặc dù .attr() vẫn có thể được sử dụng).

  table with preferred usage


Tại sao đôi khi bạn muốn sử dụng .prop () thay vì .attr () trong đó sau này được chính thức đưa ra?

  1. .prop() có thể trả về bất kỳ kiểu nào - chuỗi, số nguyên, boolean; trong khi .attr() luôn trả về một chuỗi.
  2. .prop() được cho là nhanh gấp 2,5 lần so với .attr().

26
2018-06-12 05:56



một cái gì đó đã được thay đổi, như thế này: $('#myImageId').prop('src', 'http://example.com/img.png'), var class = $('.myDivClass').prop('class'), hoặc là $('#myTextBox').prop('type', 'button'). Và cứ thế ...
@ Mr.Wolf, xin lỗi? - lakesare
@ Mr.Wolf, xin lỗi, tôi stil không nhận được những gì bạn có ý nghĩa. những gì đã 'thay đổi'? cú pháp luôn như thế. - lakesare
Tôi nghĩ rằng bảng trong câu trả lời của bạn là không cần thiết. Bởi vì .prop() hoạt động tốt với tất cả các thuộc tính. Bạn không muốn đánh dấu tất cả các thuộc tính trong .prop() cột, phải không?
@ Mr.Wolf, tôi nghĩ rằng nó là cần thiết, bởi vì, như đã nêu, nó 'cho thấy nơi .prop() được ưa thích (mặc dù .attr() vẫn có thể được sử dụng) ' - lakesare


.attr():

  • Lấy giá trị của một thuộc tính cho phần tử đầu tiên trong tập hợp các phần tử được so khớp.
  • Cung cấp cho bạn giá trị của phần tử khi nó được định nghĩa trong html khi tải trang

.prop():

  • Lấy giá trị của một bất động sản cho phần tử đầu tiên trong tập hợp các phần tử được so khớp.
  • Cung cấp các giá trị cập nhật của các phần tử được sửa đổi thông qua javascript / jquery

18
2017-12-08 09:14





Thông thường bạn sẽ muốn sử dụng các thuộc tính. Chỉ sử dụng thuộc tính cho:

  1. Nhận thuộc tính HTML tùy chỉnh (vì nó không được đồng bộ hóa với thuộc tính DOM).
  2. Nhận thuộc tính HTML không đồng bộ hóa với thuộc tính DOM, ví dụ: lấy "giá trị ban đầu" của thuộc tính HTML chuẩn, như <input value="abc">.

13
2018-02-02 20:36