공부 노트

- 클래스 제어 메서드

    addClass() 클래스 넣기

    removeClass() 클래스 빼기

    toggleClass() 클래스 넣고빼기 토글

클래스 넣기 빼기 토글버튼과 박스를 만든다. 

박스에 active라는 클래스가 들어오면 백그라운드컬러가 변경

        .active {
            background-color: firebrick;
        }

    <div class="container">
        <a href="#none" class="add-btn">add</a>
        <a href="#none" class="remove-btn">remove</a>
        <a href="#none" class="toggle-btn">toggle</a>
        <div class="box">Box</div>
    </div>

클래스 제어 메서드 addClass removeClass toggleClass 에는

() 안에 .과 함께 클래스명을 쓰면 안된다.

addClass('active') html문서안에 active라고 적히는거라서 

ex) .클래스명을 사용하면 안된다.

$('.box').addClass('.active') -> <div class="box .active"></div> 

$('.add-btn').click(function() {
    $('.box').addClass('active');
});
$('.remove-btn').click(function() {
    $('.box').removeClass('active');
});
$('.toggle-btn').click(function() {
    $('.box').toggleClass('active');
});

- 요소 탐색 메서드 (children, siblings)

children() : 선택요소 바로 아래 단계인 자식요소 선택

siblings() : 선택요소의 형제요소 선택 (같은계층)

    <h2>요소탐색</h2>
    <ul class="menu">
        <li>
            <a href="#none">MENU-1</a>
            <div class="sub-menu">
                <a href="#none">SUB-MENU-1</a>
                <a href="#none">SUB-MENU-2</a>
                <a href="#none">SUB-MENU-3</a>
                <a href="#none">SUB-MENU-4</a>
            </div>
        </li>
        <li>
            <a href="#none">MENU-2</a>
            <div class="sub-menu">
                <a href="#none">SUB-MENU-1</a>
                <a href="#none">SUB-MENU-2</a>
                <a href="#none">SUB-MENU-3</a>
                <a href="#none">SUB-MENU-4</a>
            </div>
        </li>
    </ul>

/* menu */
.menu {
    padding: 0;
    list-style: none;
    width: 200px;
    text-align: center;
    /* border: 1px solid red; */
}
/* 메뉴 밑에 li 바로 아래있는 a만 선택 */
.menu li > a {
    display: block;
    padding: 5px;
    text-align: center;
    background-color: #000;
    color: #fff;
    border: 1px solid #ddd;
}
.sub-menu {
    display: none;
    border: 1px solid #000;
}
.sub-menu a {
    display: block;
    padding: 5px;
}

.mouseenter() 마우스가 올라갈 때

.mouseleave() 마우스가 떠날 때

.slideDown() 위에서아래로 내려오면서 show

$(this) == 자기자신 

// this == .menu li
// .menu li 밑에있는 서브메뉴.슬라이드다운
$('.menu li').mouseenter(function() {
    // stop() 메서드 : 마우스가 올라갔다가 또 한번 올라가면 그 전 애니메이션 삭제 
    // $(this).children('.sub-menu').slideDown();
    $(this).children('.sub-menu').stop().slideDown();
});
$('.menu li').mouseleave(function() {
    $(this).children('.sub-menu').stop().slideUp();
});

- .siblings() 이용 : 탭메뉴 만들기

    <h2>요소탐색2- siblings</h2>
    <div class="btn">
        <span class="active">공지사항</span>
        <span>갤러리</span>
    </div>

span클릭 -> active클래스 add (백그라운드컬러 화이트로 변경)

.btn {
    width: 300px;
    /* border: 1px solid red; */
}
.btn span {
    display: inline-block;
    width: 100px;
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    background-color: #ccc;
    cursor: pointer;
}
.btn span.active {
    background-color: #fff;
    border: 1px solid #000;
}

$('.btn span').click(function() {
	// $(this) == .btn span
    // this(span)를 클릭하면 active 클래스 추가
    $(this).addClass('active');
    
    // this(span)를 클릭 -> 자기자신(span) 의 형제요소(siblings)의 active 클래스를 삭제 
    $(this).siblings().removeClass('active');
});