[Jquery] Selector (선택자)

Study/Javascript, Jquery, CSS  2016. 3. 26. 13:23

안녕하세요 명월입니다.


이번 포스트에서는 Jquery의 Selector(선택자)에 대해 공부하겠습니다.


Jquery Selector는 「$(선택자)」의 구조로 사용됩니다.


링크 - W3School Jqury Selector Tutorial


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <BODY>
    <div id="exam1"><span>Exam</span></div>
    <script>
      $("div#exam1 > span").css("background-color","blue");
    </script>
  </BODY>
</HTML>
Exam

위는 간단한 예제입니다만 Jquery의 선택자를 보니 CSS의 선택자와 같습니다. 그 밖에 많은 CSS의 선택자 Jquery에서 사용할 수 있을 것같네요.


링크 - [Jquery, CSS] 선택자(Selector)


CSS의 선택자를 생각해보면 분명 단일 요소만 선택하는 게 아니라 같은 class를 선언했을 경우 복수의 요소가 적용되었었습니다. Jquery에서도 이러한 기능이 지원돼서 일괄처리가 가능합니다. 그리고 복수의 요소를 iterator 패턴으로 each 함수를 이용해서 각기 요소에도 대응할 수 있습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <BODY>
    <div id="exam2">
      <p><span>Exam</span></p>
      <p><span>Exam</span></p>
      <p><span>Exam</span></p>
    </div>
    <script>
      $("div#exam2 > p > span").css("background-color","blue");
      $("div#exam2  span").css("color","white");
      $("div#exam2 > p > span").each(function(idx){
        $(this).html(idx+"요소");
      });
    </script>
  </BODY>
</HTML>

Exam

Exam

Exam

그밖에 Jquery는 CSS의 선택자를 이용한 형태 이외에도 함수 형식의 선택자가 있습니다.

선택 요소의 보모 노드을 선택할 때는 parent, 자식 요소를 선택할 때는 children(), 형제 요소는 prev(), next(), prevAll(), nextAll()이 있습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <TITLE> New Document </TITLE>
    <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
  </HEAD>
  <BODY>
    <div id="eaxm3">
      <p><span>1</span><span>2</span></p>
      <p><span>3</span><span>4</span></p>
      <p><span>5</span><span>6</span></p>
      <p><span>7</span><span>8</span></p>
    </div>
    <script>
      $("div#eaxm3 > p:nth-child(1) > span").parent().css("background-color","yellow");
      $("div#eaxm3 > p:nth-child(1) > span").parent().next().children("span:nth-child(1)").css("background-color","red");
      $("div#eaxm3 > p:nth-child(1) > span").parent().next().nextAll().css("background-color","blue");
    </script>
  </BODY>
</HTML>

12

34

56

78

지금까지 예제는 Jquery뒤에 css 함수를 써서 style을 변경하였습니다. 실제 코딩할 때는 이런 식으로 개발하지는 않습니다. Style에서 처리하지 못하는 부분만 CSS 함수를 사용합니다. 선택자 공부를 위해 사용한 거예요.다음 포스트부터는 Jquery의 함수에 대해 공부하겠습니다.

저작자표시 비영리 동일조건

'Study > Javascript, Jquery, CSS' 카테고리의 다른 글

[HTML] 메타 태그(SEO 최적화 포함)  (0) 2020.01.12
[HTML] Html의 태그 구조  (1) 2020.01.09
[Jquery] Jquery의 이벤트(Event) 관련 함수 - 2 (Mouse Events)  (0) 2016.03.30
[Jquery] Jquery의 이벤트(Event) 관련 함수 - 1 (Attachment)  (2) 2016.03.29
[Jquery, CSS] Jquery의 CSS 관련 함수  (0) 2016.03.28
[Jquery] Attributes 관련 함수  (0) 2016.03.27
[Jquery] Ajax(비동기 통신)와 Json  (0) 2015.07.05
[Jquery] Jquery 기초  (0) 2015.07.04