ON/JavaScript
[jQuery ] jQuery 란 ?
박도비
2023. 6. 27. 00:15
728x90
📌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() 작성 방법
- jQuery(document).ready(function(){코드});
- $(document).ready(function(){코드});
- $(function(){코드})
* $ 기호는 jQuery를 의미한다!
728x90