- 클래스 제어 메서드
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');
});
'Web > Java Script' 카테고리의 다른 글
tab menu (with jquery) #1 프로토타입 (0) | 2021.07.15 |
---|---|
js 변수와 조건문 - 20세 체크, 별점 주기(with jquery) (0) | 2021.07.14 |
제이쿼리(jQuery) 시작하기 #3 효과 메서드 (slideDown|Up, fadeIn|Out) (0) | 2021.07.10 |
제이쿼리(jQuery) 시작하기 #2 click, mouse enter 함수 (0) | 2021.07.09 |
제이쿼리(jQuery) 시작하기 #1 폴더구조, 링크 (0) | 2021.07.09 |