jQuery 속성 값이 특정 값으로 시작하는 요소 선택하기: [name^="value"]

jQuery의 속성 값이 특정 값으로 시작하는 요소를 선택하는 선택자([name^="value"])는 웹 페이지에서 특정한 패턴으로 속성을 가진 요소를 선택할 때 사용됩니다. 이 선택자를 사용하면 속성 값이 특정 값으로 시작하는 요소를 쉽게 선택할 수 있습니다. 여러 가지 예제를 통해 이 선택자의 활용법을 살펴보겠습니다.

예제 1: 클래스가 "button-"으로 시작하는 요소 선택

<button class="button-primary">Primary Button</button>
<button class="button-secondary">Secondary Button</button>
<button class="button-danger">Danger Button</button>

$("button[class^='button-']").addClass("styled-button");

이 예제는 클래스가 "button-"으로 시작하는 요소들을 선택하여 "styled-button" 클래스를 추가합니다.

예제 2: ID가 "section-"으로 시작하는 섹션 요소 선택

<section id="section-1">Section 1</section>
<section id="section-2">Section 2</section>
<section id="content">Content Section</section>

$("section[id^='section-']").addClass("section-highlight");

이 예제는 ID가 "section-"으로 시작하는 섹션 요소를 선택하여 "section-highlight" 클래스를 추가합니다.

예제 3: 데이터 속성(data-)이 "info-"로 시작하는 요소 선택

<div data-info="1">Info 1</div>
<div data-info="2">Info 2</div>
<div data-value="3">Value 3</div>

$("div[data-info^='info-']").addClass("info-box");

이 예제는 데이터 속성(data-)이 "info-"로 시작하는 요소를 선택하여 "info-box" 클래스를 추가합니다.

jQuery의 [name^="value"] 선택자를 활용하면 특정 값으로 시작하는 요소를 선택하여 스타일이나 동작을 쉽게 조작할 수 있습니다.