오늘은 hasClass()를 사용하겠습니다.
.hasClass( className )는 참, 거짓으로 판단하게 됩니다. 검색할려는 className이 존재하였을 때 True을 return하고 존재하지 않을 때 false를 return 하게 된다.
소스를 보겠습니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css">
</style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(function (){ $("h1").click(whenClick); });
function whenClick(){
}
</script> </head> <body> <h1>RintIanTta</h1> <h1>RantIanTta</h1> <h1>IanKelRaucTta</h1> <h1>HaraRect</h1> <h1>VhenSiliate</h1> </body> </html> |
소스를 짜보겠습니다.
document 의 접근 시 실행하라.
<h1> 태그를 클릭할 시 whenClick를 실행하라.
.toggleClass 메소드의 ClassName이 forToggle 이다.
.hasClass 메소드가 forToggle 이라는 ClassName이 있을 경우, true 값을 리턴 시킨다.
if가 true일 경우, animate 메소드를 사용하여 left 방향으로 200 만큼 slow 하게 이동
그 밖의 else일 경우, animate 메소드를 사용하여 left 방향으로 0 만큼 slow하게 이동
그 다음 <style> 도 추가해보겠습니다.
결과.
클릭시 left 방향으로 200만큼 이동하며 orange 색으로 전환됩니다.
다시 한번 클릭시 원래 자리로 이동하며 원래의 색으로 전환됩니다.
전체소스.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> .forToggle{ color:Orange; } h1 { position:relative; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(function (){ $("h1").click(whenClick); });
function whenClick(){ $(this).toggleClass("forToggle"); if ($(this).hasClass("forToggle")){ $(this).animate({ left: "200" }, "slow"); } else { $(this).animate({ left: "0" }, "slow"); } }
</script> </head> <body> <h1>RintIanTta</h1> <h1>RantIanTta</h1> <h1>IanKelRaucTta</h1> <h1>HaraRect</h1> <h1>VhenSiliate</h1> </body> </html> |
'Skills > Web' 카테고리의 다른 글
| jQuery + CSS3 + HTML5 - 레이어 팝업(Layr popup) (0) | 2014.01.13 |
|---|---|
| jQuery + CSS3 + HTML5 - 아코디언 (0) | 2014.01.13 |
| jQuery Basic 16강 - Append & PrePend & After & Before (0) | 2014.01.13 |
| JQuery Basic 15강 - append() & prepend() (0) | 2014.01.13 |
| JQuery Basic 14강 - before() & after() (0) | 2014.01.13 |
