[jQuery] 선택자 - 기본 선택자 예제

 

안녕하세요.

BigHan입니다.

 

이번에는 jQuery 선택자 중 기본 선택자 예제를 다뤄보겠습니다.

예제를 다루기 위해서 JSFiddle 사이트를 사용하도록 하겠습니다.

 

JSFiddle에 관하여는 차후 간단하게 소개하는 시간에 알려드리겠습니다.

(사실 저도 JSFiddle이 어떤 기능들이 있는지 알지 못합니다.)

 

아무튼 이곳에 가서 예제를 다뤄가면서 실습하도록 하겠습니다.

 

cdn 추가에서 jQuery를 추가해주고 백지상태에서 시작해도록하겠습니다.

 

먼저 예제를 시작하기전에 기본 선택자는 다음과 같습니다.

 

   1. "*"

   2. ".class"

   3. "element"

   4. "#id"

   5. "selector1, selector2"

 

이 다섯가지 선택자를 사용하기 위하여 먼저 element(요소)를 만들어보겠습니다.

 

JSFiddle에 HTML 입력하는 곳에 다음과 같은 코드를 기입해 주도록 합니다.

<div>
  <ul id="its_ul">
    <li class="its_li" id="its_li_first">첫번째 li태그 입니다.</li>
    <li class="its_li" id="its_li_second">두번째 li태그 입니다.</li>
    <li class="its_li" id="its_li_third">세번째 li태그 입니다.</li>
    <li class="its_li">네번째 li태그 입니다.</li>
    <li>다번째 li태그 입니다.</li>
  </ul>
</div>

이에 따른 출력 결과물은 다음과 같습니다.

그리고 다음과 같은 jQuery 선택자에 대하여 결과를 알아보도록 하겠습니다.

 

      1. "*" : 모든 element 선택

    1-1. $("*")

1-1.을 console을 찍어 보면 다음과 같은 모습을 볼수 있습니다.

     

HTML 영역에 있는 element말고도 기본적인 JSFiddle의 element까지 모두 읽어오는 것을 볼수 있습니다.

참고로 13~19번까지가 HTML 영역에 기입한 내용인듯합니다.

 

   1-2. $("*").css("border","1px solid red")

1-2. 의 출력결과는 다음 그림과 같습니다.

보시는 바와 같이 모든 영역에 대하여 1px의 빨간 테두리가 적용된것을 볼수 있습니다.

 

      2. ".class"

   2-1. $(".its_li")

console을 찍어보면 다음 그림과 같은 결과가 나타납니다.

class가 'its_li'인 element가 총 4개인 것을 볼수 있습니다.

    <li class="its_li" id="its_li_first">첫번째 li태그 입니다.</li>
    <li class="its_li" id="its_li_second">두번째 li태그 입니다.</li>
    <li class="its_li" id="its_li_third">세번째 li태그 입니다.</li>
    <li class="its_li">네번째 li태그 입니다.</li>

   2-2. $(".its_li").css("border","1px solid red")

2-1.에서 선택된 4개의 element의 테두리가 파랑색으로 둘러쌓인것을 확인할수 있습니다.

 

      3. "element"

   3-1. $("li")

console을 찍어보면 다음 그림과 같은 결과가 나타납니다.

<li>태그가 모두 선택된 것을 확인할수 있습니다.

    <li class="its_li" id="its_li_first">첫번째 li태그 입니다.</li>
    <li class="its_li" id="its_li_second">두번째 li태그 입니다.</li>
    <li class="its_li" id="its_li_third">세번째 li태그 입니다.</li>
    <li class="its_li">네번째 li태그 입니다.</li>
    <li>다번째 li태그 입니다.</li>

   3-2. $("li").css("border","1px solid yellow")

3-1.에서 선택된 <li>태그 모두가 노란색 테두리로 둘러 쌓인 것을 확인할수 있습니다.

      4. "#id"

   4-1. $("#its_li_first")

console을 찍어보면 다음과 같음을 볼수 있습니다.

 <li class="its_li" id="its_li_first">첫번째 li태그 입니다.</li>

해당 아이디 하나만 선택된 것을 알 수 있습니다.

지금까지 봐왔던 선택자들은 여러개 선택되지만 이 '#id' 선택자는 단 한개의 선택자만 가지고 오는데요.

이는 element의 id속성이 문서(document)내에 하나만 존재하기 성격과 유사한 것을 볼수 있습니다.

 

   4-2. $("#its_li_first").css("border","1px solid skyblue")

4-1.에서 선택된 element만 하늘색 테두리로 표현되어 지고 있네요.

 

      5. "selector1, selector2"

   5-1. $("#its_li_second, #its_li_third")

console을 확인하면 다음과 같이 id가 its_li_second, its_li_third인 두 요소(element)가 선택된 것을 볼 수있습니다.

    <li class="its_li" id="its_li_second">두번째 li태그 입니다.</li>
    <li class="its_li" id="its_li_third">세번째 li태그 입니다.</li>

여기서 #id 선택자가 아닌 그 어떤 선택자가 와도 무관합니다.

예를들면 #id 선택자와 #class 그리고 element 선택자가 모두 온다는 가정한다면

$("#id, .class, element")로 선택하면 지정한 모든 element가 선택될 거에요.

이것은 여러분들이 확인하면 좋은 연습예제가 될것 같습니다.

 

   5-2. $("#its_li_second, #its_li_third")
           .css("border","1px solid gray")

5-1. 에서 선택된 두 element의 테두리가 회색으로 표현되어진 것을 확인 할수 있습니다.

지금까지 '기본 선택자'에 대해서 알아보았는데요

더 많은 선택자에 대해서 알아보고 싶으시다면 이곳을 눌러 확인하시면 됩니다.

 

궁금한 사항들은 댓글로 남겨주세요~~~

 

그외 선택자(Selector)에 관심있으신 분들은 여기서 확인하시면 될듯합니다.