[jQuery] 요소의 data 속성 선택자 사용법과 다양한 예제들

1. 기본 선택자

 1.  아이디 선택자: 특정 아이디를 가진 요소를 선택합니다.

$('#myId');

 

 

  2. 클래스 선택자: 특정 클래스를 가진 요소들을 선택합니다.

$('.myClass');

 

  3.  태그 선택자: 특정 태그 이름을 가진 요소들을 선택합니다.

$('div');

 

  4.  전체 선택자: 모든 요소를 선택합니다.

$('*');

---

2. 복합 선택자

 1.  그룹 선택자: 여러 선택자를 동시에 사용하여 일치하는 모든 요소를 선택합니다.

$('h1, .myClass, #myId');

 

  2.  자식 선택자: 특정 요소의 직계 자식 요소를 선택합니다.

$('ul > li');

 

  3.  하위 선택자: 특정 요소의 모든 하위 요소를 선택합니다.

---

3. 속성 선택자

  1.  특정 속성을 가진 요소 선택:

$('input[name="username"]');

 

  2.  속성 값 일치 요소 선택:

$('a[href="https://example.com"]');

 

  3.  속성 값 시작 패턴 (^=):

$('a[href^="https://"]');

 

  4.  속성 값 끝 패턴 ($=):

$('a[href$=".com"]');

 

  5.  속성 값 포함 패턴 (*=):

$('a[href*="example"]');

---

4. data 속성 선택 및 사용

HTML5에서는 data-* 속성을 사용하여 커스텀 데이터를 저장할 수 있습니다. 예를 들어, 다음과 같은 HTML 코드가 있다고 가정해보겠습니다.

<div id="item1" data-name="apple" data-price="100">사과</div>
<div id="item2" data-name="banana" data-price="200">바나나</div>

 

 

  1.  data 속성 선택: 특정 data 속성을 가진 요소를 선택할 수 있습니다.

$('[data-name="apple"]'); // data-name이 'apple'인 요소 선택

 

  2.  data 값 가져오기: jQuery의 data() 메서드를 사용하여 요소의 data 속성 값을 가져올 수 있습니다.

$('#item1').data('name'); // "apple" 반환
$('#item2').data('price'); // 200 반환

 

  3.  모든 data 값 가져오기: 모든 data 속성을 객체 형태로 가져올 수 있습니다.

const itemData = $('#item1').data();
console.log(itemData); // {name: "apple", price: 100}

 

  4.  data 값 설정하기: data() 메서드를 사용하여 data 속성의 값을 동적으로 설정할 수도 있습니다.

$('#item1').data('name', 'orange');
console.log($('#item1').data('name')); // "orange"

---

5. 예제: data 값에 따라 요소 스타일 변경하기

다음 예제는 data-price 값을 기준으로 가격이 150 이상인 요소의 텍스트 색상을 빨간색으로 변경하는 코드입니다.

$('div[data-price]').each(function() {
    const price = $(this).data('price');
    if (price >= 150) {
        $(this).css('color', 'red');
    }
});

---