jQuery 정리 01 - jQuery

jQuery

• 2000년대 초 John Resig가 개발
• jQuery는 JavaScript Library
  • Library란 자주 사용될 기능을 미리 구현해 놓은 것
• 단순화, 크로스 브라우징, 쉽게 사용하는 AJAX
  • 적게 쓰고 많은 일을 하기 위해서 jQuery를 사용
  • 단순화 - 코딩이 간단해짐
  • 크로스 브라우징 - 모든 브라우저에서 동일한 동작을 하는 것
• jQuery사이트 에서 다운받거나 CDN(Content Delievery Network) URL을 제공받는다.
  • compressed : 코드 압축기로 코드를 압축한 버전
    • 코드 압축기는 코드 내 필요없는 공백, \t, \n등 코드를 없애는 툴
    • 실행에는 문제가 없으나 읽기 어렵다.
  • uncompressed : 코드 압축되지 않은 버전
    • 파일의 크기가 커진다.
    • 개발자가 읽기 좋게 만든 것
• head태그에 CDN jQuery 라이브러리 추가 후 사용가능해진다.

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

• 제공하는 기능
  • DOM(Document Object Model), Event, Effect, AJAX 등을 제공
  • 다양한 selector의 사용(selector 기반)
    • css의 selector와 비슷
• ’$’란 jQuery Object를 사용
• plugin을 지원
  • plugin이란 jQuery를 사용하여 특정 기능을 미리 구현해 놓은 것
• Mobile UI용 jQuery Mobile도 제공

jQuery 기본 문법

$(function() {
    코드
});

$(document).ready(function(){
    // HTML의 태그 정보만 로딩되면 동작(2)
});

$(window).load(function() {
    // HTML에 필요한 모든 대상(외부파일, 이미지)들이 로딩된 후 동작(1)
});

• 사용 예
  • window.load보단 거의 document.ready만 사용
  • document.read 내용 다음으로 window.load 내용이 수행됨

$(window).load(function() {
          alert("window.load : HTML에서 사용할 모든 자원(파일,  이미지, ... )이 로딩 된 후 동작 2.(느리다)");
});

$(document).ready(function() {
          alert("document.ready : HTML의 tag 정보가 로딩된 후  동작 1.");
});

• document.ready를 많이 사용해서 짧게 줄인 걸 많이 사용

/* $(document).ready(function() {
     alert("document.ready : HTML의 tag 정보가 로딩된 후  동작");
}); */

$(function() {
     alert("document.ready : HTML의 tag 정보가 로딩된 후  동작");
});

• jQuery는 API를 제공해준다.