제이쿼리 jQuery 기초
WEB기초
제이쿼리 jQuery 기초
1. 제이쿼리 jQuery 란?
제이쿼리(jQuery)란 HTML의 DOM 조작, 이벤트 제어 등을 통해 웹 화면의 다양한 동작들을 손 쉽게 구현할 수 있도록 도와주는 자바스크립트 라이브러리이다.
지금은 Angular, React, Vue 등등 화면과 관련된 다양한 기술들이 많이 발전했기 때문에 jQuery를 더이상 사용하지 않는 추세가 되었지만, 이제 막 WEB 개발 입문 단계에 들어온 초보 개발자들에게는 웹 동작을 구현하는 것에 큰 어려움이 있기 때문에 jQuery가 큰 도움이 된다.
2. 제이쿼리 jQuery 기본 문법
$(선택자).동작함수();
$(선택자).동작함수1().동작함수2();원하는 대상을 선택자 부분에 넣고, 원하는 동작을 수행하는 동작함수를 위 문법대로 써주면 대상과 동작이 손쉽게 연결된다.
3. 제이쿼리 jQuery 선택자
3.1. 타입 선택자
$('button').동작함수()
$('p').동작함수()이렇게 타입이나 태그 자체를 그대로 선택할 수도 있다.
3.2. 클래스(class) 선택자
$('.post-btn').동작함수().을 앞에 붙여주고 클래스명을 붙여주면 해당 클래스를 선택할 수 있다. CSS에서 클래스 선택자와 동일하다.
3.3. 아이디(id) 선택자
$('#post-btn').동작함수()#을 앞에 붙여주고 아이디명을 붙여주면 해당 아이디를 선택할 수 있다. CSS에서 아이디 선택자와 동일하다.
3.4. 다중 선택자 (A, B)
$('.post-btn, .delete-btn').동작함수()이렇게 동시에 여러개를 선택할 수도 있다.
3.5. 자식 선택자 (A > B)
$('.posting-box > button').동작함수()부모클래스 아래에 있는 자식들도 선택할 수 있다.
4. 제이쿼리 jQuery 사용 예시
(...생략...)
<!-- 제이쿼리 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
function logInOpenClose() {
$("#log-in-box").toggle;
}
</script>
</head>
<body>
<div class="main">
<h1>메인 페이지</h1>
<button onclick="logInOpenClose()">로그인</button>
</div>
<!-- 로그인 박스 -->
<div class="log-in-box" id="log-in-box">
(...생략...)위 코드를 분석해보자.
-
우선
<body>의<button>을 보면onclick으로logInOpenClose()라는 함수와 연결되어있다. -
그리고 위로 올라가서
<script>부분을 보면logInOpenClose()라는 함수는
아이디(id)가log-in-box인 요소를 선택하여toggle동작을 수행하도록 한다. -
jQuery에서toggle은 보이는 것은 보이지 않게, 보이지 않는 것은 보이게 만들어주는 display 반전효과를 주는 기능이다. 즉 버튼을 클릭할 때마다log-in-box가 나타났다가, 사라졌다가 하는 동작을 하도록 하는 것이다.
