본문 바로가기
강좌/jQuery

제이쿼리(jQuery) - toggle(), toggleClass(), hover(), one() 메서드.

이번엔제대로 2013. 4. 22. 06:55

1. toggle메소드 사용하기


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

<meta http-equiv="content-type" content="text/html;" charset="utf-8" >

        <title> toggle method </title>

<script src="http://code.jquery.com/jquery-1.7.2.js"></script>

<style type="text/css">

.hidden{display:none;}

</style>

<script>

   $(document).ready(function (){

                            //.toggle(fn1, fn2); //fn1과 fn2를 서로 토글링 한다.

   $('#btn').toggle(

   function(){$('#myLayer').addClass('hidden');},

   function(){$('#myLayer').removeClass('hidden');}

);


});

</script>

    </head>


    <body>

        <h1>버튼을 클릭할 때마다 레이어 보이기/숨기기</h1>

<input id="btn" type="button" value="button" />

<div id="myLayer" style="background-color:yellow;">

Hello!

</div>

    </body>

</html>


2. toggle메소드 사용하기(css 클래스에 대한 토글링)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

<meta http-equiv="content-type" content="text/html;" charset="utf-8" >

        <title> toggleClass()메소드로 css클래스에 대한 toggle </title>

<script src="http://code.jquery.com/jquery-1.7.2.js"></script>

<style type="text/css">

.hidden{display:none;}

</style>

<script>

   $(document).ready(function (){

   $('#btn').click(function (){

                                    //hidden CSS Class에 대해서 addClass()<->removeClass()

   $('#myLayer').toggleClass('hidden');

});

});

</script>

    </head>


    <body>

        <h1>버튼을 클릭할 때마다 레이어 보이기/숨기기</h1>

<input id="btn" type="button" value="button" />

<div id="myLayer" style="background-color:yellow;">

Hello!

</div>

    </body>

</html>


3. hover()메소드
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="content-type" content="text/html;" charset="utf-8" >
        <title> hover()로 마우스오버와 아웃을 동시 처리 </title>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<style type="text/css">
.hover{cursor:pointer; background-color:yellow;}
</style>
<script type="text/javascript">
   $(document).ready(function (){
   $('table tr:gt(0)').hover(
   function(){$(this).addClass('hover');}, 
function(){$(this).removeClass('hover');}
);
});
</script>
    </head>

    <body>
<table border="1">
   <tr>
   <td>title</td>
</tr>
   <tr>
   <td>JAVA</td>
</tr>
   <tr>
   <td>ASP.NET</td>
</tr>
</table>
</body>
</html>


4. one() 메소드로 한 번만 출력(특정 이벤트를 딱 한번만 실행하기 위해서)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="content-type" content="text/html;" charset="utf-8" >
        <title> one()로 한번만 실행 </title>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<style type="text/css">
.hover{cursor:pointer; background-color:yellow;}
</style>
<script type="text/javascript">
   $(document).ready(function (){
   $('#btn').one('click', function(){
   alert("just one time");
});

});
</script>
    </head>

    <body>
   <input type="button" id="btn" value="button" class="hover">
</body>
</html>

저작자표시

'강좌 > jQuery' 카테고리의 다른 글

제이쿼리(jQuery) - each() 메서드  (0) 2013.04.22
제이쿼리(jQuery) - css() 메서드와 콜백함수(CallBack)  (0) 2013.04.22
제이쿼리(jQuery) - filter()와 slice() 메서드.  (0) 2013.04.22
제이쿼리(jQuery) - addClass()와 removeClass()  (0) 2013.04.20
제이쿼리(jQuery) - Selector (선택기 / 선택자) 전반적인 내용  (0) 2013.04.16

'강좌/jQuery' Related Articles

티스토리툴바