얼레벌레
jquery 메서드 본문
jquery 사용법
$('선택자').함수(function(){
$('선택요소').메서드();
})
효과 메서드
▪️ show(), hide(), toggle() : 나타나고, 사라지고, 토글
▪️ slideDown(), slideUp(), slideToggle() : 서서히 내려오고, 서서히 올라가고, 서서히 토글
▪️ fadeIn(), fadeOut(), fadeToggle() : opacity가 진해지고, opacity가 없어지고, opacity 토글
❗️괄호 사이에 ms단위의 초를 기재해 시간조절 가능
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>jquery</title>
</head>
<body>
<div class="container">
<div class="content">
<a href="#none">show</a>
<a href="#none">hide</a>
<a href="#none">toggle</a>
<div class="box1">Box 1</div>
</div>
<div class="content">
<a href="#none">slideDown</a>
<a href="#none">slideUp</a>
<a href="#none">slideToggle</a>
<div class="box2">Box 2</div>
</div>
<div class="content">
<a href="#none">fadeIn</a>
<a href="#none">fadeOut</a>
<a href="#none">fadeToggle</a>
<div class="box3">Box 3</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script src="custom.js"></script>
</body>
</html>a {
text-decoration: none;
color: #000;
display: inline-block;
padding: 5px;
background-color: lightgrey;
border-radius: 3px;
width: 80px;
text-align: center;
}
.container .content{
padding: 5px 0;
}
.container .content div {
height: 100px;
width: 250px;
line-height: 100px;
text-align: center;
font-size: 25px;
margin-top: 10px;
color:bisque;
display: none;
}
.box1{
background-color: dodgerblue;
}
.box2{
background-color: darksalmon;
}
.box3{
background-color:indianred;
}// jquery 효과 메서드
// show(), hide(), toggle()
$('.content:nth-child(1) a:nth-child(1)').click(function(){
$('.container .content:nth-child(1) div').show()
})
$('.content:nth-child(1) a:nth-child(2)').click(function(){
$('.container .content:nth-child(1) div').hide()
})
$('.content:nth-child(1) a:nth-child(3)').click(function(){
$('.container .content:nth-child(1) div').toggle()
})
// jquery 효과 메서드
// slideDown(),slideUp(),slideToggle()
$('.content:nth-child(2) a:nth-child(1)').click(function(){
$('.container .content:nth-child(2) div').slideDown()
})
$('.content:nth-child(2) a:nth-child(2)').click(function(){
$('.container .content:nth-child(2) div').slideUp()
})
$('.content:nth-child(2) a:nth-child(3)').click(function(){
$('.container .content:nth-child(2) div').slideToggle()
})
// jquery 효과 메서드
// fadeIn(), fadeOut(), fadeToggle() : opacity가 연해지고 진해지는 느낌
// 괄호 안에 속도를 넣을 수 있음=> 따옴표 없어야하고 ms단위. 혹은 단어('fast','slow')
$('.content:nth-child(3) a:nth-child(1)').click(function(){
$('.container .content:nth-child(3) div').fadeIn()
})
$('.content:nth-child(3) a:nth-child(2)').click(function(){
$('.container .content:nth-child(3) div').fadeOut()
})
$('.content:nth-child(3) a:nth-child(3)').click(function(){
$('.container .content:nth-child(3) div').fadeToggle(1000)
})클래스 제어 메서드
▪️ addClass() : 선택요소에 클래스 넣기
▪️ removeClass() : 선택요소에 클래스 제거
▪️ toggleClass() : 선택요소에 클래스 넣고 빼기(토글)
❗️ 괄호사이에 class="<여기>"에서 <여기>에 들어가는 내용이 들어감. 따라서 css선택자처럼 .을 함께 적으면 안된다!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>jquery Class method</title>
</head>
<body>
<div class="container">
<a href="#none">addClass</a>
<a href="#none">removeClass</a>
<a href="#none">toggleClass</a>
<div>Box</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script src="custom.js"></script>
</body>
</html>body{
display: flex;
justify-content: center;
}
.container{
width: 400px;
text-align: center;
}
a{
text-decoration: none;
color: #000;
width: 100px;
display: inline-block;
background-color: lightgrey;
padding: 10px;
text-align: center;
border-radius: 5px;
font-size: 18px;
}
.container div{
width: 400px;
height: 300px;
background-color: coral;
margin-top: 15px;
text-align: center;
line-height: 300px;
font-size: 36px;
color:blanchedalmond;
border-radius: 10px;
display: none;
}
.container div.active{
/* .active만 사용하면 안됨! display:none;을
display:block;으로 덮어쓰는 상황이라 앞의 선택자도 동일해야 한다*/
display: block;
}$('.container a:nth-child(1)').click(function(){
$('.container div').addClass('active')
})
$('.container a:nth-child(2)').click(function(){
$('.container div').removeClass('active')
})
$('.container a:nth-child(3)').click(function(){
$('.container div').toggleClass('active')
})+ 반복되는 경우 stop()메서드 사용 => 이전 애니메이션이 끝나지 않았을 때 계속 실행시 앞선 애니메이션을 취소함
요소탐색메서드
▪️ children() : 선택요소의 바로 아래 단계인 자식요소만 선택
▪️ siblings() : 선택요소의 형제요소 선택
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>jquery 요소탐색메서드</title>
</head>
<body>
<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>
<div class="btn">
<span class="active">공지사항</span>
<span>갤러리</span>
</div>
<script src="jquery-1.12.4.js"></script>
<script src="custom.js"></script>
</body>
</html>a{
color: black;
text-decoration: none;
display: block;
}
ul{
list-style: none;
}
li{
width: 200px;
text-align: center;
}
.menu li > a{
color: #fff;
width: inherit;
padding: 5px 0;
background-color: #000;
}
.sub-menu{
border: 1px solid #000;
display: none;
}
.sub-menu a{
padding: 5px 0;
}
.btn{
width: 280px;
text-align: center;
}
.btn span {
display: inline-block;
text-align: center;
width: 70px;
border: 1px solid #000;
border-radius: 5px;
padding: 3px 0;
background-color: lightgrey;
cursor: pointer;
}
.btn span.active{
background-color: #fff;
}$('.menu li').mouseenter(function(){
$(this).children('.sub-menu').stop().slideDown()
})
$('.menu li').mouseleave(function(){
$(this).children('.sub-menu').stop().slideUp()
})
$('.btn span').click(function(){
$(this).addClass('active')
$(this).siblings('.btn span').removeClass('active')
})
'HTML+CSS' Related Articles
more
Comments