본문 바로가기

카테고리 없음

[ JS ] Day 13 - ④ jQuery

# Contents

  1. jQuery 란?
  2. jQuery 학습을 위해 준비할 것
  3. jQuery 시작하기

 

# 1. jQuery란?

  • JQuery는 모든 브라우저에서 동작하는 클라이언트 사이드 자바스크립트 라이브러리이다.
    • 2016년 1월, 존 레식(John Resig)이 BarCamp NYC에서 발표
    • write less, do more
  • 특징
    • 크로스 브라우징 지원
    • 오픈 소스 프로젝트 - 무료로 사용 가능
    • 사용자가 기능 확장 가능
    • 선택 기능 우수해서 DOM과 관련된 처리가 쉽다
    • 이벤트 연결을 쉽게 구현
    • 시각적 효과 우수
    • Ajax 애플리케이션 개발이 쉽다.

 

# 2. jQuery 학습을 위해 준비할 것

  1. 텍스트 편집기 - 이클립스
    • JDK; 자바 개발 툴킷
    • 이클립스(Eclipse); 자바개발을 지원해주는 자바 개발 도구
    • 웹 서버(톰캣); JSP로 서버페이지 구현을 위한 웹 서버
  2. 웹 브라우저 - 모질라 파이어폭스, 애플 사파리, 인터넷 익스플로러, 크롬
  3. jquery 라이브러리
    • 다운 방법: 
      • Jquery  다운
        • http://jquery.com 접속후 메인 화면에서 jQuery 다운
        • 다운받은 jquery.min.js파일을 js 폴더에 저장한 뒤, <script src="js/jquery.min.js"></script> 로 사용.
        • xx.js(Uncompressed 버전)xx.min.js(Minified 버전) 
          • Minified  버전은  파일의 용량을 최소화하기 위해 압축된 파일이다. 용량이 다섯 배 이상 차이난다.
      • CDN 방식으로 사용
        • CDN 방식이란? Content Delivery Network의 약자로 사용자에게 간편하게 콘텐츠를 제공하는 방식을 의미한다. 구글, MS, Jquery 측에서 사용자가 jQuery를 사용하기 편하게 콘텐츠를 제공한다.
        • <script src="CDN link"></script> 로 사용하면 된다.
        • jQuery CDN이용
          • http://code.jquery,com/jquery-버전.js
        • google CDN이용 
          • https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
        •  MS의 CDN이용
          • http://ajax.aspnetcdn.com/ajax/jQuery/jquery-버전.min.js

 

# 3. jQuery 시작하기

  1. jQuery 함수
    1. jQuery() 또는 $()을 말한다.
    2. jQuery 래퍼(wrapper)라고도 불린다
    3. 함수의 인자로 문자열(css 선택자로 표현)을 기술하여 선택한다.
    4.  DOM 엘리먼트를 찾아서 결과 값을 객체로 얻어준다. 이렇게 얻어진 객체를 jQuery 확장 객체 집합이라고 부른다.
  2. jQeury 확장 객체 집합
    1. jQuery 래퍼 집합
    2. jQuery가 제공하는 모든 함수를 사용할 수 있게 된 상태

<!-- 완료되지 않은 상태입니다. -->