jQuery - data(), removeData()
script 2010. 1. 12. 22:35HTML의 element에 대해 value를 지정할수 있는 data(), value를 삭제할 수 있는 removeData()
하나의 value가 아닌 object형태로도 저장할 수 있다.
element의 사용자(?)attribute를 안 만들어도 되고 objectc형태로도 사용 가능하니 괜찮은듯
-소스는 jQuery DOCUMENTATION의 예제를 참조 후 까먹지 않기 위해 비슷하게 코딩
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var buttonEl = $("#exArea button");
buttonEl.click(function(e) {
var divEl = $("#exArea div");
switch (buttonEl.index(this)) {
case 0 :
//get
$("#exArea span").text("" + divEl.data("test"));
break;
case 1 :
//set
divEl.data("test", "ok");
break;
case 2 :
//remove
divEl.removeData("test");
break;
}
});
});
</script>
</head>
<body>
<div id="exArea">
<div>A div</div>
<button>get testData</button>
<button>set testData</button>
<button>remove testData</button>
<p>result : <span>?</span></p>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var buttonEl = $("#exArea button");
buttonEl.click(function(e) {
var divEl = $("#exArea div");
switch (buttonEl.index(this)) {
case 0 :
//get
$("#exArea span").text("" + divEl.data("test"));
break;
case 1 :
//set
divEl.data("test", "ok");
break;
case 2 :
//remove
divEl.removeData("test");
break;
}
});
});
</script>
</head>
<body>
<div id="exArea">
<div>A div</div>
<button>get testData</button>
<button>set testData</button>
<button>remove testData</button>
<p>result : <span>?</span></p>
</div>
</body>
</html>
하나의 value가 아닌 object형태로도 저장할 수 있다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#testDiv").data("test", {first: 1, second: 2});
$("#firstSpan").text($("#testDiv").data("test").first);
$("#secondSpan").text($("#testDiv").data("test").second);
});
</script>
</head>
<body>
<div id="testDiv"></div>
<p>first : <span id="firstSpan"></span></p>
<p>second : <span id="secondSpan"></span></p>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#testDiv").data("test", {first: 1, second: 2});
$("#firstSpan").text($("#testDiv").data("test").first);
$("#secondSpan").text($("#testDiv").data("test").second);
});
</script>
</head>
<body>
<div id="testDiv"></div>
<p>first : <span id="firstSpan"></span></p>
<p>second : <span id="secondSpan"></span></p>
</body>
</html>
element의 사용자(?)attribute를 안 만들어도 되고 objectc형태로도 사용 가능하니 괜찮은듯
-소스는 jQuery DOCUMENTATION의 예제를 참조 후 까먹지 않기 위해 비슷하게 코딩
'script' 카테고리의 다른 글
| javascript document.referrer (0) | 2010.03.31 |
|---|---|
| javascript 세자리마다 콤마(,) 찍기 (0) | 2010.02.18 |
| javascript 상하 롤링 v1.0 (2) | 2010.01.31 |
| jQuery 1.4 Released (0) | 2010.01.16 |
| jQuery - live() (0) | 2010.01.13 |
| window.onload 여러곳에서 사용하기 (0) | 2009.12.04 |
| [Link] jQuery Cheat Sheet (0) | 2009.11.05 |
| 마우스로 드래그해서 선택한 텍스트 가져오기 (1) | 2009.09.04 |
| 이미지 파일첨부시 업로드 이미지 미리보기 (IE8, Firefox 3) (27) | 2009.09.03 |
| [Link] Introduction to HTML Applications(HTAs) (0) | 2009.06.08 |