[jQuery] 제이쿼리 DATA

제이쿼리 DATA 추가, 삭제, 확인 하는 예제입니다.

<script>
    $("document").ready(function() {
        document.getElementById("show").addEventListener("click", function (evt) {
            alert(JSON.stringify($("#example").data(),null,"  "));
        });
        document.getElementById("store").addEventListener("click", function (evt) {
            $("#example").data("key1", 1234);
            $("#example").data("key2", "철수");
        });
        document.getElementById("remove").addEventListener("click", function (evt) {
            $("#example").removeData();
        });
    });
</script>

 html

<div id="example" data-key3="data attribute">
    <p class="a">문장 1</p>
    <p id="para1">문장 2</p>
    <p class="b">문장 3</p>
    <p id="para4" lang="en-us">문장 4</p>
    <p id="para5" lang="en-gb">문장 5</p>
</div>
<p>
    <button id="store">Store data</button>&nbsp;
    <button id="remove">Remove data</button>&nbsp;
    <button id="show">Show data</button></p>

결과화면 : 데이터를 저장하고, show data  버튼을 누른 화면입니다.