jQuery 개요

🏹 jQuery

자바스크립트 언어를 쉽게 사용할 수 있도록 단순화한 오픈소스 기반의 라이브러리
적은 양의 코드로 빠르고 풍부한 기능을 제공한다는 장점이 있으나
jQuery 라이브러리를 다운로드 받아 사용하여 속도가 느리다는 단점이 있음

🏹 jQuery 라이브러리 연결 방법

1) jQuery 라이브러리 다운로드 후 직접 연결

• 장점 : 서버 컴퓨터에 라이브러리가 존재하기 때문에 연결 속도가 빠름
• 단점 : 폴더 구조 변경 시 경로가 꼬이는 문제 발생

2) CDN (Content Delivery Network)

• 장점 : 언제 어디서든 jQuery 이용 가능
• 단점 : 온라인 환경에서 이용할 수 있기 때문에 인터넷 속도에 따라 지연될 수 있음

  💥 주의 : 동일한 라이브러리를 동시에 연결하는 경우 충돌이 발생할 수 있음!

🏹 CDN을 이용한 jQuery 연결

1) jQuery CDN에서 버전에 맞는 jQuery Code Integration 복사

• uncompressed: 압축되지 않은 버전으로 파일 크기가 큼
• minified: 불필요한 공백, 줄 바꿈, 주석이 제거된 압축된 버전
• slim: jQuery에서 일부 기능(AJAX 등)이 제외된 경량 버전

2) HTML 파일에 복사한 코드 붙여넣기

• integrity: 특정 스크립트 파일의 해시 값을 포함해 파일이 변경되지 않았는지 검증
• crossorigin: CORS 외부 요청 설정
  🔍 src 속성만으로도 사용 가능!

🚩 소스코드 - JS와 jQuery의 작성법 차이

// JS 코드
document.getElementById("btn").addEventListener("click", function() {
    this.style.backgroundColor = "yellow";
});


// jQuery 코드
$("#btn").on("click", function() {
    $(this).css("backgroundColor", "yellow");
});