본문 바로가기

웹프로그래밍/jQuery

jQuery란?

반디앤루니스 책소개 페이지로 이동 

  본 포스팅의 내용은 실전 jQuery 쿡북(v1.4.x 증보판)에서 발췌하여 편집한 것임을 미리 밝힙니다. 




jQuery란?  

jQuery는 HTML 문서, 보다 정확하게는 문서 개체 모델(DOM)과 자바스크립트 사이의 상호작용을 간단하게 해주는 오픈 소스 자바스크립트 라이브러리이다. jQuery는 HTML 문서를 간단히 탐색하고 조작하며, 브라우저 이벤트 처리, DOM 애니메이션, Ajax 상호작용 및 자바스크립트 크로스 브라우저 개발을 쉽게 해준다.


jQuery의 장점은 오픈소스라서 무료로 이용이 가능하고, 용량이 작으며, 웹표준을 직접 처리할 필요가 없고, 플러그인 자료들이 풍부하다는 것이다. 




jQuery의 특징  
 
jQuery의 특징은 크게 세 가지 개념으로 나누어 질 수 있다.
  • CSS 셀렉터를 통해 몇몇 요소를 찾아서 그들로 jQuery 메서드를 사용하여 어떤 작업을 수행
  • 요소의 집합에 대해 여러 jQuery 메서드를 체인으로 연결 
  • jQuery 래퍼와 암시적인 반복을 사용


첫번째 개념은 몇몇 요소(태그)를 찾아서 그들로 어떤 작업을 수행하게 하는 것인데 이는 좀 더 구체적으로 말해 DOM 안에 있는 요소 집합을 찾은 다음 그 요소 집합을 가지고 어떠한 작업을 수행하는 것을 말한다.
 
아래의 코드는 페이지의 <div> 요소를 찾아 숨기거나 텍스트를 나타내는 등의 작업을 수행하는 jQuery 코드이다.

// 페이지의 모든 div를 숨긴다.
jQuery('div').hide();

// 모든 div의 내부 텍스트를 변경한다.
jQuery('div').text('new content');

// div에 updatedContent 클래스를 추가한다.
jQuery('div').addClass("updatedContent");

// 페이지에 모든 div를 나타낸다.
jQuery('div').show();




두번째 개념은 일단 요소를 찾고 나면 그 요소에 대해 체인으로 연결 할 수 있다는 것이다. 명확하게 말해, 체인은 jQuery 함수를 사용하여 현재 선택된 요소에 jQuery 메소드를 끝없이 연결하여 적용할 수 있게 하는 기법이다. 내부적으로 각 메소드들은 항상 jQuery 메소드가 적용되기 전에 선택된 요소를 반환하는데, 그렇기에 체인을 계속 이어갈 수 있는 것이다.

아래의 코드는 첫번째 개념을 설명하는데 쓰였던 코드를 체인을 사용해 단일 코드로 변경한 것이다. 

jQuery('div')
	.hide()
	.text('new content');
	.addClass("updatedContent");
	.show();




세번째 개념은 jQuery에서는 요소들의 래퍼 집합을 선택하여 다루게 된다는 것이다. 다시 말해 jQuery 기능으로 둘러싸인 DOM 요소를 HTML 페이지에서 선택하게 될 것이라는 의미이다. 이러한 래퍼 집합은 하나의 DOM 요소를 포함하기도 하고, 때로는 여러 개를 포함하기도 하며, 심지어 아무런 요소를 포함하지 않는 경우도 있다. 이러한 경우 비어있는 래퍼 집합에 대해 jQuery 메소드를 호출한다면 (에러를 포함한) 어떠한 반응도 하지 않는다. (따라서 null 값을 체크하는 if문을 사용할 필요가 없다.)

아래의 코드의 경우 jQuery는 페이지의 모든 <div> 요소를 찾아내어 래퍼 집합으로 바꾼 후 각각의 DOM 요소들에 대해 연결된 jQuery 메서드를 실행한다. 즉, hide() 메소드가 집합 안에 있는 각각의 <div> 요소에 모두 적용되는 것이다. 곧, 명시적으로 루프를 수행하지 않아도 내부적으로 간결한 루프가 실행되는 것이다.

<body>
	<div>old content</div>
	<div>old content</div>
	<div>old content</div>
	<div>old content</div>

	<script>
		// 페이지의 모든 div를 숨김
		jQuery('div').hide();
	</script>
</body>