Sự khác nhau giữa jQuery .val() và .attr ('value') là gì?

Question

Tôi nghĩ danh hiệu là đủ

Answer 1

.val() công trình rõ ràng về tất cả các yếu tố đầu vào loại một cách hữu ích, bao gồm <select> ... ngay cả trong trường hợp <select multiple>, hộp kiểm tra, và nút radio (trong đó .val() được hoặc đặt một mảng giá trị đã chọn không chỉ là một chuỗi).

Vì vậy, về cơ bản, chúng phục vụ các mục đích khác nhau, mặc dù .attr('value') hoạt động giống nhau trong một số trường hợp, như hộp văn bản. Phương pháp ưa thích là .val() để có được hành vi nhất quán ở mọi nơi.

---

Chỉ cần cho đá, đây là một ví dụ ít được biết đến cho các hộp kiểm mà làm .val() ích:

<input name="mytest" type="checkbox" value="1"> 
<input name="mytest" type="checkbox" value="2"> 
<input name="mytest" type="checkbox" value="3"> 
<input name="mytest" type="checkbox" value="4"> 

Bạn có thể làm điều này:

$("input[name='mytest']").val([1, 2, 3]); 

.... mà sẽ kiểm tra 3 hộp đầu tiên. You can give it a try here.

Answer 2

Ngoài ra .attr ('value') trả về giá trị trước khi chỉnh sửa trường nhập. Và .val() trả về giá trị hiện tại.

Answer 3

Để thêm vào câu trả lời của Actis ...

Cũng .attr ('giá trị') trả về giá trị đó là trước khi chỉnh sửa đầu vào lĩnh vực. Và .val() trả về giá trị hiện tại.

Khi làm việc với trường nhập văn bản, phương thức setter của .attr() và .val() hoạt động khác nhau.

.val('newval') 

sẽ đặt giá trị người dùng nhìn thấy trên trang và cập nhật giá trị được trả về bởi các phương thức .val() tiếp theo gọi. Nó sẽ không đặt thuộc tính value = của phần tử.

OTOH

.attr('value','newval') 

sẽ thiết lập giá trị = thuộc tính trên phần tử. Nếu người dùng chưa gõ và .val (newval) chưa được gọi, thì làm điều này cũng sẽ cập nhật trực quan kiểm soát và cập nhật giá trị trả về bởi .val().

Bạn có thể tra thêm với jsfiddle sau:

https://jsfiddle.net/jasonnet/vamLww2k/

Chúc may mắn.