J-Query

1.Animation

• Slide

  • slideDown(duration,callback) : 아래로 길어지며 나타난다.
  • slideUp(duration,callback) : 위로 줄어들면서 사라진다.
  • slideToggle(duration,callback) : 두 기능을 번갈아 사용한다.

<script>
$('#flip').on('mouseenter',down);
        // id가 flip인 요소를 가져와 마우스를 영역에 가져왔을때 함수down을 발생시키게 한다.
        $('#flip').on('mouseout',function(){
            $(this).off('mouseenter');
            $(this).next().slideUp("slow",function(){
                $('#flip').on('mouseenter',down);
                });
            });
        // 반대로 마우스가 영역을 빠져나갔을때 발생하는 이벤트를 설정한다.
        // mouseout 이벤트 실행중 다른 이벤트가 젹용되지 않도록 off를 이용하여 mouseenter 이벤트를 삭제 한다.
        // mouseout 이벤트가 완료된 후, 다시 mouseenter이벤트를 실행할 수 있도록 callback을 이용하여 이벤트를 다시 생성한다.
       
        function down(){ //여러곳에 사용하기 위해 익명함수가 아닌 함수를 지정해준다.
                     $(this).next().slideDown("slow");
                };
 </script> 

• Animate

  Animate 를 활용 하여 기존에 사용할 수 있는 기능들을 Customize 할 수 있다.

• $(…).animate({params}, speed, easing, callback);
  • Params : css 에서 정의 할 수 있는 속성들(애니메이션 결과로 나타날 형태를 지정)
  • Speed : 애니메이션이 시작해서 끝날때 까지 걸릴 시간
  • Callback : 애니메이션 종료 후 일어날 기능
  • Params, Speed 는 필수값

2.Method Chaining

<script>
            //method chain : 함수끼리 연결 된다.
            // 하나의 함수로 실행된 결과값으로 다음 함수를 실행
            $('#obj').animate({'left':'+=500'},'slow')
            .animate({'top':'+=500'},'slow')
            .animate({'left':'-=500'},'slow')
            .animate({'top':'-=500'},'slow');
            </script>

3.Element Add & Delete

<script>
        var i =1;
        $('#ppdn').on('click',function(){
            i++;
            // ol의 자식요소중 가장 처음에 붙인다.
            $('ol').prepend('<li>List item '+i+'</li>');                
        });
        $('#apnd').on('click',function(){
            i++;
            // ol의 자식요소중 가장 마지막에 붙인다.
            $('ol').append('<li>List item '+i+'</li>');                
        });
        $('#aft').on('click',function(){
            i++;
            // ol의 형제요소에 next() 에 붙인다.
            $('ol').after('<li>List item '+i+'</li>');                
        });
       
        $('#bef').on('click',function(){
            i++;
            // ol의 형제요소에 prev() 에 붙인다.
            $('ol').before('<li>List item '+i+'</li>');                
        });
    </script>

• 요소 삭제
  $(…).remove(); // 선택한 요소와 하위 요소도 모두 삭제
  $(…).empty(); // 선택한 요소의 하위 요소만 삭제(비워 냄)