jQuery 선택자 정복 가이드: 기본부터 심화까지

프로그래밍/Javascript

jQuery 선택자 정복 가이드: 기본부터 심화까지

shimdh 2025. 2. 17. 09:39

728x90

1. 기본 선택자: jQuery 선택자의 기초

기본 선택자는 jQuery 선택자의 가장 기본적이면서도 강력한 형태로, CSS 선택자와 유사한 문법을 사용합니다. HTML 태그, ID, 클래스 등을 기준으로 요소를 선택하며, 웹 페이지의 특정 요소를 빠르고 간편하게 조작할 수 있도록 돕습니다.

1.1 핵심 기본 선택자

태그 선택자: 특정 HTML 태그 이름을 가진 모든 요소를 선택합니다.
```
$('p') // 모든 <p> 태그 선택
$('div') // 모든 <div> 태그 선택
$('a') // 모든 <a> 태그 선택
```
설명: $('p')는 문서 내의 모든 <p> 태그를 선택합니다. 이처럼 태그 선택자는 특정 태그를 가진 모든 요소에 스타일을 적용하거나 이벤트를 연결할 때 유용하게 활용됩니다.
ID 선택자: 고유한 ID 속성을 가진 요소를 선택합니다. ID는 HTML 문서 내에서 유일해야 하므로, ID 선택자는 단 하나의 요소만 선택합니다.
```
$('#myId') // id가 "myId"인 요소 선택
$('#header') // id가 "header"인 요소 선택
```
설명: $('#myId')는 id 속성 값이 myId인 요소를 선택합니다. ID 선택자는 특정 요소를 정확하게 지정하여 조작할 때 사용됩니다. 예를 들어 특정 헤더의 내용을 변경하거나 특정 요소에만 이벤트를 추가할 때 효과적입니다.
클래스 선택자: 특정 클래스 이름을 가진 모든 요소를 선택합니다. 클래스는 여러 요소에 중복 적용될 수 있으므로, 클래스 선택자는 여러 요소를 동시에 선택하는 데 사용됩니다.
```
$('.myClass') // class가 "myClass"인 모든 요소 선택
$('.highlight') // class가 "highlight"인 모든 요소 선택
```
설명: $('.myClass')는 class 속성 값이 myClass인 모든 요소를 선택합니다. 클래스 선택자는 동일한 스타일이나 동작을 여러 요소에 적용할 때 유용합니다. 예를 들어 특정 스타일을 가진 모든 버튼에 클릭 이벤트를 추가하거나, 모든 강조 텍스트의 색상을 변경할 때 사용할 수 있습니다.

1.2 기본 선택자 활용 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery 기본 선택자 예제</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            // 태그 선택자로 스타일 변경
            $('p').css('color', 'blue'); // 모든 <p> 태그 글씨를 파란색으로
            $('a').css('text-decoration', 'none'); // 모든 <a> 태그 밑줄 제거

            // ID 선택자로 스타일 변경
            $('#header').css('background-color', 'yellow'); // id가 "header"인 요소 배경색을 노란색으로
            $('#footer').css('font-size', 'small'); // id가 "footer"인 요소 글씨 크기를 작게

            // 클래스 선택자로 스타일 변경
            $('.highlight').css('font-size', '20px'); // class가 "highlight"인 요소 글씨 크기를 20px로
            $('.warning').css('color', 'red'); // class가 "warning"인 요소 글씨를 빨간색으로
        });
    </script>
</head>
<body>

<div id="header">헤더 영역</div>

<p class="highlight">이것은 첫 번째 문장입니다.</p>
<p>이것은 두 번째 <a href="#">링크</a> 문장입니다.</p>
<p class="highlight warning">이것은 세 번째 문장입니다.</p>

<div id="footer">저작권 정보</div>

</body>
</html>

코드 해설:

$('p').css('color', 'blue');: 모든 <p> 태그의 텍스트 색상을 파란색으로 변경합니다.
$('a').css('text-decoration', 'none');: 모든 <a> 태그의 밑줄을 제거합니다.
$('#header').css('background-color', 'yellow');: id가 header인 요소의 배경색을 노란색으로 변경합니다.
$('#footer').css('font-size', 'small');: id가 footer인 요소의 글씨 크기를 작게 변경합니다.
$('.highlight').css('font-size', '20px');: class가 highlight인 모든 요소의 글씨 크기를 20px로 확대합니다.
$('.warning').css('color', 'red');: class가 warning인 모든 요소의 텍스트 색상을 빨간색으로 변경합니다.

2. 계층 선택자: DOM 구조를 활용한 정교한 선택

계층 선택자는 DOM 트리 구조 내에서 요소 간의 관계(부모, 자식, 형제)를 기반으로 요소를 선택하는 강력한 방법입니다. HTML 구조를 정밀하게 탐색하고 조작하여 복잡한 웹 페이지의 동적 콘텐츠를 효과적으로 제어할 수 있습니다.

2.1 핵심 계층 선택자

부모 선택자 (parent): 특정 요소의 바로 위 부모 요소를 선택합니다.
```
$('#mySpan').parent().css('background-color', 'yellow'); // id가 "mySpan"인 요소의 부모 배경색을 노란색으로
$('.child-element').parent().css('border', '2px solid blue'); // class가 "child-element"인 요소의 부모 테두리를 파란색으로
```
설명: $('#mySpan').parent()는 id가 mySpan인 요소의 직계 부모 요소를 선택합니다. 부모 선택자는 특정 요소의 바로 위 부모 요소에 스타일을 적용하거나 이벤트를 연결할 때 유용합니다.
모든 조상 선택자 (parents): 특정 요소의 모든 조상 요소(부모, 조부모, 증조부모 등)를 선택합니다.
```
$('li').parents('ul').css('border', '1px solid red'); // 모든 <li> 요소의 조상 중 <ul> 태그에 빨간색 테두리 적용
$('.inner-element').parents('div').css('background-color', 'lightgray'); // class가 "inner-element"인 요소를 포함하는 모든 <div> 요소의 배경색을 회색으로
```
설명: $('li').parents('ul')은 모든 <li> 요소의 조상 요소 중 <ul> 태그를 찾아 선택합니다. 조상 선택자는 특정 요소가 속한 상위 구조에 스타일을 적용하거나 이벤트를 연결할 때 유용합니다.
자식 선택자 (children): 특정 요소의 바로 아래 자식 요소만 선택합니다.
```
$('div').children('p').css('color', 'blue'); // 모든 <div> 요소의 바로 아래 자식인 <p> 태그의 글씨 색상을 파란색으로
$('#myList').children('.list-item').css('font-weight', 'bold'); // id가 "myList"인 요소의 자식 중 class가 "list-item"인 요소의 글씨를 굵게
```
설명: $('div').children('p')는 모든 <div> 요소의 직계 자식 요소 중 <p> 태그만 선택합니다. 자식 선택자는 특정 요소의 바로 아래 자식 요소에만 스타일을 적용하거나 이벤트를 연결할 때 유용합니다.

형제 선택자 (siblings, next, prev):

siblings(): 특정 요소와 같은 부모를 공유하는 모든 형제 요소를 선택합니다.

$('button').click(function() {
    $(this).siblings().css('color', 'green'); // 클릭된 버튼을 제외한 모든 형제 버튼의 글씨 색상을 초록색으로
});
$('#main-heading').siblings().css('font-size', '16px'); // id가 "main-heading"인 요소를 제외한 모든 형제 요소의 글씨 크기를 16px로

설명: $(this).siblings()는 클릭된 버튼과 동일한 부모를 가진 모든 형제 버튼을 선택합니다.

next(): 특정 요소 바로 다음에 오는 형제 요소 하나를 선택합니다.

$('.item').click(function() {
    $(this).next('.item').fadeIn(); // 클릭된 .item 요소 바로 다음에 오는 .item 요소를 서서히 나타나게 함
});
$('.trigger').next('p').css('text-decoration', 'underline'); // class가 "trigger"인 요소 바로 다음에 오는 <p> 태그에 밑줄 적용

설명: $(this).next('.item')은 클릭된 .item 요소 바로 다음에 위치한 .item 요소를 선택합니다.

prev(): 특정 요소 바로 이전에 오는 형제 요소 하나를 선택합니다.

$('.item').hover(function() {
    $(this).prev('.item').hide(); // 마우스가 올라간 .item 요소 바로 이전에 오는 .item 요소를 숨김
});
$('#target-element').prev('div').css('opacity', '0.5'); // id가 "target-element"인 요소 바로 이전에 오는 <div> 요소의 투명도를 0.5로 조정

설명: $(this).prev('.item')은 마우스가 올라간 .item 요소 바로 이전에 위치한 .item 요소를 선택합니다.

2.2 계층 선택자 활용 예제: 탭 UI

<div class="tabs">
  <ul>
      <li class="active">Tab 1</li>
      <li>Tab 2</li>
      <li>Tab 3</li>
      <li>Tab 4</li>
  </ul>

  <div class="content">
      <div>Content for Tab 1</div>
      <div>Content for Tab 2</div>
      <div>Content for Tab 3</div>
      <div>Content for Tab 4</div>
  </div>
</div>

<script>
$('.tabs li').click(function(){
  // 모든 탭에서 "active" 클래스 제거
  $('.tabs li.active').removeClass('active'); 
  // 클릭된 탭에 "active" 클래스 추가
  $(this).addClass('active');

  // 클릭된 탭의 인덱스(순서)를 가져옴
  let index = $(this).index(); 
  // 모든 콘텐츠를 숨김
  $('.content > div').hide();  
  // 클릭된 탭에 해당하는 콘텐츠만 보여줌
  $('.content > div:eq('+index+')').show();

  // 선택된 탭의 이전 탭 배경색 변경
  $(this).prev('li').css('background-color', 'lightgray');
  // 선택된 탭의 다음 탭 텍스트 색상 변경
  $(this).next('li').css('color', 'blue');
});
</script>

코드 해설:

$('.tabs li').click(function(){ ... });: .tabs 클래스를 가진 요소 내부의 <li> 요소를 클릭했을 때 함수를 실행합니다.
$('.tabs li.active').removeClass('active');: 기존에 active 클래스를 가진 <li> 요소에서 active 클래스를 제거하여 모든 탭의 활성화 상태를 초기화합니다.
$(this).addClass('active');: 클릭된 <li> 요소에 active 클래스를 추가하여 현재 선택된 탭을 시각적으로 표시합니다.
let index = $(this).index();: 클릭된 <li> 요소의 인덱스(순서)를 가져옵니다. <li> 요소는 0부터 시작하는 인덱스를 갖습니다.
$('.content > div').hide();: .content 클래스를 가진 요소의 직계 자식인 모든 <div> 요소를 숨깁니다.
$('.content > div:eq('+index+')').show();: .content 클래스를 가진 요소의 직계 자식 중 클릭된 탭과 동일한 인덱스를 가진 <div> 요소만 보이게 합니다. :eq(index)는 jQuery 선택자에서 인덱스를 이용해 요소를 선택하는 방법입니다.
$(this).prev('li').css('background-color', 'lightgray');: 선택된 탭의 바로 이전 탭의 배경색을 회색으로 변경합니다.
$(this).next('li').css('color', 'blue');: 선택된 탭의 바로 다음 탭의 텍스트 색상을 파란색으로 변경합니다.

3. 속성 선택자: 정밀한 요소 선택

속성 선택자는 HTML 요소의 속성 및 속성 값을 기반으로 요소를 선택하는 강력한 도구입니다. 이를 통해 특정 속성을 가진 요소를 정밀하게 찾아내어 조작할 수 있습니다.

3.1 핵심 속성 선택자

[attribute]: 특정 속성을 가진 모든 요소를 선택합니다.

$('[data-type]') // data-type 속성을 가진 모든 요소 선택
$('[hidden]') // hidden 속성을 가진 모든 요소 선택

[attribute=value]: 특정 속성과 속성 값을 정확히 일치하는 요소를 선택합니다.

$("input[type='text']") // type 속성 값이 'text'인 모든 input 요소 선택
$("a[target='_blank']") // target 속성 값이 '_blank'인 모든 a 요소 선택

[attribute^=value]: 특정 속성 값이 특정 값으로 시작하는 요소를 선택합니다.

$("a[href^='https://']") // href 속성 값이 'https://'로 시작하는 모든 a 요소 선택
$("link[rel^='stylesheet']") // rel 속성 값이 'stylesheet'로 시작하는 모든 link 요소 선택

[attribute$=value]: 특정 속성 값이 특정 값으로 끝나는 요소를 선택합니다.

$("img[src$='.png']") // src 속성 값이 '.png'로 끝나는 모든 img 요소 선택
$("a[href$='.pdf']") // href 속성 값이 '.pdf'로 끝나는 모든 a 요소 선택

[attribute*=value]: 특정 속성 값에 특정 문자열이 포함된 요소를 선택합니다.

$("p[class*='highlight']") // class 속성 값에 'highlight' 문자열이 포함된 모든 p 요소 선택
$("div[id*='container']") // id 속성 값에 'container' 문자열이 포함된 모든 div 요소 선택

3.2 속성 선택자 활용 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>jQuery 속성 선택자 예제</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<input type="text" placeholder="이름 입력">
<input type="password" placeholder="비밀번호 입력">
<input type="email" placeholder="이메일 입력">
<button class="btn-submit">전송</button>
<a href="https://www.example.com">외부 링크</a>
<a href="document.pdf">PDF 파일</a>
<img src="image.png" alt="PNG 이미지">
<img src="photo.jpg" alt="JPG 이미지">

<script>
$(document).ready(function() {
    // type 속성이 password인 input 요소의 배경색 변경
    $("input[type='password']").css("background-color", "lightyellow");

    // class가 btn-submit인 버튼 클릭 시 알림창 표시
    $(".btn-submit").click(function() {
        alert("버튼이 클릭되었습니다!");
    });

    // href 속성 값이 https://로 시작하는 링크에 밑줄 추가
    $("a[href^='https://']").css("text-decoration", "underline");
    // src 속성 값이 .png로 끝나는 이미지에 테두리 추가
    $("img[src$='.png']").css("border", "2px solid blue");
    // placeholder 속성 값에 '입력'이 포함된 input 요소의 글꼴 스타일 변경
    $("input[placeholder*='입력']").css("font-style", "italic");
});
</script>

</body>
</html>

코드 해설:

$("input[type='password']").css("background-color", "lightyellow");: type 속성이 password인 <input> 요소를 찾아 배경색을 연한 노란색으로 변경합니다.
$(".btn-submit").click(function() { alert("버튼이 클릭되었습니다!"); });: class가 btn-submit인 버튼을 클릭하면 "버튼이 클릭되었습니다!"라는 알림창을 표시합니다.
$("a[href^='https://']").css("text-decoration", "underline");: href 속성이 https://로 시작하는 <a> 요소에 밑줄을 추가합니다.
$("img[src$='.png']").css("border", "2px solid blue");: src 속성이 .png로 끝나는 <img> 요소에 파란색 테두리를 추가합니다.
$("input[placeholder*='입력']").css("font-style", "italic");: placeholder 속성에 '입력' 문자열이 포함된 <input> 요소의 글꼴 스타일을 이탤릭체로 변경합니다.

4. 결론: jQuery 선택자로 여는 웹 개발의 새로운 지평

jQuery 선택자는 웹 개발에서 DOM 요소를 효율적으로 다루는 핵심 도구입니다. 기본 선택자를 통해 HTML 태그, ID, 클래스를 기준으로 요소를 손쉽게 선택하고, 계층 선택자로 DOM 트리 구조를 자유롭게 탐색하며 부모, 자식, 형제 관계를 활용할 수 있습니다. 또한 속성 선택자는 HTML 요소의 속성을 기반으로 정밀한 요소 선택을 가능하게 합니다.

728x90

'프로그래밍 > Javascript' 카테고리의 다른 글

jQuery로 구현하는 다채로운 웹 애니메이션 효과: 웹 페이지에 생동감을 불어넣는 마법 (0)	2025.02.17
jQuery 이벤트: 웹 페이지에 생동감을 불어넣는 마법 지팡이 (0)	2025.02.17
jQuery: 웹 개발 혁명을 이끄는 마법 지팡이 (1)	2025.02.17
jQuery와 최신 웹 기술: 과거, 현재, 그리고 미래 (0)	2025.02.17
jQuery 정복: 디버깅부터 최적화, 유지보수까지! - 완벽 가이드 (0)	2025.02.17

현재글jQuery 선택자 정복 가이드: 기본부터 심화까지

shimdh 님의 블로그

shimdh 님의 블로그 입니다.

250x250

auto_hotkey, udp, javascript, python, intermediate_nest.js, node.js, sql_server, intro_nest.js, intro_typescript, jquery, ASP.NET, HTTP, tcp, ASP, advanced_nest.js, c++, sql,

Today :
Yesterday :

일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

shimdh 님의 블로그