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