Dữ liệu. Trong thế giới của jQuery, đó là tất cả về các bit thông tin được gắn trực tiếp vào các phần tử (đúng hơn là một biến chỉ có tác dụng với chính nó). Có rất nhiều cách để lưu các bit dữ liệu ở “phía máy khách” (trong trình duyệt chứ không phải máy chủ). Có các biến thuộc bất kỳ loại nào, cookie, localStorage, indexDB và ai biết tất cả những gì khác. Dữ liệu được sử dụng khi dữ liệu đó có liên quan cụ thể đến một phần tử cụ thể.
Giống như nhiều phương thức jQuery, nó có cả setter (hai tham số):
$("#thing").data("name", "value");và một getter (một tham số):
$("#thing").data("name"); // "value"Bạn có thể sử dụng nó trên bất kỳ đối tượng jQuery nào. Nếu có nhiều phần tử trong đối tượng đó, thì tất cả chúng đều nhận được giá trị dữ liệu đó khi bạn sử dụng nó làm setter. Nếu có nhiều phần tử trong đối tượng đó khi bạn sử dụng nó như một getter, nó sẽ sử dụng phần tử đầu tiên.
Một cách để có thể nghĩ về dữ liệu là phần tử giống như một không gian tên. Rất nhiều phần tử có thể sử dụng cùng một “tên” dữ liệu nhưng có các giá trị khác nhau.
Có một trường hợp sử dụng trong thế giới thực trong bản demo CSS-Tricks cũ, Google Maps Slider. Trong bản demo đó, có một danh sách các vị trí và một Bản đồ Google được nhúng. Khi bạn di chuột qua các vị trí, bản đồ sẽ di chuyển đến chính giữa vị trí đó. Để làm được điều này, API bản đồ cần có tọa độ. Thật hợp lý khi có dữ liệu đó trong HTML cho những vị trí đó, nhưng chúng ta không cần phải xem nó. Đó là một trường hợp sử dụng hoàn hảo cho data-*các thuộc tính trong HTML (mới trong HTML5). Một mục danh sách trong danh sách các vị trí đó có thể giống như sau:
O'Hare Airport
Flights n' stuff
About: Info about location…
data-*chỉ là một cách để nói data- anything . Bạn chỉ có thể tạo thuộc tính dữ liệu. Bất cứ thứ gì bạn muốn. Trong trường hợp này, chúng tôi đã tạo một cái cho vĩ độ và một cái khác cho kinh độ. Khi một sự kiện khi di chuột kích hoạt trên mục danh sách đó, chúng tôi chỉ cần sử dụng jQuery getter .data()để gỡ bỏ thông tin và sử dụng nó với API.
Vì vậy, bây giờ chúng ta đã xem xét dữ liệu theo hai cách, dữ liệu vừa được thiết lập và lấy từ chính JavaScript, vừa là dữ liệu bắt đầu trong HTML và được JavaScript sử dụng. Cả hai đều ổn và API cũng vậy. Bạn có thể nghĩ rằng việc sử dụng .data()như một công cụ lấy thông tin trong rel = "jQuery">$("#thing").attr("rel"); // or any other attribute
Bạn cũng có thể sử dụng nó theo cách đó nếu bạn thích:
$("#thing").attr("data-geo-lat");Các .data()getter chỉ là một phím tắt. Và tôi thích nó vì nó giúp bạn có suy nghĩ đúng đắn.
Tuy nhiên, điều quan trọng cần lưu ý là việc sử dụng .data()làm bộ định tuyến không thực sự thay đổi data-*thuộc tính trong HTML . Đó là một mặc định tốt vì không thay đổi DOM có nghĩa là nó nhanh hơn. Nếu bạn thực sự cần thay đổi thuộc tính trong HTML, hãy sử dụng .attr()phương pháp này như một bộ định giá. Cũng lưu ý rằng khi sử dụng, .attr()bạn cần bao gồm tiền tố “data-” mà bạn không cần sử dụng .data().
$("#thing").attr("data-name", "Chris");Bạn có thể cần phải làm điều đó để có thể chắc chắn rằng các phần khác của ứng dụng có quyền truy cập hoặc nếu bạn đang làm điều gì đó như viết các bộ chọn CSS sẽ thu được chúng (ví dụ (data-something="whatever") ( ):)