📌 1. jQuery란?
📎 jQuery란?
jQuery는 HTML의 DOM 조작과 이벤트 제어, 애니메이션 그리고 Ajax까지 웹 화면을 다루는
자바스크립트 라이브러리이다.
📎 jQuery 기본 특징
👉 DOM과 관련된 처리를 쉽게 구현 할 수 있다.
👉 규칙성을 가지고 이벤트를 처리 할 수 있다.
👉 애니메이션 효과를 쉽게 만들 수 있다.
👉 Ajax 처리 방식을 편리하게 사용할 수 있다.
👉 호환성이 좋아 거의 모든 웹브라우저에 대응이 가능하다.
👉 관련 플러그인의 종류가 매우 많고 플러그인을 직접 구현하거나 확장이 가능하다.
📎 jQuery 중요 특징
👉 javascript에 비해 현저하게 코드 양이 적다.
👉 중간에 html이라는 메소드가 껴있어도, 뒤에다 점을 붙여 css를 사용할 수 있다.
👉 jQuery가 제공하는 모든 메소드들은 그 메소드가 리턴될 때, 그 메소드가 제어했던 대상을 리턴해준다.
👉 꼬리에 꼬리를 물면서 계속 뒤에다 여러가지 메소드를 붙여넣을 수 있다. 사슬처럼 얽혀있어서 체인(chain)이라고 한다.
📎 주어와 서술어
- 주어는 제어하는 대상
$로 시작해서 그 인자로 제어 대상을 전달한다.- 거기에는 css 셀렉터로 해당되는
문자열이 들어올 수도 있다..을 찍고method1()을 입력하게 되면, 이 제어 대상의 method1()의 어떤 명령을 한꺼번에 내릴 수가 있다.
| $(제어대상) | .method1().method2() |
|---|---|
| 주어 | 서술어 |
📌 2. jQuery 사용 방법
📎 jQuery 사용방법1
👉 jQuery 라이브러리를 https://jquery.com/download/ 사이트에서 다운로드 한 뒤 참조하여 사용할 수 있다.
- 다운로드시 참고
- uncompressed: 기본 파일
- compressed: 압축형 (일반적으로 압축형 사용)
👉 <script src="jQuery파일 경로"></script> 문법을 통하여서 jQuery를 참조하여 사용한다.
👉 jQuery파일 접근 경로는 일반 파일의 접근 경로와 같다.
📎 jQuery 사용방법1 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery 사용방법1</title>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("body").css("background" , "cyan");
});
</script>
</head>
<body>
</body>
</html>📎 jQuery 사용방법2
👉 jQuery라이브러리를 다운로드 받지 않고 사이트에서 직접 참조하여 사용할 수 있다.
- 다운로드시 참고
- uncompressed: 기본 파일
- compressed: 압축형 (일반적으로 압축형 사용)
👉 <script src="연결url"></script> 문법을 통하여서 jQuery를 참조하여 사용한다.
👉 https://code.jquery.com/jquery/ 에서 참조 url을 확인 할 수 있으며 인터넷 접속 불가시 사용이 불가하다.
📎 jQuery 사용방법2 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery 사용방법2</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$().ready(function(){
$("body").css("background","red");
});
</script>
</head>
<body>
</body>
</html>