마우스 오버시 addClass() 아웃시 removeClass() 예제
<head>
<title>jQuery Selectors A to Z</title>
<style type="text/css">
.redColor{background-color:red;border:1px solid yellow}
.blueColor{color:blue;}
</style>
<script src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
//마우스 오버시 redColor 스타일 적용, 아웃시 스타일 해제
$(document).ready(function(){
$("#btnClick")
.bind("mouseover", function(){
$("#btnClick").addClass("redColor");
})
.bind("mouseout", function(){
$("#btnClick").removeClass("redColor");
});
});
</script>
</head>
<body>
<div id="btnClick">
마우스를 올려보세요~
</div>
예제 : this로 나를 제외한 나머지 선택
<style type="text/css">
.redColor{color:red}
</style>
<script>
$(document).ready(function (){
$('#na').bind('click', function(){
$('#mainMenu .redColor').removeClass('redColor');
$(this).addClass('redColor');
});
});
</script>
</head>
<body>
<div id="mainMenu">
<div id="na" class="redColor">네이년</div>
<div id="ya" class="redColor">야후</div>
<div id="da" class="redColor">다음</div>
</div>
</body>
다른 예제 모든 항목에 대해서 click 이벤트 적용
<style type="text/css">
.redColor{color:red}
</style>
<script>
$(document).ready(function (){
$('#mainMenu .redColor').bind('click', function(){
if(this.id=="da"){
alert("다음");
}else if(this.id=="ya"){
alert($(this).text());
}
});
});
</script>
</head>
<body>
<div id="mainMenu">
<div id="na" class="redColor">네이년</div>
<div id="ya" class="redColor">야후</div>
<div id="da" class="redColor">다음</div>
</div>
</body>
'강좌 > jQuery' 카테고리의 다른 글
| 제이쿼리(jQuery) - toggle(), toggleClass(), hover(), one() 메서드. (0) | 2013.04.22 |
|---|---|
| 제이쿼리(jQuery) - filter()와 slice() 메서드. (0) | 2013.04.22 |
| 제이쿼리(jQuery) - Selector (선택기 / 선택자) 전반적인 내용 (0) | 2013.04.16 |
| 제이쿼리(jQuery) - 선택기(Selector)로 자식요소 선택 (0) | 2013.04.16 |
| 제이쿼리(jQuery) - Hello world!! 찍어보자. (0) | 2013.04.15 |
