jQuery
오픈 소스 기반의 자바스크립트 라이브러리. 웹 페이지에 다양한 효과나 연출을 적용할 수 있다. CSS에서도 유사하게 만들 수 있지만, 짧고 단순한 코드로도 쉽게 적용할 수 있다.
제이쿼리 버전 3까지 나왔지만 제이쿼리 버전 2와 3은 둘다 익스플로어 9 이상에서만 동작하므로 현재까지 대부분의 웹사이트들은 제이쿼리 버전 1(최신 버전: jQuery 1.12.4)을 사용하고 있다.
구문
기본적인 구문은
$('CSS 선택자').함수(function(){실행구문;});
이고 세미콜론은 생략가능하다.
하지만 주로 사용되는 형태는 실행구문 안에도 다른 jQuery 구문이 들어간
$('선택자').함수(function(){
$('선택자').메서드()
})으로 사용된다.
- 선택자 : 효과를 줄 태그, 구문 등 어디에 실행시킬지
- 함수 : 효과를 줄 태그, 구문 등에서 실행시킬 구문을 어떤 조건에서 실행시킬지(클릭하거나, 마우스를 올렸다 뗐다 등)
- 메서드 : 어떤 효과를 줄지
*jQuary 메서드 중 단어2개가 붙어서 사용되는 경우에 2번째 단어 첫글자는 대문자로 표시한다
함수의 종류
대표적인 제이쿼리 함수 세가지
-
click : 마우스로 클릭했을 때
레이어팝업(모달창) 띄울 때 사용한다. -
mouseenter : 마우스가 위로 올라갔을 때 (CSS의 hover 속성과 유사)
-
mouseleave : 마우스가 위로 올라갔다가 뗄때 -> 그래서 주로 mouseenter 와 함께 쓰이는 경우가 많다.
네비게이션을 만들때 사용한다.
a태그 속성
herf=""쌍따옴표 안에 아무것도 없으면 제이쿼리가 작동하지 않는다.
-> 그래서 하이퍼링크를 걸 필요가 없다면 링크 자리에 임시로#none을 넣어놓는다.
실습
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>
<!-- <a class="show-btn" href="#none">보이기</a>
<a class="hide-btn" href="#none">감추기</a>
<p>
태그선택자 a를 클릭했습니다.
</p> -->
<!-- 제이쿼리 함수 -->
<a class="show-btn" href="#none">보이기</a>
<a class="hide-btn" href="#none">숨기기</a>
<div class="box1">Box1</div>
<hr>
<a class="btn" href="#none">보이기/숨기기</a>
<div class="box2">Box2</div>
<script src="./assets/js/script.js"></script>
</body>
</html>css
a{
display: inline-block;
color: #000;
text-decoration: none;
background-color: #ddd;
width: 100px;
text-align: center;
padding: 5px;
}
.btn{
width: 200px;
}
div{
background-color: dodgerblue;
height: 200px;
margin-top: 10px;
width: 230px;
color: #fff;
text-align: center;
line-height: 200px;
display: none;
}js(jQuery)
// $('p').css({'display':'none'});
// $('.show-btn').click(function(){
// $('p').css({'display':'block'});
// });
// $('.hide-btn').click(function(){
// $('p').css({'display':'none'});
// });
$('.show-btn').click(function(){
$('.box1').show()
})
$('.hide-btn').click(function(){
$('.box1').hide()
})
$('.btn').mouseenter(function(){
$('.box2').show()
})
$('.btn').mouseleave(function(){
$('.box2').hide()
})실행결과
