jQuery란?

jQuery

jQuery란?

• 2006년 John Resig(존 레식)이 디자인한 자바스크립트 라이브러리
• 자바스크립트를 이용해 만든 다양한 함수들의 집합
• 무료 사용 가능한 오픈 소스 라이브러리
• 모든 웹 브라우저에서 동작

jQuery 특징

• 용량이 약 100KB로 가벼움
• 동적으로 HTML이나 CSS 컨트롤 능력이 탁월함
• 짧고 간결하게 코딩 가능
• 웹 표준과 타 브라우저 호환성 뛰어남
• 편리한 Ajax 호출 방법
• 메소드 체인 방식(여러 베소드를 연결하여 사용)으로 효유류적인 코딩이 가능하며, 간결하고 효과적인 코드 수정이 가능
• 다양한 플러그인 제공

jQuery 목적

• 쉬운 DOM 처리
• 쉽고 일관된 이벤트 연결 구현
• 쉬운 시각적 효과 구현
• Ajax 기능 쉽게 구현

DOM(문서객체 모델)

• 객체 지향 모델로서 구조화된 문서를 표현하는 방식
• HTML 문서에 접근하기 위한 표준 모델
• 문서 내의 모든 요소를 정의하고, 각 요소에 접근하는 방법을 제공

jQuery 기능

• DOM 처리
• 이벤트 처리
• 시각 효과 구현
• Ajax 기능 구현

jQuery 개발 환경

• jQuery 파일 다운로드 방식
• CDN 이용하는 방식

jQuery 시작 방법

• Internal 방식

jQuery-start.html

script src="jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    // 문서(document)가 준비 완료되면 함수 실행
    $(document).ready(function(){
        alert("jQuery 시작");
    });
</script>

• external 방식

start.js

$(document).ready(function(){
    alert("jQuery 시작 - external 방식");
});

jQuery-external.html

<script src="jquery-3.6.0.min.js"></script>
<script src="start.js"></script>

jQuery 코드 형태

• 객체 구조로 객체.메소드 형태
• 객체 선택
  • $('선택자').메소드
  • $('p').css('color','red');: 모든 <p> 태그 선택하고 스타일 적용
• 사용자가 생성한 객체 사용
  • 객체.메소드
  • var obj = $('선택자').메소드;
  • `obj.메소드;
• 메소드 체이닝
  • 여러 개의 메소드를 연결해서 사용
  • 객체.메소드1.메소드2. ....

jQuery 치환

• jQuery의 모든 함수 및 객체는 jQuery에서 제공되는 것이라는 점을 나타내기 이ㅜ해 코드 앞에 jQuery 키워드 사용

jQuery(document).ready(function(){
    alert("jQuery 시작");
});

• 쉽게 사용하기 위해 $ 문자로 치환해서 사용

$(document).ready(function(){
    alert("jQuery 시작");
});

$(document).ready(함수)

• 화면에 페이지가 로딩된 후 실행
• HTML 문서가 화면에 보여진 후에 자동으로 포함된 함수 실행
• 자바스크립트의 window.onload와 동일하게 사용
• window.onload = funciton() { ... }

$(document).ready(함수) Vs. window.onload = funciton()

• 공통점
  • 콜백 함수가 호출되는 시점에서 DOM 요소에 접근이 가능
• 차이점
  • $(document).ready() : DOM 요소가 로드되었을 때 이벤트 발생하면서 호출(외부 리소스, 이미지 또는 음악 등이 로드되기 전)
  • window.onload = funciton() : DOM 요소 뿐만 아니라 외부 리소스, 이미지, 음악 등 모든 컨텐츠의 로드가 끝나는 시점에서 이벤트가 발생하면서 호출

$(document).ready(함수)의 형태

• 기본 형태

$(document).ready(function(){
    ...
});

• 단축 형태

$(function(){
    ...
});