jQuery event

2022. 9. 5. 13:19ㆍjQuery

1. 이벤트 연결

  • $(선택자).bind('이벤트','function(){}') => $(선택자).on('이벤트','function(){}') 으로 변경됨
  • $(선택자).bind(eventName, function(event){  })
  • $(선택자).이벤트(function(){})
  • $(선택자).bind(object)
  • 기타
    • $(선택자).toggle(function(){//홀수번째 계산},function()}{//짝수번째 계산});
    • $(선택자).toggle(function(){},function(){},function(){},function(){}.....) 여러개 사용가능 , 배수 처리
    • $(선택자).hover(function(){//마우스엔터;},function(){//마우스리브});

ex)

1.

<style>
    h2{transition: all .3s ease-out;}
    .reverse {background: Black; color:White;}
</style>

<body>
    <h2>Header-0</h2>
    <h2>Header-1</h2>
    <h2>Header-2</h2>  

    <script>
        $('h2').bind({
            mouseenter: function(){$(this).addClass('reverse');},
            mouseleave: function(){$(this).removeClass('reverse');}
        });
        // $('h2').bind('mouseenter',function(){
        //     $(this).addClass('reverse')
        // });
        // $('h2').bind('mouseleave',function(){
        //     $(this).removeClass('reverse')
        // });
    </script>
</body>

2.

$('.trigger').hover(function(){
    $('.qanda .a').css('display','block');
},function(){
    $('.qanda .a').css('display','none');
});

----------------------------------------------------
$('button').toggle(function(){
    $(this).text('클릭1회');
},function(){
    $(this).text('클릭2회');
},function(){
    $(this).text('클릭3회');
});

3.nav

#tabMenu ul{ list-style: none;overflow:hidden}
#tabMenu ul li{float:left;} 
 
 <div id="tabMenu">
        <ul>
           <li><a class="menu1" href="#" ><img src="images/tab1.jpg" alt="서적" /></a></li>
           <li><a class="menu2" href="#" ><img src="images/tab2.jpg" alt="인쇄" /></a></li>
           <li><a class="menu3" href="#" ><img src="images/tab3.jpg" alt="잡지" /></a></li>
        </ul>
      </div>

    $('.menu1 img').attr('src','images/tab1on.jpg');

    $('.menu1').click(function(){
        $('.menu1 img').attr('src','images/tab1on.jpg')
        $('.menu2 img').attr('src','images/tab2.jpg')
        $('.menu3 img').attr('src','images/tab3.jpg')
    });
    $('.menu2').click(function(){
        $('.menu2 img').attr('src','images/tab2on.jpg')
        $('.menu1 img').attr('src','images/tab1.jpg')
        $('.menu3 img').attr('src','images/tab3.jpg')
    });
    $('.menu3').click(function(){
        $('.menu3 img').attr('src','images/tab3on.jpg')
        $('.menu1 img').attr('src','images/tab1.jpg')
        $('.menu2 img').attr('src','images/tab2.jpg')
    });

4. 탭 네비게이션

.current{background: orange; color:#fff;}
.tabcon div{ width:200px; height:200px; background: green; display: none;}

<div id="tabMenu">
    <ul>
       <li><a class="menu1" href="#" >교육</a></li>
       <li><a class="menu2" href="#" >인쇄</a></li>
       <li><a class="menu3" href="#" >잡지</a></li>
    </ul>
  </div>

  <div class="tabcon">
    <div>교육</div>
    <div>인쇄</div>
    <div>잡지</div>
  </div>
  
$('.menu1').addClass('current');

$('.menu1').click(function(){
    $('#tabMenu a').removeClass();
    $(this).addClass('current');
    $('.tabcon div').css('display','none');
    $('.tabcon div:eq(0)').css('display','block');
});
$('.menu2').click(function(){
    $('#tabMenu a').removeClass();
    $(this).addClass('current');
    $('.tabcon div').css('display','none');
    $('.tabcon div:eq(1)').css('display','block');
});
$('.menu3').click(function(){
    $('#tabMenu a').removeClass();
    $(this).addClass('current');
    $('.tabcon div').css('display','none');
    $('.tabcon div:eq(2)').css('display','block');
});

탭 네비게이션 변형

   $('.menu1').addClass('current');
   $('.tabcon div:eq(0)').css('display','block');

   $('#tabMenu li a').each(function(index){
    $(this).bind('click',function(e){
        e.preventDefault();
        $('#tabMenu li a').removeClass('current');
        $(this).addClass('current');

        $('.tabcon div').css('display','none');
        $('.tabcon div:eq('+index+')').css('display','block');
    })
   })

show(),hide()

<div style="width: 400px;border:1px solid #ccc; padding:10px;text-align:justify;line-height:1.5em;font-size:14px">
    <p>‘하면 된다’라는 정신을 갖고 목표를 달성하기 위해 온힘을 기울이는 자세를 말한다.</p>
    <a href="#" class="readmore" style="cursor:pointer">Read More...</a>
    <p class="message">현대는 다른 사람들이 불가능하다고 포기해 버린 일을 험난한 여건 속에서도 강인한 정신력과 추진력으로 성공시킨 역사와 경험을 가지고 있다. 앞으로 세계 곳곳에서 사업을 수행하는데 있어서 성취해야 할 많은 과제를 과감히 헤쳐나가기 위해서는 현대인 모두가 강인한 정신과 추진력을 더욱 배양하고 체질화해야 할 것이다.</p>
</div>

$('.message').hide();

$('a.readmore').toggle(function(){
    $('.message').show();
    $(this).text('Read Less?');
},
function(){
    $('.message').hide();
    $(this).text('Read More?');
});

이벤트 동시 발생 문제 ( 이벤트 버블링 )

  • $(선택자).text('텍스트'); / 변수 = $(선택자).text('텍스트'); => retrun 값으로 '텍스트'를 받는다
  • $(선택자).attr('속성','값'); / 변수 = $(선택자)attr('속성,값'); => retrun 값으로 속성의 값을 받는다
  • $(선택자).css('속성','값'); / 변수 = $(선택자).css('속성','값'); => retrun 값으로 속성의 값을 받는다

 var header = $('h1', this).text();    
 var paragraph = $('p', this).text();
  => this키워드를 $()메소드의 두번째 매개 변수로 넣어준다. => 그 자식

       범위를 이벤트 발생 객체로 한정한다.
       이벤트 발생 객체 안에만 선택자를 적용할 수 있다.

    <div class="box1">
        <h1>Header 1</h1>
        <p>Paragraph1</p>
        <img src="./images/a1.jpg" alt="이미지1">
     </div>
     <div>
        <h1>Header 2</h1>
        <p>Paragraph2</p>
        <img src="./images/a2.jpg" alt="이미지2">
     </div>
     <div>
        <h1>Header 3</h1>
        <p>Paragraph3</p>
        <img src="./images/a3.jpg" alt="이미지3">
     </div>
     
<script>

        $('div').click(function(){
            var header = $('h1',this).text();
            var paragraph = $('p',this).text();

            var att = $('img',this).attr('alt');
            var sty = $('div').css('border');
            alert(header+'\n'+paragraph+'\n'+att+'\n'+sty);
        });


</script>

애니메이션

  • speed  => slow/normal/fast
  • callback => 효과를 모두 완료 후에 실행할 함수를 지정
  • easing => 애니메이션의 easing 속성을 지정
  •    show() / hide()
       toggle()  => show() / hide()를 번갈아 실행

       slideDown() / slideUp()
       slideToggle() => slideDown() / slideUp()를 번갈아 실행

       fadeIn() / fadeOut()
       fadeToggle() => fadeIn() / fadeOut()를 번갈아 실행

 네가지 형식으로 사용.


   $(selector).method();
   $(selector).method(speed);
   $(selector).method(speed, callback);  => callback == function(){}; => 애니메이션이 모두 계산된 후 처     리되는 함수

   $(selector).method(speed, easing, callback);

   -speed  => slow/normal/fast
   -callback => 효과를 모두 완료 후에 실행할 함수를 지정
   -easing => 애니메이션의 easing 속성을 지정

 

ex)

1.네비게이션 만들기

<style>
*{margin:0; padding:0;}
#menu1{width:400px; border:1px solid #333; }
#menu1 ul{ list-style-type:none; text-align:center;}
.mainmenu {float:left; width:200px;  list-style-type:none; }
a{width: 190px;display:block; text-decoration: none; background: #666;  color: #fff;padding:4px;   border: 1px solid #fff; }
ul#dropdownmenu li{position:relative;}
ul#dropdownmenu li ul{position:absolute;  left:0;}
ul#dropdownmenu li a:hover {  background: #000;}
#content{width:400px;border:1px solid #333; background:#645;} 
</style>

    <div id="menu1">
        <ul id="dropdownmenu">
           <li class="mainmenu">
            <a href="#">Books</a>
            <ul>
                <li><a href="#">Web Development</a></li>
                <li><a href="#">Programming</a></li>
                <li><a href="#">RDBMS</a></li>
            </ul>
          </li>
          <li class="mainmenu">
            <a href="#">Movies</a>
            <ul>
                <li><a href="#">Latest Movie Trailers</a></li>
                <li><a href="#">Movie Reviews</a></li>
                <li><a href="#">Celebrity Interviews</a></li>
            </ul>
          </li>
        </ul>
    </div>
    <div id="content">
        <p>Books of different subjects available at reasonable prices. Ranging from web development, programming languages and text books all are available at heavy discount. Shipping is free. Also available in stock the popular Magazines, E-books and Tutorial CDs at affordable prices</p>
        <p>Find music videos, internet radio, music downloads and all the latest music news and information. We have a large collection of music and songs classified by type, language and region. All downloads are streamed through RealAudio. You can also watch free music videos, tune in to AOL Radio, and search for your favorite music artists</p>
    </div>

$('li.mainmenu ul').hide();

$('li.mainmenu').hover(function(){
    $('ul',this).stop().slideDown();
},function(){
    $('ul',this).stop().slideUp();
})

 2. 사용자 지정 효과  animate()메소드

     *$(selector).animate(object);
      $(selector).animate(object, speed);
      $(selector).animate(object, speed, callback);
      $(selector).animate(object, speed, easing, callback);

 

     *사용 가능한 속성 

(사용 불가능한 속성이 있다면 css로 만들어준 준후 class 값만 조절해준다)

 

      top, left, right, bottom => 위치변화 (css position 값이 적용되어 있어야 가능)

      width, height => 크기조절

      opacity => 투명도

      margin, padding => 여백조절

 

ex)

1.   *jQuery 문에서 단위 생략시 px 처리 (% 등 다른단위 사용시 '10%' 와 같이 문자로 입력)

   <style>
        .box img{width:300px; height:300px; position:relative;}
    </style>
   
   <div class="box"><img src="./images/img1.jpg" width="300px" height="300px" alt="" /></div>

<script>

    $('.box img').toggle(function(){
        $(this).animate({
            left:500, opacity:0.5, width:150, height:150
        },1000,'easeOutBounce',function(){
            alert('함수가 호출되었습니다');
        });
    },function(){
        $(this).animate({
            left:0, opacity:1, width:300, height:300
        },'fast')
    })

</script>

 

 

'jQuery' 카테고리의 다른 글

JS/jQuery Ajax Json  (0) 2022.09.20
JS/jQuery-Ajax  (0) 2022.09.19
JS 프레임워크  (0) 2022.09.02
JS 라이브러리 - jQuery  (0) 2022.09.02

관련글

티스토리툴바