티스토리 뷰
<!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>
'jQuery' 카테고리의 다른 글
| jquery.validator 정리 (1) | 2017.05.08 |
|---|---|
| JQuery input 개수 세기 (0) | 2017.03.14 |
| jQuery 상위 요소 가져오기(parents, closest) (0) | 2017.03.14 |
| jQuery 핵심 - 노드 다루기 (0) | 2017.03.14 |
| [jQuery] iframe 접근, 제어 (0) | 2017.03.14 |
댓글