티스토리 뷰

Language/JavaScript

[jQuery] data-속성 추가, 가져오기, data()함수 사용법

구일일구 2023. 5. 15. 14:51
반응형

HTML5에 들어와서 개발자가 DOM 객체에 데이터를 저장해두기 위해 표준 속성을 권고한다. 

data-xxx와 같이 data-로 시작하는 속성을 사용하도록 권고합니다. 예를 들어 <tr> 태그에 사용자의 나이를 저장해두기위해 air속성을 넣어두고 싶은 경우 <div air="13"> 이 아닌 <div data-air="13">과 같이 사용하도록 권고하는 것입니다.

 

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="zero" hidden="false" name="zero" class="babo" value="Hello" data-air="23" alyt="77" >
	Content
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('#zero').data('air'); // 23
        alert($('#zero').attr('alyt'))
    $('#zero').data('air', 24); // 24로 data-air를 24로 변경
    document.getElementById('zero')['data-air'] = 24; 
    });
       
</script>
</body>

</html>
반응형
저작자표시 비영리 변경금지 (새창열림)

'Language > JavaScript' 카테고리의 다른 글

화살표 함수  (0) 2023.09.04
정규식  (0) 2023.06.07
[JS] createElemet()  (0) 2023.05.15
[jQuery] .prop()  (0) 2023.05.15
[jQuery] .html()  (0) 2023.05.15
댓글