script
jQuery - data(), removeData()
준용
2010. 1. 12. 22:35
HTML의 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의 예제를 참조 후 까먹지 않기 위해 비슷하게 코딩