[jQuery ] jQuery 란 ?

📌jQuery

🌝 기존에 복잡했던 클라이언트 측 HTML 스크립팅(JS)을 간소화하기 위해 고안된 Javascript Library이다.

( * 라이브러리(library) : 프로그램, 프로그래밍 언어에 있는 추가적인 기능 )

🌚 단점 : jQuery 라이브러리를 다운로드 받아서 사용 -> 로딩속도 느림 (순서 JS보다 속다가 조금 느림)

 

📌jQuery연결방법

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

 

- 장점 : 서버 컴퓨터에 라이브러리가 존재하기 때문에 연결 속도가 빠름

- 단점 : 폴더 구조 변경 시 경로가 꼬이게되는 문제가 발생할 수 있다.

 

 - jQuery 공식 홈페이지 : https://jquery.com/

 

 

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

 

 

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

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

 

 

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

 - 장점 : 언제 어디서든 jQuery를 이용할 수 있다.

- 단점 : 온라인 환경에서 이용 가능. 인터넷 속도에 따라 지연이 될수 있다.

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

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>


// 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 (JS) / ready() (jQuery) 공통점

윗쪽에 코드가 작성되어도 제일 마지막에 해석된다. (문서 로딩이 끝나는 시점)

- 장점 : 코드가 미해석되어 오류가 발생하는 경우가 없어짐
- 단점 : 먼저 해석되는 코드가 너무 크면 수행되는 시간이 뒤쳐질 수 있음

 

🔊 window.onload / ready() 차이점

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

 

💡 ready() 작성 방법 

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

* $ 기호는 jQuery를 의미한다!