📝 jQuery란?

기존에 복잡했던 클라이언트 측 HTML 스크립팅(JS)을 간소화하기 위해 고안된 Javascript Library이다.
(* 라이브러리(library) : 프로그램, 프로그래밍 언어에 없는 추가적인 기능)

📌 단점

jQuery 라이브러리를 다운로드 받아서 사용하므로 로딩 속도 느림
-> 순수 JS보다 속도가 조금 느리다.

📌 jQuery 라이브러리 연결 방법

jQuery 라이브러리는 .js 확장자로 작성되어 있어 script 태그를 이용하여 연결할 수 있다.

💡 jQuery 라이브러리를 다운로드 받아서 직접 연결

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

• jQuery 공식 홈페이지
  https://jquery.com/
  
  
  
• jQuery CDN 코드 제공 페이지
  https://code.jquery.com/
  

🔎 연결 방법

1. js 폴더에 jquery 파일을 다운로드받아 넣는다.

2. html 파일에 연결 코드를 작성한다. (body 태그 하단)

	<!-- <script src="js/jquery-3.7.0.min.js"></script> -->

💡 CDN(Content Delivery Network)을 이용한 연결 방법

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

🔎 연결 방법

1. jQuery 공식 홈페이지에서 '마우스 우클릭 - 다른 이름으로 링크 저장'을 한다.

2. html 파일에 연결 코드를 작성한다. (body 태그 하단)

    <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>

---

📌 JS와 jQuery 차이점

JS는 속성을 여러 줄로 나누어 각각 작성해 주어야 하지만, jQuery는 한 줄로 작성이 가능하다!

🔎 코드로 살펴보기

• html

    <button id="jsBtn">JS 버튼</button>
    <button id="jQueryBtn">jQuery 버튼</button>

• js

// JS와 jQuery 차이점

// 배경 : black
// 글자색 : yellow
// 글자 크기 : 20px

// javascript
document.querySelector("#jsBtn").addEventListener("click", e => {
    e.target.style.backgroundColor = "black";
    e.target.style.color = "yellow";
    e.target.style.fontSize = "20px";
    // 화살표 함수에서는 this 사용 불가, e.target 써야 함
})

// jQuery
$("#jQueryBtn").on("click", function(){
    $(this).css("backgroundColor", "black").css("color", "yellow").css("fontSize", "20px");
});

🔎 출력 화면

-> 버튼을 눌렀을 때 버튼 배경 색과 글자 색이 변경된다.

---

📌 HTML 문서 해석 순서와 window.onload / ready()

HTML 문서는 기본적으로 위 -> 아래 순서대로 해석된다.
-> 아랫쪽에 작성되어 미해석된 코드는 윗쪽 코드에서 호출할 수 없다!

• window.onload
  중복 작성 시 앞서 작성한 window.onload를 덮어 씌움

• ready()
  중복 작성 시 작성한 모든 내용이 적용됨

🔎 코드로 살펴보기

• html

    <!-- jQuery를 사용하기 위해서는 라이브러리 로딩이 우선적으로 진행되어야 한다. -->
    <script src="js/01_jQuery개요.js"></script>

    <!-- ready() 함수 확인 테스트 -->
    <h1 id="readyTest">111</h1>

• js

// window.onload 확인
window.onload = function(){ // 문서 로딩이 완료된 후 수행
    console.log("1");
}

// window.onload 중복 작성 -> 앞서 작성한 window.onload를 덮어 씌움
window.onload = function(){
    console.log("3");
}

console.log("2");

// ready() 함수 확인
$(document).ready(function(){
    $("#readyTest").on("click", function(){
        alert("클릭이 되었습니다.")
    })
})

// ready() 중복 작성 -> 작성한 모든 내용이 적용됨
$(document).ready(function(){
    document.getElementById("readyTest").style.color = "pink";
})

🔎 출력 화면

• 라이브 서버
  

• 콘솔창
  

-> window.onload는 중복 작성 시 이전 내용을 덮어 씌운 모습을 볼 수 있다.
ready()는 중복 작성 시 작성한 모든 내용이 적용된다.

---

💡 window.onload (JS) / ready() (jQuery) 공통점

• 윗쪽에 코드가 작성되어도 제일 마지막에 해석된다. (문서 로딩이 끝나는 시점)
  - 장점 : 코드가 미해석되어 오류가 발생하는 경우가 없어짐
  - 단점 : 먼저 해석되는 코드가 너무 크면 수행되는 시간이 뒤쳐질 수 있음

💡 window.onload / ready() 차이점

• window.onload는 페이지 내에서 딱 한번만 작성할 수 있다.
• ready()는 여러번 작성이 가능하다.

💡 ready() 작성 방법

1) jQuery(document).ready(function(){ 코드; });

2) $(document).ready(function(){ 코드; });
('$' 기호는 jQuery를 의미한다.)

3) $(function(){ 코드; });

🔎 코드로 살펴보기

• js

// ready() 함수 다른 형태
$(function(){
    console.log("ready() 함수의 다른 형태");
})

// ready() + 화살표 함수
$(() => {console.log("이렇게도 됩니다,")})

🔎 출력 화면

• 콘솔창