기존에 복잡했던 클라이언트 측 HTML 스크립팅(JS)을 간소화하기 위해 고안된 Javascript Library이다.
(* 라이브러리(library) : 프로그램, 프로그래밍 언어에 없는 추가적인 기능)
jQuery 라이브러리를 다운로드 받아서 사용하므로 로딩 속도 느림
-> 순수 JS보다 속도가 조금 느리다.
jQuery 라이브러리는 .js 확장자로 작성되어 있어 script 태그를 이용하여 연결할 수 있다.
- jQuery 공식 홈페이지
https://jquery.com/
- jQuery CDN 코드 제공 페이지
https://code.jquery.com/
<!-- <script src="js/jquery-3.7.0.min.js"></script> -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
JS는 속성을 여러 줄로 나누어 각각 작성해 주어야 하지만, jQuery는 한 줄로 작성이 가능하다!
<button id="jsBtn">JS 버튼</button>
<button id="jQueryBtn">jQuery 버튼</button>
// 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
중복 작성 시 앞서 작성한 window.onload를 덮어 씌움
ready()
중복 작성 시 작성한 모든 내용이 적용됨
<!-- jQuery를 사용하기 위해서는 라이브러리 로딩이 우선적으로 진행되어야 한다. -->
<script src="js/01_jQuery개요.js"></script>
<!-- ready() 함수 확인 테스트 -->
<h1 id="readyTest">111</h1>
// 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()는 중복 작성 시 작성한 모든 내용이 적용된다.
1) jQuery(document).ready(function(){ 코드; });
2) $(document).ready(function(){ 코드; });
('$' 기호는 jQuery를 의미한다.)
3) $(function(){ 코드; });
// ready() 함수 다른 형태
$(function(){
console.log("ready() 함수의 다른 형태");
})
// ready() + 화살표 함수
$(() => {console.log("이렇게도 됩니다,")})