jQuery - 셀렉터(selector) 선택자 (기본, 계층별 요소선택)

2022. 3. 11. 23:38

jquery의 선택자(selector)가 어떤 방식의 방법으로 사용할 수 있는지 정리를 해보자.

▶ All Selector

var allEl = $('*');
→ 별표(*)로 표시되는 All 선택기이다. 웹페이지의 모든 DOM 요소, head 요소와 그 자식까지 검색 가능.

▶ ID Selector (id 선택기)

$('#HTML 요소의 ID')
→ id 선택기는 jQuery 뿐만 아니라 자바스크립트에서도 많이 사용한다. 자바스크립트에선
document.getElementById('HTML 요소의 ID') 이렇게 사용한다.

사용법 예)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>  
  <h1 id="subject">테스트 입니다. id 선택기</h1>
</body>
</html>

$('#subject')

만약 HTML에서 동일한 ID를 가진 태그가 있다고 하면 jQuery 선택기는 처음 발견된 일치 요소만

검색한다. (※ HTML 페이지 내에 동일한 Id를 적용할 순 있지만 유효하지 않은 행동이니 하지 말자)

▶ Class Selector (class 선택기)

$('. HTML 요소 class')
→ 클래스 선택기는 사용된 CSS 클래스 이름으로 요소를 검색한다. 자바스크립트에선 getElementsbyClasName() 함 수 를 사용한다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>  
  <h1 class="test-class">테스트 입니다. class 선택기</h1>
  <h2 class="test-class">테스트 입니다. class 선택기</h2>
  <h3 class="test-class">테스트 입니다. class 선택기</h3>
  <h4 class="test-class">테스트 입니다. class 선택기</h4>
</body>
</html>

$('.test-class')

이렇게 같은 클래스의 이름의 태그가 4개가 있음 전부 선택된다.

▶ Elements Selector (엘레멘트_태그 선택기)

$('태그 요소')
→ 태그 이름을 기반으로 요소를 선택할 수 있다. 자바스크립트에선 getElementsByTagName() 함수를 사용한다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>  
  <div>테스트 입니다.</div>
  <div>테스트 입니다.</div>
  <div>테스트 입니다.</div>
  <p>p 태그 입니다.</p>
  <div>
  	<div id="test-id">테스트 입니다.</div>
  </div>

	<span>테스트 입니다. - 2번</span>
</body>
</html>

$('div')

엘레먼트를 사용하여 선택기를 사용할 경우 같은 이름의 태그들이 많기 때문에 다른 요소를 함께 섞어서 사용을 해야 한다. 위 HTML의 고려한 아래 코드를 적용한 사용법

$('div#test-id') // 엘리먼트와 ID를 혼합해서 사용

$('p, span') // p 태그와 span 태그를 동시에 선택

이렇게 사용을 한다. 하지만 추천하지 않는다. 이유는 성능과 유용성이라는 두 가지 이유로 사용하지 않는 게 좋다. jQuery는 요소를 찾을 때 HTML의 전체 요소를 검색하는데 여기에 성능 소비를 하기 때문에 코드가 엄청 긴 HTML 페이지가 있다면 성능 저하가 일어날 수 있다.

▶ 계층별 요소 선택

$('태그 요소 > 태그 요소 > 태그 요소')
→ 특정 요소 지계 자식만 선택하려 할 때 유용하게 쓰입니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <title>JS Bin</title>
  <script>
    $(document).ready(function(){
        $('div.divItem > ul > li').css({'background':'red'});
    });
  </script>
</head>
<body>
  <div class="divItem">
    <ul>
      <li> 첫번째</li>
      <li> 두번째</li>
    </ul>
  </div>
  
  <div>
    <span>
      안녕하세요 테스트 입니다.
    </span>
  </div>
  
  <div class="divItem">
    <span>
      안녕하세요 테스트 입니다.
    </span>    
  </div>
</body>
</html>

$('div.divItem > ul > li')

이렇게 사용을 하면 li 태그의 첫 번째인 태그를 선택한다.

이처럼 클래스 이름으로 요소 집합을 검색하는 것은 좋지만 전체 jQuery는 같은 클래스의 이름을

다 찾아서 검색하기 때문에 이렇게 하고 싶지 않을 경우 특정 요소의 직계 자식만 선택하려면 위 같은

선택자를 이용해도 좋다.

저작자표시 비영리 변경금지

'web 언어 > jQuery' 카테고리의 다른 글

jQuery - 셀렉터(selector) 선택자 (위치필터를 이용하여 요소 선택- first, last, even, odd, eq(), gt(), lt()) (0)	2022.03.12
jQuery - 셀렉터(selector) 선택자 (속성을 이용하여 요소선택) (0)	2022.03.12
jQuery - 태그 삽입, 태그 넣기 tag insert (0)	2022.03.10
jQuery - 선택자 :eq() 인덱스 사용자 지정 선택기 (0)	2022.03.07
jQuery - 키보드 키 어떤 키가 눌렸는지 확인하는 방법 (0)	2022.03.06

열공의 기록