◈ script 태그를 사용하여 jQuery 라이브러리 파일을 웹문서에 포함해야만 jQuery 관련 기능 사용 가능
→ https://www.jquery.com 사이트 참조
🎨jQuery 라이브러리 파일을 다운로드 받아 현재 서버의 자원으로 저장하여 웹문서에 포함
→ 1.X : IE9 이하, 2.X or 3.X : IE10 이상
→ 미압축파일(uncompressed) : 라이브러리 파일 변경 가능, 압축파일(minified) : 라이브러리 파일 변경 불가능
─────────────────────────────────────
1. www.jquery.com → Download
2. Download the compressed, production jQuery 3.6.1 오른쪽 클릭 → 다른 이름으로 링크 저장
3. 저장 파일 jQuery 폴더에 옮기기
4. eclipse에 아래 내용 입력<script type="text/javascript" src="jquery-3.6.1.min.js"></script>
🎨CDN 서버에 저장된 jQuery 라이브러리 파일을 제공받아 웹문서에 저장
◈ CDN(Contents Delivery Network) Server : 대용량의 컨텐츠를 빠르고 안정적으로 제공하는 서버
─────────────────────────────────────⭕첫번째 방법
- www.jquery.com → Download
- Download the compressed, production jQuery 3.6.1 왼쪽 클릭
- URL 주소 복사
- eclipse에 아래 내용 입력
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.1.min.js"></script>※ src=복사한 URL 주소
─────────────────────────────────────⭕두번째 방법
◈ 구글 라이브러리 이용
→ https://developers.google.com/speed/libraries<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
🥎jQuery 라이브러리를 사용하는 방법
→ CSS 선택자로 태그(엘리먼트)를 검색하여 jQuery 객체를 생성하고 메소드를 호출하여 필요한 기능 구현
─────────────────────────────────────
◈window 객체가 완성(DOM Tree)된 후 호출되어 실행될 이벤트 처리 함수 등록
→ 명령-1은 출력 안되고 명령-2만 출력window.onload=function() { alert("window.onload 이벤트에 의해 실행되는 명령-1"); } window.onload=function() { alert("window.onload 이벤트에 의해 실행되는 명령-2"); }
🥎jQuery 객체를 생성하여 메소드를 호출하는 방법
형식) jQuery(Selector|Object).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") });
📌script 태그를 body 태그의 마지막 자식태그로 선언하면 document 객체가 준비(완성)된 상태이므로 jQuery(document).ready() 메소드의 콤백함수를 이용하지 않아도 jQuery 라이브러리 사용 가능
jQuery("p").css("color","red");📌↑jQuery 함수명 대신 $ 기호를 사용하여 표현 가능
$("p").css("color","red");
📃01_hello_jquery.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> <!-- script 태그를 사용하여 jQuery 라이브러리 파일을 웹문서에 포함해야만 jQuery 관련 기능 사용 가능 --> <!-- → https://www.jquery.com 사이트 참조 --> <!-- ======================================================================= --> <!-- jQuery 라이브러리 파일을 다운로드 받아 현재 서버의 자원으로 저장하여 웹문서에 포함 --> <!-- → 1.X : IE9 이하, 2.X or 3.X : IE10 이상 --> <!-- → 미압축파일(uncompressed) : 라이브러리 파일 변경 가능, 압축파일(minified) : 라이브러리 파일 변경 불가능 --> <!-- <script type="text/javascript" src="jquery-3.6.1.min.js"></script> --> <!-- ======================================================================= --> <!-- CDN 서버에 저장된 jQuery 라이브러리 파일을 제공받아 웹문서에 저장 --> <!-- CDN(Contents Delivery Network) Server : 대용량의 컨텐츠를 빠르고 안정적으로 제공하는 서버 --> <!-- <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.1.min.js"></script> --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <!-- ======================================================================= --> <script type="text/javascript"> //jQuery 라이브러리를 사용하는 방법 - CSS 선택자로 태그(엘리먼트)를 검색하여 jQuery 객체를 생성하고 메소드를 호출하여 필요한 기능 구현 //→ 모든 태그가 DOM Tree에 Element 객체로 배치된 후 jQuery 라이브러리 사용 가능 // /* //window 객체가 완성(DOM Tree)된 후 호출되어 실행될 이벤트 처리 함수 등록 //명령-1은 출력 안되고 명령-2만 출력 window.onload=function() { alert("window.onload 이벤트에 의해 실행되는 명령-1"); } window.onload=function() { alert("window.onload 이벤트에 의해 실행되는 명령-2"); } */ /* //jQuery 객체를 생성하여 메소드를 호출하는 방법 //형식) jQuery(Selector|Object).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("p").css("color","red"); }); */ </script> </head> <body> <h1>jQuery 사용법</h1> <hr> <p>Hello, jQuery!!!</p> <p>Hello, jQuery!!!</p> <p>Hello, jQuery!!!</p> <script type="text/javascript"> //script 태그를 body 태그의 마지막 자식태그로 선언하면 document 객체가 준비(완성)된 //상태이므로 jQuery(document).ready() 메소드의 콤백함수를 이용하지 않아도 jQuery 라이브러리 사용 가능 //①보다 가독성이 훨씬 좋음 //jQuery("p").css("color","red"); // //jQuery 함수명 대신 $ 기호를 사용하여 표현 가능 //$("p").css("color","red"); </script> </body> </html>
