Phương thức
5 cho phép chúng tôi đính kèm dữ liệu thuộc bất kỳ loại nào vào các phần tử DOM theo cách an toàn trước các tham chiếu vòng tròn và do đó khỏi rò rỉ bộ nhớ
data demo
div {
color: blue;
}
span {
color: red;
}
The values stored were
and
$[ "div" ].data[ "test", { first: 16, last: "pizza!" } ];
$[ "span" ].first[].text[ $[ "div" ].data[ "test" ].first ];
$[ "span" ].last[].text[ $[ "div" ].data[ "test" ].last ];
Chúng tôi có thể đặt một số giá trị riêng biệt cho một phần tử và truy xuất chúng sau
1
2
3
4
5
$[ "body" ].data[ "foo", 52 ];
$[ "body" ].data[ "bar", { isManual: true } ];
$[ "body" ].data[ { baz: [ 1, 2, 3 ] } ];
$[ "body" ].data[ "foo" ]; // 52
$[ "body" ].data[]; // { foo: 52, bar: { isManual: true }, baz: [ 1, 2, 3 ] }
Sử dụng phương pháp
6 để cập nhật dữ liệu không ảnh hưởng đến các thuộc tính trong DOM. Để đặt giá trị thuộc tính
data demo
div {
color: blue;
}
span {
color: red;
}
The values stored were
and
$[ "div" ].data[ "test", { first: 16, last: "pizza!" } ];
$[ "span" ].first[].text[ $[ "div" ].data[ "test" ].first ];
$[ "span" ].last[].text[ $[ "div" ].data[ "test" ].last ];
7, hãy sử dụng
data demo
div {
color: blue;
}
span {
color: red;
}
The values stored were
and
$[ "div" ].data[ "test", { first: 16, last: "pizza!" } ];
$[ "span" ].first[].text[ $[ "div" ].data[ "test" ].first ];
$[ "span" ].last[].text[ $[ "div" ].data[ "test" ].last ];
0
data demo
div {
color: blue;
}
span {
color: red;
}
The values stored were
and
$[ "div" ].data[ "test", { first: 16, last: "pizza!" } ];
$[ "span" ].first[].text[ $[ "div" ].data[ "test" ].first ];
$[ "span" ].last[].text[ $[ "div" ].data[ "test" ].last ];
Trước jQuery 1. 4. 3,
1 thay thế hoàn toàn tất cả dữ liệu. Kể từ jQuery 1. 4. 3, thay vào đó, dữ liệu được mở rộng bằng cách hợp nhất nông
data demo
div {
color: blue;
}
span {
color: red;
}
The values stored were
and
$[ "div" ].data[ "test", { first: 16, last: "pizza!" } ];
$[ "span" ].first[].text[ $[ "div" ].data[ "test" ].first ];
$[ "span" ].last[].text[ $[ "div" ].data[ "test" ].last ];
Kể từ jQuery 3, mỗi chuỗi hai ký tự "-" [U+002D] theo sau là một chữ cái ASCII viết thường trong một khóa được thay thế bằng phiên bản viết hoa của chữ cái, phù hợp với API bộ dữ liệu HTML. Một câu lệnh như
2 sẽ trả về
data demo
div {
color: blue;
}
span {
color: red;
}
The values stored were
and
$[ "div" ].data[ "test", { first: 16, last: "pizza!" } ];
$[ "span" ].first[].text[ $[ "div" ].data[ "test" ].first ];
$[ "span" ].last[].text[ $[ "div" ].data[ "test" ].last ];
3
data demo
div {
color: blue;
}
span {
color: red;
}
The values stored were
and
$[ "div" ].data[ "test", { first: 16, last: "pizza!" } ];
$[ "span" ].first[].text[ $[ "div" ].data[ "test" ].first ];
$[ "span" ].last[].text[ $[ "div" ].data[ "test" ].last ];
Do cách trình duyệt tương tác với phần bổ trợ và mã bên ngoài, phương thức
5 không thể được sử dụng trên phần tử
data demo
div {
color: blue;
}
span {
color: red;
}
The values stored were
and
$[ "div" ].data[ "test", { first: 16, last: "pizza!" } ];
$[ "span" ].first[].text[ $[ "div" ].data[ "test" ].first ];
$[ "span" ].last[].text[ $[ "div" ].data[ "test" ].last ];
5 [trừ khi đó là phần bổ trợ Flash], phần tử
data demo
div {
color: blue;
}
span {
color: red;
}
The values stored were
and
$[ "div" ].data[ "test", { first: 16, last: "pizza!" } ];
$[ "span" ].first[].text[ $[ "div" ].data[ "test" ].first ];
$[ "span" ].last[].text[ $[ "div" ].data[ "test" ].last ];
6 hoặc
data demo
div {
color: blue;
}
span {
color: red;
}
The values stored were
and
$[ "div" ].data[ "test", { first: 16, last: "pizza!" } ];
$[ "span" ].first[].text[ $[ "div" ].data[ "test" ].first ];
$[ "span" ].last[].text[ $[ "div" ].data[ "test" ].last ];
7
data demo
div {
color: blue;
}
span {
color: red;
}
The values stored were
and
$[ "div" ].data[ "test", { first: 16, last: "pizza!" } ];
$[ "span" ].first[].text[ $[ "div" ].data[ "test" ].first ];
$[ "span" ].last[].text[ $[ "div" ].data[ "test" ].last ];
Ghi chú bổ sung
- Lưu ý rằng phương pháp này hiện không cung cấp hỗ trợ đa nền tảng để đặt dữ liệu trên tài liệu XML, vì Internet Explorer không cho phép đính kèm dữ liệu qua thuộc tính expando
9 không được công nhận là giá trị dữ liệu. Các lệnh gọi chẳng hạn nhưdata demo
div {
color: blue;
}
span {
color: red;
}
The values stored were
and
$[ "div" ].data[ "test", { first: 16, last: "pizza!" } ];
$[ "span" ].first[].text[ $[ "div" ].data[ "test" ].first ];
$[ "span" ].last[].text[ $[ "div" ].data[ "test" ].last ];
9 sẽ trả về đối tượng jQuery mà nó được gọi, cho phép xâu chuỗidata demo
div {
color: blue;
}
span {
color: red;
}
The values stored were
and
$[ "div" ].data[ "test", { first: 16, last: "pizza!" } ];
$[ "span" ].first[].text[ $[ "div" ].data[ "test" ].first ];
$[ "span" ].last[].text[ $[ "div" ].data[ "test" ].last ];
Ví dụ
Lưu trữ rồi lấy giá trị từ phần tử div
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
data demo
div {
color: blue;
}
span {
color: red;
}
The values stored were
and
$[ "div" ].data[ "test", { first: 16, last: "pizza!" } ];
$[ "span" ].first[].text[ $[ "div" ].data[ "test" ].first ];
$[ "span" ].last[].text[ $[ "div" ].data[ "test" ].last ];
Thử nghiệm
.data[ key ]Trả về. Đối tượng
Sự miêu tả. Trả về dữ liệu tùy ý được liên kết với phần tử đầu tiên trong bộ sưu tập jQuery, như được đặt bởi data[] hoặc bởi thuộc tính HTML5
7
data demo
div {
color: blue;
}
span {
color: red;
}
The values stored were
and
$[ "div" ].data[ "test", { first: 16, last: "pizza!" } ];
$[ "span" ].first[].text[ $[ "div" ].data[ "test" ].first ];
$[ "span" ].last[].text[ $[ "div" ].data[ "test" ].last ];
đã thêm phiên bản. 1. 2. 3 . dữ liệu[ khóa ]
Chìa khóa
Loại. Chuỗi
Tên của dữ liệu được lưu trữ
đã thêm phiên bản. 1. 4 . dữ liệu[]
Chữ ký này không chấp nhận bất kỳ đối số
Phương thức
5 cho phép chúng tôi đọc dữ liệu được liên kết trước đó với các phần tử DOM. Chúng ta có thể truy xuất một số giá trị riêng biệt cho từng phần tử một hoặc dưới dạng một tập hợp
data demo
div {
color: blue;
}
span {
color: red;
}
The values stored were
and
$[ "div" ].data[ "test", { first: 16, last: "pizza!" } ];
$[ "span" ].first[].text[ $[ "div" ].data[ "test" ].first ];
$[ "span" ].last[].text[ $[ "div" ].data[ "test" ].last ];
1
2
3
4
5
6
7
0
data demo
div {
color: blue;
}
span {
color: red;
}
The values stored were
and
$[ "div" ].data[ "test", { first: 16, last: "pizza!" } ];
$[ "span" ].first[].text[ $[ "div" ].data[ "test" ].first ];
$[ "span" ].last[].text[ $[ "div" ].data[ "test" ].last ];
Gọi
5 không có tham số trả về một đối tượng JavaScript chứa từng giá trị được lưu trữ dưới dạng thuộc tính. Đối tượng có thể được sử dụng trực tiếp để lấy giá trị dữ liệu [nhưng lưu ý rằng tên thuộc tính ban đầu chứa dấu gạch ngang sẽ được sửa đổi như mô tả bên dưới]
data demo
div {
color: blue;
}
span {
color: red;
}
The values stored were
and
$[ "div" ].data[ "test", { first: 16, last: "pizza!" } ];
$[ "span" ].first[].text[ $[ "div" ].data[ "test" ].first ];
$[ "span" ].last[].text[ $[ "div" ].data[ "test" ].last ];
Kể từ jQuery 3, mỗi chuỗi hai ký tự "-" [U+002D] theo sau là một chữ cái ASCII viết thường trong một khóa được thay thế bằng phiên bản viết hoa của chữ cái, phù hợp với API bộ dữ liệu HTML. Một câu lệnh như
2 sẽ trả về
data demo
div {
color: blue;
}
span {
color: red;
}
The values stored were
and
$[ "div" ].data[ "test", { first: 16, last: "pizza!" } ];
$[ "span" ].first[].text[ $[ "div" ].data[ "test" ].first ];
$[ "span" ].last[].text[ $[ "div" ].data[ "test" ].last ];
3
data demo
div {
color: blue;
}
span {
color: red;
}
The values stored were
and
$[ "div" ].data[ "test", { first: 16, last: "pizza!" } ];
$[ "span" ].first[].text[ $[ "div" ].data[ "test" ].first ];
$[ "span" ].last[].text[ $[ "div" ].data[ "test" ].last ];
Thuộc tính HTML5
data demo
div {
color: blue;
}
span {
color: red;
}
The values stored were
and
$[ "div" ].data[ "test", { first: 16, last: "pizza!" } ];
$[ "span" ].first[].text[ $[ "div" ].data[ "test" ].first ];
$[ "span" ].last[].text[ $[ "div" ].data[ "test" ].last ];
7
data demo
div {
color: blue;
}
span {
color: red;
}
The values stored were
and
$[ "div" ].data[ "test", { first: 16, last: "pizza!" } ];
$[ "span" ].first[].text[ $[ "div" ].data[ "test" ].first ];
$[ "span" ].last[].text[ $[ "div" ].data[ "test" ].last ];
Kể từ jQuery 1. 4. 3, Thuộc tính
7 dùng để khởi tạo dữ liệu jQuery. Các thuộc tính
data demo
div {
color: blue;
}
span {
color: red;
}
The values stored were
and
$[ "div" ].data[ "test", { first: 16, last: "pizza!" } ];
$[ "span" ].first[].text[ $[ "div" ].data[ "test" ].first ];
$[ "span" ].last[].text[ $[ "div" ].data[ "test" ].last ];
7 của một phần tử được truy xuất lần đầu tiên khi phương thức
data demo
div {
color: blue;
}
span {
color: red;
}
The values stored were
and
$[ "div" ].data[ "test", { first: 16, last: "pizza!" } ];
$[ "span" ].first[].text[ $[ "div" ].data[ "test" ].first ];
$[ "span" ].last[].text[ $[ "div" ].data[ "test" ].last ];
6 được gọi trên nó và sau đó không còn được truy cập hoặc thay đổi nữa [tất cả các giá trị được lưu trữ nội bộ bởi jQuery]
data demo
div {
color: blue;
}
span {
color: red;
}
The values stored were
and
$[ "div" ].data[ "test", { first: 16, last: "pizza!" } ];
$[ "span" ].first[].text[ $[ "div" ].data[ "test" ].first ];
$[ "span" ].last[].text[ $[ "div" ].data[ "test" ].last ];
Mọi nỗ lực được thực hiện để chuyển đổi giá trị chuỗi của thuộc tính thành giá trị JavaScript [điều này bao gồm boolean, số, đối tượng, mảng và null]. Một chuỗi chỉ được chuyển đổi thành một số nếu làm như vậy không thay đổi biểu diễn của nó [ví dụ: chuỗi "100" được chuyển đổi thành số 100, nhưng "1E02" và "100. 000" được để lại dưới dạng chuỗi vì giá trị số 100 của chúng được sắp xếp theo thứ tự thành "100"]. Khi một chuỗi bắt đầu bằng '{' hoặc '[', thì
09 được sử dụng để phân tích chuỗi đó; . Một chuỗi không thể phân tích cú pháp dưới dạng giá trị JavaScript không được chuyển đổi
data demo
div {
color: blue;
}
span {
color: red;
}
The values stored were
and
$[ "div" ].data[ "test", { first: 16, last: "pizza!" } ];
$[ "span" ].first[].text[ $[ "div" ].data[ "test" ].first ];
$[ "span" ].last[].text[ $[ "div" ].data[ "test" ].last ];
Để truy xuất giá trị thuộc tính
7 dưới dạng chuỗi chưa chuyển đổi, hãy sử dụng phương thức
data demo
div {
color: blue;
}
span {
color: red;
}
The values stored were
and
$[ "div" ].data[ "test", { first: 16, last: "pizza!" } ];
$[ "span" ].first[].text[ $[ "div" ].data[ "test" ].first ];
$[ "span" ].last[].text[ $[ "div" ].data[ "test" ].last ];
41
data demo
div {
color: blue;
}
span {
color: red;
}
The values stored were
and
$[ "div" ].data[ "test", { first: 16, last: "pizza!" } ];
$[ "span" ].first[].text[ $[ "div" ].data[ "test" ].first ];
$[ "span" ].last[].text[ $[ "div" ].data[ "test" ].last ];
Kể từ jQuery 1. 6, dấu gạch ngang trong tên thuộc tính
7 đã được xử lý phù hợp với API tập dữ liệu HTML
data demo
div {
color: blue;
}
span {
color: red;
}
The values stored were
and
$[ "div" ].data[ "test", { first: 16, last: "pizza!" } ];
$[ "span" ].first[].text[ $[ "div" ].data[ "test" ].first ];
$[ "span" ].last[].text[ $[ "div" ].data[ "test" ].last ];