아티클 목록

jQuery 정리 01

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.");
});

01

  • document.ready를 많이 사용해서 짧게 줄인 걸 많이 사용
/* $(document).ready(function() {
     alert("document.ready : HTML의 tag 정보가 로딩된 후  동작");
}); */
 
$(function() {
     alert("document.ready : HTML의 tag 정보가 로딩된 후  동작");
});

댓글