Phương thức data

Phương thức data cho phép liên kết dữ liệu thuộc bất kỳ kiểu nào với các phần tử DOM một cách an toàn, giúp tránh rò rỉ bộ nhớ. Chúng ta có thể thiết lập nhiều giá trị khác nhau cho một phần tử và lấy chúng sau này. Việc sử dụng phương thức data để cập nhật dữ liệu không ảnh hưởng đến các thuộc tính trong DOM.

Cú pháp

Đây là cách chúng ta thiết lập một giá trị cho một phần tử bất kỳ cùng với khóa, theo đó có thể tìm thấy nó sau này:

.data(khóa, giá trị);

Chúng ta cũng có thể truyền một đối tượng chứa các cặp khóa-giá trị để cập nhật dữ liệu:

.data(đối tượng);

Có thể lấy dữ liệu được liên kết với phần tử đầu tiên trong bộ sưu tập jQuery bằng cách chỉ truyền khóa:

.data(khóa);

Không truyền bất kỳ tham số nào, chúng ta có thể đọc dữ liệu đã được liên kết trước đó với các phần tử DOM. Phương thức sẽ trả về một đối tượng JavaScript, chứa mỗi giá trị dưới dạng một thuộc tính:

.data();

Ví dụ

Hãy sử dụng data để thiết lập dữ liệu cho thẻ p, truyền tham số đầu tiên là 'test' và giá trị 21 cho tham số thứ hai. Sau đó đọc dữ liệu đã lưu với khóa 'test':

<p>văn bản</p>

$('p').data('test', 21); // dữ liệu được ghi ở đây

console.log($('p').data('test')); // sẽ xuất ra số 21
console.log($('p').data()); // sẽ xuất ra đối tượng {test: 21}

Xem thêm

phương thức removeData,
xóa dữ liệu khỏi phần tử
phương thức hasData,
kiểm tra sự tồn tại của dữ liệu trong phần tử
phương thức attr,
cho phép lấy và thay đổi bất kỳ thuộc tính nào của phần tử
thuộc tính JavaScript dataset,
cho phép thêm thuộc tính tùy chỉnh vào các thẻ