개발 환경 구축_ jQuery

- 웹 호환성, 애니메이션 효과 등 쉽게 구현할 수 있도록 만들어진 자바스크립트 라이브러리

- css 선택자를 활용하여, 객체 조작 가능

- 라이브러리이므로 외부 파일을 내 프로젝트(작업 페이지)에 삽입해야 함

 

네트워크 전송 방식 (삽입)

- 제이쿼리 사이트에서 download 메뉴로 들어가 CDN 목록 복사해서 내 페이지에 삽입

- 간단한 테스트를 할 경우 사용

- 네트워크 차단된 프로젝트에서는 쓰일 수 없음.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

 

jQuery 개발 환경 구축

https://jquery.com/download/

들어간 후 ctrl + s 저장

​

프로젝트 파일 -> WebContent -> resource -> js 내에 저장

 

사용방법

- 제이쿼리 함수 실행 시 제이쿼리 객체가 반환된다.

- 제이쿼리 함수 실행 시 제이쿼리의 메서드가 prototype에 명시되어 있다.

<script src="resource/js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
</script>

- 함수 실행

console.log(jQuery);
console.log($);

- 객체 반환

console.log(jQuery(),'제이쿼리 실행');
console.log($(),'제이쿼리 실행');

- 제이쿼리 함수 실행 시 인수에 삽입되는 내용은 아래와 같다.

1. 선택자 -> 선택자와 일치하는 객체를 찾아 제이쿼리 객체에 배열로 저장

2, dom -> dom 객체를 제이쿼리 객체에 저장

3. html 문자열 -> 문자열에 해당되는 dom 객체를 생성 후 제이쿼리 객체에 저장

- 제이쿼리 실행 후 제이쿼리 객체가 반환되어야 제이쿼리의 메서드를 체이닝 기법으로 사용 할 수 있다.

- 선택자를 인수에 삽입

console.log($('body'),'선택자를 인수에 삽입');

- dom 객체 인수에 삽입

var h1=document.querySelector('h1');
console.log($(h1),'dom 객체 인수에 삽입');

- html 문자열 객체 인수에 삽입

console.log($('<div>안녕하세요</div>'),'html 문자열 객체 인수에 삽입');

onload 기능

- html 문서가 다 읽어졌다면 ( 자바스크립트 실행 준비가 되었다면 )

- ready -> 문서 읽기 완료 이후 ready 인수인 함수를 실행해준다.

- 자바스크립트의 onload 기능과 유사하다.

<script type="text/javascript">
	$(document).ready(function(){
		console.log('문서 읽기 완료 이후 실행');
	});
</script>

$(function(){
	console.log('ready 메서드와 동일한 기능');
})

 

 

 

​

메인 프로젝트는 의존하는 모듈(프로젝트 등)을 퍼블리싱 하지 않고 직접 참조한다.