jQuery 쉽게하기 - 자주 묻는 질문과 답변, 그 첫번째

jQuery Forum을 통해 자주 올라온 질문들을 이곳에 모아 놓은 곳입니다. jQuery의 아주 기초적인 내용들로 구성되어 있어 아주 좋은 내용들이 많이 있습니다.

jQuery.com 에서 바로보기

How do i...? 와 Why do...? 두 가지 섹션으로 구분되어 있습니다. 드디어 제 영어 실력이 뽀록이 나는 순간이네요. 저는 코드를 보고 문장을 유추했습니다. 쿨럭 ^^;;

 

1. How do I ... ? : 어떻게 하는 건가요?

1.1 class 또는 ID를 사용해서 아이템을 선택하는 방법은 무엇입니까?

요소(element)를 선택하는 방법에는 ID로 접근과 class명으로 접근하는 방법이 있습니다. 먼저 "myDivId" 라는 ID를 가진 요소(element)를 선택하기 위해서는 아래와 같은 코드를 사용합니다.

$('#myDivId')

그리고, "myCssClass" 라는 class 를 가진 요소(element)를 선택하기 위해서는 아래와 같은 코드를 사용합니다.

$('.myCssClass')

javascript 변수에 담을수도 있습니다.

var myDivElement = $('#myDivId');

선택된 요소(element)에 jQuery 의 함수들을 적용할 수도 있습니다. 아래 코드는 form input 태그들에서 값을 가져오거나 입력할 수 있는 코드입니다.

var myValue = $('#myDivId').val();    // get the value of a form input
 
 $('#myDivId').val("hello world");     // set the value of a form input

미리보기

 

1.2 특정 class 를 가진 요소(element)를 찾는 방법은 무엇입니까?

요소(element)들 중에 class 가 "protected" 인것을 찾는 방법은 아래와 같습니다. hasClass() 함수를 사용하고 있습니다. 아래 코드는 div 태그들 중에 "protected" class 를 가진 영역을 좌우로 움직이게 하는 내용입니다.

	$("div").click(function(){
		if ( $(this).hasClass("protected") )
			$(this)
				.animate({ left: -10 })
				.animate({ left: 10 })
				.animate({ left: -10 })
				.animate({ left: 10 })
				.animate({ left: 0 });
	});

미리보기(영역을 클릭하세요.)

is() 함수는 요소(element)의 특정한 내용을 비교하여 참/거짓을 반환해 줍니다. 아래 코드는 ID가 myDiv 인 요소의 class 가 pretty 인지 확인하는 내용입니다.

 if ( $('#myDiv').is('.pretty') )
   $('#myDiv').show();

또한 해당 요소가 보이지 않는 속성을 가지고 있다면 보이게 하는 코드도 작성할 수 있습니다.

 if ( $('#myDiv').is(':hidden') )
   $('#myDiv').show();

미리보기

 

1.3 요소(element)가 존재하는지 어떻게 확인할 수 있나요?

찾고자 하는 요소를 호출한 후 그 집합체(collections)의 크기를 체크하면 됩니다. 아래 코드를 확인하세요.

 if ( $('#myDiv').length )
   $('#myDiv').show();

하지만 항상 체크가 필요하지는 않습니다. 아래와 같이 if 문 없이 사용한 아래 코드의 경우에도 요소(element)의 존재 여부에 상관없이 아무일도 일어나지 않습니다. 즉, jQuery에서 자동으로 처리를 해주고 있다는 얘기입니다.

 $('#myDiv').show();

 

1.4 요소(element)의 토글 상태를 알수 있는 방법은 무엇입니까?

토글은 어떤 상태의 반복을 의미한다고 생각하시면 됩니다. 보이고/안보이기 이런 것들이죠. 그러면 어떤 요소(element)의 토글 상태를 알 수 있는 방법은 있을까요? 아래 코드를 보시면 알 수 있습니다.

 var isVisible = $('#myDiv').is(':visible');
 var isHidden = $('#myDiv').is(':hidden');

미리보기

 

요소의 현재 상태에 따라 이벤트 처리를 할 수 있습니다. 아래 코드는 요소가 보이는 상태라면 오른쪽으로 200픽셀 이동 시키는 예제입니다.

$('#myDiv:visible').animate({left: '+=200px'}, 'slow');

미리보기

 

1.5 요소(element)의 ID 에 CSS 사용하는 요소가 들어간 경우 선택하는 방법이 있나요?

이 내용은 escaped 문자에 대한 내용입니다. 만약 우리가 ID 값을 some:id 나 some.id 라고 만들었다고 가정한다면 아래와 같이 접근할 수 있다는 내용입니다.

 // Does not work
 $("#some:id")
  // Works!
 $("#some\\:id")

 // Does not work
 $("#some.id")
  // Works!
 $("#some\\.id")

미리보기

가급적이면 ID 값이나 class 로 특수문자는 쓰지 않아야 겠습니다. 작명법에 대해 고민할 때가 오실지도 ^^;;

내용이 너무 길어져 버렸습니다. 아직 내용이 많이 남아 있어서 2편으로 나눠야 겠습니다.

그럼 즐프하세요~