This.id로 DOM 요소의 id 속성 가져오기
.NET프로그래밍/jQuery 1.3.2 2009. 11. 6. 10:26 |- 이벤트 핸들러에서의 this는 DOM을 가리킴
- 현재 이벤트가 적용된 개체(DOM)을 jQuery 개체로 반환
- DOM 개체 중 클릭된 요소를 알고자 할 때에는 id 속성 사용
This
$(this)
This.id
[ThisId.htm]
<!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>
<title>This.id로 DOM 요소의 id 속성 가져오기</title>
<style type="text/css">
.redColor { color:Red; }
</style>
<script src="js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//[1] 닷넷코리아 레이어 클릭시 CSS 클래스 해제
$('#dnk').bind('click', function() {
//[a] 해제
$('#mainMenu .redColor').removeClass('redColor'); // 3개의 요소의 CSS 클래스 해제
//[b] #dnk만 다시 적용
$(this).addClass('redColor'); // 현재 나만 다시 적용
});
//[2] mainMenu의 모든 항목에 대해서 click 이벤트 적용
$('#mainMenu .redColor').bind("click", function() {
//[!] this.id로 분기
if (this.id == "va") {
alert("비주얼 아카데미 클릭");
}
else if (this.id == "ll") {
alert($(this).text()); // #ll 안에 들어있는 텍스트
}
});
});
</script>
</head>
<body>
<div id="mainMenu">
<div id="dnk" class="redColor">닷넷코리아</div>
<div id="va" class="redColor">비주얼아카데미</div>
<div id="ll" class="redColor">라이선스랜드</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------
[실행결과]
--> "닷넷코리아"텍스트 클릭시...
'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글
filter() 메서드를 사용해서 조건에 맞는 요소만 가져오기 (0) | 2009.11.06 |
---|---|
특정 요소에 클릭 이벤트를 적용 (0) | 2009.11.06 |
AddClass / RemoveClass(스타일 추가 / 제거) (0) | 2009.11.06 |
bind() 메서드로 동적으로 이벤트 부여 (0) | 2009.11.06 |
DOM 요소 가져오기 (0) | 2009.11.06 |