메서드
(method)
jQuery에서 선택자에 어떤 효과를 적용시킬지 정할 수 있다.
효과에 관련된 이펙트, 클래스를 넣었다 뺐다 하는 클래스 제어, 선택요소를 기준으로 요소를 찾는 요소 탐색 세 가지가 있다.
효과
보이기 감추기 효과
선택자를 보이게할지 안보이게 할지 등을 정한다.
-
.show(): 선택요소 보이기 -
.hide(): 선택요소 감추기 -
.toggle(): 선택요소 보이기/감추기 -
.slideDown(): 선택요소 서서히 보이기 -
.slideUp(): 선택요소 서서히 감추기 -
.slideToggle(): 선택요소 서서히 보이기/감추기
$('.show-btn').click(function(){
$('.container div').show()
})페이드 효과
-
.fadeIn(): 선택요소를 페이드로 나타나게 하는 효과 -
.fadeOut(): 선택요소를 페이드로 사라지게 하는 효과 -
.fadeToggle(): 선택요소를 페이드로 나타나고 사라지게 하는 효과
이런 효과들을 나타내는 메서드 뒤의 괄호 안에는 효과들이 발동되는 속도를 써넣는다. (넣지 않으면 기본값)
숫자, 또는 단어를 넣을 수 있는데 숫자는 그냥 써넣고 단어를 넣을 때만 fadeIn('fast')처럼 ''안에 넣어야 한다.
$('.show-btn').click(function(){
$('.container div').fadeIn()
})
클래스 제어
html 문서상에 클래스를 만들어놨으면 그 클래스를 빼거나 넣거나, html상엔 없지만 CSS에는 클래스가 있다면 그걸 또 html 문서에 넣거나 빼는 것을 클래스 제어라 한다.
-
.addClass(): 선택요소에 클래스 넣기 -
.removeClass(): 선택요소에 클래스 빼기 -
.toggleClass(): 선택요소에 클래스 넣고 빼기
괄호 안엔 넣고 뺄 class명을 넣는다.
일반적으로 클래스를 넣고 뺄 때 사용하는 클래스명은 active이다.
$('.add-btn').click(function(){
$('.container div').addClass('active')
})
*주의
클래스 제어 메서드 3가지의 괄호 안에.과 함께 클래스명을 써서는 안된다.$('.add-btn').click(function(){ $('.container div').addClass('.active') <--- X })
요소 탐색
탐색 메서드. 메서드 앞의 선택요소가 기준이 된다.
-
.children(): 선택요소의 바로 아래 단계인 자식요소만 선택 -
.siblings(): 선택요소의 형제요소 선택
선택요소에 this 라는 속성을 넣으면 같은 속성명을 가진 여러 선택요소 중 사용자가 선택한(마우스를 올리거나 클릭 등) 선택요소만 메서드를 적용시킬 수 있다.
$('선택자').함수(function(){
$('선택 요소').요소탐색('지정 요소').메서드()
})선택요소의 요소탐색시 탐색할 요소가 하나밖에 없다면 지정요소를 넣지 않아도 되지만 여러개 중에 하나를 지정하려면 탐색하려는 지정 요소명을 괄호안에 써넣어야 한다.
추가로 함수가 click이 아닌 mouseenter, mouesout등 마우스가 지나가기만 해도 동작하는 경우는, 사용자가 마우스를 빠르게 왔다갔다 했을 경우에도 동작하므로 빠른 반복시에는 사용자가 멈춘 후에도 앞에서 받았던 횟수만큼 전부 실행하므로 오류 등이 생길 수 있다.
이것을 방지하기 위해
.stop()메서드를 추가해서 동작이 시작하고 끝나는동안 받은 정보들을 끝날 때 삭제해서 한번만 동작하게 할 수도 있다.
$('.menu li').mouseenter(function(){
$(this).children('.sub-menu').stop().slideDown();
})
실습
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제이쿼리 메서드</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<!-- 요소 show/hide (slide)효과 -->
<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>
<!-- <div class="container">
<a class="add-btn" href="#none">넣기</a>
<a class="remove-btn" href="#none">빼기</a>
<a class="toggle-btn" href="#none">토글</a>
<div>Box</div>
</div> -->
<!-- ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ -->
<!-- 요소 탐색 메서드 (children) -->
<!-- <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> -->
<!-- 요소 탐색 메서드 (siblings) -->
<!-- <div class="btn">
<span class="active">공지사항</span>
<span>갤러리</span>
</div> -->
<script src="./assets/js/script.js"></script>
</body>
</html>css
/* 요소 show/hide (slide)효과 */
.container{
width: 300px;
}
a{
background-color: #ddd;
color: #000;
text-decoration: none;
padding: 5px;
width: 70px;
display: inline-block;
text-align: center;
border-radius: 5px;
}
.container div {
background-color: dodgerblue;
width: 250px;
height: 300px;
margin-top: 10px;
color: #fff;
text-align: center;
line-height: 300px;
}
.container div.active{
background-color: red;
}
/* ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
/* 요소 탐색 메서드(children) */
/*
.menu{
padding: 0;
list-style: none;
width: 200px;
text-align: center;
}
.menu li > a{
background-color: black;
color: white;
display: block;
padding: 5px;
border: 1px solid gray;
}
.sub-menu{
border: 1px solid black;
display: none;
}
.sub-menu a{
display: block;
padding: 5px;
} */
/* 요소 탐색 메서드(siblings) */
/*
.btn{
width: 300px;
}
.btn span{
background-color: #ccc;
padding: 5px;
width: 100px;
display: inline-block;
text-align: center;
border-radius: 5px;
cursor: pointer;
}
.btn span.active{
background-color: #fff;
border: 1px solid #000;
} */js(jQuery)
// ㅡshow/hide효과ㅡ
// $('.show-btn').click(function(){
// $('.container div').show()
// })
// $('.hide-btn').click(function(){
// $('.container div').hide()
// })
// $('.toggle-btn').click(function(){
// $('.container div').toggle()
// })
// ㅡslide효과ㅡ
// $('.show-btn').click(function(){
// $('.container div').slideDown()
// })
// $('.hide-btn').click(function(){
// $('.container div').slideUp()
// })
// $('.toggle-btn').click(function(){
// $('.container div').slideToggle()
// })
// ㅡfade효과ㅡ
$('.show-btn').click(function(){
$('.container div').fadeIn()
})
$('.hide-btn').click(function(){
$('.container div').fadeOut()
})
$('.toggle-btn').click(function(){
$('.container div').fadeToggle()
})
// ㅡclass 넣고 빼기ㅡ
// $('.add-btn').click(function(){
// $('.container div').addClass('active')
// })
// $('.remove-btn').click(function(){
// $('.container div').removeClass('active')
// })
// $('.toggle-btn').click(function(){
// $('.container div').toggleClass('active')
// })
// ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
// 요소 탐색 메서드(children)
// $('.menu li').mouseenter(function(){
// $(this).children('.sub-menu').stop().slideDown();
// })
// $('.menu li').mouseout(function(){
// $(this).children('.sub-menu').stop().slideUp();
// })
// 요소 탐색 메서드(siblings)
// $('.btn span').click(function(){
// $(this).addClass('active')
// $(this).siblings().removeClass('active')
// })