본문 바로가기
프로그래밍/jQuery

jQuery 쉽게하기 - API 깨부시기, jQuery Core

by zoo10 2011. 1. 19.

API(Application Program Interface, 응용프로그램 인터페이스)란 어떤 응용프로그램에서 제공한 메소드들의 모음입니다. 사전적으로 해석을 해보자면 "응용 프로그램과 대화하기" 가 되겠습니다. 사람사이의 대화방법은 몸짓, 말, 글을 사용합니다. 이것들을 인터페이스라고 할 수 있습니다. 단, 서로 의미가 통해야 합니다. 즉, 사전에 정의된 해석방법으로만 대화가 가능하죠. 고개 숙여 인사를 하는 박찬호를 보고 이상하게 생각했다는 미국인들과 같이 해석의 방법이 미리 정의되지 않은 대화방법으로는 오해 또는 소통이 불가하게 됩니다.

프로그램에서도 어떤 응용프로그램에 접근하기 위해 사전에 정의된 함수들의 모음이 존재하고, 이 모음을 외부에 노출하기 위해 정리한 것이 API 라고 할 수 있습니다. 즉, API 는 "내가 만든 프로그램을 사용하고 싶으면 이런저런 약속을 지켜서 사용하고, 어떤 행동을 일으키고 싶을때 사용하는 함수들을 알려줄테니 그걸로 써라"라는 문서가 됩니다.

jQuery 와 같이 잘 정리된 라이브러리는 개발자들에게 천국입니다. API 가 어렵지 않으며 관련 자료도 많은 jQuery는 문제가 발생했을 때 빠른 시간안에 해결을 할 수 있게 됩니다. 일전에 잘 사용하지 않은 산업용 PDA 에 Windows-CE 기반 프로그램을 하다가 아주 고생했던 기억이 납니다. 다시 겪고 싶지 않은 경험입니다. ^^;.

사설이 길었네요. 자~ 이제 드디어 API 를 할 수 있게 되었네요. API 에 대해 모두 쓸 예정이지만 때에 따라서는 생략도 하게 될 것 같습니다. 그나저나 얼마나 길어지게 될지.. 좀 두렵기도 한데요 ^^;;. 자 시작합니다.

Core

jQuery 의 핵심입니다. 우리가 $() 로 사용하고 있는 것에 대한 설명입니다. 실제로는 jQuery() 라고 사용해야 하지만 축약어로 $() 로 사용하고 있는 jQuery 코어에 대한 설명입니다.

원문 링크 http://api.jquery.com/category/core/

함수 목록

  • jQuery()
  • 일치하는 요소들(elements)를 사용하기 위해 CSS 선택자(selector)와 같은 문자열을 사용합니다.
  • jQuery.noConflict()
  • jQuery 의 $ 변수 사용을 포기합니다.

jQuery()

함수들

jQuery( selector, [ context ] )
  • jQuery( selector, [ context ] )
  • jQuery( element )
  • jQuery( elementArray )
  • jQuery( jQuery object )
  • jQuery()
jQuery( html, [ ownerDocument ] )
  • jQuery( html, [ ownerDocument ] )
  • jQuery( html, props )
jQuery( callback )
  • jQuery( callback )

jQuery( selector, [ context ] )Returns : jQuery

개요 : CSS 선택자(selector)와 일치하는 요소들(elements)을 사용하기 위한 문자열을 사용합니다.

  • jQuery( selector, [ context ] )
  • selector 선택자(selector)를 문자열로 표현
  • context DOM 요소, 문서(Document) 또는 문맥상에서 사용되는 jQuery
  • jQuery( element )
  • element jQuery 객체에 속한 DOM 요소
  • jQuery( elementArray )
  • elementArray jQuery 객체에 속한 DOM 요소들의 배열
  • jQuery( jQuery object )
  • jQeury object 복사를 위한 jQuery 객체
  • jQuery()

jQuery() - $() 로 사용하고 있는 - 는 제공된 선택자(selector)를 검색하고 그 요소(elements)를 jQuery 객체화 합니다. 직역이 어렵네요. 즉, 우리가 제시한 선택자를 문서상에서 찾아서 jQuery() 객체로 만들어 줍니다. 그래야 jQuery 의 함수와 속성들을 사용할 수 있으니까요. 아래와 같이 선택자(selector)를 문자열로 적어주면 해당 문서에서 이 문자열과 일치하는 요소들(elements)을 찾아 jQuery 객체로 만들어 준다는 얘기입니다.

$('div.foo');

Selector Context : 선택자 사용방법

기본적으로 선택자를 찾기 위해서 문서의 처음부터 검색을 합니다. 하지만 때에 따라서는 원하는 부분만 찾을 필요도 있습니다. 성능이 최우선이기 때문이죠. 이런 경우를 위해서 $() 함수의 2번째 인자를 이용할 수가 있습니다. 아래 예제는 div.foo 가 클릭되었고 그 요소의 태그가 span 일 경우 bar 라는 클래스를 span 에 추가하는 구문입니다.

$('div.foo').click(function() {
  $('span', this).addClass('bar');
});

원하는 부분만 선택해서 검색할 수 있는 기능이 있다는 얘기입니다. 위 예제 중 $('span', this) 는 $(this).find('span') 과 같은 의미입니다. 즉, find() 함수를 사용하여 원하는 요소를 찾아서 어떤 일을 진행할 수 있습니다. 실제로 전체 문서를 다 찾아서 처리하는 방식은 지양해야 하는 방식입니다. 하지만 꼭 써야 할 경우도 생길수도 있지만 가급적이면 다른 방법을 강구해야 할 것 같습니다.

Using DOM elements : DOM 요소 사용하기

이미 찾은 DOM 요소(element) 또는 요소들(elements)을 이용하여 jQuery 객체를 만드는 방법은 2~3가지 방법을 사용할 수 있습니다. 시스템 이벤트에 의해 호출되는 함수(callback function)를 통해 전달된 그 요소(an element)를 이용하여 jQuery 함수들을 쉽게 사용하려면 "this" 키워드를 사용하면 됩니다. 아~ 영어 무지 딸립니다. 죽겠습니다. ㅜ,.ㅡ;; 유추해 보자면, 기본적으로 DOM 요소가 가진 특정 콜백함수들이 호출되면 그 이벤트를 전달한 요소(element)를 알아낼 수 있는데요. 그 요소(element)로 jQuery 함수를 사용하고 싶다면 "this" 키워드를 사용하면 된다라는 얘기인 것 같습니다. 그럴 듯 한가요? ㅎㅎ;;; 아래 예제를 보시죠.

$('div.foo').click(function() {
  $(this).slideUp();
});

위 예제는 'div.foo' 요소 클릭이라는 시스템 콜백함수가 호출되면 그 요소를 slideUp() 이라는 jQuery 함수를 사용해서 표현하라 라는 의미입니다. slideUp() 이 뭐하는 함수인지는 일단 제껴두고, 이 클릭 이벤트가 발생된 요소를 그 slideUp() 을 하기 위해서 $(this) 를 사용했다는 점을 봐달라는 겁니다. 여기에서 this 가 바로 $('div.foo') 로 찾아낸 DOM 요소의 jQuery 객체가 된다는 얘기입니다. 와~ 말 무지 어렵습니다. 에혀~. 원문에서는 아래의 부가 설명이 있습니다.

이 예제는 어떤 요소가 클릭(clicked) 되었을 때 슬라이딩 에니메이션(sliding animation)을 발생시킨다는 의미가 내포되어 있습니다. 이 조정자(handler receives : 클릭된 요소를 의미)는 순수한 DOM 요소(element)이며 이 요소를 $(this)를 이용하여 jQuery 객체화를 하게 됩니다. 이 요소(위에서 조정자)가 jQuery 의 함수를 사용하기 위해서는 jQuery 객체화가 되어야 합니다. 즉, 순수 DOM 요소는 jQuery 함수를 사용할 수 없기 때문이죠.

또한, XML 데이터를 Ajax 를 통해서 전달 받은 뒤, $() 함수를 이용해서 쉽게 jQuery 객체화가 가능합니다. jQuery 객체화가 이루진 후에는 이 XML 구조(structure)에서 우리는 찾고자 하는 요소를 jQuery 의 .find() 함수나 DOM 의 검색 함수들을 이용해서 쉽게 찾아 낼 수 있습니다.

예 제
p 태그를 하위 요소로 가지고 있는 div 를 찾아서 테두리에 선을 그린다.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
  <p>one</p> <div><p>two</p></div> <p>three</p>
<script>$("div > p").css("border", "1px solid gray");</script>

</body>
</html>

미리보기

jQuery( html, [ ownerDocument ] )Returns : jQuery

개요 : 순수한 HTML(raw HTML) 문자열을 이용하여 동적인(on the fly) DOM 요소를 만듭니다.

  • jQuery( html, [ ownerDocument ] )
  • html 동적인 HTML 문자열입니다. XML 이 아닌 HTML 만 분석합니다.
  • ownerDocument 만들어진 새 요소(new elements)가 위치한 문서
  • jQuery( html, props )
  • html 단독, 독립적인 HTML 요소로 정의할 수 있는 HTML 태그 문자열 (예 : <div/> 또는 <div></div>)
  • props 만들어진 새 요소의 속성, 이벤트, 함수들

HTML 문자열을 가지고 DOM 요소를 만들어 낼 수 있습니다.

Creating New Elements : 새 요소 만들기

만약 당신이 $() 함수에 문자열을 전달했다면, jQuery 는 그 문자열에 태그의 요소(<tag...> 와 같은)가 있는지 확인해 봅니다. 없다면 위의 예처럼 선택자 표현(selector expression)이라 판단하고 처리를 하게 됩니다. 하지만 문자열에 HTML 태그가 있다면 jQuery 는 그 태그에 해당하는 DOM 요소를 만들어 문서에 추가하게 됩니다. 추가된 요소(elements)는 jQuery 객체 형태를 유지하기 때문에 jQuery 의 많은 함수들을 쉽게 사용할 수 있게 됩니다. 아래 예제와 같은 구문도 jQuery 객체로 인식하여 jQuery 함수들을 사용할 수 있게 됩니다.

$('<p id="test">My <em>new</em> text</p>').appendTo('body');

위 예제와 같이 속성이 없는 하나의 태그가 아닌 복잡한 수준이라면 마치 innerHTML 을 사용하는 것과 같이 동적으로 요소를 추가하게 됩니다. 더 들여다 보자면, jQuery 는 전달된 HTML 태그들을 <div>를 만들어서 그 안에 innerHTML 을 이용하여 위치(sets) 시키게 됩니다. 즉, div 태그를 임의로 만들고 그 안에 전달된 태그 문자열을 DOM 요소로 추가한다는 얘기입니다. 만일 단순한 하나의 태그로 구성된 문자열 - $('<img />> 또는 $(<a></a>) 와 같은 - 이라면 jQuery 는 JavaScript의 createElement() 함수를 이용하여 새 요소를 만들어 내게 됩니다.

복잡한 수준의 HTML 태그를 추가해야 할 일이 생기기도 하지만 HTML 소스가 정확하게 복사되지 않는 브라우져들도 있습니다. 예를 들어 인터넷 익스플로러 8 이전의 버젼들은 모든 절대 경로(absolute URLs)를 href 속성으로 만들어 버리고 IE 9 이전 버젼들은 HTML5 의 신규 요소들을 정확하게 처리하지 못합니다.

따라서 안전하게 크로스 브라우징이 되려면 웹 표준(well-formed)을 지켜야만 합니다. 태그들은 반드시 닫는 태그와 함께 사용해야 합니다.

$('<a href="http://jquery.com"></a>');

반드시 위와 같이 사용하거나 아래와 같이 사용해야 합니다.

$('<a/>');

jQuery 1.4 이후부터는 두번째 인자를 통해서 속성들을 부여할 수 있습니다. 이 인자에는 .attr() 함수에서 전달할 수 있는 인자를 포함한 속성 집합을 모두 사용할 수 있습니다. 게다가 사용자 이벤트 외에도 val, css, html, text, data, width, height, offset 과 같은 jQuery 의 함수도 추가할 수 있습니다. 참고로 인터넷 익스플로러에 input 태그를 추가한 후에 그 타입을 속성으로 변경 처리할 수는 없습니다. 즉, 체크박스를 추가하고 싶다면 반드시 '<input type="checkbox" />'와 같이 사용해야 합니다.(라고 되있지만 제가 테스트해 결과 모두 다 정상적으로 되더군요. 이 부분 해석을 발로 해서 뭔가 잘못된 것 같습니다. 혹시 관련해서 알려주실 분 있으시면 대 환영입니다. lol )

예 제
div 태그와 그 안의 모든 내용들이 동적으로 만들어 지고, body 요소에 추가됩니다. 내부적으로 이런 요소가 만들어지고 그 안에 innerHTML 속성을 사용해 마크업이 됩니다. 그러니까 이것은 꽤 유연하지만 한계도 같이 지니고 있습니다.(무슨 소리인지 모르겠습니다. ^^;;)

$("<DIV>
<P>Hello</P></DIV>").appendTo("body")

예 제
2번째 인자인 속성 맵을 이용하여 DOM 요소 만들기

$("<div/>", {
  "class": "test",
  text: "Click me!",
  click: function(){
    $(this).toggleClass("test");
  }
}).appendTo("body");

$("<input>", {
  type: "text",
  val: "Test",
  focusin: function() {
    $(this).addClass("active");
  },
  focusout: function() {
    $(this).removeClass("active");
  }
}).appendTo("form");

미리보기

위 소스를 보시면 1라인에 <div/> 라고 되어 있는 걸 보실 수 있습니다. 이렇게 하던가 <div></div> 이렇게 사용해야 한다는 겁니다. 그리고 속성들과 메소드들을 얼마든지 추가할 수 있습니다. 위 "Click me" 는 jQuery 의 toggleClass 함수를 사용하여 글자색을 클릭 시마다 변경하는 함수를 집어 넣었습니다. 아래 input 은 포커스가 들어오면 active 클래스를 토글하게 됩니다. 참 유용한 내용입니다.

jQuery( callback )Returns : jQuery

개요 : 문서가 모두 읽혀지면(finished loading) 호출될 함수를 지정합니다.

  • jQuery( callback )
  • callback 이 함수는 DOM 이 준비가 되면 실행됩니다.

이 함수는 $(document).ready() 와 같은 동작을 합니다. 혹시 $() 함수가 잘 동작되지 않을 때를 대비하여 사용하면 좋습니다. 즉, $(document).ready() 함수가 동작하지 않았을 때를 대비하여 jQuery( function($) {}); 와 같이 사용하시면 됩니다.

jQuery.noConflict()

이 함수는 jQuery() 의 별칭인 $() 의 사용을 더 이상 하지 않을 때 사용하게 됩니다. 이 내용은 이전 포스팅으로 대체하겠습니다.

http://findfun.tistory.com/entry/jQuery-쉽게하기-다른-라이브러리와-같이-쓰기 [새창으로] [바로이동]

 

우와 이번 포스팅 진짜 깁니다. 게다가 이 글을 쓰는 동안 베타버젼의 메소드가 하나 더 추가되었더 군요. ㅡ,.ㅡ;; jQuery.addClass() 라는 녀석입니다. 아직 베타여서 기술하지 않았습니다. 힘들어서 안한거 아닙니다. 절대로. 너무 길어서 나누어 할까 하다가 같은 페이지에서 볼 수 있어야 겠다고 생각이 들었습니다. 너무 길어져 버려서 스크롤 내리는 데만도 한참이네요. ㅡㅡ;;

어찌됬든 jQuery 의 핵심(core)를 들여다 봤습니다. 실제 사용하는데 있어서 이 내용을 몰라도 관계 없습니다. 그래도 관심있게 본 거랑은 다르겠죠. 휴우~ 다음번 부터는 내용이 좀 짧았으면 하네요.

그럼 즐프하세요.

저작자표시 변경금지

'프로그래밍 > jQuery' 카테고리의 다른 글

jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name*="value"]  (2) 2011.01.21
jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : [name|="value"]  (2) 2011.01.20
jQuery 쉽게하기 - API 깨부시기, 선택자(Selector) : ":animated"  (9) 2011.01.20
jQuery 쉽게하기 - API 깨부시기, 선택자(Selectors) : All Selector ("*")  (14) 2011.01.19
jQuery 쉽게하기 - 기본부터 시작하자, 함수(Function) 편  (4) 2011.01.18
jQuery 쉽게하기 - 기본부터 시작하자, 배열(Array) 편  (4) 2011.01.18
jQuery 쉽게하기 - 기본부터 시작하자, Object 편  (8) 2011.01.17
jQuery 쉽게하기 - 기본부터 시작하자, Number 편  (14) 2011.01.17

관련글

티스토리툴바