jQuery 속성 값이 정확히 일치하는 선택자 활용하기: [name="value"]

jQuery의 속성 값이 정확히 일치하는 선택자([name="value"])는 지정한 값과 정확히 일치하는 속성을 가진 요소를 선택할 때 사용됩니다. 이 선택자를 사용하면 특정한 값을 가진 요소를 정확하게 선택할 수 있습니다. 다양한 예제를 통해 이 선택자의 활용법을 살펴보겠습니다.

예제 1: 클래스가 "active"인 요소 선택

<div class="item active">Item 1</div>
<div class="item">Item 2</div>
<div class="item active">Item 3</div>

$("div[class='active']").addClass("highlight");

이 예제는 클래스가 "active"인 요소들을 선택하여 "highlight" 클래스를 추가합니다.

예제 2: ID가 "username"인 입력 필드 선택

<input type="text" id="username" placeholder="Enter your username">
<input type="text" id="password" placeholder="Enter your password">

$("input[id='username']").addClass("input-highlight");

이 예제는 ID가 "username"인 입력 필드를 선택하여 "input-highlight" 클래스를 추가합니다.

예제 3: href 속성 값이 "https://www.example.com"인 링크 선택

<a href="https://www.example.com">Example Link</a>
<a href="https://www.anotherlink.com">Another Link</a>

$("a[href='https://www.example.com']").addClass("external-link");

이 예제는 href 속성 값이 "https://www.example.com"인 링크를 선택하여 "external-link" 클래스를 추가합니다.

jQuery의 [name="value"] 선택자를 활용하면 속성 값이 정확히 일치하는 요소를 쉽게 선택하여 다양한 작업을 수행할 수 있습니다.