💡jQuery 메서드(Methods)
📌메서드 종류와 대표적인 예시
| 이펙트 | 클래스 제어 | 요소 탐색 |
|---|---|---|
| .show() | .addClass() | .children() |
| .hide() | .removeClass() | .parent() |
| .slideDown() | .toggleClass() | .siblings() |
| .slideUp() | .find() | |
| .fadeIn() | .next() | |
| .fadeOut() | .prev() | |
| .stop() |
📌보이기/감추기 메서드
| 메서드 | 설명 |
|---|---|
| .show() | 선택요소 보이기 |
| .hide() | 선택요소 감추기 |
| .toggle() | 선택요소 보이기/감추기 |
| .slideDown() | 선택요소 서서히 보이기 |
| .slideUp() | 선택요소 서서히 감추기 |
| .slideToggle() | 선택요소 서서히 보이기/감추기 |
📌페이드(fade)효과 메서드
| 메서드 | 설명 |
|---|---|
| .fadeIn(지속시간) | 선택요소를 페이드로(서서히) 나타나게 하는 효과 |
| .fadeOut(지속시간) | 선택요소를 페이드로(서서히) 사라지게 하는 효과 |
| .fadeToggle() | 선택요소를 페이드로(서서히) 사라지고 나타나게 하는 효과 |
▶️지속시간 e.g.: "fast", "slow", 500(500ms라는 의미), 2000(2s라는 의미)
📌클래스 제어 메서드
▶️클래스 제어란?
- html에 클래스를 만들었는데 css에는 해당 선택자에 대한 코드가 없는 상태에서 jQuery를 통해 클래스를 강제로 넣거나 뺄 수 있는 효과.
| 메서드 | 설명 |
|---|---|
| .addClass() | 선택요소에 클래스 넣기 |
| .removeClass() | 선택요소에 클래스 빼기 |
| .toggleClass() | 선택요소에 클래스 넣고 빼기 |
▶️클래스 제어 메서드 예시 코드
- HTML
<body>
<div class=”container”>
<a class=”show-btn” href=”#none”>보이기</a>
<a class=”hide-btn” href=”#none”>감추기</a>
<a class=”toggle-btn” href=”#none”>토글</a>
<div>Box</div>
</div>
- CSS
.container{
width: 300px;
}
a{
background-color: red;
color: #000;
text-decoration:none;
padding: 5px;
width: 70px;
display: inline-block;
text-align: center;
}
.container div{
background-color: dodgerblue;
width: 250px;
height: 300px;
margin-top: 10px;
text-align: center;
line-height: 300px;(복습:요소의 높이값만큼 line-height을 주면 가운데로 온다.)
}
.active(일반적으로 클래스를 넣고 뺄 때 사용하는 클래스명이다.){
background-color:red;
} 현재 html에는 active라는 클래스가 없기 때문에 위의 css코드에서 .active 부분을 포함해도 아무런 일이 일어나지 않는다.
이제 jQuery를 통해 active클래스를 넣고 빼 보자.
- JavaScript
$(‘.add-btn’).click(function(){
$(‘container div’).addClass(‘active’)
})
$(‘.remove-btn’).click(function(){
$(‘container div’).removeClass(‘active’)
})
$(‘.toggle-btn’).click(function(){
$(‘container div’).toggleClass(‘active’)
})
🤚주의사항:
클래스 제어 메서드 3가지의 괄호 안에 .과 함께 클래스명을 쓰면 안된다.
css에서의 클래스 표기법, 그리고 잠시 후 나올 요소 탐색 메서드와 헷갈리지 말 것!
📌요소 탐색 메서드
▶️요소 탐색이란?
- 선택 요소를 기준으로 두고 목표하는 요소를 찾는 것이다.
| 메서드 | 설명 |
|---|---|
| .children() | 선택 요소의 바로 아래 단계인 자식 요소만 선택 |
| .siblings() | 선택 요소의 형제 요소를 선택 |
▶️요소 탐색 메서드 예시 코드
- HTML
<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>
<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>
- CSS
.menu{
Padding: 0;
List-style:none;
Width:200px;
Border: 1px solid red;
Text-align:center;
}
.menu li>a /*(menu밑의 li바로 아래의 a tag자식요소들만 선택한 것임)*/{
Background-color: #000;
Color: #fff;
Display: block; /*(가로배치 되었던 요소들을 새로배치로 바꿈)*/
Text-align:center; /*(가운데정렬)*/
Padding: 5px;
}
.sub-menu{
Border: 1px solid #000;
Display:none; /*.sub menu a가 아니라 .sub-menu에 적용해야 한다.*/
}
.sub-menu a {
Display:block;
Padding: 5px;
}
- JavaScript
$(‘.menu li’).mouseenter(function(){
$(this).children(‘.sub-menu’).stop().slideDown()
});
$(‘.menu li’).mouseleave(function(){
$(this).children(‘.sub-menu’).stop().slideUp()
});
🤚this란, 현재 선택된(이 경우 mouseenter로 선택된 바로 그 클래스)를 받아오는 것이다. 코드를 이렇게 짜면 MENU-1에 마우스를 올렸을 경우 MENU-1의 SUB-MENU들을, MENU-2에 마우스를 올렸을 경우 MENU-2의 SUB-MENU들을 slideDown하게 되는 것이다.
🤚이 때 slideDown/slideUp을 해야하는 요소는 this 인 ‘.menu li’의 자식요소들이므로 .children()을 써야 한다. .children()의 괄호 사이에 아무것도 적지 않으면 .menu li의 모든 자식요소를 선택하라는 것이다.
sub-menu들만 선택하고 싶은 경우 .children(‘.sub-menu’)라고 구체적으로 작성해야 한다.
▶️선택 요소의 형제 요소 관리하기
:어떤 요소를 클릭하면 형제 요소들의 에니메이션은 제거하고 싶을 때 작성하는 코드 예시
- HTML
<div class=”btn”>
<span class=”active”>요소 1</span>
<span>요소 2</span>
</div>- CSS
.btn{
Width:300px;
}
.btn span{
Background-color: #ccc;
Padding: 5px;
Width: 100px;
Display: inline-block;
Text-align: center;
Border-radius: 5px;
}- JavaScript
$(‘.btn span’).click(function(){
$(this).addClass(‘active’) /* . 없음 주의!!(위의 내용참고)*/
$(this).siblings().removeClass(‘active’)
});