The new HTML5 standard allows you to embed attributes like data-* in common element tags to achieve some simple data access. It is unlimited in number and can also be dynamically modified by javascript, and also supports CSS selectors for styling. This makes the data attribute particularly flexible and very powerful. With such attributes, we can preset or store data in a more orderly and intuitive manner. The following introduces the practical application of HTML5 Dataset storage, and four access methods including jQuery .
HTML5 Dataset storage example
Assign the data attribute to an element to store data. For example, this is a span element, and its content is the name of a piece of music. We directly preset more information about the song in its HTML tag, which looks OK on the HTML source code. Write it like this:
<span id="music-latch" class="musique" data-date="2013" data-genre="Electronic" data-album="Settle (Deluxe)" data-artist="Disclosure" data-composer="Howard Lawrence & Guy Lawrence"> Latch (feat. Sam Smith) </span>
In this way, we simply embed the album, artist and genre information directly in the span tag for this song.
As another example, let's say an embedding for a localized translation:
<h2 id="food-pkd" class="food" data-en="Peking Duck" data-available data-ja="Beijing ダック" data-en="Beijing Peking Duck" data-de="Pekingente"> Peking duck </h2>
In this way, without changing the appearance of the web page, we can detect data-XX while setting machine translation to provide more accurate and accurate translation manually.
Where data-available has no value, null values are allowed, for example in this case it only means that the food is available to order, so no value is required.
Use getAttribute, setAttribute to access dataset
As a label of an HTML element, dataset access also obeys getAttribute and setAttribute, and these two methods are also the most compatible.
For example, for the two examples above, we can run
//get
var album = document.getElementById("music-latch").getAttribute("data-album");
console.log(album);
//set
document.getElementById("food-pkd").setAttribute("data-en","Beijing Stuffed Duck");
This allows to access dataset data in a more compatible way. Any changes made can be reflected to the element data attribute in real time.
But this method is relatively low-end. If you encounter multiple data-* custom fields, if you want to get all the data attributes at one time and wrap them into objects, you must do a loop, which is very troublesome. We still have the Dataset API available though.
Access datasets using the dataset API
Through the .dataset API, we can more conveniently obtain all data fields of an element, and in the form of objects, it is convenient to access and traverse. For example, for the above example, you can run
//get
var songd = document.getElementById("music-latch").dataset;
var album = songd.album;
console.log(album);
//set
document.getElementById("food-pkd").dataset.en = "Beijing Stuffed Duck";
//add
document.getElementById("food-pkd").dataset.es = "Pato laqueado a la pekinesa";
At this time, when we access data, we don't need the "data-" keyword, we can access it directly by using .dataset.name . This is more convenient than the method above. Any changes made can be reflected to the element data attribute in real time.
If the hyphen "-" is involved, you can use camel case to access:
<span id="en" data-en-us="Peiking Duck"></span>
Where en-us should be written as enUs:
var en = document.getElementById("en").dataset.enUs;
Using jQuery .attr method to access dataset
jQuery has excellent compatibility. Similar to get, setAttribute, jQuery 's .attr() method can also be used in such cases, for example, for the above example, you can run
window.jQuery && (function($){
//get
var album = $("#music-latch").attr("data-album");
console.log(album);
//set
$("#food-pkd").attr("data-en","Beijing Stuffed Duck");
})(window.jQuery);
This is exactly the same as when jQuery .attr is applied to other attributes, and any changes made are reflected in the element data attribute in real time.
Access dataset using jQuery .data method
jQuery has supported the $.data() method since version 1.4.2 to directly access the data property, and there is no need to write the "data-" keyword. For example, for the above example, you can run
window.jQuery && (function($){
//get
var album = $("#music-latch").data("album");
console.log(album);
//set
$("#food-pkd").data("en","Beijing Stuffed Duck");
})(window.jQuery);
This method can also access the data attribute well, but it should be noted that the changes made to the data data by jQuery .data will not be reflected on the data attribute of the HTML element.
That is, jQuery now considers the data-en of the #food-pkd element to be "Beijing Stuffed Duck", but on the HTML element, the value remains the same as "Peking Duck":
window.jQuery && (function($){
//set
$("#food-pkd").data("en","Beijing Stuffed Duck");
console.log( $("#food-pkd").data("en") );
// log: "Beijing Stuffed Duck"
})(window.jQuery);
console.log( document.getElementById("food-pkd").dataset.en );
// log: "Peking Duck"
jQuery .data parses the JSON information of the Dataset
In fact, jQuery can also very cleverly extract json information from data and convert it into an object:
<span id="song-jsn"
data-meta='{"name":"Latch", "album":"Disclosure", "date":"2013"}'>
Latch (feat. Sam Smith)
</span>
window.jQuery && (function($){
var jsn = $("#song-jsn").data("meta");
console.log( jsn.album );
// log: "Disclosure"
})(window.jQuery);
In this way, you don't have to write a bunch of data-album, data-lyrics, data-artist, you can directly write all the song information into JSON and put it in a single data tag!
CSS, jQuery find the corresponding element of the data attribute
If I want all songs with the album name (data-album) as Disclosure to be displayed in red, in the CSS selector, we can match like this
.musique[data-album='Disclosure']
{
color:red;
}
window.jQuery && (function($){
$(".food").filter("[data-available]").each(function(){
$(this).click(function(){
alert("It's Available!");
});
});
})(window.jQuery);