기본 함수에 대해 배워보자

이 구조를 아직 기억하고 있어야 한다. 원인과 결과로 보자면 함수는 원인에 해당하는 액션이다.

기본적으로 많이 쓰는 함수 두 가지를 알아보자

.click

이름 그대로 선택자를 클릭했을 때를 가리키는 함수다. 보통 모달창 만들 때 많이 쓴다.

$('.show-btn').click(function(){
    $('div').show()
})
$('.hide-btn').click(function(){
    $('div').hide()
})

.mouseenter, .mouseleave

왜 두 단어가 합쳐져있는데 mouseEnter, mouseLeave가 아닌가 했더니 메서드가 아니라 함수라서 그런거였다. 전체적으로 보면 세 개인데 두 가지라고 한 이유는 mouseenter와 mouseleave는 거의 한 묶음으로 사용하기 때문에 하나의 케이스로 세었다. 호버 효과를 만들어줄 수 있고, 네비게이션 메뉴를 만들 때 많이 사용한다.

$('.show-btn').mouseenter(function(){
    $('div').show()
})
$('.show-btn').mouseleave(function(){
    $('div').hide()
})

📝메서드의 종류1 - 효과 메서드

실행구문을 구성하는 선택요소와 메서드! 결과값으로 선택요소를 '어떻게' 작동시킬 것인가를 결정한다.

$('선택요소').메서드()

위 이미지에서 보다시피 이펙트, 클래스 제어, 요소 탐색 세 가지로 나눌 수 있다.

- 이펙트 : 효과를 만들어준다.
(거의 보이기/감추기가 대부분이다. 애니메이션 효과의 차이)

- 클래스 제어 : 클래스를 추가/제어/토글 할 수 있다.
(클래스를 제어하는 것 만으로도 이펙트 메서드의 효과를 낼 수 있다.

- 요소 탐색 : 선택요소를 기준으로 다른 요소를 찾아가야 할 때 사용
(선택요소의 자식, 부모, 형제 등을 탐색할 수 있다.)

애니메이션 효과가 있는 메서드의 경우 괄호안에 작동 시간을 지정해줄 수 있다. (적지 않으면 기본값으로 적용)

$('show-btn').click(function(){
	$('.div).slideUp(2000)
});
$('show-btn').click(function(){
	$('.div).slideUp('fast')
});

숫자로 적어줄 수도 있고 fast나 slow 같은 단어로 적어줄 수도 있는데 단어로 적을 땐 꼭 작은따옴표를 붙여야 하고, 숫자의 경우 단위는 ms(밀리세컨드)이다. 1초는 1000ms이므로 위의 경우 2초동안 슬라이드업하여 나타나게 된다.
(이건 따로 시간 지정 안함)

📝메서드의 종류2 - 클래스 제어 메서드

대표적인 세 가지만 알아보도록 하겠다.

• .addClass() : 선택요소에 클래스 삽입하기
• .removeClass() : 선택요소의 클래스 빼기
• .toggleClass() : 선택요소에 클래스 넣다뺐다 하기

이 세 가지 메서드를 이용해서 클래스를 넣다 빼는 것 만으로도 버튼처럼 이용할 수 있다.

• class 넣었을 때 -> class에 부여한 스타일 속성 적용
• class뺐을 때 -> class보다 상위인 tag에 부여한 속성 적용

이렇게 css를 작성한 후 클래스 제어 메서드로 .active라는 클래스 네임을 넣다뺐다 하면 된다.
(나는 클래스 스타일에도 모든 속성 다 입혀주어야하는 줄 알았는데 중복되는 속성만 변경되고 나머지는 그대로 유지되는 모양이다. 신기하구만)

js코드에서, 메서드 괄호에 들어간 클래스 네임 주목! 원래라면 메서드 옆에 온점(.)과 함께 값을 입력했었는데, 이 경우 왜 점이 없을까?

이유는 안에 들어가는 값이 class제어 메서드와 함께 사용되는 class 네임이라서 그렇다.
class 네임이라고 모두 점 없이 사용되는건 아니고, 요소 제어 메서드 등 다른 메서드와 사용될 때는 점(.)이 찍혀 있어야 한다고 한다. 아우 어려워.............

📝메서드의 종류3 - 요소탐색 메서드

요소 탐색하는 메서드는 두 가지만 알면 대부분의 케이스를 해결할 수 있다.

• .childern() : 선택 요소의 바로 아래 단계인 자식요소만 선택
• .siblings() : 선택 요소의 같은 위계인 형제요소 선택

메뉴 버튼에 마우스 올렸을 때 서브메뉴가 보이게끔 만들 예정.

그런데 여기서 주의할 점이 있음. sub-menu라는 이름의 div 안에 각각의 메뉴들인 a태그들이 들어있는데, 디폴트 상태는 display: none; 이므로 이 메뉴들을 감춰놓아야 한다. 그렇다고 .sub-menu a 에게 바로 display:none 을 줘버리면 안된다. 추후 나중에 제이쿼리에서 sub-menu를 보이게 만들어도 그 안의 자식요소들이 감춰진 상태인데 부모인 sub-menu를 보이게 한다고 뭐가 보이겠는가. 그러므로 여기선 그 부모 요소인 sub-menu만 안보이게 하면 된다.

<ul class="menu">
        <li>
            <a href="">MENU 01</a>
            <div class="sub-menu">
                <a href="#">SUB-MENU1</a>
                <a href="#">SUB-MENU2</a>
                <a href="#">SUB-MENU3</a>
                <a href="#">SUB-MENU4</a>
            </div>
        </li>
        <li>
            <a href="">MENU 02</a>
            <div class="sub-menu">
                <a href="#">SUB-MENU1</a>
                <a href="#">SUB-MENU2</a>
                <a href="#">SUB-MENU3</a>
                <a href="#">SUB-MENU4</a>
            </div>
        </li>
        
    </ul>

메뉴 구조 작성해주고 js 작성해주는데,

$('.menu li').mouseenter(function(){
    $('.sub-menu').slideDown()
})

이렇게 해버리면 두 메뉴 모두 선택요소에 해당되어서 어떤 메뉴에 마우스를 올리던간에 메뉴가 모두 열려버린다. 그렇게 때문에 요소탐색 메서드를 함께 써줘야하는 것이다.

$('.menu li').mouseenter(function(){
    $(this).children('.sub-menu').slideDown()
})
$('.menu li').mouseleave(function(){
    $(this).children('.sub-menu').slideUp()
})

$(this)는 '.menu li'가 두 개 있으니 그 중에서도 마우스가 액션을 취하는 '이' 요소를 선택한다는 것이다.

$('.menu li').mouseenter(function(){
    $(this).children('.sub-menu').slideDown()
})

그러니까 이 영역을 풀어서 해석하면
'.menu li'에 마우스가 들어오면 작동한다. 뭐를? 현재 마우스가 올라온 '.menu li'의 자식요소(그 중에서도 '.sub-menu')를 슬라이드 다운하는 것을!
가 되는데, 솔직히 나도 말하면서 완벽하게 이해한건 아니다..

안 그래도 머리 싸매고 있던 찰나 선생님이 지금은 어려울 수밖에 없다고 뒤에서 자세히 배우니까 그냥 글쿤 하고 넘어가라고 하심... 녜 쌤....

마우스가 왔다갔다 했던 액션을 기억했다가 마우스가 떠난 후에도 계속 reaction이 계속된다. 이걸 큐라고 하는데, 이 반복되는 큐를 멈춰주기 위해 stop이란 메서드를 사용한다.
일단 마우스가 올라가거나 내려가는 행동이 행해지면 그 전까지 쌓여있던 큐가 삭제되는 메서드다.

$('.menu li').mouseenter(function(){
    $(this).children('.sub-menu').slideDown().stop()
})
$('.menu li').mouseleave(function(){
    $(this).children('.sub-menu').slideUp().stop()
})

추가해줬다.

두 번째 예제를 연습해보자! 이번에는 짧다. 이번에는 버튼을 클릭하여 내용이 나오게 했을 때 다른 버튼의 class네임을 삭제하여 나중에 클릭한 버튼의 내용만 남기는 예제다!

 <div class="btn">
        <span class="active">공지사항</span>
        <span>갤러리</span>
    </div>

$('.btn span').click(function(){
    $(this).addClass('active')
    $(this).siblings().removeClass('active')
})

공지사항 내용은 처음 진입했을 때 이미 열려있어야 하므로 class="active"를 넣어준다. 그리고 다른 버튼(sibling)이 active되면 다른 버튼은 remove 클래스를 삭제하는 구문을 작성하였다. 깔끔하게 내가 클릭한 버튼의 내용만 뜨게 된다.