JS) jQuery 요소선택 & 선택자

CSS 선택자를 이용한 선택

jQuery에서는 CSS 선택자를 사용하여 HTML 요소를 선택할 수 있다.

$() 함수에 전달되는 인수는 반드시 따옴표("")를 사용한 문자열 형태로 전달되어야 한다.

 

1. 태그 이름으로 선택

요소(element)의 태그 이름으로 HTML 요소를 모두 선택할 수 있다.
이는 자바스크립트의 getElementsByTagName() 메소드와 동일한 동작을 한다.

아래 예제에서 <button>을 클릭하면, <span>의 태그의 글씨가 사이즈 30px로 설정된다.

  $(function() {
    $("#btn1").on("click", function() {
      $("span[title=lettuce]").css("fontSize", "30px");
    });

  <div>
    <p>안녕하세요. <span title="lettuce">상추</span>입니다.</p>
    <button id="btn1">버튼1</button>
  </div>

 

 

2. 아이디로 선택

요소의 아이디(id)로 특정 HTML 요소를 선택할 수도 있다.
이는 자바스크립트의getElementsById() 메소드와 동일한 동작을 한다.

아래 예제에서 <button>을 클릭하면, 아이디가 lettuce인 글씨가 사이즈 30px로 설정된다.

 $("#btn2").on("click", function() {
      $("#lettuce").css("fontSize", "30px");
    });

 

<div>
    <p>아이디를 이용하여 선택할 수도 있습니다.</p>
    <p>안녕하세요. <span id="lettuce">상추</span>입니다.</p>
    <button id="btn2">버튼2</button>
  </div>

 

3. 클래스로 선택

클래스(class)로 같은 클래스의 HTML 요소를 모두 선택할 수 있다.
이는 자바스크립트의 getElementsByClassName() 메소드와 동일한 동작을 한다.

아래 예제에서 <button>을 클릭하면, 클래스가 lettuce인 글씨가 사이즈 30px로 설정된다.

 

  <h2>클래스 선택</h2>
  <div>
    <p>클래스를 이용하여 선택할 수도 있습니다.</p>
    <p>안녕하세요. <span class="lettuce">상추</span>입니다.</p>
    <button id="btn3">버튼3</button>
  </div>

 

 

4. List 선택

  $("#btn5").on("click", function() {
      $("ul li:first").css("color", "red");
    });

    $("#btn6").on("click", function() {
      $("ul li:nth-child(2)").css("color", "yellow");
    });

    $("#btn7").on("click", function() {
      $("ul li:nth-child(3)").css("color", "orange");
    });

  <h2>List 선택</h2>
  <div>
    <ul>
      <li>사과</li>
      <li>바나나</li>
      <li>오렌지</li>
    </ul>
    <button id="btn5">사과</button>
    <button id="btn6">바나나</button>
    <button id="btn7">오렌지</button>
  </div>

 

결과

 

 

출처 :  https://www.devkuma.com/