jQuery - FAQ

출처 : http://findfun.tistory.com/category/jQuery?page=15

출처에 가시면 훨씬 정확한 내용과 예제를 보실 수 있습니다. 

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'); .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")