jQuery
- 2006년 John Resig(존 레식)이 디자인한 자바스크립트 라이브러리
- 자바스크립트를 이용해 만든 다양한 함수들의 집합
- 무료 사용 가능한 오픈 소스 라이브러리
- 모든 웹 브라우저에서 동작
jQuery 특징
- 용량이 약 100 KB 가벼움
- 동적으로 HTML이나 CSS 컨트롤 능력 탁월
- 짧고 간결하게 코딩 가능
- 웹 표준과 타 브라우저 호환성 뛰어남
- 편리한 Ajax 호출 방법
- 메소드 체인 방식 (여러 메소드를 연결하여 사용)으로 효율적인 코딩 가능, 간결하고 효과적인 코드 수정 가능
- 다양한 플러그인 제공
jQuery 사용 목적
- 쉬운 DOM 처리
- 쉽고 일관된 이벤트 연결 구현
- 쉬운 시각적 효과 구현
- Ajax 기능 쉽게 구현
jQuery 기능
- DOM 처리
- 이벤트 처리
- 시각 효과 구현
- Ajax 기능 구현
jQuery 개발 환경
- jQuery 파일 다운로드
- CDN 이용
작업 환경
- jQuery01 프로젝트 생성
- jQuery 다운로드 받아 저장
- jquery-3.6.0.min.js 파일 복사 -> webapp 폴더에 저장
jQuery 시작
internal 방식
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script src="jquery-3.6.0.min.js"></script>
<script type="text/javascript">
// internal 방식
// 문서(document)가 준비 완료되면 함수 실행
$(document).ready(function() {
alert("jQuery 시작");
});
</script>
</head>
<body>
</body>
</html>
external 방식
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script src="jquery-3.6.0.min.js"></script>
<script src="start.js">
</script>
</head>
<body>
</body>
</html>
/**
* start.js
*/
$(document).ready(function() {
alert("jQuery 시작 - external 방식");
});jQuery 코드 형태
- 객체 구조 -> 객체.메소드 형태
객체 선택
$('선택자').메소드
$('p').css('color', 'red'); : 모든 <p> 태그 선택하고 스타일 적용
사용자가 생성한 객체 사용
객체.메소드
var obj = $(‘선택자’).메소드;
obj.메소드
메소드 체이닝 : 여러 개의 메소드를 연결해서 사용
객체.메소드1.메소드2. ….
$('h1').css('width', '50%').css('height', '40px');jQuery 치환
jQuery의 모든 함수 및 객체는 jQuery에서 제공되는 것이라는 점을 나타내기 위해 코드 앞에 jQuery 키워드 사용
jQuery(document).ready(function(){
alert("jQuery 시작 - external 방식");
});
// 단축 형태
$(function(){
...
});
편리하게 사용하기 위해 $ 문자로 치환해서 사용
$(document).ready(function(){
alert("jQuery 시작 - external 방식");
});- 화면에 페이지가 로딩된 후 실행
- HTML 문서가 화면에 보여진 후에 자동으로 포함된 함수 실행
- 자바스크립트의 window.onload와 동일하게 사용
window.onload = function() {
...
}$(document).ready()와 window.onload = function()의 공통점과 차이점
공통점
- 콜백 함수가 호출되는 시점에서 DOM 요소에 접근 가능
차이점
- $(document).ready() : DOM 요소가 로드 되었을 때 이벤트 발생하면서 호출 (외부 리소스, 이미지 또는 음악 등이 로드 되기 전)
- window.onload = function() : DOM 요소 뿐 아니라 외부 리소스, 이미지 또는 음악 등 모든 컨텐츠의 로드가 끝나는 시점에서 이벤트가 발생하면서 호출
'Frontend > JQuery' 카테고리의 다른 글
| each() 메소드 사용 방법 (0) | 2021.12.15 |
|---|---|
| jQuery 이벤트 (0) | 2021.12.14 |
| hover() 메소드 (0) | 2021.12.14 |
| jQuery 변수 (0) | 2021.12.14 |
| jQuery 선택자 (selector) (0) | 2021.12.13 |