JQuery / action

▶ event(마우스 액션에 관해)
1. click
2. mouseenter (mouseover) : 마우스 진입했을때
3. mouseleave (mouseout) : 마우스 벗어났을때
4. hover : mouseenter와 mouseleave를 동시에 

★this 란 내가 마우스 작용을 한 요소만 지칭

※ mouseenter와 mouseover의 차이: 
자식노드까지 감지하느냐 안하느냐   / mouseover는 감지 O
= 중복작용이 될수있어 mouseenter와 mouseleave를 쓰는게좋음

click 예시 
 $('p').click(function(){
            $(this).hide();
        });

p태그에 마우스 올렸을때 hello라는 메세지창이 나타남 
$(document).ready(function(){
        $('p').mouseenter(function(){
            alert('hello!')
        });
    });

중복작성
   $(document).ready(function(){
        $('p').hover(function(){
            alert('mouse enter!');
        },
        function(){
            alert('mouse leave!')
        });       
    });

▶ effect 
1. show / hide
2. toggle : show + hide
3. fadeIn / fadeOut : 서서히 나타나고 사라짐 
★in에 i와 out에 o는 대문자 I, O 구분해야함 밑에도 전부 마찬가지 
4. fadeToggle 
5. slideDown / slideUp : 위에서 아래로 내려옴 
6. slideToggle 
7. animate 
8. stop 

toggle 예시 
$(document).ready(function(){
        $('button').click(function(){
            $('p').toggle();
        });
    });

fadeIn 예시 *<>는 내가 필기한거임
$(documnet).ready(function(){
        $('button').click(function(){
            $('#div1').fadeIn();   <기본속도>
            $('#div2').fadeIn(3000);   <3초>
            $('#div3').fadeIn('slow');   <느리게/단어들어갈때는 ''넣어주기>
        });
    });

▶ css 제이쿼리로 css 추가,제거  
1. addClass('클래스명');
2. removeClass('클래스명');

css에 .on 이라는 클래스를 만들어놓고 
어떤 버튼을 누르면 .on클래스가 적용되도록 만든 예시 

$(document).ready(function(){
        $('.plus').click(function(){
            $('p').addClass('on');      <addClass라고 되어있으니 . 붙일필요없고 클래스명만 기입하기>
        });
        $('.minus').click(function(){
            $('p').removeClass('on');
        });
    });

↑

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

<button class="plus">add</button><!--id주면안됨 addclass니까 class만-->
<button class="minus">remove</button>

▶ traversing 노드찾기 
1. parent() 직계 부모 
2. parents() 부모 포함한 조상요소  
3. children() 직계 자식만 지칭 ex) ul li span에서 li 만 
4. sibling() 형제 노드 ex) $('.test div').siblings().addClass('on')
5. find() 자손 요소중 조건에 맞는 요소  ex)$('ul').find('span').addClass('on')