jQuery - 제이쿼리의 기초, 구문, 사용 방법, 샘플 코드

제이쿼리란? (jQuery)

HTML의 클라이언트 조작을 단순화하도록 설계된 자바스크립트 라이브러리
- 한 개의 자바스크립트 파일로 존재
개발을 쉽게 할 수 있도록 디자인
- 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 상호작용 등

jQuery 호출하기

jQuery 를 사용하기 위해 jQuery 라이브러리가 담겨있는 자바스크립트 파일을 호출하여야 함
CDN 사이트에서 링크 참조 가능
- CDN : 사용자에게 콘텐츠를 제공하는 분산 서버 네트워크
- jQuery CDN 확인 링크 : https://releases.jquery.com/
설계하는 페이지에 따라 jQuery의 종류를 적절히 배치하는 것이 좋음
- Uncompressed : 라이브러리 표준 비압축 버전, 주석과 서식이 있는 전체 소스 코드가 포함되어 있어 일반적으로 가장 쉽게 읽고 수정할 수 있음, 파일 크기가 크기 때문에 페이지 로드 시간이 늘어날 수 있음
- Minified : 축소 버전, 불필요한 공백, 주석 및 변수 이름을 제거하여 크기와 성능에 최적화되었으나 읽고 수정하기가 더 어려울 수 있음, 파일 크기가 작아져 페이지 로드 시간이 개선될 수 있음
- Slim : 슬림 버전, 일반적으로 사용하지 않는 기능을 제거하여 크기에 최적화됨, 압축되지 않은 버전보다 파일 크기가 작지만 기능이 줄어들 수 있음
- Slim Minified : 슬림 버전과 축소 버전을 모두 이용한 버전, 크기와 성능 모두에 최적화됨, 중요한 기능을 유지하면서 가능한 가장 작은 파일 크기 제공함

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

구문

$(선택자).동작함수();

// 예시
// $('#myDiv').text('Hello, jQuery!');

$ : 제이쿼리를 의미, 제이쿼리에 접근할 수 있게 해주는 식별자
선택자 : 선택자를 이용하여 원하는 HTML 요소 선택
동작함수 : 동작 함수를 정의하여 선택된 요소에 원하는 동작 설정

$() 함수

// 예시
// $(document).ready( function() { alert('Hello, jQuery!'; }

제이쿼리 객체의 메소드를 사용하여 여러 동작 설정
- 제이쿼리 객체(jQuery object)
  - 선택된 HTML 요소를 제이쿼리에서 이용할 수 있는 형태로 생성한 것
  - HTML 태그 뿐만 아니라, CSS 선택자를 전달하여 특정 HTML 요소 선택 가능

Document 객체의 ready() 메소드

자바스크립트 코드는 웹 브라우저 문서의 모든 요소를 로드한 뒤에 실행하여야 함
- 문서가 로드 되기 전에 요소의 속성을 추가하는 등의 상황에서는 오류가 발생하기 때문
자바스크립트의 window.onload 와 같은 기능을 한다고 생각하면 이해가 빠름

$(document).ready( function() {
	// code
});

/*
window.onload = function() {
    // code
};
*/

사용 예시 (샘플 코드)

<!DOCTYPE html>
<html>
<head>
	<title>jQuery Example</title>
    
    // 제이쿼리 라이브러리 호출
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    // 제이쿼리 스크립트 작성
	<script>
    	// 문서가 모두 준비되면 스크립트 실행
        $(document).ready(function() {
            
            // 'myButton' 요소를 클릭할 때의 이벤트
            $('#myButton').click(function() {
            
                // 'myButton' 요소 클릭시 'myDiv' 요소의 내용 변경
                $('#myDiv').text('Hello, jQuery!');
            });
        });
    </script>
</head>

<body>
	<h1>Hello, jQuery!</h1>
    <!-- 'myButton' ID를 가진 요소, 버튼 태그 -->
	<button id="myButton">Click me!</button>
    <!-- 'myDiv' ID를 가진 요소, DIV 태그  -->
	<div id="myDiv"></div>
</body>
</html>