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

FAQ 두번째 입니다. 내용 중에 AJAX에 대한 내용이 있는데요. 그 내용은 일단은 넘어가겠습니다. 하려면 넘 길어질 것 같습니다.

자 그러면 자주 묻는 질문과 답변 그 두번째 시작합니다.

 

 

1.6 요소(element)를 사용 가능/불가능 처리하려면?

어떤 요소의 사용할 수 있는 조건을 제어할 때 사용합니다. 눈으로 보시면 간단합니다. 아래 코드는 select 박스의 사용 설정을 바꾸는 내용입니다.

 // Disable #x
 $('#x').attr('disabled', true);
 // Enable #x
 $('#x').attr('disabled', false);

위처럼 disabled 속성값 요소인 true/false 로 제어하는 방법과 아래 처럼 disabled 속성을 제거하는 방법이 있습니다.

 // Disable #x
 $("#x").attr('disabled', 'disabled');
 // Enable #x
 $("#x").removeAttr('disabled');

미리보기

 

1.7 체크박스를 제어하는 방법은?

체크박스의 체크를 선택/해제하는 방법입니다.

 // Check #x
 $('#x').attr('checked', true);
 // Uncheck #x
 $('#x').attr('checked', false);

체크박스도 마찬가지로 위처럼 disabled 속성값 요소인 true/false 로 제어하는 방법과 아래 처럼 disabled 속성을 제거하는 방법이 있습니다.

 // Check #x
 $("#x").attr('checked', 'checked');
 // Uncheck #x
 $("#x").removeAttr('checked');

미리보기

 

1.8 셀렉트 박스에서 선택된 내용의 value 와 text 값을 가져오는 방법은?

바로 샘플코드와 미리보기를 확인하시죠.

 $("#myselect").val();
 // => 1

 $("#myselect option:selected").text();
 // => "Mr"

미리보기

 

1.9 10개의 아이템으로 이루어진 리스트에서 3번째 요소의 텍스트를 가져오거나 다른 문자로 대치하려면?

음. 조금 난이도가 있는 내용이 나왔네요. 집합체(collections)로 구성된 요소에서 특정 순서의 요소에 접근하기 위해서는 :eq() 또는 .eq() 함수를 사용합니다.

$(this).find('li a').eq(2).text(); //li 태그로 구성된 어떤 요소 집합 중에서 2번째 요소의 텍스트 값

그렇다면 질문의 50% 는 답변이 된 것 같습니다. 가져온 텍스트를 다른 문자로 대치하려면 replace('a', 'b') 함수를 사용하면 됩니다. 직관적으로는 아래와 같이 쓰면 될 것 같지만 이것 보다는 좀 더 복잡하다고 얘기해 주네요. 아래 코드를 보실까요.

  // This doesn't work; text() returns a string, not the jQuery object
  $(this).find('li a').eq(2).text().replace('foo','bar');

  // This works
  var $thirdLink = $(this).find('li a').eq(2);
  var linkText = $thirdLink.text().replace('foo','bar');
  $thirdLink.text(linkText);

위의 두번째 예제처럼 사용해야 합니다. text() 함수의 사용법을 잘 파악하면 아래 예제로 처리하는 내용을 이해하실 수 있습니다. text() 라고 하면 값을 가져오는(get) 것이고 text(some) 하면 some 이라는 문자를 설정하는(set) 하는 내용이 됩니다. 하나의 기법이니 문장처럼 알고 계시면 될 듯 합니다.

 

1.10 내가 작성한 코드를 압축하려면 어떻게 하나요?

개발이 완료된 코드를 압축해서 용량을 줄이는 방법에 대한 팁을 적어 주었네요. 이 내용은 jQuery랑 크게 관련은 없습니다. 하지만 알아둬서 나쁠건 없겠네요. 만드신 코드를 jQuery 의 Uncompressed 버젼처럼 만들고 싶으시다면 아래 링크에 있는 툴들을 사용하시면 됩니다.

Google Closure Compiler http://code.google.com/intl/ko/closure/compiler/
Yahoo YUI compressor http://developer.yahoo.com/yui/compressor/
Dean Edwards' Packer http://dean.edwards.name/packer/

물론 링크를 따라 가셔서 튜토리얼을 좀 보셔야 하는건 있습니다. 전부 영어라는 것 빼고는 뭐 별거 없네요. ^^;; 마지막 Dean Edward 의 Packer 는 정말 쓸만한 거 같습니다. 직접 경험해 보세요. 코드를 encode 하는 부분도 있어서 소스 분석을 할 수 없도록 좀 지져분하게 만들어 주기도 합니다. 백문이 불여일견~

 

1.11 버그 신고는 어떻게 하나요?

영어가 자신있으시면 아래 주소로 가셔서 버그를 신고를 하실 수 있습니다.
http://bugs.jquery.com/newticket

1.12 AJAX 사용법에 대해 알려주세요.

드디어 나왔네요. AJAX는 따로 구성을 해 볼 생각입니다. 내용이 많아서 여기다 쓰다간 아마.. ^^ 절대 귀찮아서 그런거 아닙니다. 절대요~ ㅎㅎ

 

1.13 jQuery 객체에서 DOM 요소(element)를 끌어내려면?

DOM 이란 Document Object Model 의 약자입니다. 문서를 구성하는 모든 요소가 객체라는 넓은 의미로 해석할 수 있습니다. 개발자는 문서의 모든 요소에 접근할 수 있는데 이 개념적인 요소로 DOM 을 사용합니다. 좀 내용이 많은데 이 부분은 jQuery와는 별도로 공부할 필요가 있습니다. jQuery 도 사실 알고 보면 native DOM 의 모든 속성, 함수들을 바탕으로 작성된 라이브러리입니다. 이 부분에 대해서는 관련 링크를 제시하는 것 정도로 마무리 하겠습니다. 제가 자주 가는 사이트인 http://www.w3cshcool.com의 DOM 파트입니다. 바로가기

 

그 이하는 Why Do I 섹션이 있는데요. 이 부분은 생략하도록 하겠습니다. AJAX 에 관련된 내용과 jQuery 의 animation 효과를 위해서 왜 영역이 display 속성이어야 하는가와 같은 질문이 있는데요. 그냥 넘어가도 크게 무리없는 내용인 것 같습니다. 그리고 COOKBOOK에 대한 내용이 있는데요. 이 부분은 그냥 소스를 복사하셔서 사용해 보시면 확인하실 수 있는 내용이기 때문에 직접 해보시길 권유드립니다.

휴우~ 긴 글 따라오시느라 수고 많으셨습니다. jQuery를 사용하는 것은 아주 쉽습니다. 단 10분만에 사용하실 수 있는 예제들도 많이 널려 있습니다. 그럼에도 이 글을 읽어주시는 분들에게 다시 한번 감사드립니다.

그럼 즐프하세요.