[JavaScript #2] jQuery 셀렉터

■ jQuery 셀렉터

---

jQuery의 셀렉터에 대해 정리하겠습니다.

셀렉터 가장 기본적이고 중요한 개념입니다.

셀렉터 문자는 문서 내에서 어떠한 것을 선택하여 사용할지 정하는 것인데요. 

수 많은 종류가 있지만, 가장 중요하고 빈번하게 사용되는 셀렉터 위주로 정리하겠습니다.

● 태그 셀렉터

html 문서 내 태그를 선택합니다.

예를들어, <p> ... </p> 태그를 선택할 경우 사용되는데, 아래와 같습니다.

모든 예는 해당 셀렉터를 사용하여 클릭 이벤트를 발생하는 모습으로 하겠습니다.

$("p").click(function(){ ... });

● ID 셀렉터

html 태그 중 id 값을 가진 요소를 선택하는데요.

그중 특정 id값을 직접 입력하여 선택할 수 있습니다. #문자를 사용하는데요.

<div id="ex"> ... </div>인 경우 해당 셀렉터 사용법은 아래와 같습니다.

$("#ex").click(function(){ ... });

● class 셀렉터

html 태그 중 class를 가진 요소를 선택하는데요.

특정 class 명칭을 정하여 직접 선택할 수 있습니다. 여기서는 . 문자를 사용해요

<div class="ex"> ... </div>인 경우 사용법은 아래와 같습니다.

$(".ex").click(function(){ ... });

● 자손 셀렉터

자손 셀렉터. 즉 하위의 특정 태그요소를 쉽게 선택하기 위한 개념입니다.

특정 id 및 class를 사용하지 않을 경우에 사용하는데요.

주로 리스트나 테이블 등 같은 태그가 여러개 있는 경우에 사용됩니다.

예를 보면 좀 더 이해가 쉬울 것입니다.

<ul id="list1">   <li>1번리스트의 1번</li>   <li>1번리스트의 2번</li>   <li>1번리스트의 3번</li>   <div>끝입니다.</div> ... </ul> <ul id="list2">   <li>2번리스트의 1번</li> ... </ul> <ul id="list3">   <li>3번리스트의 1번</li> ... </ul>

위와 같은 문서가 있다고 합시다. 이 중 특정 리스트만을 선택하고자 합니다.

1번리스트만 선택하고자 할 때 바로 자손 셀렉터를 이용합니다.

사용법은 아래와 같습니다.

$("ul#list1 li").click(function(){ ... });

즉, <ul> id가 list1인 것의 하위 li태그를 모두 선택하는 것이지요.

● 유니버셜 셀렉터

위의 예에서 마지막 <div>태그까지 선택하고자 하면 어떻게 할까요?

바로 유니버셜 셀렉터를 사용하면됩니다.

예를 보면 좀 더 이해가 쉬울 것입니다. 사용법은 매우 간단합니다.

$("ul#list1 *").click(function(){ ... });

이해가 바로 되시죠?

---

위에서 정리한 셀렉터를 적절히 활용하여 원하는 요소를 잘 선택해야 합니다.

이를 바탕으로 올바르고 정확한 jQuery를 작성할 수 있기때문입니다.

이해가 안가시는 것은 직접 alert으로 바로바로 확인하는게 이해하기에 좋습니다.

그렇게하면 눈으로 바로 확인할 수 있으니 이해가 빠른 것 같아요.

그럼 포스팅을 마치겠습니다. 감사합니다.