HTML5 Tutorial: Menggunakan data attribute dengan jquery

Oleh: Admin - Sat, 13 October, 2018

HTML 5 data-* attribute

ohaiyo.. mina

hahaha sok jejepangan, bodo amat lah ya :D.

Gimana kabar kalian sob, semoga sehat terus ya. Lama ga nulis nih, alhamdulillah masih sibuk ngerjain yang lain. Saking sibuknya ampe bingung nih mau nulis apaan, apa curhatan aja kali ya.

Tapi, kalo boleh dibilang sih, gw dulu nulis blog juga dan isinya itu curhatan hahhaaa maklum bro, zaman jahiliah dulu. Eh tapi gak cuman curhatan aja lohh isinya juga banyak yang bermanfaat :p.

Nah berhubung sekarang sempet nulis, tapi gapunya ide buat nulis apaan. Gw bakalan ngajak kalian buat refreshing nih hahahaaa jangan kesenengan dulu, bukan refreshing jalan-jalan maksudnya :p.

Kalian pasti udah pada tau HTML 5 kan?, mustahil lah ya klo belom pada tau. Ya soalnya kita kan bisa dibilang angkatan HTML 5 hahaaaa, kita kan masih muda sob. Ehh tapi jangan jangan ada yang masih pake HTML 4, hahahhaa ketauan tuanya luuu :p.

WaH keren nih...

Nah di HTML 5 ini ada salah satu fitur, namanya data-* attribute, apa itu data- attribute?

Jadi data-* attribute di HTML 5 itu biasanya dipake buat nyimpen kustom data buat aplikasi web kita, data-* attribute ini bisa kita tempelkan ato pasang disemua element HTML.

Gimana?? udah kebayang belom maksudnya, nih kalo belom pada ng'eh bisa dipelototin kode dibawah.

    
<element data-custom-value="Helloo"></element>
HTML5 Data Attribute

Oke langsung preaktekin aja mendingan dah

    
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>HTML5 Data Attribute</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

    <p data-words="Helloo, i'am words...">Helloo</p>
    
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script type="text/javascript">
    $('p').on('click', function(){
        var $this = $(this),
            $data = $this.data();
        
        // $data is object with words as property
        alert('Print custom data ' + $data.words);
        // data-* attribute is awesome :D
    });
    </script>
</body>
</html>

Nah udah tuh sob, sekarang kita buka browser dan tinggal klak klik klak klik dah :D hahaha. Sampe jumpa laen waktu, salam tempel.