[jQuery] jQuery란? / jQuery 라이브러리 이용법
jQuery
jQuery는 이벤트 처리 및 태그 조작 기능을 제공하는 자바스크립트 라이브러리이다.
jQuery를 사용하기 위해서는 저 script 태그를 사용하여 jQuery 라이브러리 파일을 웹문서에 포함시켜야 한다.
→ https://jquery.com/ 사이트 참조
방법1)
jQuery 라이브러리 파일을 다운로드 받아 현재 서버의 자원으로 저장하여 웹문서에 포함시킨다.
→ 1.X : IE9 이하, 2.X 또는 3.X : IE10 이상
→ 미압축파일(uncompressd) : 라이브러리 파일 변경 가능, 압축파일(compressd) : 라이브러리 파일 변경 불가능
download >> Download the compressed, production jQuery 3.7.0 >> 우클릭 : 다른 이름으로 링크 저장
>> 해당 파일을 jquery 폴더에 붙여넣기 >> script 태그에 jQuery 라이브러리 파일을 웹문서에 포함시키기
<script src="jquery-3.7.0.min.js"></script>
방법2)
CDN 이용
CDN 서버에 저장된 jQuery 라이브러리 파일을 제공받아 웹문서에 포함시킬 수 있다.
CDN(Contents Delivery Network) Server : 대용량의 콘텐츠를 빠르고 안정적으로 제공하는 서버
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
jQuery 라이브러리를 이용하는 방법
: CSS 선택자로 태그(엘리먼트)를 검색하여 jQuery 객체를 생성하여 jQuery 객체의 메소드를 호출하고 필요한 기능을 구현해야 한다.
→ 모든 태그가 DOM Tree에 저장되야만 jQuery 라이브러리 사용이 가능하다.
[html 태그]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
<h1>jQuery 사용</h1>
<hr>
<div>Hello, jQuery!!!</div>
<div>Hello, jQuery!!!</div>
<div>Hello, jQuery!!!</div>
</body>
</html>
[script 태그]
1. script 태그를 head에 사용할 경우
1-1) window.onload 이벤트 사용하는 방법
window 객체가 메모리에 모두 저장된 후 실행될 이벤트 처리 함수를 등록하면 Dom Tree가 완성된다.
window.onload=function() {
alert("window.onload 이벤트에 의해 실행되는 명령1");
}
window.onload=function() {
alert("window.onload 이벤트에 의해 실행되는 명령2");
}//window.onload 이벤트에 의해 실행되는 명령2 >> 한번만 호출 가능
1-2) jQuery 객체를 생성하여 메소드를 호출하는 방법
형식) jQuery(Selector|JavaScriptObject).method(value, value, ...);
jQuery(document).ready(callback) : document 객체가 준비(완성)되면 콜백함수를 호출하는 메소드
→ document 객체가 준비된 상태는 Dom Tree가 완성된 상태로, 콜백함수에서 jQuery 라이브러리 사용이 가능하다.
→ window.onload 이벤트 리스너 속성을 사용하는 방법보다 가독성이 좋고, 객체의 메소드 이므로 여러번 호출이 가능하다는 장점이 있다.
jQuery(document).ready(function() {
alert("document 객체가 준비된 상태인 경우 실행될 명령1");
});
jQuery(document).ready(function() {
alert("document 객체가 준비된 상태인 경우 실행될 명령2");
}); //>> 여러번 호출 가능
예시)
jQuery(document).ready(function() {
jQuery("div").css("color", "red");
});
2) script 태그를 body에 사용할 경우 - 권장
script 태그를 body의 마지막 자식태그로 선언하면 document 객체가 준비된 상태와 동일하므로
jQuery(document).ready() 메소드의 콜백함수를 이용하지 않아도 jQuery 라이브러리 사용이 가능하다.]
예시)
jQuery("div").css("color", "red");
jQuery 함수 대신 $사용이 가능하다.
$("div").css("color", "red");
