jQuery
html5 data 속성 제어 - data() 메서드 활용
Yokina
2017. 2. 17. 09:38
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
</head>
<body>
<div id="d1" data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
<script>
// attr는 html 마크업 속성(Attribute)으로 접근
// data는 dom객체 속성(Property)으로 접근
// attr 메서드 값을 가져오면 String 타입이다.
console.log($("#d1").attr("data-role")); // String "page"
console.log($("#d1").attr("data-last-value")); // String "43"
console.log($("#d1").attr("data-hidden")); // String "true"
console.log($("#d1").attr("data-options")); // String '{"name":"John"}'
// html5 data 속성은 jquery객체의 data메서드로 핸들링이 가능하다.
// data메서드로 값을 가져오면 실제 자료형으로 적용된다.
console.log($("#d1").data()); // Object
console.log($("#d1").data("role")); // String "page"
console.log($("#d1").data("lastValue")); // Number 43
console.log($("#d1").data("hidden")); // boolean true
console.log($("#d1").data("options").name); // String "John" //객체로 접근
</script>
</body>
</html>