Phân biệt .attr() và .prop() trong JQuery

Đã đăng nhập thg 4 18, 2020 6:19 SA

3 phút đọc

Chắc hẳn Khi nhắc tới .attr() vs .prop() nhập JQuery chúng ta đều biết rõ bọn chúng đều phải sở hữu tính năng lôi ra hoặc gán độ quý hiếm cho tới tính chất của một đối tượng người dùng. Nhưng tất cả chúng ta cũng thông thường hoặc khuyết điểm phen về 2 cách thức này. Trước Khi phân biệt bọn chúng, hãy phân biệt DOM properties và HTML Attributes.

1. DOM properties và HTML Attributes

Khi trình duyệt vận tải trang, nó sẽ bị gọi tài liệu (phân tích cú pháp mã hóa) HTML và tạo ra những đối tượng người dùng DOM ứng. Đối với những nút thành phần (element node), đa số những HTML attributes (các attributes chuẩn) tiếp tục tự động hóa phát triển thành properties của những đối tượng người dùng DOM.

Chẳng hạn, nếu như thẻ là <body id="page">, thì đối tượng người dùng DOM đem body.id="page".

Nhưng ánh xạ attribute - property ko cần khi nào thì cũng tương tự nhau! Chúng tớ cũng dịch bọn chúng là thuộc tính nên thông thường coi bọn chúng là tương tự nhau .

DOM properties	HTML Attributes
Được xác lập bởi vì DOM	Được xác lập bởi vì HTML
Property rất có thể thay cho thay đổi (ví dụ: khi chúng ta nhập nhập dù input, property `value` của chính nó đang được thay cho đổi)	Một Khi đã và đang được khởi tạo ra, độ quý hiếm của một HTML attribute ngẫu nhiên sẽ không còn thay cho thay đổi. (nếu các bạn ko sử dụng JS thay cho thay đổi nó).
Khi thay cho thay đổi property, ko chắc hẳn attribute thay cho đổi	Khi thay cho thay đổi attribute, property ứng tiếp tục thay cho đổi
Phân biệt chữ hoa, chữ thường	Không phân biệt chữ hoa, chữ thường
Có nhiều loại dữ liệu	Giá trị luôn luôn đem loại string

Attribute cung ứng vấn đề của thẻ HTML, với những độ quý hiếm của attribute đã và đang được khai báo từ trên đầu nhập tệp tin HTML. Sau Khi trình duyệt gọi tệp tin, những đối tượng người dùng DOM được tạo ra với những property ứng. Giá trị của bọn chúng tiếp tục tương tự nhau nếu như bạn không bao giờ thay đổi nó. Phân biệt giản dị và đơn giản vì vậy giúp xem được attribute và property không giống nhau trọn vẹn.

2. Phân biệt .attr() và .prop()

Trở lại yếu tố chủ yếu, .attr() và .prop() không giống nhau như vậy nào?

Xem thêm: đọc truyện hay nhất

Ví dụ:

<!DOCTYPE html>
<html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#p1").text("Giá trị của tính chất value lúc đầu là " + $('#txtInput').attr('value'));
			$("#p2").text('Sử dụng .attr(): ' + $('#txtInput').attr('value'));
			$("#p3").text('Sử dụng .prop(): ' + $('#txtInput').prop('value'));
			$('#btn1').click(function() {
				$("#p2").text('Sử dụng .attr(): ' + $('#txtInput').attr('value'));
				$("#p3").text('Sử dụng .prop(): ' + $('#txtInput').prop('value'));
			});
		});
	</script>
</head>
<body>
	<p id="p1"></p>
	<div>Thay thay đổi độ quý hiếm nhập dù input và nhấn Submit</div>
	<br>
	<input type="text" id="txtInput" value="Value_1">
	<button id="btn1">Submit</button>
	<p id="p2"></p>
	<p id="p3"></p>
</body>
</html>

Ban đầu, bản thân có một thẻ <input type="text" id="txtInput" value="Value_1">. Giá trị của tính chất value là Value_1. Cả .attr() và .prop() đều trả về thành phẩm này.
Sau cơ, nhập 1 độ quý hiếm không giống nhập dù input, .attr() trả về độ quý hiếm cũ (Value_1), trong lúc .prop() trả về độ quý hiếm vừa phải nhập.

Ví dụ này cho tới thấy:

Cả .attr() và prop () được dùng nhằm lấy hoặc gán độ quý hiếm của tính chất được hướng dẫn và chỉ định, tuy nhiên .attr() trả về giá trị khoác định (original state) của một tính chất trong lúc .prop() trả về giá trị hiện nay tại (current state).
.attr() thay cho thay đổi tính chất cho tới thẻ HTML cơ (HTML Attributes)
.prop() thay cho thay đổi những tính chất cho tới thẻ HTML cơ bám theo cây DOM. (DOM properties)

Trong những trường hợp ví dụ, việc phân biệt .attr() và .prop() cực kỳ cần thiết. Trước phiên bạn dạng JQuery 1.6, .attr() thỉnh phảng phất lôi ra độ quý hiếm của property, tạo ra sự ko nhất quán tài liệu. Từ JQuery 1.6, .prop() được dùng nhằm lôi ra độ quý hiếm property, còn .attr() lôi ra độ quý hiếm attubute. Nên dùng .prop() tối đa rất có thể nhằm tách sai sot nhé.

Tổng kết

Bài ghi chép này tôi đã thể hiện sự không giống nhau của .attr() và .prop() nhập JQuery. Đây cũng từng là vướng mắc của tôi nhập thời hạn thao tác. Hy vọng nội dung bài viết gom chúng ta trả lời phần này.

Thank you