jQuery - 셀렉터 시작하기

jQuery 셀렉터 기능은 CSS 의 선택자 기능과 거의 동일하게 이용할 수 있습니다. 따라서 CSS 선택자에 대해 조금이라도 알고 있다면 그리 어렵지 않을 것입니다.

일반 선택자

기본적인 선택자는 다음 표와 같습니다.

선택자	설 명
$(*)	모든 요소를 선택
$(#아이디)	id 속성의 값과 일치하는 요소
$(.클래스)	class 속성의 값과 일치하는 모든 요소
$(n1, n2, …)	쉼표로 구분해서 여러 요소를 한꺼번에 선택
$(요소)	일치하는 모든 요소를 선택

아이디 선택자

id 선택자는 id 속성의 값과 일치하는 처음으로 나오는 요소만 선택합니다.

<script>
$(function(){
  $("#example").css("background", "brown");
});
</script>

<!-- 첫 번째 example 인 div 요소만 선택함 -->
<div id="example"> a </div>
<div id="example"> b </div>

그래서 다음의 방법으로 id 속성과 일치하는 모든 요소를 선택할 수 있습니다.

$(function(){
  $("* #example").css("background", "brown");
});

$(function(){
  $("div#example").css("background", "brown");
});

클래스 선택자

class 속성의 값과 일치하는 모든 요소를 선택합니다.

<script>
  $(function(){
    $(".example").css("background", "brown");
  });
</script>

<!-- example 값과 일치하는 모든 요소가 대상 -->
<div class="example">스타일로 지정한 예제.</div>
<p class="example"> b </p>

복합 선택자

두 개 이상의 요소를 선택할 수 있는 복합 선택자를 사용할 수 있습니다.

선택자	설 명
$(a1#a2)	a1 요소의 속성이 a2 인 요소
$(a1, a2, ...)	a1, a2 요소에 한꺼번에 선택
$(a1 a2)	a1의 자손인 a2요소를 찾음. 부모요소에 포함된 모든 하위요소에 적용
$(a1 > a2)	a1의 자식인 a2요소를 찾음.
$(a1 + a2)	a1 다음에 나오는 첫 번째 요소가 a2 요소라면 선택.
$(a1 ~ a2)	a1 다음에 나오는 모든 요소가 a2 요소라면 모두 선택.

a1#a2 선택자

동일한 속성을 가진 두 요소가 있다고 가정해봅시다. 하나의 요소에만 스타일을 적용하고 싶은데 어떻게 해야 할까요? 이럴 때는 이렇게 작성합니다.

<script>
  $(function(){
    $("div#example").css("background", "red");
  });
</script>

<div id="example"> a </div>
<p id="example"> b </p>

a1, a2 선택자

쉼표(,)로 구분해서 여러 요소를 한꺼번에 선택할 수 있습니다. 다음은 a, b, c 태그를 찾아 스타일을 적용합니다.

<script>
  $(function(){
    $("a, b, c").css("background", "brown");
  });
</script>

<a> a </a><br>
<b> b </b><br>

<d><c>안녕</c>하보니</d>

a1 a2 선택자

부모요소가 포함하는 아래 요소를 자식요소라 부르고, 그 아래 요소를 자손, 또는 손자요소라고 부릅니다. 이것을 통틀어 하위요소라고 합니다.



하위 선택자는 부모요소가 포함하는 모든 하위 요소에 스타일을 적용합니다.

<script>
 $(function(){
   $("#user-container ul").css('border', '1px solid');
 });
</script>

<div id='user-container'>
  <!-- ul : 자식요소 -->
  <ul>
    <li>자식 요소 1</li>
    <li>자식 요소 2</li>
    <li>자손
      <!-- ul : 자손요소 -->
      <ul>
        <li>자손 요소 1</li>
        <li>자손 요소 2</li>
      </ul>
    </li>
    <li>자손
      <!-- ul : 자손요소 -->
      <ul>
        <li>자손 요소 1</li>
        <li>자손 요소 2</li>
      </ul>
    </li>
  </ul>
</div>

a1 > a2 선택자

이 선택자를 자식 선택자라고 부릅니다. 부모요소 아래 요소, 즉 자식요소만 선택합니다.

<script>
  $(function(){
    $("#user-container > ul").css("border", "1px solid");
  });
</script>

<div id='user-container'>
  <!-- ul 자식요소 -->
  <ul>
    <li>자식 요소 1</li>
    <li>자식 요소 2</li>
    <li>자손
      <!-- ul : 이건 자손요소 -->
      <ul>
         <li>자손 요소 1</li>
         <li>자손 요소 2</li>
      </ul>
    </li>
    <li>자손
      <!-- ul : 요것도 자손요소 -->
      <ul>
        <li>자손 요소 1</li>
        <li>자손 요소 2</li>
      </ul>
    </li>
  </ul>
</div>

a1 + a2 선택자

같은 레벨에 있는 요소가 형제요소가 되고, 이것을 인접 형제 선택자라 부릅니다. 이 선택자는 a1 다음에 나오는 첫 번째 요소가 a2 요소라면 선택하고 아니라면 선택하지 않습니다.

<script>
  $(function(){
    $("#use-sibling h4+div").css("background", "yellow");
  });
</script>

<div id="use-sibling">
  <div>a</div>
  <!-- h4 다음에 div 이므로 일치 -->
  <h4>b</h4>
  <div>c</div>
  <div>d</div>
</div>

<script>
  $(function(){
    $("#use-sibling h4+div").css("background", "yellow");
  });
</script>

<div id="use-sibling">
  <div>a</div>
  <!-- h4 다음에 div 가 아니므로 불일치 -->
  <h4>b</h4>
  <aa>c</aa>
  <div>d</div>
</div>

a1 ~ a2 선택자

일반 형제 선택자라 부르는 이 선택자는 인접 형제 선택자와는 달리 a1 다음에 나오는 모든 요소가 대상이 됩니다.

<script>
  $(function(){
    $("#use-sibling h4~div").css("background", "yellow");
  });
</script>

<div id="use-sibling">
  <div>a</div>
  <!-- h4 다음에 나오는 모든 div 를 찾음 -->
  <h4>b</h4>
  <aa>c</aa>
  <!-- 일치 -->
  <div>d</div>
  <bb>e</bb>
  <!-- 일치 -->
  <div>f</div>
</div>