jQuery Core – jQuery(=$) – 작성중[ 편집자 : Blueⓘ ]
2009년 07월 15일 오전 11시 22분 태그 : , / 조회수 : 2,134

jQuery의 기본중 기본인 jQuery Core의 jQuery메소드에 대한 강좌를 진행하겠습니다.

jQuery(=$)메소드는 jQuery Core의 핵심 메소드로 jQuery 또는 $로 사용 할 수 있습니다. 다음은 그 예제 입니다.

jQuery('#textBox');
$('#textBox');

위 예제는 textBox라는 ID를 가진 HTML객체를 jQuery를 이용하여 찾는 예제입니다. 앞에 설명한대로 jQuery와 $가 동일하다고 하였기에 각각의 명령은 동일한 결과를 가집니다.

jQuery(=$)
  • 문법
    • jQuery(expression [, context])
    • jQuery(html, [ownerDocument])
    • jQuery(elements)
    • jQuery(callback)
Blueⓘ의 요약 설명

jQuery메소드는 4개가 오버라이드 되어 있습니다… 처음에는 똑같은 메소드가 4개 존재하여 습득하는데 어려움이 있을것이라 생각하고 계실지 모르겠지만, 간단하게 요약하면 jQuery메소드는 HTML안에서 내가 원하는 Element를 최대한 쉽고 빠르게 컨트롤 하기 위해 존재하는 메소드입니다. 즉 4개의 오버라이드된 메소드 역시 그런 역활을 담당하기 위해서 존재하므로 Element 컨트롤용이라고 생각하시면 두려움이 좀 사라질까요? ^^

각각의 jQuery 메소드의 사용 문법을 한글로 표기하자면 다음과 같습니다.

1. jQuery(“검색하고자하는 selector 표현식” [, "검색 대상 구문"])
2. jQuery(“Document에 추가할 HTML형식의 문자열” [, "추가 대상 Document"])
3. jQuery(“검색하고자 하는 Element”)
4. jQuery(“콜백 메소드”)

자 그럼 위의 4개의 메소드를 예제를 통해 익혀보도록 하겠습니다.

위 4개의 메소드를 익히는동안 우리를 도와줄 HTML군을 소개해드리겠습니다.

<html>
<head>
	<title>jQuery Core - jQuery(=$)</title>
	<script type="text/javascript" src="/js/common/jquery-1.3.2.min.js"></script>
</head>
<body>
	<h3>Examples for jQuery</h3>
	<div id="myDiv">Hello, jQuery
		<ul class="ulOfDiv">
			<li>What is jQuery Core</li>
		</ul>
	</div>
	<p id="myP">Hello, jQuery
		<ul class="ulOfP">
			<li>What is jQuery Core</li>
		</ul>
	</p>
	<p>Thanks, Blueⓘ</p>
</body>
</html>
jQuery(expression [, context])

jQuery(expression [, context])는 jQuery를 이용하여 여러분이 원하는 객체를 찾도록 도와주는 메소드입니다. 인자로는 expression이 있고 context는 옵션인자로 입력하지 않아도 무방합니다.

그럼 각 인자를 살펴보도록 하죠.

expression은 단어뜻을 보면 표현입니다. 즉 jQuery를 이용하여 원하는 객체를 찾도록 표현하라는것입니다. jQuery의 객체 탐색은 이 표현을 통해 이루어집니다. 보통 HTML태그를 통해서 찾기를 원한다면 jQuery(‘input’)과 같이 “input태그를 찾아라”라고 명령할수 있으며 ID값으로 찾기를 원한다면 jQuery(‘#아이디’)와 같이 찾을수 있습니다. 또한 class값으로 찾기를 원한다면 jQuery(‘.클래스’)로 찾을수 있습니다.

자 그럼 jQuery를 통해 첫번째 div태그를 찾아보도록 하겠습니다. 어떤 방법이 있을까요?

alert(jQuery('div').html());
alert(jQuery('#myDiv').html());

위의 예제에서 보듯이 두가지 방법으로 찾을 수 있겠죠? 첫번째는 태그를 통해서… 두번째는 태그안에 설정된 ID값을 통해서 찾아 보았습니다. 위 예제에서는 태그를 찾은다음 그 안에 있는 HTML값을 alert을 이용하여 출력하도록 한 예제입니다.

Blueⓘ의 사족

여기서 기존 JavaScript와 차이가 보입니다. 그럼 그 차이를 한번 보겠습니다.

alert(document.getElementByID('myDiv').innerHTML);
alert(jQuery('#myDiv').html());

위 예제는 jQuery를 사용하지 않고 DIV태그의 ID를 통해 객체를 찾은다음 그 객체 안에 존재하는 HTML을 출력하는 예제이며 아래는 jQuery를 이용해서 객체 안에 존재하는 HTML을 출력하는 예제입니다. 소스가 짧고 간편하게 처리 할 수 있어 좋긴 하지만 html()이라는 메소드는 도대체 무엇일까요? 옆에 있는 정아무개씨는 “내가 자바스크립트를 10년째 하지만 본적도 없는 메소드다”라고 합니다.

맞습니다. html()이라는 메소드는 jQuery의 메소드이지 기존 JavaScript의 메소드가 아닙니다. Prototype이라는 또다른 JavaScript프레임워크와 jQuery와 가장 큰 차이점중 하나가 이것입니다. Prototype은 객체를 찾은다음 순수한 JavaScript의 객체값을 넘겨주지만 jQuery는 탐색한 객체를 jQuery객체로 만들어서 리턴을 해줍니다.

그럼 좀더 알기 쉽게 하기위해 각각 어떤 객체를 넘겨주는지 알아보도록 하겠습니다. 아래 그림은 alert(jQuery(‘#myDiv’));와 alert(document.getElementById(‘myDiv’));로 각각 어떤 값이 리턴되어 넘어오는지 확인해본 결과 입니다.

jquery-element

jQuery를 통한 결과는 일반 Object를 getElementById를 통한 결과는 DivElement를 리턴 해주었습니다. 결국 jQuery를 이용한여 탐색은 객체는 기존 JavaScript의 상식으로는 처리 할 수 없다는 단점을 가지고 있습니다. 하지만 이런 단점들을 웃어넘길수 있을정도로 jQuery의 세계는 막강합니다.

그럼 두번째 P태그는 어떤 방식으로 찾을 수 있을까요? 벌써 응용력이 생기셨을거라 생각합니다. 답은 아래와 같습니다.

alert(jQuery('p').html());
alert(jQuery('#myP').html());
엮인글 주소 : http://www.blueiblog.com/ko/archives/780/trackback
  • 이 숫자를 스팸 방지키란에 입력하여 주세요.
    • 작성자 : 정기욱
    • 2009-08-21 오전 12:01

    좋은강좌 잘보고갑니다.. 블로그 대박나세요 ~~