13-2-2.jQuery 함수
jQuery() 전역 함수는 인수를 분석하여 jQuery 객체를 생성하는 중요한 역할을 하며 이 함수가 곧 라이브러리 그 자체라고 할 수 있다. 굉장히 자주 사용되므로 $()라는 짧은 별명까지 만들어 두었다. 그래서 jQuery 구문은 거의 언제나 $로 시작하며 $로 시작하면 곧
jQuery 구문이다. jQuery 함수는 인수의 개수와 타입이 가변적인 자바스크립트의
언어적 특징을 최대한 활용하여 전달받은 인수에 따라 여러 가지 다른 동작을 처리한다.
그래서 함수 하나로 여러 가지 일을 처리할 수 있는 이점이 있지만 너무 기능이 많다 보니 초보자가 보기에 헷갈린다는
단점이 있다. 어떨 땐 이렇게 쓰고 어떨 땐 저렇게 쓰니 뭔가 명확해 보이지 않는 것이다. $ 함수가 인수에 따라 어떤 식으로 사용되는지 유형별로 정리해 보자. 상세한
사용법은 이 책 전반에 걸쳐 학습 및 실습할 것이므로 지금은 대충 형태만 봐 두면 된다. 이런 식으로
쓴다는 소개만 하는 것이므로 구체적인 코드는 아직 몰라도 상관 없다.
① $(선택자, [컨텍스트])
가장 자주 사용되는 형태이며 선택자로 작업 대상 엘리먼트를 검색한다. 선택된
엘리먼트는 jQuery 객체에 저장되며 이후 메서드를 호출하여 검색된 엘리먼트에 여러 가지 조작을 가할
수 있다. 첫 번째 예제에서 사용한 $('h1')이 대표적인
사용예이다. 태그나 클래스, ID 등의 여러 가지 기준으로
엘리먼트를 선택한다.
$('p.class')
$('#id')
$('div:odd')
엘리먼트가 선택되어 객체로 포장되면 css 메서드로 스타일을 조작할
수도 있고 text 메서드로 내용을 읽거나 변경할 수도 있다. 어떤
선택자를 사용할 수 있는지는 다음 장부터 순서대로 실습해 볼 것이다. 두 번째 인수인 컨텍스트는 검색의
시작점을 지정한다. 이 인수를 생략하면 문서 전체에서 검색하지만 컨텍스트를 지정하면 그 하위로 검색
범위가 제한된다.
② $(element)
DOM 엘리먼트를 인수로 전달하면 이 객체를 감싸는 jQuery 객체를 리턴한다. DOM 객체는 DOM 메서드로 제어하는 것이 원칙이지만 jQuery 객체로 랩핑하면 jQuery 메서드를 사용할 수 있다. 앞 예제를 이 방식으로 바꾸면
다음과 같다.
jquerywrap.html
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<title>jquerywrap</title>
<script
src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<h1>제목입니다.</h1>
<script>
var
elem = document.getElementsByTagName('h1')[0];
$(elem).css('background',
'yellow');
</script>
</body>
</html>
getElementsByTagName 메서드가 리턴하는 것은 DOM 객체 배열이며 그 첫 번째 요소를 대입받은 elem은 DOM 객체이다. 예제에서는 일부러
DOM 객체를 찾았지만 외부에서 이 객체가 주어졌다고 해 보자. DOM 객체에 대해 css나 text 같은 jQuery 메서드를
직접 호출할 수 없다. 그래서 이 객체를 $() 함수로 전달하여 jQuery 객체로 랩핑하며 이렇게 하면 여러 가지 편리한 jQuery 메서드를
호출할 수 있다.
문서 내의 엘리먼트는 $(선택자) 호출로 jQuery 객체를 만들 수 있으므로 굳이 랩핑을 할 필요가 없다. 위
예제처럼 길게 쓸 필요없이 $('h1')으로 찾는 것이 훨씬 더 간편하다. 그러나 문서 자체인 document나 문서보다 상위의 객체인 window는 선택자로 찾을 수 없다. 또 기존의 자바스크립트 코드와
섞어서 사용하다 보면 DOM 객체를 받는 경우가 있고 jQuery 코드에서도
순회를 하다 보면 DOM 객체를 구하는 경우가 있다. 또
이벤트 핸들러에서 this는 항상 DOM 객체여서 그 자체로는 jQuery 메서드를 사용할 수 없다.
DOM 객체를 조작하려면 DOM 메서드를
호출해야 하지만 불편하고 호환성도 떨어진다. 그래서 jQuery 객체로
래핑한 후 jQuery 메서드로 조작하는 것이 편리하다. $() 함수의
인수로 DOM 객체를 전달하면 이 객체를 감싸는 jQuery 객체가
리턴되며 이후 jQuery 메서드를 마음대로 호출할 수 있다. $()
함수로 DOM 객체의 배열을 전달하면 배열의 모든 객체가 하나의 jQuery 객체로 랩핑된다.
③ $(html, [소유문서])
인수로 전달된 html 문자열로 새로운 엘리먼트를 직접 생성한다. 이렇게 생성한 엘리먼트를 DOM 트리의 원하는 부분에 삽입하여 실행중에
문서를 만들 수 있다. 일반 문자열이면 선택자로 인식되므로 문자열 내부에 반드시 <> 괄호가 포함되어 있어야 한다. 다음 예제는 실행중에
엘리먼트를 만들어 문서에 추가한다.
makeelement.html
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<title>makeelement</title>
<script
src="jquery-1.11.0.min.js"></script>
</head>
<body>
<script>
var
elem = $('<p>실행중에 만든 엘리먼트입니다.</p>');
elem.appendTo('body');
</script>
</body>
body에는 스크립트만 있고 태그가 전혀 없지만 코드에 의해 태그가
실행중에 추가된다. $(HTML 태그 문자열) 형태로 문서
조각을 만들고 append 메서드로 원하는 곳에 턱하니 붙이면 된다.
문단을 하나 만든 후 body에 붙였으므로 웹 페이지에 문단이 표시된다.
두 번째 인수로 소유 문서를 전달하면 새로 만든 엘리먼트는 이 문서에 소속된다.
또는 두 번째 인수로 새로 만들어진 엘리먼트에 부착될 속성이나 이벤트, 메서드를 전달할
수도 있다.
④ $(함수)
$() 함수의 인수로 다른 함수를 전달하면 문서가 로드될 때 호출될
콜백 함수를 등록한다. window.onload 이벤트와 유사한
document.ready 이벤트에 대한 핸들러 함수를 지정하는 것이며 이 코드는 로드 직후에 곧바로 실행된다. 초기화 완료 이벤트를 자주 사용하므로 축약된 형태를 지원하며 스크립트 코드를
head에 작성할 때는 반드시 콜백 함수 안에 코드를 작성해야 한다. 첫 번째 예제를 다음과
같이 쓸 수도 있다.
jqueryready.html
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<title>jqueryready</title>
<script
src="jquery-1.11.0.min.js"></script>
<script>
$(function()
{
$('h1').css('background',
'yellow');
});
</script>
</head>
<body>
<h1>제목입니다.</h1>
</body>
</html>
head의 스크립트에서 더 뒤쪽에 있는 body의 <h1>을 참조하지만 초기화 완료 후에 스크립트가
실행되므로 이상없이 참조할 수 있다. 만약 다음과 같이 콜백 함수 안에 작성하지 않고 스크립트를 바로
작성하면 이때는 아직 <h1>이 로드되지 않은 상태이므로 제대로 검색되지 않을 것이다.
<script>
$('h1').css('background',
'yellow');
</script>
이상으로 $() 함수의 주요 사용 형태를 정리해 보았다. 문서에 존재하는 엘리먼트를 찾을 때가 압도적으로 많으므로 1번 형태를
제일 많이 사용한다. 워낙 인수의 형태가 다양해서 헷갈리고 복잡해 보이지만 오버로딩의 한 예일 뿐이며
앞으로 4가지 형태를 골고루 실습해 볼 것이다.